Android Layouts Tutorial

Oleh Pojok Guru

Rabu, 27 Juli 2016

Bagikan :

Tweet

Hai sobat, pada artikel sebelumnya wacana perbedaan UI dan UX aku telah menjelaskan pengertian UI dan UX, perbedaan UI dan UX, penerapan dan pengaruhnya. Dan pada kesempatan kali ini aku akan menjelaskan wacana Layout pada Android.

Menurut website official Android, Layout dalam android mendefinisikan struktur visual untuk antarmuka pengguna ibarat UI sebuah acara atau widget aplikasi. Layout yaitu class yang menampung komponen yang ada pada layar, mengatur komonen dan membuatnya menjadi satu. 

Layout android mempunyai bermacam macam tipe ibarat linear layout, reative layout, dan scrollview layout. Berikut klarifikasi masing-masing tipe :

Linear Layout

Linear layout yaitu view group yang menyusun komponen di dalamnya di satu tata letak secara garis lurus, horizontal maupun vertical. Untuk mengaturnya, teman sanggup memakai atribut android:orientation. Komponen yang ada di dalamnya akan tersusun satu demi satu secara horizontal maupun vertical. Berikut yaitu rujukan instruksi untuk menciptakan linear layout:

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"     xmlns:tools="http://schemas.android.com/tools"     android:layout_width="match_parent"     android:layout_height="match_parent"     android:paddingBottom="@dimen/activity_vertical_margin"     android:paddingLeft="@dimen/activity_horizontal_margin"     android:paddingRight="@dimen/activity_horizontal_margin"     android:paddingTop="@dimen/activity_vertical_margin"     android:orientation="vertical"     tools:context="com.blogsetyaaji.linearlayout.MainActivity">      <LinearLayout         android:layout_width="match_parent"         android:layout_height="wrap_content"         android:orientation="vertical">          <TextView             android:layout_width="match_parent"             android:layout_height="wrap_content"             android:text="Baris Pertama"             android:textSize="20sp"/>          <TextView             android:layout_width="match_parent"             android:layout_height="wrap_content"             android:text="Baris Kedua"             android:textSize="20sp"/>      </LinearLayout>      <LinearLayout         android:layout_width="match_parent"         android:layout_height="wrap_content"         android:orientation="horizontal"         android:paddingTop="20dp">          <TextView             android:layout_width="wrap_content"             android:layout_height="wrap_content"             android:text="Baris Pertama"             android:textSize="20sp"             android:paddingRight="10dp"/>          <TextView             android:layout_width="wrap_content"             android:layout_height="wrap_content"             android:text="Baris Kedua"             android:textSize="20sp"/>      </LinearLayout>  </LinearLayout>

Untuk instruksi di atas, maka tampilannya akan ibarat gambar di bawah ini:

Dalam linear layout, terdapat konfigurasi atau atribut di dalamnya ibarat berikut ini :

• Orientation; untuk mengonfigurasi tampilan layout menurut baris atau kolom atau horizontal atau vertical. Contoh sintaksnya yaitu : android:orientation=”vertical”
• Weight; atribut ini mengatur seberapa pentig komponen untuk berapa banyak ruang yang diperlukan untuk tampil di layar. Komponen yang mempunyai kepentingan paling banyak sanggup mengisi ruang yang tersisa.

Relative layout

Dengan relative layout, kita sanggup mengatur objek sesuai atau mengikuti objek lain, berbeda dengan linear layout yang objeknya saling berurutan, relative layout bersifat lebih bebas. Berikut rujukan sintaks untuk relative 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:layout_width="match_parent"     android:layout_height="match_parent"     android:paddingBottom="@dimen/activity_vertical_margin"     android:paddingLeft="@dimen/activity_horizontal_margin"     android:paddingRight="@dimen/activity_horizontal_margin"     android:paddingTop="@dimen/activity_vertical_margin"     tools:context="com.blogsetyaaji.relativelayout.MainActivity">      <Button         android:layout_width="match_parent"         android:layout_height="wrap_content"         android:layout_alignParentTop="true"         android:text="ATAS" />      <Button         android:id="@+id/btnbawah"         android:layout_width="match_parent"         android:layout_height="wrap_content"         android:layout_alignParentBottom="true"         android:text="BAWAH" />      <Button         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:layout_above="@+id/btnbawah"         android:layout_alignParentRight="true"         android:text="KANAN" />      <Button         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:layout_above="@+id/btnbawah"         android:layout_alignParentLeft="true"         android:text="KIRI" />  </RelativeLayout>




Hasi dari instruksi di atas akan menjadi ibarat gambar di bawah ini:

Untuk objek yang berada di linear layout, teman sanggup memakai atribut layout sesuai kebutuhan ibarat atribut android:layout_alignParentLeft, android:layout_above, android:layout_toLeftOf dan sebagainya.

Frame Layout

Frame layout biasanya dipakai untuk menampilkan satu komponen, apabila teman ingin menampilkan satu komponen lebih, maka frame layout akan menampilkannya secara tumpang tindih. Berikut rujukan sintaksnya :

<?xml version="1.0" encoding="utf-8"?> <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"     xmlns:tools="http://schemas.android.com/tools"     android:layout_width="match_parent"     android:layout_height="match_parent"     android:paddingBottom="@dimen/activity_vertical_margin"     android:paddingLeft="@dimen/activity_horizontal_margin"     android:paddingRight="@dimen/activity_horizontal_margin"     android:paddingTop="@dimen/activity_vertical_margin"     tools:context="com.blogsetyaaji.framelayout.MainActivity">      <TextView         android:layout_width="match_parent"         android:layout_height="match_parent"         android:text="I am in here"         android:gravity="center"         android:textSize="24sp" />          </FrameLayout>

Hasil dari instruksi di atas akan menjadi ibarat gambar berikut ini :

Absolute layout

Absolute layout dipakai untuk mengatur objek menurut koordinat x dan y, x untuk ke samping dan y untuk ke bawah. Contoh sintaksnya ibarat berikut ini :

<?xml version="1.0" encoding="utf-8"?> <AbsoluteLayout xmlns:android="http://schemas.android.com/apk/res/android"     xmlns:tools="http://schemas.android.com/tools"     android:layout_width="match_parent"     android:layout_height="match_parent"     android:paddingBottom="@dimen/activity_vertical_margin"     android:paddingLeft="@dimen/activity_horizontal_margin"     android:paddingRight="@dimen/activity_horizontal_margin"     android:paddingTop="@dimen/activity_vertical_margin"     tools:context="com.blogsetyaaji.absolutelayout.MainActivity">      <TextView         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:text="Text 1"         android:textSize="20sp"         android:layout_x="30dp"         android:layout_y="10dp"/>      <TextView         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:text="Text 2"         android:textSize="20sp"         android:layout_x="50dp"         android:layout_y="50dp"/>      <TextView         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:text="Text 3"         android:textSize="20sp"         android:layout_x="70dp"         android:layout_y="100dp"/>      <Button         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:text="tombol"         android:layout_x="100dp"         android:layout_y="150dp" />  </AbsoluteLayout>

Dan kesudahannya akan ibarat berikut ini :

Scrollview layout

Scrollview layout dipakai untuk mengatur atau menampikan kumpulan objek yang banyak dan detail serta objek yang melebihi ukuran layar. Dengan memakai scrollview, teman sanggup menggeser layar ke bawah atau ke samping tergantung atribut orientasi yang digunakan, vertcal atau horizontal. Berikut rujukan sintaksnya :

<?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:layout_width="match_parent"     android:layout_height="match_parent"     android:paddingBottom="@dimen/activity_vertical_margin"     android:paddingLeft="@dimen/activity_horizontal_margin"     android:paddingRight="@dimen/activity_horizontal_margin"     android:paddingTop="@dimen/activity_vertical_margin"     tools:context="com.blogsetyaaji.scrollviewlayout.MainActivity">      <LinearLayout         android:layout_width="match_parent"         android:layout_height="wrap_content"         android:orientation="vertical">      <TextView         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:text="Baris Satu" />          <TextView             android:layout_width="wrap_content"             android:layout_height="wrap_content"             android:text="Baris Dua" />          <TextView             android:layout_width="wrap_content"             android:layout_height="wrap_content"             android:text="Baris Tiga" />          <Button             android:layout_width="wrap_content"             android:layout_height="wrap_content"             android:text="tombol"/>          <TextView             android:layout_width="wrap_content"             android:layout_height="wrap_content"             android:text="Baris Lima" />      </LinearLayout>  </ScrollView>

Dan kesudahannya akan ibarat berikut ini :

Dari beberapa layout di atas, maka teman juga sanggup menggabungkannya menjadi satu tampilan sesuai kebutuhan sobat. Sebagai rujukan yang aku buat di bawah 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:layout_width="fill_parent"     android:layout_height="wrap_content"     android:layout_weight="1"     android:orientation="vertical"     tools:context="com.blogsetyaaji.layout.MainActivity">      <RelativeLayout         android:layout_width="match_parent"         android:layout_height="wrap_content">          <Button             android:layout_width="wrap_content"             android:layout_height="wrap_content"             android:layout_alignParentBottom="true"             android:layout_alignParentLeft="true"             android:text="KIRI" />          <Button             android:layout_width="wrap_content"             android:layout_height="wrap_content"             android:layout_alignParentBottom="true"             android:layout_alignParentRight="true"             android:text="KANAN" />          <Button             android:layout_width="wrap_content"             android:layout_height="wrap_content"             android:layout_alignParentTop="true"             android:layout_centerHorizontal="true"             android:layout_marginTop="100dp"             android:text="TENGAH" />          <LinearLayout             android:layout_width="fill_parent"             android:layout_height="fill_parent"             android:layout_weight="1"             android:orientation="vertical">              <LinearLayout                 android:layout_width="fill_parent"                 android:layout_height="250dp"                 android:layout_weight="1"                 android:orientation="horizontal">                  <TextView                     android:layout_width="wrap_content"                     android:layout_height="fill_parent"                     android:layout_weight="1"                     android:background="#03A9F4"                     android:gravity="center_horizontal"                     android:text="Baris Kesatu"                     android:textColor="#ffffff"                     android:textSize="30sp" />                  <TextView                     android:layout_width="wrap_content"                     android:layout_height="fill_parent"                     android:layout_weight="1"                     android:background="#00BCD4"                     android:gravity="center_horizontal"                     android:text="Baris Kedua"                     android:textColor="#ffffff"                     android:textSize="30sp" />              </LinearLayout>              <LinearLayout                 android:id="@+id/Linear2"                 android:layout_width="fill_parent"                 android:layout_height="350dp"                 android:layout_weight="1"                 android:orientation="vertical">                  <TextView                     android:layout_width="match_parent"                     android:layout_height="fill_parent"                     android:layout_weight="1"                     android:background="#F48FB1"                     android:gravity="center_horizontal"                     android:text="Baris Pertama"                     android:textColor="#ffffff"                     android:textSize="30sp" />                  <TextView                     android:layout_width="match_parent"                     android:layout_height="fill_parent"                     android:layout_weight="1"                     android:background="#F06292"                     android:gravity="center_horizontal"                     android:text="Baris Kedua"                     android:textColor="#ffffff"                     android:textSize="30sp" />                  <TextView                     android:layout_width="match_parent"                     android:layout_height="fill_parent"                     android:layout_weight="1"                     android:background="#EC407A"                     android:gravity="center_horizontal"                     android:text="Baris Ketiga"                     android:textColor="#ffffff"                     android:textSize="30sp" />                  <TextView                     android:layout_width="match_parent"                     android:layout_height="fill_parent"                     android:layout_weight="1"                     android:background="#E91E63"                     android:gravity="center_horizontal"                     android:text="Baris Keempat"                     android:textColor="#ffffff"                     android:textSize="30sp" />              </LinearLayout>              <FrameLayout                 android:layout_width="match_parent"                 android:layout_height="match_parent">                  <TextView                     android:layout_width="match_parent"                     android:layout_height="200dp"                     android:background="#FFEB3B"                     android:gravity="center"                     android:text="Farame Layout"                     android:textColor="#212121"                     android:textSize="30sp" />              </FrameLayout>              <AbsoluteLayout                 android:layout_width="match_parent"                 android:layout_height="wrap_content"                 android:background="#009688">                  <TextView                     android:layout_width="wrap_content"                     android:layout_height="wrap_content"                     android:layout_x="10dp"                     android:layout_y="20dp"                     android:text="Text Absolut 1"                     android:textColor="#ffffff"                     android:textSize="30sp" />                  <TextView                     android:layout_width="wrap_content"                     android:layout_height="wrap_content"                     android:layout_x="95dp"                     android:layout_y="100dp"                     android:text="Text Absolut 2"                     android:textColor="#ffffff"                     android:textSize="30sp" />              </AbsoluteLayout>          </LinearLayout>      </RelativeLayout>  </ScrollView>

Hasil dari rujukan instruksi di atas akan ibarat gambar berikut ini :

Pada pada dasarnya semua jenis layout mempunyai fungsi dan bab masing-masing, tergantung kebutuhan kita. Sekian klarifikasi singkat aku wacana tutorial dan macam layout pada android, agar membantu teman yang sedang mencar ilmu ibarat saya.

Tag : Pemrograman, Pemrograman Android