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:

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:

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:

• User Interface Overview

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.

           android:orientation=”vertical”                      android:orientation=”horizontal”

Anda dapat membaca lebih lanjut mengenai linearlayout pada tautan berikut:

• Linear Layout

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.

Anda dapat membaca lebih lanjut mengenai relativelayout pada tautan berikut:

• Relative Layout

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:

Anda dapat membaca lebih lanjut mengenai framelayout pada tautan berikut:

• Frame Layout

TableLayout

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:

• TableLayout

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:

• Declaring Layout

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.

• ScrollView

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 :

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.

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 :

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:

• Multiple Screen Support
• Screen Density
• DPI Screen
• DP/PX Converter
• Video Density-independent Pixels
• Density Pixal dan Scale Pixel

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:

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 Project	MyViewAndViews
   Target & Minimum Target SDK	Phone and Tablet, Api level 21
   Tipe Activity	Empty Activity
   Activity Name	MainActivity
   Use AndroidX artifacts	True
   Language	Java / Kotlin

2. Lalu buka berkas build.gradle (Module: app) dan tambahkan satu baris ini di bagian dependecies:
   

   
   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:

   
   <resources>
       <string name="app_name">MyViewAndViews</string>
       <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>
       <string name="content_specs_display">5.0 inches\n
       FHD AMOLED at 441ppi\n
       2.5D Corning® Gorilla® Glass 4</string>
       <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>
       <string name="content_specs_battery">2,770 mAh battery\n
       Standby time (LTE): up to 19 days\n
       Talk time (3g/WCDMA): up to 26 hours\n
       Internet use time (Wi-Fi): up to 13 hours\n
       Internet use time (LTE): up to 13 hours\n
       Video playback: up to 13 hours\n
       Audio playback (via headset): up to 110 hours\n
       Fast charging: up to 7 hours of use from only 15 minutes of charging</string>
   </resources>
   
   

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

   
   <?xml version="1.0" encoding="utf-8"?>
   <ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
       android:id="@+id/activity_main"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:background="@android:color/white">
      
   </ScrollView>
   
   

   
   
3. Kemudian tambahkan layout utama di dalam ScrollView.
   

   
   <?xml version="1.0" encoding="utf-8"?>
   <ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
       android:id="@+id/activity_main"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:background="@android:color/white">
    
       <LinearLayout
           android:layout_width="match_parent"
           android:layout_height="wrap_content"
           android:orientation="vertical">
           
       </LinearLayout>
   </ScrollView>
   
   

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

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/white">
 
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">
        <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
            <ImageView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:adjustViewBounds="true"
                android:scaleType="fitXY"
                android:src="@drawable/pixel_google" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="bottom"
                android:layout_marginLeft="16dp"
                android:layout_marginBottom="16dp"
                android:background="#4D000000"
                android:drawableLeft="@drawable/ic_collections_white_18dp"
                android:drawablePadding="4dp"
                android:gravity="center_vertical"
                android:padding="8dp"
                android:text="6 Photos"
                android:textAppearance="@style/TextAppearance.AppCompat.Small"
                android:textColor="@android:color/white" />
        </FrameLayout>
    </LinearLayout>
</ScrollView>

1. Tampilan saat ini adalah seperti ini:
   
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"/>
25.         <TextView
26.             android:layout_width="match_parent"
27.             android:layout_height="wrap_content"
28.             android:text="Stock hanya 5 buah"
29.             android:textSize="12sp"
30.             android:layout_marginLeft="16dp"
31.             android:layout_marginRight="16dp"
32.             android:layout_marginBottom="16dp"/>
34.         <TextView
35.             android:layout_width="match_parent"
36.             android:layout_height="wrap_content"
37.             android:text="@string/content_text"
38.             android:layout_marginLeft="16dp"
39.             android:layout_marginRight="16dp"
40.             android:layout_marginBottom="16dp"
41.             android:lineSpacingMultiplier="1"
42.             android:textColor="@android:color/black"/>
43.     </LinearLayout>
44. </ScrollView>

1. Tampilan saat ini adalah:
   
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"/>
27.         <TableLayout
28.             android:layout_width="match_parent"
29.             android:layout_height="wrap_content"
30.             android:layout_marginLeft="16dp"
31.             android:layout_marginRight="16dp"
32.             android:layout_marginBottom="16dp">
34.             <TableRow
35.                 android:layout_width="match_parent"
36.                 android:layout_height="wrap_content"
37.                 android:layout_marginBottom="8dp">
39.                 <TextView
40.                     android:layout_width="wrap_content"
41.                     android:layout_height="wrap_content"
42.                     android:textSize="14sp"
43.                     android:layout_marginRight="16dp"
44.                     android:text="Display"/>
46.                 <TextView
47.                     android:layout_width="match_parent"
48.                     android:layout_height="wrap_content"
49.                     android:textSize="14sp"
50.                     android:layout_weight="1"
51.                     android:text="@string/content_specs_display"
52.                     android:textColor="@android:color/black"/>
53.             </TableRow>
55.             <TableRow
56.                 android:layout_width="match_parent"
57.                 android:layout_height="wrap_content"
58.                 android:layout_marginBottom="8dp">
60.                 <TextView
61.                     android:layout_width="wrap_content"
62.                     android:layout_height="wrap_content"
63.                     android:textSize="14sp"
64.                     android:layout_marginRight="16dp"
65.                     android:text="Size"/>
67.                 <TextView
68.                     android:layout_width="match_parent"
69.                     android:layout_height="wrap_content"
70.                     android:textSize="14sp"
71.                     android:layout_weight="1"
72.                     android:text="@string/content_specs_size"
73.                     android:textColor="@android:color/black"/>
74.             </TableRow>
76.             <TableRow
77.                 android:layout_width="match_parent"
78.                 android:layout_height="wrap_content"
79.                 android:layout_marginBottom="8dp">
81.                 <TextView
82.                     android:layout_width="wrap_content"
83.                     android:layout_height="wrap_content"
84.                     android:textSize="14sp"
85.                     android:layout_marginRight="16dp"
86.                     android:text="Battery"/>
88.                 <TextView
89.                     android:layout_width="match_parent"
90.                     android:layout_height="wrap_content"
91.                     android:textSize="14sp"
92.                     android:layout_weight="1"
93.                     android:text="@string/content_specs_battery"
94.                     android:textColor="@android:color/black"/>
95.             </TableRow>
96.         </TableLayout>
97.     </LinearLayout>
98. </ScrollView>

1. Tampilan saat ini adalah seperti berikut:
   
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"/>
29.         <RelativeLayout
30.             android:layout_width="match_parent"
31.             android:layout_height="wrap_content"
32.             android:layout_marginLeft="16dp"
33.             android:layout_marginRight="16dp"
34.             android:layout_marginBottom="16dp">
36.             <de.hdodenhof.circleimageview.CircleImageView
37.                 android:layout_width="56dp"
38.                 android:layout_height="56dp"
39.                 android:src="@drawable/photo_2"
40.                 android:layout_centerVertical="true"
41.                 android:id="@+id/profile_image"
42.                 android:layout_marginRight="16dp"/>
44.             <TextView
45.                 android:layout_width="match_parent"
46.                 android:layout_height="wrap_content"
47.                 android:layout_toRightOf="@id/profile_image"
48.                 android:text="Narenda Wicaksono"
49.                 android:textColor="@android:color/black"
50.                 android:layout_centerVertical="true"/>
51.         </RelativeLayout>
53.         <Button
54.             android:layout_width="match_parent"
55.             android:layout_height="wrap_content"
56.             android:text="Beli"
57.             android:layout_marginLeft="16dp"
58.             android:layout_marginRight="16dp"
59.             android:layout_marginBottom="16dp"/>
60.  
61.     </LinearLayout>
62. </ScrollView>

1. Pada properties android:text akan ada warning yang berbunyi seperti di bawah ini.
   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.
   Kemudian pilihlah Extract string resource. Akan muncul dialog baru yang tampilannya seperti ini:
   Kemudian 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.xml, activity_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" />
22.             <TextView
23.                 android:layout_width="wrap_content"
24.                 android:layout_height="wrap_content"
25.                 android:layout_gravity="bottom"
26.                 android:layout_marginLeft="16dp"
27.                 android:layout_marginBottom="16dp"
28.                 android:layout_marginStart="16dp"
29.                 android:background="#4D000000"
30.                 android:drawableLeft="@drawable/ic_collections_white_18dp"
31.                 android:drawablePadding="4dp"
32.                 android:drawableStart="@drawable/ic_collections_white_18dp"
33.                 android:gravity="center_vertical"
34.                 android:padding="8dp"
35.                 android:text="@string/dummy_photos"
36.                 android:textAppearance="@style/TextAppearance.AppCompat.Small"
37.                 android:textColor="@android:color/white" />
38.         </FrameLayout>
40.         <TextView
41.             android:layout_width="match_parent"
42.             android:layout_height="wrap_content"
43.             android:layout_marginBottom="8dp"
44.             android:layout_marginLeft="16dp"
45.             android:layout_marginRight="16dp"
46.             android:layout_marginTop="16dp"
47.             android:text="@string/dummy_value"
48.             android:textColor="@android:color/black"
49.             android:textSize="32sp" />
51.         <TextView
52.             android:layout_width="match_parent"
53.             android:layout_height="wrap_content"
54.             android:layout_marginBottom="16dp"
55.             android:layout_marginLeft="16dp"
56.             android:layout_marginRight="16dp"
57.             android:text="@string/stock"
58.             android:textSize="12sp" />
60.         <TextView
61.             android:layout_width="match_parent"
62.             android:layout_height="wrap_content"
63.             android:layout_marginBottom="16dp"
64.             android:layout_marginLeft="16dp"
65.             android:layout_marginRight="16dp"
66.             android:lineSpacingMultiplier="1"
67.             android:text="@string/content_text"
68.             android:textColor="@android:color/black" />
70.         <TextView
71.             android:layout_width="match_parent"
72.             android:layout_height="wrap_content"
73.             android:layout_marginBottom="8dp"
74.             android:layout_marginLeft="16dp"
75.             android:layout_marginRight="16dp"
76.             android:text="@string/specification"
77.             android:textSize="12sp" />
79.         <TableLayout
80.             android:layout_width="match_parent"
81.             android:layout_height="wrap_content"
82.             android:layout_marginBottom="16dp"
83.             android:layout_marginLeft="16dp"
84.             android:layout_marginRight="16dp">
86.             <TableRow
87.                 android:layout_width="match_parent"
88.                 android:layout_height="wrap_content"
89.                 android:layout_marginBottom="8dp">
91.                 <TextView
92.                     android:layout_width="wrap_content"
93.                     android:layout_height="wrap_content"
94.                     android:layout_marginEnd="16dp"
95.                     android:layout_marginRight="16dp"
96.                     android:text="@string/display"
97.                     android:textSize="14sp" />
99.                 <TextView
100.                     android:layout_width="match_parent"
101.                     android:layout_height="wrap_content"
102.                     android:layout_weight="1"
103.                     android:text="@string/content_specs_display"
104.                     android:textColor="@android:color/black"
105.                     android:textSize="14sp" />
106.             </TableRow>
108.             <TableRow
109.                 android:layout_width="match_parent"
110.                 android:layout_height="wrap_content"
111.                 android:layout_marginBottom="8dp">
113.                 <TextView
114.                     android:layout_width="wrap_content"
115.                     android:layout_height="wrap_content"
116.                     android:layout_marginEnd="16dp"
117.                     android:layout_marginRight="16dp"
118.                     android:text="@string/size"
119.                     android:textSize="14sp" />
121.                 <TextView
122.                     android:layout_width="match_parent"
123.                     android:layout_height="wrap_content"
124.                     android:layout_weight="1"
125.                     android:text="@string/content_specs_size"
126.                     android:textColor="@android:color/black"
127.                     android:textSize="14sp" />
128.             </TableRow>
130.             <TableRow
131.                 android:layout_width="match_parent"
132.                 android:layout_height="wrap_content"
133.                 android:layout_marginBottom="8dp">
135.                 <TextView
136.                     android:layout_width="wrap_content"
137.                     android:layout_height="wrap_content"
138.                     android:layout_marginEnd="16dp"
139.                     android:layout_marginRight="16dp"
140.                     android:text="@string/battery"
141.                     android:textSize="14sp" />
143.                 <TextView
144.                     android:layout_width="match_parent"
145.                     android:layout_height="wrap_content"
146.                     android:layout_weight="1"
147.                     android:text="@string/content_specs_battery"
148.                     android:textColor="@android:color/black"
149.                     android:textSize="14sp" />
150.             </TableRow>
151.         </TableLayout>
153.         <TextView
154.             android:layout_width="match_parent"
155.             android:layout_height="wrap_content"
156.             android:layout_marginBottom="8dp"
157.             android:layout_marginLeft="16dp"
158.             android:layout_marginRight="16dp"
159.             android:text="@string/seller"
160.             android:textSize="12sp" />
162.         <RelativeLayout
163.             android:layout_width="match_parent"
164.             android:layout_height="wrap_content"
165.             android:layout_marginBottom="16dp"
166.             android:layout_marginLeft="16dp"
167.             android:layout_marginRight="16dp">
169.             <de.hdodenhof.circleimageview.CircleImageView
170.                 android:id="@+id/profile_image"
171.                 android:layout_width="56dp"
172.                 android:layout_height="56dp"
173.                 android:layout_centerVertical="true"
174.                 android:layout_marginEnd="16dp"
175.                 android:layout_marginRight="16dp"
176.                 android:src="@drawable/photo_2" />
178.             <TextView
179.                 android:layout_width="match_parent"
180.                 android:layout_height="wrap_content"
181.                 android:layout_centerVertical="true"
182.                 android:layout_toEndOf="@+id/profile_image"
183.                 android:layout_toRightOf="@id/profile_image"
184.                 android:text="@string/my_name"
185.                 android:textColor="@android:color/black" />
186.         </RelativeLayout>
188.         <Button
189.             android:layout_width="match_parent"
190.             android:layout_height="wrap_content"
191.             android:layout_marginBottom="16dp"
192.             android:layout_marginLeft="16dp"
193.             android:layout_marginRight="16dp"
194.             android:text="@string/buy" />
195.     </LinearLayout>
196. </ScrollView>

Terakhir, pada MainActivity tambahkan beberapa baris kode berikut:

• Java
• 
  

public class MainActivity extends AppCompatActivity {
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
 
        if (getSupportActionBar() != null) {
            getSupportActionBar().setTitle("Google Pixel");
        }
    }
}

• Kotlin

class MainActivity : AppCompatActivity() {
 
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
       
        if (supportActionBar != null) {
            (supportActionBar as ActionBar).title = "Google Pixel"
        }
    }
}

1. Sekarang silakan jalankan aplikasinya. Seharusnya hasilnya seperti ini:
   
   

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.

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.

<resources>
    <string name="app_name">MyViewAndViews</string>
    <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>
    <string name="content_specs_display">5.0 inches\n
        FHD AMOLED at 441ppi\n
        2.5D Corning® Gorilla® Glass 4</string>
    <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>
    <string name="content_specs_battery">2,770 mAh battery\n
        Standby time (LTE): up to 19 days\n
        Talk time (3g/WCDMA): up to 26 hours\n
        Internet use time (Wi-Fi): up to 13 hours\n
        Internet use time (LTE): up to 13 hours\n
        Video playback: up to 13 hours\n
        Audio playback (via headset): up to 110 hours\n
        Fast charging: up to 7 hours of use from only 15 minutes of charging</string>
    <string name="stock">Stock hanya 5 buah</string>
    <string name="specification">Spesifikasi</string>
    <string name="display">Display</string>
    <string name="size">Size</string>
    <string name="battery">Battery</string>
    <string name="seller">Dijual oleh</string>
    <string name="my_name">Narenda Wicaksono</string>
    <string name="buy">Beli</string>
    <string name="dummy_value">$735</string>
    <string name="dummy_photos">6 photos</string>
</resources>

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

<TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:textSize="14sp"
    android:layout_weight="1"
    android:text="@string/content_specs_size"
    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.

<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/white">
 
    ...
</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.

<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/white">
 
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">
 
        ...
 
    </LinearLayout>
</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.

• Java
• 
  

if (getSupportActionBar() != null) {
    getSupportActionBar().setTitle("Google Pixel");
}

• Kotlin

if (supportActionBar != null) {
    (supportActionBar as ActionBar).title = "Google Pixel"
}

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:

• Resource UI dari Uplabs
• Material Design Uplabs

Source code bisa Anda dapatkan pada tautan berikut:

• Source Code MyViewAndViewGroup (Java)
• Source Code MyViewAndViewGroup (Kotlin)