Menyesuaikan Orientasi Dengan Menggunakan Resize dan Re-posisi

Selain dengan teknik membuat jangkar untuk view-view kita ke empat tepi layar, cara lain yang mudah untuk meng-kustom UI berdasarkan orientasi layar adalah dengan membuat folder “res/layout” yang berisi file layout XML untuk kedua orientasi. Untuk mendukung mode landscape, kita bisa membuat folder baru di dalam folder “res” dan menamai folder tersebut “layout-land” (untuk landscape), seperti gambar berikut di bawah ini.



Pada dasarnya file “activity_main.xml” yang ada dalam folder “layout” akan membuat UI untuk activity dalam mode portrait, dan file “activity_main.xml” di dalam folder “layout-land” membuat UI dalam mode landscape.

Berikut di bawah ini adalah file layout “activity_main.xml” dalam folder “layout”:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
tools:context="id.co.blogspot.diansano.apppertama.MainActivity">

<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Kiri Atas"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"/>

<Button
android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Kanan Atas"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"/>

<Button
android:id="@+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Kiri Bawah"
android:layout_alignParentLeft="true"
android:layout_alignParentBottom="true"/>

<Button
android:id="@+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Kanan Bawah"
android:layout_alignParentRight="true"
android:layout_alignParentBottom="true"/>

<Button
android:id="@+id/button5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Tengah"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"/>
</RelativeLayout>
Sedangkan berikut di bawah ini adalah file layout “activity_main.xml” di dalam folder “layout-land”. Kode yang ditulis dengan huruf tebal adalah view tambahan yang sengaja ditambahkan ketika tampilan dalam mode landscape untuk menekankan perbedaan yang terjadi dalam kedua orientasi tersebut:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
tools:context="id.co.blogspot.diansano.apppertama.MainActivity">

<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Kiri Atas"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"/>

<Button
android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Kanan Atas"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"/>

<Button
android:id="@+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Kiri Bawah"
android:layout_alignParentLeft="true"
android:layout_alignParentBottom="true"/>

<Button
android:id="@+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Kanan Bawah"
android:layout_alignParentRight="true"
android:layout_alignParentBottom="true"/>

<Button
android:id="@+id/button5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Tengah"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"/>

<Button
android:id="@+id/button6"
android:layout_width="180px"
android:layout_height="wrap_content"
android:text="Tengah Atas"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:layout_alignParentTop="true"/>

<Button
android:id="@+id/button7"
android:layout_width="180px"
android:layout_height="wrap_content"
android:text="Tengah Bawah"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:layout_alignParentBottom="true"/>

</RelativeLayout>
Berikut di bawah ini adalah tampilan dalam kedua mode portrait dan landscape.

No comments: