Showing posts with label ui/ux. Show all posts
Showing posts with label ui/ux. Show all posts
Monday, June 15, 2020

Belajar Membuat Komponen View & ViewGroup Layout



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 ArtifactTrue
    LanguageKotlin/Java
  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:
    Kotlin
    apply plugin: 'com.android.application'
    apply plugin: 'kotlin-android-extensions'
    apply plugin: 'kotlin-android'

    android {
    compileSdkVersion 29
    buildToolsVersion '29.0.1'
    defaultConfig {
    applicationId "com.dicoding.picodiploma.myviewandviews"
    minSdkVersion 21
    targetSdkVersion 29
    versionCode 1
    versionName "1.0"
    testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
    }
    buildTypes {
    release {
    minifyEnabled false
    proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
    }
    }
    }

    dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    androidTestImplementation('androidx.test.espresso:espresso-core:3.1.0', {
    exclude group: 'com.android.support', module: 'support-annotations'
    })
    implementation 'androidx.appcompat:appcompat:1.1.0'
    implementation 'androidx.vectordrawable:vectordrawable-animated:1.1.0'
    testImplementation 'junit:junit:4.12'
    implementation "androidx.core:core-ktx:1.0.2"
    implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version"
    implementation 'de.hdodenhof:circleimageview:3.0.0'
    }
    Java
    apply plugin: 'com.android.application'

    android {
    compileSdkVersion 29
    defaultConfig {
    applicationId "com.dicoding.picodiploma.myviewandviews"
    minSdkVersion 21
    targetSdkVersion 29
    versionCode 1
    versionName "1.0"
    testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
    }
    buildTypes {
    release {
    minifyEnabled false
    proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
    }
    }
    }

    dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    androidTestImplementation('androidx.test.espresso:espresso-core:3.1.0', {
    exclude group: 'com.android.support', module: 'support-annotations'
    })
    implementation 'androidx.appcompat:appcompat:1.1.0'
    implementation 'androidx.vectordrawable:vectordrawable-animated:1.1.0'
    testImplementation 'junit:junit:4.12'
    implementation 'de.hdodenhof:circleimageview:3.0.0'
    }
  3. 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>
  4. Selanjutnya, unduh asset-nya di sini. Bila telah selesai, salin semua asset yang dibutuhkan ke dalam direktori res → drawable.
    20181116101821b3f68608b27e5be8a29dc0232ea6e689.gif
  5. 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"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/white"
    tools:context="com.dicoding.myviewandviews.MainActivity">

    </ScrollView>

  6. Kemudian tambahkan layout utama di dalam ScrollView.
    <?xml version="1.0" encoding="utf-8"?>
    <ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/white"
    tools:context="com.dicoding.picodiploma.myviewandviews.MainActivity">
    <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    </LinearLayout>

    </ScrollView>
  7. 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"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/white"
    tools:context="com.dicoding.picodiploma.myviewandviews.MainActivity">
    <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:src="@drawable/pixel_google"
    android:scaleType="fitXY"/>
    <TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:padding="8dp"
    android:text="6 Photos"
    android:gravity="center_vertical"
    android:drawableLeft="@drawable/ic_collections_white_18dp"
    android:drawablePadding="4dp"
    android:textAppearance="@style/TextAppearance.AppCompat.Small"
    android:background="#4D000000"
    android:textColor="@android:color/white"
    android:layout_marginLeft="16dp"
    android:layout_marginBottom="16dp"
    android:layout_gravity="bottom" />

    </FrameLayout>
    </LinearLayout>
    </ScrollView>

    Tampilan saat ini adalah seperti ini:
    20181116104118557ff92da925c5de7a1b99c501af0bee
  8. Selanjutnya, tambahkan textview di bawah FrameLayout, menjadi seperti ini:
    <?xml version="1.0" encoding="utf-8"?>
    <ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/white"
    tools:context="com.dicoding.picodiploma.myviewandviews.MainActivity">
    <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">
    <FrameLayout ...>

    <TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:textSize="32sp"
    android:text="$735"
    android:layout_marginLeft="16dp"
    android:layout_marginRight="16dp"
    android:layout_marginTop="16dp"
    android:layout_marginBottom="8dp"
    android:textColor="@android:color/black"/>
    <TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="Stock hanya 5 buah"
    android:textSize="12sp"
    android:layout_marginLeft="16dp"
    android:layout_marginRight="16dp"
    android:layout_marginBottom="16dp"/>
    <TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="@string/content_text"
    android:layout_marginLeft="16dp"
    android:layout_marginRight="16dp"
    android:layout_marginBottom="16dp"
    android:lineSpacingMultiplier="1"
    android:textColor="@android:color/black"/>

    </LinearLayout>
    </ScrollView>
    Tampilan saat ini adalah:
    20181116104618f5af2e3c4081f7b5021dff1ab0475a2c
  9. Setelah menambahkan beberapa textview, selanjutnya kita akan menambahkan tablelayout.
    <?xml version="1.0" encoding="utf-8"?>
    <ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/white"
    tools:context="com.dicoding.picodiploma.myviewandviews.MainActivity">
    <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">
    <FrameLayout ...>
    <TextView ...>
    <TextView ...>
    <TextView ...>


    <TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="Spesifikasi"
    android:textSize="12sp"
    android:layout_marginLeft="16dp"
    android:layout_marginRight="16dp"
    android:layout_marginBottom="8dp"/>
    <TableLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginLeft="16dp"
    android:layout_marginRight="16dp"
    android:layout_marginBottom="16dp">
    <TableRow
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginBottom="8dp">
    <TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textSize="14sp"
    android:layout_marginRight="16dp"
    android:text="Display"/>
    <TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:textSize="14sp"
    android:layout_weight="1"
    android:text="@string/content_specs_display"
    android:textColor="@android:color/black"/>
    </TableRow>
    <TableRow
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginBottom="8dp">
    <TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textSize="14sp"
    android:layout_marginRight="16dp"
    android:text="Size"/>
    <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"/>
    </TableRow>
    <TableRow
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginBottom="8dp">
    <TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textSize="14sp"
    android:layout_marginRight="16dp"
    android:text="Battery"/>
    <TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:textSize="14sp"
    android:layout_weight="1"
    android:text="@string/content_specs_battery"
    android:textColor="@android:color/black"/>
    </TableRow>
    </TableLayout>

    </LinearLayout>
    </ScrollView>
    Tampilan saat ini adalah seperti berikut:
    20181116105123f43a02ea126f53f1f8e87d467e14e830.gif
  10. Kemudian setelah menambahkan tablelayout, kita masukkan viewgroup lagi. Tambahkan relativelayout dan button di bawah TableLayout menjadi seperti ini:
    <?xml version="1.0" encoding="utf-8"?>
    <ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/white"
    tools:context="com.dicoding.picodiploma.myviewandviews.MainActivity">
    <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">
    <FrameLayout ...>
    <TextView ...>
    <TextView ...>
    <TextView ...>
    <TextView ...>
    <TableLayout ...>

    <TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="Dijual oleh"
    android:textSize="12sp"
    android:layout_marginLeft="16dp"
    android:layout_marginRight="16dp"
    android:layout_marginBottom="8dp"/>
    <RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginLeft="16dp"
    android:layout_marginRight="16dp"
    android:layout_marginBottom="16dp">
    <de.hdodenhof.circleimageview.CircleImageView
    android:layout_width="56dp"
    android:layout_height="56dp"
    android:src="@drawable/photo_2"
    android:layout_centerVertical="true"
    android:id="@+id/profile_image"
    android:layout_marginRight="16dp"/>
    <TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_toRightOf="@id/profile_image"
    android:text="Narenda Wicaksono"
    android:textColor="@android:color/black"
    android:layout_centerVertical="true"/>
    </RelativeLayout>
    <Button
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="Beli"
    android:layout_marginLeft="16dp"
    android:layout_marginRight="16dp"
    android:layout_marginBottom="16dp"/>

    </LinearLayout>
    </ScrollView>
  11. 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.
  12. 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:
    <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>
  13. Maka setelah setiap teks yang dipindahkan ke string.xml, activity_main.xml menjadi sepert ini:
    <?xml version="1.0" encoding="utf-8"?>
    <ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/white"
    tools:context="com.dicoding.picodiploma.myviewandviews.MainActivity">

    <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_marginStart="16dp"
    android:layout_marginBottom="16dp"
    android:background="#4D000000"
    android:drawableStart="@drawable/ic_collections_white_18dp"
    android:drawablePadding="4dp"
    android:gravity="center_vertical"
    android:padding="16dp"
    android:text="@string/dummy_photos"
    android:textAppearance="@style/TextAppearance.AppCompat.Small"
    android:textColor="@android:color/white" />
    </FrameLayout>

    <TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginLeft="16dp"
    android:layout_marginTop="16dp"
    android:layout_marginRight="16dp"
    android:layout_marginBottom="16dp"
    android:text="@string/dummy_value"
    android:textColor="@android:color/black"
    android:textSize="32sp" />

    <TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginLeft="16dp"
    android:layout_marginRight="16dp"
    android:layout_marginBottom="16dp"
    android:text="@string/stock"
    android:textSize="12sp" />

    <TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginLeft="16dp"
    android:layout_marginRight="16dp"
    android:layout_marginBottom="16dp"
    android:lineSpacingMultiplier="1"
    android:text="@string/content_text"
    android:textColor="@android:color/black" />

    <TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginLeft="16dp"
    android:layout_marginRight="16dp"
    android:layout_marginBottom="16dp"
    android:text="@string/specification"
    android:textSize="12sp" />

    <TableLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginLeft="16dp"
    android:layout_marginRight="16dp"
    android:layout_marginBottom="16dp">

    <TableRow
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginBottom="16dp">

    <TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginEnd="16dp"
    android:text="@string/display"
    android:textSize="14sp" />

    <TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    android:text="@string/content_specs_display"
    android:textColor="@android:color/black"
    android:textSize="14sp" />
    </TableRow>

    <TableRow
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginBottom="16dp">

    <TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginEnd="16dp"
    android:text="@string/size"
    android:textSize="14sp" />

    <TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    android:text="@string/content_specs_size"
    android:textColor="@android:color/black"
    android:textSize="14sp" />
    </TableRow>

    <TableRow
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginBottom="16dp">

    <TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginEnd="16dp"
    android:text="@string/battery"
    android:textSize="14sp" />

    <TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    android:text="@string/content_specs_battery"
    android:textColor="@android:color/black"
    android:textSize="14sp" />
    </TableRow>
    </TableLayout>

    <TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginLeft="16dp"
    android:layout_marginRight="16dp"
    android:layout_marginBottom="16dp"
    android:text="@string/seller"
    android:textSize="12sp" />

    <RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginLeft="16dp"
    android:layout_marginRight="16dp"
    android:layout_marginBottom="16dp">

    <de.hdodenhof.circleimageview.CircleImageView
    android:id="@+id/profile_image"
    android:layout_width="56dp"
    android:layout_height="56dp"
    android:layout_centerVertical="true"
    android:layout_marginEnd="16dp"
    android:src="@drawable/photo_2" />

    <TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_centerVertical="true"
    android:layout_toEndOf="@+id/profile_image"
    android:text="@string/my_name"
    android:textColor="@android:color/black" />
    </RelativeLayout>

    <Button
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginLeft="16dp"
    android:layout_marginRight="16dp"
    android:layout_marginBottom="16dp"
    android:text="@string/buy" />
    </LinearLayout>
    </ScrollView>

  14. Terakhir, pada MainActivity tambahkan beberapa baris kode berikut:
    Kotlin
    if (supportActionBar != null) {
    (supportActionBar as ActionBar).title = "Google Pixel"
    }
    Dengan kotlin, Anda juga bisa menyingkatnya menjadi:
    supportActionBar?.title = "Google Pixel"
    Java
    if (getSupportActionBar() != null) {
    getSupportActionBar().setTitle("Google Pixel");
    }
    Sehingga kode yang ada di MainActivity menjadi seperti berikut:
    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"
    }

    }
    }
    Dengan kotlin, Anda juga bisa menyingkatnya menjadi:
    class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_main)

    supportActionBar?.title = "Google Pixel"
    }
    }
    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");
    }

    }
    }
  15. 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.
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"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@android:color/white"
tools:context="com.dicoding.myviewandviews.MainActivity">

...
</ScrollView>
Ingat, semua komponen view dan viewgroup memiliki dua buah atribut penting yang harus selalu diberikan nilai untuk mengatur posisi dirinya di dalam sebuah 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"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@android:color/white"
tools:context="com.dicoding.myviewandviews.MainActivity">
<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.
<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_marginStart="16dp"
android:layout_marginBottom="16dp"
android:background="#4D000000"
android:drawableStart="@drawable/ic_collections_white_18dp"
android:drawablePadding="4dp"
android:gravity="center_vertical"
android:padding="16dp"
android:text="@string/dummy_photos"
android:textAppearance="@style/TextAppearance.AppCompat.Small"
android:textColor="@android:color/white" />
</FrameLayout>
Gambar pixel_google yang tampil akan menjadi alas bagi obyek textview yang berada di atasnya. Ini seperti sifat dari komponen framelayout itu sendiri.
<TableLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:layout_marginBottom="16dp">

<TableRow
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="16dp">

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="16dp"
android:text="@string/display"
android:textSize="14sp" />

<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="@string/content_specs_display"
android:textColor="@android:color/black"
android:textSize="14sp" />
</TableRow>

<TableRow
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="16dp">

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="16dp"
android:text="@string/size"
android:textSize="14sp" />

<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="@string/content_specs_size"
android:textColor="@android:color/black"
android:textSize="14sp" />
</TableRow>

<TableRow
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="16dp">

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="16dp"
android:text="@string/battery"
android:textSize="14sp" />

<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="@string/content_specs_battery"
android:textColor="@android:color/black"
android:textSize="14sp" />
</TableRow>
</TableLayout>
Kita menggunakan TableLayout untuk menampilkan informasi spesifikasi. 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.
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:layout_marginBottom="16dp">

<de.hdodenhof.circleimageview.CircleImageView
android:id="@+id/profile_image"
android:layout_width="56dp"
android:layout_height="56dp"
android:layout_centerVertical="true"
android:layout_marginEnd="16dp"
android:src="@drawable/photo_2" />

<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toEndOf="@+id/profile_image"
android:text="@string/my_name"
android:textColor="@android:color/black" />
</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.
Kotlin
if (supportActionBar != null) {
(supportActionBar as ActionBar).title = "Google Pixel"
}
Dengan kotlin, Anda juga bisa menyingkatnya menjadi:
supportActionBar?.title = "Google Pixel"
Java
if (getSupportActionBar() != null) {
getSupportActionBar().setTitle("Google Pixel");
}
Baris di atas akan mengganti nilai dari judul halaman pada actionbar di dalam MainActivity. Kita menggunakan supportActionBar() 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:

Teori Dasar Tentang Application UI dan UX Untuk Apps Android


Dalam mengembangkan sebuah aplikasi, User Interface (antar muka pengguna) dan User Experience (pengalaman pengguna) merupakan aspek penting  yang perlu diperhatikan.



Beberapa komponen yang akan dibahas dalam modul ini adalah:
  1. Views dan ViewGroup
    Pada modul ini kita akan belajar tentang komponen inti yang digunakan untuk membuat sebuah tampilan layout dari android. Komponen pertama yaitu view yang merupakan obyek  menggambar komponen tampilan ke layar yang mana pengguna dapat melihat dan berinteraksi langsung seperti button, textview, checkbox, imageview, dll. Dan komponen kedua adalah viewgroup yaitu sebuah obyek yang mewadahi obyek-obyek view, contohnya adalah linearlayoutrelativelayoutframelayout, dll.
  2. Style dan Theme
    Dalam modul ini kita akan belajar tentang styleStyle adalah kumpulan properti yang dibutuhkan untuk mendefinisikan bagaimana sebuah komponen view dan layar jendela ditampilkan. Contoh style adalah properti height, width, background color dan lain sebagainya. Sedangkan tema merupakan sebuah style yang diimplementasikan khusus untuk activity dan application pada file AndroidManifest.xml.
  3. RecyclerView
    Bagaimana cara menampilkan banyak kumpulan data di dalam android? RecyclerView-lah jawabannya. Pada modul ini kita akan belajar tentang komponen recyclerview yang merupakan komponen untuk menampilkan kumpulan data dengan lebih fleksibel dan efisien jika dibandingkan dengan listview.
  4. Action Bar dan Navigation
    Pada modul action bar dan navigation, kita akan belajar tentang action bar dan navigation drawer di dalam aplikasi Android. Dengan menggunakan action bar dan navigation drawer, maka kita dapat membuat navigasi yang bagus dan nyaman untuk digunakan oleh pengguna.
  5. Localization
    Untuk menambah jumlah pengguna dari aplikasi, tentunya kita perlu merangkul lebih banyak pengguna, baik dari dalam maupun luar negeri. Di sinilah peran localization dalam aplikasi kita. Localization adalah mekanisme dari sebuah aplikasi untuk bisa menyesuaikan bahasa dari konten sebuah aplikasi dengan pengaturan bahasa yang disetel oleh pengguna. Misalnya ketika perangkat menggunakan bahasa Inggris, maka konten dari aplikasi akan tampil dalam bahasa Inggris