Android Fundamentals 1.2 Part B: Layout Editor

Alat dan aplikasi yang diperlukan:

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

Membuat Variasi Layout

Membuat varian layout orientasi horizontal

1. Klik ikon Orientation Editor>Landascape pada layout toolbar untuk melihat tampilan aplikasi pada mode horizontal.

Orientation Editor>Landascape

Tampilan horizontal

2. Kemudian pilih Orientation Editor>Create Landscape Variation.

3. Ubah tab Design menjadi tab Text. Lalu periksa panel Project>Android>res>layout maka akan muncul file activity_main.xml (land).

activity_main.xml (land)

4. Masih pada file activity_main.xml (land) klik panel Preview pada bagian sebelah kanan.

Tampilan panel Preview

5. Pada tag TextView, ubah atribut android:textSize=”160sp” menjadi android:textSize=”120sp” . Maka panel Preview akan menampilkan perubahan atribut.

Tampilan XML android:textSize=”120sp” pada panel Preview

6. Jalankan aplikasi pada Android Virtual Device (AVD) , lalu pilih opsi rotate.

Tampilan landspace pada AVD

Membuat variasi layout pada tablet

1. Selanjutnya yakni membuat tampilan pada tablet. Pada file land\activity_main.xml, pilih ikon di sebelah Orientation Editor. Pilih tablet yang diinginkan. Misal: Nexus 9 . Kemudian, klik ikon Orientation Editor>Create Tablet Version. Maka akan muncul tampilan file sw600dp\activity_main.xml.

Tampilan file sw600dp\activity_main.xml

2. Pastikan bahwa layout editor dalam keadaan Potrait.

Layout editor dalam keadaan Potrait

3. Hapus semua constraints dengan mengeklik ikon Clear All Constraints seperti pada gambar. Semua constraints atau elemen yang terhubung akan terhapus.

4. Perkecil ukuran show_count button dengan mengarahkan kursor pada poin yang berada di sudut-sudut button.

5. Atur panel Attributes milik button_toast dan button_count dengan ketentuan:

layout_width: wrap_constraint

layout_height: wrap_constraint

TextView>textSize: 60sp

button_toast

button_toast

button_count

6. Hubungkan button_count dengan button_toast dengan mengeklik lalu mengarahkan arah panah dari sisi kiri button_count menuju sisi kiri button_toast.

Tampilan button_count terhubung dengan button_toast

7. Hubungkan button_count menggunakan Baseline Constraint menuju button_toast.

Ikon Edit Baseline

Arahkan menuju button_toast

Tampilan button_count ketika telah terhubung dengan button_toast menggunakan baseline constraint

8. Perhatikan pada panel Conmponent Tree. Terdapat kesalahan pada button_toast (ditunjukkan dengan simbol merah) , maka untuk memperbaikinya bisa dengan membuat constraint ke arah kiri dan atas pada button_toast. Caranya yakni klik poin pada sisi kiri button_toast lalu tarik garis ke arah kiri, kemudian klik poin atas pada button_toast lalu tarik garis ke arah atas.

Membuat constraint ke kiri pada button_toast ketika muncul simbol merah (terjadi kesalahan)

Membuat constraint ke atas pada button_toast ketika muncul simbol merah (terjadi kesalahan)

Constraint pada button_toast berhasil dibuat

9. Pilih button_toast dan button_count dengan mengeklik button_toast kemudian Shift+button_count. Lalu klik ikon Pack>Expand Horizontally pada toolbar.

Hasil dari Expand Horizontally

10. Hubungkan constraint dari show_count menuju sisi bawah button_toast. Kemudian, lanjutkan membuat constraint dari show_count ke sisi kanan, kiri, bawah.

Menghubungkan constraint show_button ke sisi bawah button_toast

Menghubungkan constraint show_button ke sisi kanan

Hasil dari constraint show_button sesuai petunjuk pada langkah 10

11. Atur attributes show_count dengan ketentuan berikut:

layout_width: match_constraint

layout_height: match_constraint

TextView>textSize: 200sp

Pengaturan pada panel Attributes show_button

Pengaturan pada panel Attributes show_button

12. Klik ikon Orientation Editor>Landascape.

Orientation Editor>Landascape

Tampilan aplikasi mode landscape pada tablet

Coding Challenge 1

Membuat tampilan mode landscape untuk tablet sehingga aplikasi terlihat seperti berikut.

codelabs.developers.google.com

Langkah-langkah:

1. Pastikan file saat ini adalah file sw600dp\activity_main.xml. Klik ikon Orientation Editor>Create Other… .

Orientation Editor>Create Other…

2. Pada jendela Select Resource Directory, pilih Available qualifiers: > Size.

Available qualifiers: > Size

3. Android Studio akan mengarahkan ke file baru dengan nama xlarge\activity_main.xml.

File xlarge\activity_main.xml

4. Pilih button_toast dan button_count secara bersamaan. Lalu klik ikon Align>Horizontally.

Align>Horizontally

5. Tampilan akan berubah seperti pada gambar.

Tampilan akhir

Mengubah Layout Menjadi LinearLayout

Mengubah root view group menjadi LinearLayout

1. Buka proyek Hello Toast- Copy>app>src>main>res>layout>activity_main.xml. Pastikan tampilan file activity_main.xml merupakan tampilan tab Text.
2. Pada baris ke-2 , terdapat kode

<android.support.constraint.ConstraintLayout xmlns:android="…

3. Ubah

<android.support.constraint.ConstraintLayout

menjadi tag <LinearLayout

<LinearLayout xmlns:android=”…

4. Pastikan bahwa tag penutup juga diubah menjadi </LinearLayout>

5. Di bawah tag <LinearLayout tambahkan kode android:orientation="vertical ” setelah kode android:layout_height.

Mengubah elemen atribut untuk LinearLayout

1. Buka proyek Hello Toast-Copy>app>src>main>res>layout>activity_main.xml. Pastikan tampilan file activity_main.xml merupakan tampilan tab Text.
2. Pada elemen button button_toast, ubahlah atribut berikut:

android:layout_width=”0dp”

android:layout_width=”0dp”

menjadi

android:layout_width=”match_parent”

android:layout_width=”match_parent”

3. Hapus atribut berikut pada button_toast.

app:layout_constraintEnd_toEndOf=”parent”

app:layout_constraintStart_toStartOf=”parent”

app:layout_constraintTop_toTopOf=”parent”

4. Pada elemen button button_count, ubahlah atribut berikut:

android:layout_width=”0dp”

menjadi

android:layout_width=”match_parent”

5. Hapus atribut berikut pada button_count.

app:layout_constraintEnd_toEndOf=”parent”

app:layout_constraintStart_toStartOf=”parent”

app:layout_constraintTop_toTopOf=”parent”

6. Pada elemen TextView show_count, ubahlah atribut berikut:

android:layout_width=”0dp”

android:layout_height=”0dp”

menjadi

android:layout_width=”match_parent”

android:layout_height=”wrap_parent”

7. Hapus atribut berikut pada show_count.

app:layout_constraintBottom_toTopOf=”@+id/button_count”

app:layout_constraintEnd_toEndOf=”parent”

app:layout_constraintStart_toStartOf=”parent”

app:layout_constraintTop_toBottomOf=”@+id/button_toast”

8. Klik pada tab Preview di bagian kanan Android Studio.

Mengubah Posisi Elemen pada LinearLayout

1. Buka proyek Hello Toast-Copy>app>src>main>res>layout>activity_main.xml. Pastikan tampilan file activity_main.xml merupakan tampilan tab Text.
2. Blok button button_count beserta seluruh atributnya dari tag <Button sampai tag penutup /> . Klik kanan pada mouse>Cut atau tekan Ctrl+x pada keyboard.

3. Letakkan kursor pada tag /> antara elemen TextView dan sebelum </LinearLayout> . Klik kanan pada mouse>Paste.

4. Lihat pada tab Preview. Posisi button_count berada di bawah show_count.

Menambah Weight (Bobot) pada Elemen TextView

1. Buka proyek Hello Toast-Copy>app>src>main>res>layout>activity_main.xml. Pastikan tampilan file activity_main.xml merupakan tampilan tab Text.
2. Cari elemen TextView show_count, dan tambahkan atribut berikut:

android:layout_weight=”1"

3. Lihat perubahan pada tab Preview.

Mengubah Layout Menjadi RelativeLayout

Mengubah LinearLayout Menjadi RelativeLayout

1. Buka proyek Hello Toast-Copy>app>src>main>res>layout>activity_main.xml. Pastikan tampilan file activity_main.xml merupakan tampilan tab Text.
2. Ubah <LinearLayout pada bagian atas menjadi <RelativeLayout. Begitu pula pada tag penutup, ubah menjadi </RelativeLayout> .

Menyusun Kembali Tampilan pada RelativeLayout

1. Klik pada tab Preview.

2. Tambahkan atribut berikut pada button_count.

android:layout_below=”@+id/show_count”

android:layout_centerHorizontal=”true”

3. Tambahkan atribut berikut pada show_count.

android:layout_below=”@+id/button_toast”

android:layout_alignParentLeft=”true”

android:layout_alignParentStart=”true”

4. Lihat perubahan pada tab Preview.

Sumber:

https://codelabs.developers.google.com/codelabs/android-training-layout-editor-part-b/#2