Android Fundamentals 05.3 : Adaptive Layouts

Alat dan aplikasi yang diperlukan:

• PC/Desktop dengan Sistem Operasi Windows
• Java Development Kit (JDK) versi 11
• Android Studio versi 3.3

Tugas 1 : Dukungan Tampilan Lansekap

1.1 Mengubah ke GridLayoutManager

1. Masih di proyek Material Me, buat file resource baru dengan nama integers.xml. Klik OK.

2. Buat konstanta integer di antar tag <resources> seperti berikut untuk menampilkan grid 1 kolom.

<integer name="grid_column_count">1</integer>

3. Buat file resource baru lagi dengan nama integers.xml. Pada panel Available qualifiers, pilih Orientation, lalu klik ikon >> . Pilih Orientation menjadi Landscape. Klik OK.

4. Copy konstanta integer yang dibuat pada integers.xml ke integers.xml (value-land) dan ubah menjadi ‘2’ .

1.2 Modifikasi MainActivity

1. Buka file MainActivity.java dan tambahkan kode berikut pada method onCreate() .

int gridColumnCount = 
        getResources().getInteger(R.integer.grid_column_count);

2. Ubah LinearLayoutManager untuk RecyclerView menjadi GridLayoutManager dengan menggunakan kode berikut.

mRecyclerView.setLayoutManager(new 
                     GridLayoutManager(this, gridColumnCount));

3. Jalankan aplikasi. Rotate screen sehingga tampilan seperti gambar berikut.

4. Gunakan variabel gridColumnCount untuk menonaktifkan disable swipe.

int swipeDirs;
if(gridColumnCount > 1){
   swipeDirs = 0;
} else {
   swipeDirs = ItemTouchHelper.LEFT | ItemTouchHelper.RIGHT;
}

5. Gunakan swipeDirs pada ItemTouchHelper.

6. Jalankan aplikasi. Kini, setiap item tidak dapat dihapus dengan cara diswipe.

Tugas 2 : Dukungan Tampilan pada Tablet

2.1 Adaptasi Layout ke Tablet

1. Buat resource file baru bernama integers.xml yang menggunakan qualifier Smallest Screen Width dengan value 600 .

2. Copy kode dari integers.xml (land) ke file integers.xml (sw600dp) .

3. Buat integers.xml baru dengan ketentuan qualifier Smallest Screen Width diatur menjadi 600 , dan Orientation qualifier adalah Landscape.

4. Copy-paste kode dari integers.xml (land) ke integers.xml (sw600dp-land) dan ubah variabelnya menjadi ‘3’.

5. Jalankan aplikasi. Maka, akan ada 3 kolom grid pada tampilan Tablet.

Sumber: codelabs.developers.google.com

Sumber: codelabs.developers.google.com

2.2 Mengupdate Tablet List Item Styles

1. Buka file styles.xml dan tambahkan kode berikut.

<style name="SportsDetailText" 
                   parent="TextAppearance.AppCompat.Subhead"/>
<style name="SportsTitle" 
                   parent="TextAppearance.AppCompat.Headline"/>

2. Buat resource file baru dengan nama strings.xml dengan qualifier Smallest Screen Width, value 600 .

3. Copy-paste kode dari strings.xml original ke file strings.xml (sw600dp) seperti berikut.

<style name="SportsTitle" 
                   parent="TextAppearance.AppCompat.Display1"/>
<style name="SportsTitle" 
                  parent="TextAppearance.AppCompat.Display1">
    <item name=
          "android:textColor">?android:textColorPrimary</item>
</style>

4. Setelah itu, buka file list_item.xml dan ubah style pada atribut title (TextView) menjadi seperti berikut.

style="@style/SportsTitle"

5. Buka file list_item.xml dan ubah style pada atribut newsTitle (TextView) dan subTitle (TextView) menjadi seperti berikut.

style="@style/SportsDetailText"

6. Jalankan aplikasi.

2.3 Mengupdate Tablet Sports Detail Styles

1. Tambahkan style berikut pada file styles.xml.

<style name="SportsDetailTitle" 
                   parent="TextAppearance.AppCompat.Headline"/>

2. Tambahkan style berikut pada file styles.xml (sw600dp) .

<style name="SportsDetailTitle" 
                   parent="TextAppearance.AppCompat.Display3"/>

3. Buka file activity_detail.xml. Ubah style newsTitleDetail (TextView) dan subTitleDetail (TextView) menjadi seperti berikut.

style="@style/SportsDetailText"

4. Masih pada file activity_detail.xml, ubah style titleDetail (TextView) menjadi seperti berikut.

style="@style/SportsDetailTitle"

5. Jalankan aplikasi.

Tugas 3 : Localize App

3.1 Menambah Localized File string.xml

1. Buat resource file value baru.
2. Beri nama strings.xml dan pilih Locale dari daftar Available qualifiers.
3. Pada panel Language, pilih en: English dan pada panel Specific Region Only, pilih US: United States. Klik OK.

3.2 Menjalankan Aplikasi Menggunakan Bahasa yang Berbeda

1. Pada Android Virtual Device (AVD) , pilih Settings.

2. Pilih pengaturan Languages & input.

Pengaturan Languages & input pada HP Nexus 7

3. Pilih bahasa selain bahasa Inggris US. Di sini, saya pilih bahasa Indonesia.

4. Drag bahasa Indonesia ke urutan paling atas atau nomor 1 .

5. Jalankan aplikasi dalam mode bahasa Inggris US. Maka, akan muncul tampilan item Soccer.

Tampilan aplikasi dalam mode English (United States)

6. Coba jalankan kembali aplikasi dalam mode bahasa Indonesia. Maka, akan muncul tampilan item Football.

Tampilan aplikasi dalam mode Bahasa Indonesia

Sumber:

https://codelabs.developers.google.com/codelabs/android-training-adaptive-layouts/