Belajar Komponen View dan ViewGroup untuk Aplikasi Android

Teori

Pada modul ini, Anda akan mempelajari komponen View dan ViewGroup. Kedua komponen ini dapat berkolaborasi sehingga membentuk antar muka dengan contoh seperti pada gambar di bawah ini:

201611031408209eba2e7c2771b1152715f5b74cc2e9ea.png
Keren bukan? Baik, kita mulai saja pembahasannya.

Pada dasarnya semua elemen antar pengguna di aplikasi Android dibangun menggunakan dua buah komponen inti, yaitu view dan viewgroup.
Sebuah view adalah obyek yang menggambar komponen tampilan ke layar yang mana pengguna dapat melihat dan berinteraksi langsung.
Contoh komponen turunan dari view seperti :
  • TextView, komponen yang berguna untuk menampilkan teks ke layar.
  • Button, komponen yang membuat pengguna dapat berinteraksi dengan cara ditekan untuk melakukan sesuatu.
  • ImageView, Komponen untuk menampilkan gambar.
  • ListView, komponen untuk menampilkan informasi dalam bentuk list.
  • GridView, komponen untuk menampilkan informasi dalam bentuk grid.
  • RadioButton, komponen yang memungkinkan pengguna dapat memilih satu pilihan dari berbagai pilihan yang disediakan.
  • Checkbox, komponen yang memungkinkan pengguna dapat memilih lebih dari satu dari pilihan yang ada.
Sedangkan viewgroup adalah sebuah obyek yang mewadahi obyek-obyek view dan viewgroup itu sendiri sehingga membentuk satu kesatuan tampilan aplikasi yang utuh. Contoh komponen viewgroup adalah:
  • LinearLayout
  • FrameLayout
  • RelativeLayout
  • TableLayout

Hierarki komponen view dan viewgroup dapat digambarkan dengan diagram berikut:

201611031412227442fb23ba6853d57594ff7ea66b273f.png

Jika diterjemahkan di dalam sebuah viewgroup akan ditampung dua buah komponen view dan satu komponen viewgroup yang terdiri dari 3 buah komponen view.
Anda dapat membaca tautan berikut untuk membaca lebih lanjut mengenai materi di atas:

Salah satu contoh dari tampilan dalam file layout xml untuk merepresentasikan kolaborasi view dan viewgroup seperti ini :

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3.               android:layout_width="match_parent"
  4.               android:layout_height="match_parent"
  5.               android:orientation="vertical" >
  6.     <TextView android:id="@+id/text"
  7.               android:layout_width="wrap_content"
  8.               android:layout_height="wrap_content"
  9.               android:text="I am a TextView" />
  10.     <Button android:id="@+id/button"
  11.             android:layout_width="wrap_content"
  12.             android:layout_height="wrap_content"
  13.             android:text="I am a Button" />
  14. </LinearLayout>

Obyek turunan viewgroup LinearLayout menjadi kontainer untuk obyek turunan view, button, dan textview. Beberapa komponen viewgroup seperti linearlayout, relativelayout, framelayout, dan tablelayout merupakan komponen yang paling banyak digunakan untuk menjadi parent/root dari komponen-komponen view.
Berikut adalah definisi singkat dan inti dari komponen-komponen di atas terhadap penempatan komponen view (child) di dalamnya:

LinearLayout

Akan menempatkan komponen-komponen di dalamnya secara horizontal atau vertikal. Linearlayout memiliki atribut weight untuk masing-masing child view yang berguna untuk menentukan porsi ukuran view dalam sebuah  ruang (space) yang tersedia.
201611031408538f282c8950a103899135d75d111a22ed.png201611031408573f981c3190fc431579c7e258ce5252b9.png
           android:orientation=”vertical”                      android:orientation=”horizontal”
Anda dapat membaca lebih lanjut mengenai linearlayout pada tautan berikut:

RelativeLayout

Layout yang paling fleksible dikarenakan posisi dari masing-masing komponen di dalamnya dapat mengacu secara relatif pada komponen yang lainnya dan juga dapat mengacu secara relatif ke batas layar.
20161103140902a4f57c6dd65a88ff058e3a1c55c00e0c.png
Anda dapat membaca lebih lanjut mengenai relativelayout pada tautan berikut:

FrameLayout

Layout ini adalah layout yang paling sederhana. Layout ini akan membuat komponen yang ada di dalamnya menjadi menumpuk atau saling menutupi satu dengan yang lainnya.
Komponen yang paling pertama pada layout ini akan menjadi alas bagi komponen-komponen di atasnya. Pada materi penggunaan fragment di materi sebelumnya, framelayout memiliki kemampuan untuk menjadi kontainer untuk fragment-fragment di dalam sebuah activity. Berikut ilustrasi penggunaan framelayout terhadap child view yang dimilikinya:
201611021451063417adaf355fdf178cc9b1e9ef85bd31.png
Anda dapat membaca lebih lanjut mengenai framelayout pada tautan berikut:

TableLayout

2016110314092420c3a5ba0c7748e68c959155e97a7fa7.png
Susunan komponen di dalam tablelayout akan berada dalam baris dan kolom. Namun layout jenis ini tidak akan menampilkan garis pembatas untuk baris, kolom atau cell-nya.
Anda dapat membaca lebih lanjut mengenai tablelayout pada tautan berikut:

Salah satu perbedaan mendasar dari keempat jenis layout di atas adalah bagaimana komponen view di dalamnya tersusun.
Kapan saatnya menggunakan linearlayout, relativelayout, framelayout dan tablelayout? Jawabannya tergantung pada kebutuhan dan performa.
Salah satu tips performa untuk aplikasi Android adalah dengan menyusun hierarki layout dalam sebuah file layout xml secara sederhana dan flat. Artinya, kita tidak membuat layout dengan jumlah kedalaman yang tinggi. Selain itu, penting juga bagi kita untuk memahami dasar pembangunan antar muka, pengalaman pengguna ketika menggunakannya, dan selalu mencari pendekatan terbaik dalam penggunaan komponen antar muka.
Semua tergantung latihan dan seberapa sering kita mengubah mockup menjadi tampilan sebenarnya, terutama dengan memaksimalkan penulisan kode antara muka di berkas xml.
Untuk memahami lebih lanjut mengenai layout, Anda dapat membacanya pada tautan berikut:

201611031409348f84be6dbaca11cbda2b56c346bfd15a.png20161103140947780f3dd296d1ded9414e3a79e500e4a1.png
Ketika aplikasi Anda memuat informasi yang banyak dan melebihi ukuran layar, maka Anda membutuhkan tampilan yang memungkinkan pengguna untuk membaca informasi dengan lengkap. Kita membutuhkan komponen scrollview untuk mengatasi masalah ini.

ScrollView

Adalah layout yang memungkinkan komponen di dalamnya digeser (scroll) secara vertikal dan horizontal. Komponen di dalam scrollview hanya diperbolehkan memiliki 1 parent utama dari linearlayout, relativelayout, framelayout, atau tablelayout.

Satuan Dimensi di Android

Platform Android dikenal karena keberagamannya. Mulai ukuran perangkatnya, layar, spesifikasi, hingga level operating system-nya. Karena keberagaman tersebut, tak heran jika dibutuhkan tampilan yang konsisten agar aplikasi kita bisa berjalan dan tampil maksimal.
Android sendiri memiliki satuan unit dimensi untuk ukuran tinggi dan lebar sebuah komponen view atau viewgroup. Berikut adalah esensi dari satuan dimensi unit di android. 
  1. Ekosistem Android dikenal dengan fragmentasi spesifikasi perangkat yang sangat bervariasi. Beragam perangkat Android memiliki perbedaan dimensi layar dan kerapatan pixel (density).
  2. Untuk tampilan yang konsisten di perangkat Android, terdapat 2 jenis satuan, yaitu dip/dp (density-independent pixel) dan sp (scale-independent pixels).
  3. Satuan dp/dip digunakan untuk satuan dari nilai dimensi misal width (attribut : layout_width) dan height (attribut : layout_height) dari sebuah komponen view atau viewgroup.
  4. Satuan sp digunakan untuk ukuran teks. Perbedaannya dengan dp/dip adalah satuan sp android akan men-scale ukuran teks sesuai dengan setting ukuran teks di peranti (yang biasa dapat diakses melalui menu settings)

Contoh 1 :
2016110314110028488eba6e3035f35fce4fece1e9a3d3.png
Misalkan ada dua tablet 7-inch (ukuran diagonal layar). Tablet pertama (A) memiliki resolusi layar 1200x1920px 320dpi. Tablet kedua (B) memiliki resolusi 2048x1536px 326dpi.
Sebuah tombol berukuran 300x300px akan tampak normal pada tablet A. Tapi tombol tersebut akan terlihat terlalu kecil pada tablet B.
201611031411091e01d65360633f6bb99abb7b8978b3bb.png
Tapi akan berbeda jika kita tentukan ukuran button-nya dengan ukuran yang bergantung pada density layar. Bila kita menggunakan ukuran 300x300dp, maka tombol tersebut akan terlihat baik pada beragam perangkat dengan ukuran yang berbeda.
Contoh 2 :
201706102233425418151a416f686a24bb72f7af06d5c2.png
Pada gambar di atas ukuran 200dp akan dikonversi pada device mdpi (device dengan density 160dpi/dots per inch) menjadi 200px dan menjadi 400px pada device xhdpi (density 420dpi) misal pada nexus 4. Sehingga ukuran tersebut tampak sama dan konsisten secara fisik untuk beragam peranti dengan ukuran layar yang berbeda.
Beberapa tautan berikut akan membantu Anda untuk lebih memahami bagaimana aplikasi Anda dapat mendukung beragam ukuran perangkat Android:

Pada modul berikutnya, kita akan menerapkan teori di atas. Sehingga Anda dapat memiliki pemahaman yang lebih baik mengenai teori tersebut

Tujuan

Pada latihan kali ini Anda akan mengembangkan sebuah halaman detail yang di dalamnya terdiri dari beberapa komponen View dan Viewgroup layout. Tampilan akhir aplikasi akan seperti ini:
201811161003526213cf79d8904cbb692109e1fdabfc81.gif

Logika

Menjalankan Aplikasi menampilkan tampilan (tampilan akan sesuai dengan apa yang dibuat di layout editor).

Codelab Views and ViewGroup

  1. Buat Project baru di Android Studio dengan kriteria sebagai berikut:
    Nama ProjectMyViewAndViews
    Target & Minimum Target SDKPhone and Tablet, Api level 21
    Tipe ActivityEmpty Activity
    Activity NameMainActivity
    Use AndroidX artifactsTrue
    LanguageJava / Kotlin
  2. Lalu buka berkas build.gradle (Module: app) dan tambahkan satu baris ini di bagian dependecies:

    1. implementation 'de.hdodenhof:circleimageview:3.0.0'


    Sehingga berkas build.gradle(Module: app) kita sekarang menjadi seperti ini: 
  1. apply plugin: 'com.android.application'
  2.  
  3. android {
  4.     compileSdkVersion 29
  5.     defaultConfig {
  6.         applicationId "com.dicoding.myviewandviews"
  7.         minSdkVersion 21
  8.         targetSdkVersion 29
  9.         versionCode 1
  10.         versionName "1.0"
  11.         testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
  12.     }
  13.     buildTypes {
  14.         release {
  15.             minifyEnabled false
  16.             proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
  17.         }
  18.     }
  19. }
  20.  
  21. dependencies {
  22.     implementation fileTree(dir: 'libs', include: ['*.jar'])
  23.     implementation 'androidx.appcompat:appcompat:1.0.2'
  24.     implementation 'androidx.constraintlayout:constraintlayout:1.1.3'
  25.     testImplementation 'junit:junit:4.12'
  26.     androidTestImplementation 'androidx.test:runner:1.2.0'
  27.     androidTestImplementation 'androidx.test.espresso:espresso-core:3.2.0'
  28.     implementation 'de.hdodenhof:circleimageview:3.0.0'
  29. }



  1. Tekanlah Sync Now untuk men-download library dari CircleImageView ke dalam proyek Android Studio Anda. Pastikan ketika melakukan proses tersebut, PC atau laptop terhubung dengan Internet.
  2. Lalu buka berkas strings.xml di res → values. Sesuaikan isinya dengan seperti ini:

    1. <resources>

    2.     <string name="app_name">MyViewAndViews</string>

    3.     <string name="content_text">Google officially announced its much-anticipated Pixel phones; the Pixel and Pixel XL, on October 4. We attended Google’s London UK event, mirroring the main one taking place in San Francisco, US, where the firm unwrapped the new Android 7.1 Nougat devices which will apparently usurp Google’s long-standing Nexus series.</string>

    4.     <string name="content_specs_display">5.0 inches\n

    5.     FHD AMOLED at 441ppi\n

    6.     2.5D Corning® Gorilla® Glass 4</string>

    7.     <string name="content_specs_size">5.6 x 2.7 x 0.2 ~ 0.3 inches 143.8 x 69.5 x 7.3 ~ 8.5 mm</string>

    8.     <string name="content_specs_battery">2,770 mAh battery\n

    9.     Standby time (LTE): up to 19 days\n

    10.     Talk time (3g/WCDMA): up to 26 hours\n

    11.     Internet use time (Wi-Fi): up to 13 hours\n

    12.     Internet use time (LTE): up to 13 hours\n

    13.     Video playback: up to 13 hours\n

    14.     Audio playback (via headset): up to 110 hours\n

    15.     Fast charging: up to 7 hours of use from only 15 minutes of charging</string>

    16. </resources>


  1. Selanjutnya, unduh asetnya di sini. Bila telah selesai, salin semua aset yang dibutuhkan ke dalam direktori res → drawable.
    20181116101821b3f68608b27e5be8a29dc0232ea6e689.gif
  2. Buka berkas activity_main.xml dan ubah layout utama menjadi seperti ini:

    1. <?xml version="1.0" encoding="utf-8"?>

    2. <ScrollView xmlns:android="http://schemas.android.com/apk/res/android"

    3.     android:id="@+id/activity_main"

    4.     android:layout_width="match_parent"

    5.     android:layout_height="match_parent"

    6.     android:background="@android:color/white">

    7.    

    8. </ScrollView>



  3. Kemudian tambahkan layout utama di dalam ScrollView.

    1. <?xml version="1.0" encoding="utf-8"?>

    2. <ScrollView xmlns:android="http://schemas.android.com/apk/res/android"

    3.     android:id="@+id/activity_main"

    4.     android:layout_width="match_parent"

    5.     android:layout_height="match_parent"

    6.     android:background="@android:color/white">

    7.  

    8.     <LinearLayout

    9.         android:layout_width="match_parent"

    10.         android:layout_height="wrap_content"

    11.         android:orientation="vertical">

    12.        

    13.     </LinearLayout>

    14. </ScrollView>





Kemudian kita masukkan komponen di dalam LinearLayout yang sudah ditambahkan sebelumnya.



  1. <?xml version="1.0" encoding="utf-8"?>

  2. <ScrollView xmlns:android="http://schemas.android.com/apk/res/android"

  3.     android:id="@+id/activity_main"

  4.     android:layout_width="match_parent"

  5.     android:layout_height="match_parent"

  6.     android:background="@android:color/white">

  7.  

  8.     <LinearLayout

  9.         android:layout_width="match_parent"

  10.         android:layout_height="wrap_content"

  11.         android:orientation="vertical">

  12.         <FrameLayout

  13.             android:layout_width="match_parent"

  14.             android:layout_height="wrap_content">

  15.             <ImageView

  16.                 android:layout_width="match_parent"

  17.                 android:layout_height="wrap_content"

  18.                 android:adjustViewBounds="true"

  19.                 android:scaleType="fitXY"

  20.                 android:src="@drawable/pixel_google" />


  21.             <TextView

  22.                 android:layout_width="wrap_content"

  23.                 android:layout_height="wrap_content"

  24.                 android:layout_gravity="bottom"

  25.                 android:layout_marginLeft="16dp"

  26.                 android:layout_marginBottom="16dp"

  27.                 android:background="#4D000000"

  28.                 android:drawableLeft="@drawable/ic_collections_white_18dp"

  29.                 android:drawablePadding="4dp"

  30.                 android:gravity="center_vertical"

  31.                 android:padding="8dp"

  32.                 android:text="6 Photos"

  33.                 android:textAppearance="@style/TextAppearance.AppCompat.Small"

  34.                 android:textColor="@android:color/white" />

  35.         </FrameLayout>

  36.     </LinearLayout>

  37. </ScrollView>

















  1. Tampilan saat ini adalah seperti ini:
    20181116104118557ff92da925c5de7a1b99c501af0bee
  2. Selanjutnya, tambahkan TextView di bawah FrameLayout, menjadi seperti:



  1. <?xml version="1.0" encoding="utf-8"?>
  2. <ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
  3.     android:id="@+id/activity_main"
  4.     android:layout_width="match_parent"
  5.     android:layout_height="match_parent"
  6.     android:background="@android:color/white">
  7.  
  8.     <LinearLayout
  9.         android:layout_width="match_parent"
  10.         android:layout_height="wrap_content"
  11.         android:orientation="vertical">
  12.         <FrameLayout ...>
  13.          
  14.         <TextView
  15.             android:layout_width="match_parent"
  16.             android:layout_height="wrap_content"
  17.             android:textSize="32sp"
  18.             android:text="$735"
  19.             android:layout_marginLeft="16dp"
  20.             android:layout_marginRight="16dp"
  21.             android:layout_marginTop="16dp"
  22.             android:layout_marginBottom="8dp"
  23.             android:textColor="@android:color/black"/>
  24.         <TextView
  25.             android:layout_width="match_parent"
  26.             android:layout_height="wrap_content"
  27.             android:text="Stock hanya 5 buah"
  28.             android:textSize="12sp"
  29.             android:layout_marginLeft="16dp"
  30.             android:layout_marginRight="16dp"
  31.             android:layout_marginBottom="16dp"/>
  32.         <TextView
  33.             android:layout_width="match_parent"
  34.             android:layout_height="wrap_content"
  35.             android:text="@string/content_text"
  36.             android:layout_marginLeft="16dp"
  37.             android:layout_marginRight="16dp"
  38.             android:layout_marginBottom="16dp"
  39.             android:lineSpacingMultiplier="1"
  40.             android:textColor="@android:color/black"/>
  41.     </LinearLayout>
  42. </ScrollView>




  1. Tampilan saat ini adalah:
    20181116104618f5af2e3c4081f7b5021dff1ab0475a2c
  2. Setelah menambahkan beberapa TextView, selanjutnya kita akan menambahkan TableLayout.
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
  3.     android:id="@+id/activity_main"
  4.     android:layout_width="match_parent"
  5.     android:layout_height="match_parent"
  6.     android:background="@android:color/white">
  7.  
  8.     <LinearLayout
  9.         android:layout_width="match_parent"
  10.         android:layout_height="wrap_content"
  11.         android:orientation="vertical">
  12.  
  13.         <FrameLayout ...>
  14.         <TextView ...>
  15.         <TextView ...>
  16.         <TextView ...>
  17.  
  18.         <TextView
  19.             android:layout_width="match_parent"
  20.             android:layout_height="wrap_content"
  21.             android:text="Spesifikasi"
  22.             android:textSize="12sp"
  23.             android:layout_marginLeft="16dp"
  24.             android:layout_marginRight="16dp"
  25.             android:layout_marginBottom="8dp"/>
  26.         <TableLayout
  27.             android:layout_width="match_parent"
  28.             android:layout_height="wrap_content"
  29.             android:layout_marginLeft="16dp"
  30.             android:layout_marginRight="16dp"
  31.             android:layout_marginBottom="16dp">
  32.             <TableRow
  33.                 android:layout_width="match_parent"
  34.                 android:layout_height="wrap_content"
  35.                 android:layout_marginBottom="8dp">
  36.                 <TextView
  37.                     android:layout_width="wrap_content"
  38.                     android:layout_height="wrap_content"
  39.                     android:textSize="14sp"
  40.                     android:layout_marginRight="16dp"
  41.                     android:text="Display"/>
  42.                 <TextView
  43.                     android:layout_width="match_parent"
  44.                     android:layout_height="wrap_content"
  45.                     android:textSize="14sp"
  46.                     android:layout_weight="1"
  47.                     android:text="@string/content_specs_display"
  48.                     android:textColor="@android:color/black"/>
  49.             </TableRow>
  50.             <TableRow
  51.                 android:layout_width="match_parent"
  52.                 android:layout_height="wrap_content"
  53.                 android:layout_marginBottom="8dp">
  54.                 <TextView
  55.                     android:layout_width="wrap_content"
  56.                     android:layout_height="wrap_content"
  57.                     android:textSize="14sp"
  58.                     android:layout_marginRight="16dp"
  59.                     android:text="Size"/>
  60.                 <TextView
  61.                     android:layout_width="match_parent"
  62.                     android:layout_height="wrap_content"
  63.                     android:textSize="14sp"
  64.                     android:layout_weight="1"
  65.                     android:text="@string/content_specs_size"
  66.                     android:textColor="@android:color/black"/>
  67.             </TableRow>
  68.             <TableRow
  69.                 android:layout_width="match_parent"
  70.                 android:layout_height="wrap_content"
  71.                 android:layout_marginBottom="8dp">
  72.                 <TextView
  73.                     android:layout_width="wrap_content"
  74.                     android:layout_height="wrap_content"
  75.                     android:textSize="14sp"
  76.                     android:layout_marginRight="16dp"
  77.                     android:text="Battery"/>
  78.                 <TextView
  79.                     android:layout_width="match_parent"
  80.                     android:layout_height="wrap_content"
  81.                     android:textSize="14sp"
  82.                     android:layout_weight="1"
  83.                     android:text="@string/content_specs_battery"
  84.                     android:textColor="@android:color/black"/>
  85.             </TableRow>
  86.         </TableLayout>
  87.     </LinearLayout>
  88. </ScrollView>


  1. Tampilan saat ini adalah seperti berikut:
    20181116105123f43a02ea126f53f1f8e87d467e14e830.gif
  2. Kemudian setelah menambahkan TableLayout, kita masukkan ViewGroup lagi. Tambahkan RelativeLayout dan Button di bawah TableLayout menjadi seperti ini.

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
  3.     android:id="@+id/activity_main"
  4.     android:layout_width="match_parent"
  5.     android:layout_height="match_parent"
  6.     android:background="@android:color/white">
  7.  
  8.     <LinearLayout
  9.         android:layout_width="match_parent"
  10.         android:layout_height="wrap_content"
  11.         android:orientation="vertical">
  12.  
  13.         <FrameLayout ...>
  14.         <TextView ...>
  15.         <TextView ...>
  16.         <TextView ...>
  17.         <TextView ...>
  18.         <TableLayout ...>
  19.  
  20.         <TextView
  21.             android:layout_width="match_parent"
  22.             android:layout_height="wrap_content"
  23.             android:text="Dijual oleh"
  24.             android:textSize="12sp"
  25.             android:layout_marginLeft="16dp"
  26.             android:layout_marginRight="16dp"
  27.             android:layout_marginBottom="8dp"/>
  28.         <RelativeLayout
  29.             android:layout_width="match_parent"
  30.             android:layout_height="wrap_content"
  31.             android:layout_marginLeft="16dp"
  32.             android:layout_marginRight="16dp"
  33.             android:layout_marginBottom="16dp">
  34.             <de.hdodenhof.circleimageview.CircleImageView
  35.                 android:layout_width="56dp"
  36.                 android:layout_height="56dp"
  37.                 android:src="@drawable/photo_2"
  38.                 android:layout_centerVertical="true"
  39.                 android:id="@+id/profile_image"
  40.                 android:layout_marginRight="16dp"/>
  41.             <TextView
  42.                 android:layout_width="match_parent"
  43.                 android:layout_height="wrap_content"
  44.                 android:layout_toRightOf="@id/profile_image"
  45.                 android:text="Narenda Wicaksono"
  46.                 android:textColor="@android:color/black"
  47.                 android:layout_centerVertical="true"/>
  48.         </RelativeLayout>
  49.         <Button
  50.             android:layout_width="match_parent"
  51.             android:layout_height="wrap_content"
  52.             android:text="Beli"
  53.             android:layout_marginLeft="16dp"
  54.             android:layout_marginRight="16dp"
  55.             android:layout_marginBottom="16dp"/>
  56.  
  57.     </LinearLayout>
  58. </ScrollView>





  1. Pada properties android:text akan ada warning yang berbunyi seperti di bawah ini.
    201708092144442ec649e169d695374faacf63cb57dfd2.Ini terjadi ketika kita hardcode (menuliskan teks string langsung pada view) pada android:text. Solusinya adalah tekan Alt+Enter pada isi dari android:text, dan akan muncul dialog seperti ini.
    201708092149002a55f8dffc92798b05342f7ecc1ceb4b.Kemudian pilihlah Extract string resource. Akan muncul dialog baru yang tampilannya seperti ini:
    201811161310533242dc760c3f1e14843b96577326f033Kemudian tekan OK. Dialog tersebut secara otomatis akan menambahkan teks yang kita hardcode ke dalam res → values → strings.xml secara otomatis.
  2. Lakukan hal yang sama untuk semua warning di android:text pada seluruh view yang ada di activity_main.xml. Kemudian buka res → values → strings.xml, maka isi dari xml-nya akan menjadi seperti berikut:



  1. <resources>
  2.     <string name="app_name">MyViewAndViews</string>
  3.     <string name="content_text">Google officially announced its much-anticipated Pixel phones; the Pixel and Pixel XL, on October 4. We attended Google’s London UK event, mirroring the main one taking place in San Francisco, US, where the firm unwrapped the new Android 7.1 Nougat devices which will apparently usurp Google’s long-standing Nexus series.</string>
  4.     <string name="content_specs_display">5.0 inches\n
  5.         FHD AMOLED at 441ppi\n
  6.         2.5D Corning® Gorilla® Glass 4</string>
  7.     <string name="content_specs_size">5.6 x 2.7 x 0.2 ~ 0.3 inches 143.8 x 69.5 x 7.3 ~ 8.5 mm</string>
  8.     <string name="content_specs_battery">2,770 mAh battery\n
  9.         Standby time (LTE): up to 19 days\n
  10.         Talk time (3g/WCDMA): up to 26 hours\n
  11.         Internet use time (Wi-Fi): up to 13 hours\n
  12.         Internet use time (LTE): up to 13 hours\n
  13.         Video playback: up to 13 hours\n
  14.         Audio playback (via headset): up to 110 hours\n
  15.         Fast charging: up to 7 hours of use from only 15 minutes of charging</string>
  16.     <string name="stock">Stock hanya 5 buah</string>
  17.     <string name="specification">Spesifikasi</string>
  18.     <string name="display">Display</string>
  19.     <string name="size">Size</string>
  20.     <string name="battery">Battery</string>
  21.     <string name="seller">Dijual oleh</string>
  22.     <string name="my_name">Narenda Wicaksono</string>
  23.     <string name="buy">Beli</string>
  24.     <string name="dummy_value">$735</string>
  25.     <string name="dummy_photos">6 photos</string>
  26. </resources>


Maka setelah setiap teks yang dipindahkan ke string.xmlactivity_main.xml menjadi seperti ini:

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
  3.     android:id="@+id/activity_main"
  4.     android:layout_width="match_parent"
  5.     android:layout_height="match_parent"
  6.     android:background="@android:color/white">
  7.  
  8.     <LinearLayout
  9.         android:layout_width="match_parent"
  10.         android:layout_height="wrap_content"
  11.         android:orientation="vertical">
  12.         <FrameLayout
  13.             android:layout_width="match_parent"
  14.             android:layout_height="wrap_content">
  15.             <ImageView
  16.                 android:layout_width="match_parent"
  17.                 android:layout_height="wrap_content"
  18.                 android:adjustViewBounds="true"
  19.                 android:scaleType="fitXY"
  20.                 android:src="@drawable/pixel_google" />
  21.             <TextView
  22.                 android:layout_width="wrap_content"
  23.                 android:layout_height="wrap_content"
  24.                 android:layout_gravity="bottom"
  25.                 android:layout_marginLeft="16dp"
  26.                 android:layout_marginBottom="16dp"
  27.                 android:layout_marginStart="16dp"
  28.                 android:background="#4D000000"
  29.                 android:drawableLeft="@drawable/ic_collections_white_18dp"
  30.                 android:drawablePadding="4dp"
  31.                 android:drawableStart="@drawable/ic_collections_white_18dp"
  32.                 android:gravity="center_vertical"
  33.                 android:padding="8dp"
  34.                 android:text="@string/dummy_photos"
  35.                 android:textAppearance="@style/TextAppearance.AppCompat.Small"
  36.                 android:textColor="@android:color/white" />
  37.         </FrameLayout>
  38.         <TextView
  39.             android:layout_width="match_parent"
  40.             android:layout_height="wrap_content"
  41.             android:layout_marginBottom="8dp"
  42.             android:layout_marginLeft="16dp"
  43.             android:layout_marginRight="16dp"
  44.             android:layout_marginTop="16dp"
  45.             android:text="@string/dummy_value"
  46.             android:textColor="@android:color/black"
  47.             android:textSize="32sp" />
  48.         <TextView
  49.             android:layout_width="match_parent"
  50.             android:layout_height="wrap_content"
  51.             android:layout_marginBottom="16dp"
  52.             android:layout_marginLeft="16dp"
  53.             android:layout_marginRight="16dp"
  54.             android:text="@string/stock"
  55.             android:textSize="12sp" />
  56.         <TextView
  57.             android:layout_width="match_parent"
  58.             android:layout_height="wrap_content"
  59.             android:layout_marginBottom="16dp"
  60.             android:layout_marginLeft="16dp"
  61.             android:layout_marginRight="16dp"
  62.             android:lineSpacingMultiplier="1"
  63.             android:text="@string/content_text"
  64.             android:textColor="@android:color/black" />
  65.         <TextView
  66.             android:layout_width="match_parent"
  67.             android:layout_height="wrap_content"
  68.             android:layout_marginBottom="8dp"
  69.             android:layout_marginLeft="16dp"
  70.             android:layout_marginRight="16dp"
  71.             android:text="@string/specification"
  72.             android:textSize="12sp" />
  73.         <TableLayout
  74.             android:layout_width="match_parent"
  75.             android:layout_height="wrap_content"
  76.             android:layout_marginBottom="16dp"
  77.             android:layout_marginLeft="16dp"
  78.             android:layout_marginRight="16dp">
  79.             <TableRow
  80.                 android:layout_width="match_parent"
  81.                 android:layout_height="wrap_content"
  82.                 android:layout_marginBottom="8dp">
  83.                 <TextView
  84.                     android:layout_width="wrap_content"
  85.                     android:layout_height="wrap_content"
  86.                     android:layout_marginEnd="16dp"
  87.                     android:layout_marginRight="16dp"
  88.                     android:text="@string/display"
  89.                     android:textSize="14sp" />
  90.                 <TextView
  91.                     android:layout_width="match_parent"
  92.                     android:layout_height="wrap_content"
  93.                     android:layout_weight="1"
  94.                     android:text="@string/content_specs_display"
  95.                     android:textColor="@android:color/black"
  96.                     android:textSize="14sp" />
  97.             </TableRow>
  98.             <TableRow
  99.                 android:layout_width="match_parent"
  100.                 android:layout_height="wrap_content"
  101.                 android:layout_marginBottom="8dp">
  102.                 <TextView
  103.                     android:layout_width="wrap_content"
  104.                     android:layout_height="wrap_content"
  105.                     android:layout_marginEnd="16dp"
  106.                     android:layout_marginRight="16dp"
  107.                     android:text="@string/size"
  108.                     android:textSize="14sp" />
  109.                 <TextView
  110.                     android:layout_width="match_parent"
  111.                     android:layout_height="wrap_content"
  112.                     android:layout_weight="1"
  113.                     android:text="@string/content_specs_size"
  114.                     android:textColor="@android:color/black"
  115.                     android:textSize="14sp" />
  116.             </TableRow>
  117.             <TableRow
  118.                 android:layout_width="match_parent"
  119.                 android:layout_height="wrap_content"
  120.                 android:layout_marginBottom="8dp">
  121.                 <TextView
  122.                     android:layout_width="wrap_content"
  123.                     android:layout_height="wrap_content"
  124.                     android:layout_marginEnd="16dp"
  125.                     android:layout_marginRight="16dp"
  126.                     android:text="@string/battery"
  127.                     android:textSize="14sp" />
  128.                 <TextView
  129.                     android:layout_width="match_parent"
  130.                     android:layout_height="wrap_content"
  131.                     android:layout_weight="1"
  132.                     android:text="@string/content_specs_battery"
  133.                     android:textColor="@android:color/black"
  134.                     android:textSize="14sp" />
  135.             </TableRow>
  136.         </TableLayout>
  137.         <TextView
  138.             android:layout_width="match_parent"
  139.             android:layout_height="wrap_content"
  140.             android:layout_marginBottom="8dp"
  141.             android:layout_marginLeft="16dp"
  142.             android:layout_marginRight="16dp"
  143.             android:text="@string/seller"
  144.             android:textSize="12sp" />
  145.         <RelativeLayout
  146.             android:layout_width="match_parent"
  147.             android:layout_height="wrap_content"
  148.             android:layout_marginBottom="16dp"
  149.             android:layout_marginLeft="16dp"
  150.             android:layout_marginRight="16dp">
  151.             <de.hdodenhof.circleimageview.CircleImageView
  152.                 android:id="@+id/profile_image"
  153.                 android:layout_width="56dp"
  154.                 android:layout_height="56dp"
  155.                 android:layout_centerVertical="true"
  156.                 android:layout_marginEnd="16dp"
  157.                 android:layout_marginRight="16dp"
  158.                 android:src="@drawable/photo_2" />
  159.             <TextView
  160.                 android:layout_width="match_parent"
  161.                 android:layout_height="wrap_content"
  162.                 android:layout_centerVertical="true"
  163.                 android:layout_toEndOf="@+id/profile_image"
  164.                 android:layout_toRightOf="@id/profile_image"
  165.                 android:text="@string/my_name"
  166.                 android:textColor="@android:color/black" />
  167.         </RelativeLayout>
  168.         <Button
  169.             android:layout_width="match_parent"
  170.             android:layout_height="wrap_content"
  171.             android:layout_marginBottom="16dp"
  172.             android:layout_marginLeft="16dp"
  173.             android:layout_marginRight="16dp"
  174.             android:text="@string/buy" />
  175.     </LinearLayout>
  176. </ScrollView>





Terakhir, pada MainActivity tambahkan beberapa baris kode berikut:


  1. public class MainActivity extends AppCompatActivity {

  2.  

  3.     @Override

  4.     protected void onCreate(Bundle savedInstanceState) {

  5.         super.onCreate(savedInstanceState);

  6.         setContentView(R.layout.activity_main);

  7.  

  8.         if (getSupportActionBar() != null) {

  9.             getSupportActionBar().setTitle("Google Pixel");

  10.         }

  11.     }

  12. }





  1. class MainActivity : AppCompatActivity() {

  2.  

  3.     override fun onCreate(savedInstanceState: Bundle?) {

  4.         super.onCreate(savedInstanceState)

  5.         setContentView(R.layout.activity_main)

  6.        

  7.         if (supportActionBar != null) {

  8.             (supportActionBar as ActionBar).title = "Google Pixel"

  9.         }

  10.     }

  11. }




  1. Sekarang silakan jalankan aplikasinya. Seharusnya hasilnya seperti ini:
    201811161003526213cf79d8904cbb692109e1fdabfc81.gif

Bedah Kode

Tidak ada yang rumit di bagian ini karena Anda hanya berhadapan dengan cara membentuk sebuah tampilan aplikasi Android yang bagus di berkas layout xml.

CircleImageView

Di awal kita melakukan penambahan dependensi untuk menampilkan sebuah custom ImageView dalam bentuk lingkaran. Library yang digunakan adalah CircleImageView yang dibuat oleh Henning Dodenhoff. Library ini cukup populer dan selalu dikelola dengan baik.

  1. implementation 'de.hdodenhof:circleimageview:3.0.0'



Strings.xml

Selanjutnya, kita akan menambahkan variabel-variabel konstan yang ditulis di dalam berkas strings.xml. Tujuannya agar teks yang sama tidak ditulis dua kali, baik itu di berkas Activity maupun berkas xml.


  1. <resources>

  2.     <string name="app_name">MyViewAndViews</string>

  3.     <string name="content_text">Google officially announced its much-anticipated Pixel phones; the Pixel and Pixel XL, on October 4. We attended Google’s London UK event, mirroring the main one taking place in San Francisco, US, where the firm unwrapped the new Android 7.1 Nougat devices which will apparently usurp Google’s long-standing Nexus series.</string>

  4.     <string name="content_specs_display">5.0 inches\n

  5.         FHD AMOLED at 441ppi\n

  6.         2.5D Corning® Gorilla® Glass 4</string>

  7.     <string name="content_specs_size">5.6 x 2.7 x 0.2 ~ 0.3 inches 143.8 x 69.5 x 7.3 ~ 8.5 mm</string>

  8.     <string name="content_specs_battery">2,770 mAh battery\n

  9.         Standby time (LTE): up to 19 days\n

  10.         Talk time (3g/WCDMA): up to 26 hours\n

  11.         Internet use time (Wi-Fi): up to 13 hours\n

  12.         Internet use time (LTE): up to 13 hours\n

  13.         Video playback: up to 13 hours\n

  14.         Audio playback (via headset): up to 110 hours\n

  15.         Fast charging: up to 7 hours of use from only 15 minutes of charging</string>

  16.     <string name="stock">Stock hanya 5 buah</string>

  17.     <string name="specification">Spesifikasi</string>

  18.     <string name="display">Display</string>

  19.     <string name="size">Size</string>

  20.     <string name="battery">Battery</string>

  21.     <string name="seller">Dijual oleh</string>

  22.     <string name="my_name">Narenda Wicaksono</string>

  23.     <string name="buy">Beli</string>

  24.     <string name="dummy_value">$735</string>

  25.     <string name="dummy_photos">6 photos</string>

  26. </resources>






Bila diperhatikan, jika kita ingin menampilkan teks ‘content_specs_size’, kita hanya perlu menuliskan nama atribut di dalam obyek TextView yang diinginkan. 

  1. <TextView

  2.     android:layout_width="match_parent"

  3.     android:layout_height="wrap_content"

  4.     android:textSize="14sp"

  5.     android:layout_weight="1"

  6.     android:text="@string/content_specs_size"

  7.     android:textColor="@android:color/black"/>




Dengan memanfaatkan strings.xml, Anda akan lebih mudah membuat aplikasi yang mendukung lebih dari satu bahasa.

View dan ViewGroup

Pembahasan mengenai Activity sebelumnya akan memudahkan Anda untuk memahami atribut dan namespace yang digunakan pada berkas layout xml. Anda dapat membaca kembali topik activity bila ada bagian yang Anda lupa.

  1. <ScrollView xmlns:android="http://schemas.android.com/apk/res/android"

  2.     android:id="@+id/activity_main"

  3.     android:layout_width="match_parent"

  4.     android:layout_height="match_parent"

  5.     android:background="@android:color/white">

  6.  

  7.     ...

  8. </ScrollView>




Ingat, semua komponen view dan viewgroup memiliki dua buah atribut penting yang harus selalu diberikan nilai untuk mengatur posisi dirinya di dalam sebuat layout, yaitu:
  • layout_width
  • layout_height
Kita akan menggunakan sebuah obyek ScrollView yang akan menjadi root untuk tampilan halaman aplikasi. Kita menggunakan ScrollView sebagai root karena kita ingin halaman aplikasi bisa di-scroll ke bawah dan ke atas. Hal ini akan memudahkan pengguna untuk melihat tampilan secara menyeluruh.

  1. <ScrollView xmlns:android="http://schemas.android.com/apk/res/android"

  2.     android:id="@+id/activity_main"

  3.     android:layout_width="match_parent"

  4.     android:layout_height="match_parent"

  5.     android:background="@android:color/white">

  6.  

  7.     <LinearLayout

  8.         android:layout_width="match_parent"

  9.         android:layout_height="wrap_content"

  10.         android:orientation="vertical">

  11.  

  12.         ...

  13.  

  14.     </LinearLayout>

  15. </ScrollView>




Seperti telah dijelaskan sebelumnya, ScrollView hanya dapat memiliki satu layout Viewgroup sebagai root untuk obyek View di dalamnya. Di sini susunan komponen View akan berorientasi vertikal.

  1. <FrameLayout
  2.     android:layout_width="match_parent"
  3.     android:layout_height="wrap_content">
  4.  
  5.     <ImageView
  6.         android:layout_width="match_parent"
  7.         android:layout_height="wrap_content"
  8.         android:adjustViewBounds="true"
  9.         android:scaleType="fitXY"
  10.         android:src="@drawable/pixel_google" />
  11.  
  12.     <TextView
  13.         android:layout_width="wrap_content"
  14.         android:layout_height="wrap_content"
  15.         android:layout_gravity="bottom"
  16.         android:layout_marginStart="16dp"
  17.         android:layout_marginLeft="16dp"
  18.         android:layout_marginBottom="16dp"
  19.         android:background="#4D000000"
  20.         android:drawableStart="@drawable/ic_collections_white_18dp"
  21.         android:drawableLeft="@drawable/ic_collections_white_18dp"
  22.         android:drawablePadding="4dp"
  23.         android:gravity="center_vertical"
  24.         android:padding="16dp"
  25.         android:text="@string/dummy_photos"
  26.         android:textAppearance="@style/TextAppearance.AppCompat.Small"
  27.         android:textColor="@android:color/white" />
  28. </FrameLayout>

Gambar pixel_google yang tampil akan menjadi alas bagi obyek TextView yang berada di atasnya. Ini seperti sifat dari komponen FrameLayout itu sendiri.

  1. <TableLayout
  2.     android:layout_width="match_parent"
  3.     android:layout_height="wrap_content"
  4.     android:layout_marginLeft="16dp"
  5.     android:layout_marginRight="16dp"
  6.     android:layout_marginBottom="16dp">
  7.  
  8.     <TableRow
  9.         android:layout_width="match_parent"
  10.         android:layout_height="wrap_content"
  11.         android:layout_marginBottom="8dp">
  12.  
  13.         <TextView
  14.             android:layout_width="wrap_content"
  15.             android:layout_height="wrap_content"
  16.             android:layout_marginEnd="16dp"
  17.             android:layout_marginRight="16dp"
  18.             android:text="@string/display"
  19.             android:textSize="14sp" />
  20.  
  21.         <TextView
  22.             android:layout_width="match_parent"
  23.             android:layout_height="wrap_content"
  24.             android:layout_weight="1"
  25.             android:text="@string/content_specs_display"
  26.             android:textColor="@android:color/black"
  27.             android:textSize="14sp" />
  28.     </TableRow>
  29.  
  30.     <TableRow
  31.         android:layout_width="match_parent"
  32.         android:layout_height="wrap_content"
  33.         android:layout_marginBottom="8dp">
  34.  
  35.         <TextView
  36.             android:layout_width="wrap_content"
  37.             android:layout_height="wrap_content"
  38.             android:layout_marginEnd="16dp"
  39.             android:layout_marginRight="16dp"
  40.             android:text="@string/size"
  41.             android:textSize="14sp" />
  42.  
  43.         <TextView
  44.             android:layout_width="match_parent"
  45.             android:layout_height="wrap_content"
  46.             android:layout_weight="1"
  47.             android:text="@string/content_specs_size"
  48.             android:textColor="@android:color/black"
  49.             android:textSize="14sp" />
  50.     </TableRow>
  51.  
  52.     <TableRow
  53.         android:layout_width="match_parent"
  54.         android:layout_height="wrap_content"
  55.         android:layout_marginBottom="8dp">
  56.  
  57.         <TextView
  58.             android:layout_width="wrap_content"
  59.             android:layout_height="wrap_content"
  60.             android:layout_marginEnd="16dp"
  61.             android:layout_marginRight="16dp"
  62.             android:text="@string/battery"
  63.             android:textSize="14sp" />
  64.  
  65.         <TextView
  66.             android:layout_width="match_parent"
  67.             android:layout_height="wrap_content"
  68.             android:layout_weight="1"
  69.             android:text="@string/content_specs_battery"
  70.             android:textColor="@android:color/black"
  71.             android:textSize="14sp" />
  72.     </TableRow>
  73. </TableLayout>

Kita menggunakan TableLayout untuk menampilkan informasi spesifikasi dari perangkat Google Pixel. 

TableLayout yang kita gunakan sangatlah sederhana. Tidak ada garis pembatas untuk kolom dan baris bahkan cell-nya.

Hanya dengan menggunakan TableRow kita bisa menambahkan sebuah baris baru di dalam sebuah TableLayout.


  1. <RelativeLayout
  2.     android:layout_width="match_parent"
  3.     android:layout_height="wrap_content"
  4.     android:layout_marginLeft="16dp"
  5.     android:layout_marginRight="16dp"
  6.     android:layout_marginBottom="16dp">
  7.  
  8.     <de.hdodenhof.circleimageview.CircleImageView
  9.         android:id="@+id/profile_image"
  10.         android:layout_width="56dp"
  11.         android:layout_height="56dp"
  12.         android:layout_centerVertical="true"
  13.         android:layout_marginEnd="16dp"
  14.         android:layout_marginRight="16dp"
  15.         android:src="@drawable/photo_2" />
  16.  
  17.     <TextView
  18.         android:layout_width="match_parent"
  19.         android:layout_height="wrap_content"
  20.         android:layout_centerVertical="true"
  21.         android:layout_toEndOf="@+id/profile_image"
  22.         android:layout_toRightOf="@id/profile_image"
  23.         android:text="@string/my_name"
  24.         android:textColor="@android:color/black" />
  25. </RelativeLayout>




Selanjutnya, kita menggunakan sebuah RelativeLayout untuk menampilkan sebuah gambar dan teks. Posisi dari teks mengacu ke sebelah kanan dari image dan posisi keduanya disesuaikan untuk berada di tengah secara vertikal.




  1. if (getSupportActionBar() != null) {

  2.     getSupportActionBar().setTitle("Google Pixel");

  3. }





  1. if (supportActionBar != null) {

  2.     (supportActionBar as ActionBar).title = "Google Pixel"

  3. }






Baris di atas akan mengganti nilai dari judul halaman pada ActionBar di dalam MainActivity. Kita menggunakan getSupportActionBar() karena kelas MainActivity inherit kepada AppCompatActivity, yang merupakan kelas turunan Activity. Kelas tersebut sudah menyediakan fasilitas komponen ActionBar dan mendukung semua versi OS Android.
Selamat! Anda sudah mempelajari Layout, View, dan Viewgroup. Semakin sering Anda berlatih untuk mentransformasikan sebuah desain menjadi sebuah berkas layout xml, kemampuan Anda akan semakin meningkat.
Anda dapat mengunjungi tautan berikut untuk mendalami topik antar muka pada Android:
Source code bisa Anda dapatkan pada tautan berikut:



*

Post a Comment (0)
Previous Post Next Post