Materi 4 - Mengenal Layout di Andrid Studio

Imam Ibnu Badri Pemrograman Mobile 21.15

Kompetensi dan Indikator

Kompetensi Dasar:

Mengenal dan memahami berbagai macam layout yang dapat digunakan pada Android
Dapat mengimplementasikan layout dalam mendesain User Interface

Indikator:

Mahasiswa dapat membuat aplikasi dengan memanfaatkan berbagai macam layout yang ada
Mahasiswa dapat membuat tampilan UI yang menarik

Materi

A Dasar Materi

Layout adalah komponen dasar dalam pembentukan (UI) User Interface dan merupakan container utama untuk komponen-komponen lain dalam aplikasi Android. Dalam satu tampilan aplikasi Android bisa terdapat lebih dari satu Layout dengan adanya satu layout sebagai parent. Dan memungkinkan bisa terbentuknya nested layout dalam satu file UI xml.

B Linear Layout

Akan menempatkan komponen-komponen didalamnya secara horizontal atau vertical. LinearLayout memiliki atribut weight untuk masing-masing child view yang terdapat didalam LinearLayout yang berguna untuk mengontrol porsi ukuran view secara Relatif dalam sebuah ruang (space) yang tersedia

➜ Linier Layout Horizontal

<?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:padding="16dp"
    android:orientation="horizontal"
    tools:context="id.ac.uty.layouting.LinierLayout">

    <TextView
        android:id="@+id/edittext1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:hint="Masukkan Text"
        android:inputType="text" />

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Go" />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Cancel" />

</LinearLayout>

➜ Linier Layout Vertical
Perbedaan dengan Horizontal Linier Layout hanya terletak pada "orientation"

android:orientation="vertical"

Akan menghasilkan tampilan sebagai berikut (kiri : horizontal; kanan :vertical):

C Relative Layout

Layout yang paling flexible dikarenakan posisi dari masing-masing komponen didalamnya dapat mengacu secara relatif pada komponen yang lainnya dan juga dapat mengacu secara relatif ke batas layar.

Contoh Relative Layout:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingTop="30dp"
    android:paddingRight="30dp"
    android:paddingLeft="10dp">

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

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_alignParentRight="true"
        android:layout_marginTop="0dp"
        android:layout_marginRight="140dp"
        android:text="Button 2" />

    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignParentBottom="true"
        android:layout_marginRight="31dp"
        android:layout_marginBottom="47dp"
        android:text="Button 3" />

    <Button
        android:id="@+id/button4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/button2"
        android:layout_alignLeft="@+id/button2"
        android:layout_marginLeft="2dp"
        android:layout_marginTop="219dp"
        android:text="Button 4" />

    <Button
        android:id="@+id/button5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/button2"
        android:layout_alignLeft="@+id/button2"
        android:layout_marginLeft="103dp"
        android:layout_marginTop="398dp"
        android:text="Button 5" />

</RelativeLayout>

Akan menghasilkan tampilan sebagai berikut :

D Grid/Table Layout

Grid Layout adalah layout yang memberikan kemudahan dengan mengakomodir komponen didalamnya ke dalam bentuk Grid (Kolom dan Baris). GridLayout merupakan komponen layout yang sangat flexibel dan dapat dimanfaatkan untuk menyederhanakan pembuatan Layout UI yang bersifat kompleks dan bersarang yang terdapat di komponen Layout lainnya.

Contoh Grid/Table Layout :

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="10dp"
    android:shrinkColumns="*"
    android:stretchColumns="*">

    <!-- Baris 1 Kolim 1 -->
   <TableRow
       android:id="@+id/tableRow1"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:gravity="center_horizontal" >
       
       <TextView
           android:id="@+id/textView9"
           android:layout_width="match_parent"
           android:layout_height="wrap_content"
           android:textAlignment="center"
           android:text="Configure Email"
           android:textSize="20dp"
           android:textStyle="bold" />
   </TableRow>
    
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="You can easily configure your email address.."
        android:layout_marginTop="20dp"
        android:textSize="10dp" />
    
    <!-- Baris 2 Kolom 2 -->
    <TableRow
        android:id="@+id/tableRow2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp">
        
        <TextView
            android:id="@+id/textView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Email Address"
            android:textSize="14dp"/>
        
        <EditText
            android:id="@+id/editText1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:ems="10"/>
    </TableRow>

    <!-- Baris 3 Kolom 3 -->
    <TableRow
        android:id="@+id/tableRow3"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >

        <TextView
            android:id="@+id/textView2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Password"
            android:textSize="14dp"/>

        <EditText
            android:id="@+id/editText2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:ems="10"
            android:inputType="textPassword"/>
    </TableRow>

    <!-- Baris 4 Kolom 1 -->
    <TableRow
        android:id="@+id/tableRow4"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="right">

        <Button
            android:id="@+id/button1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Configure"/>
    </TableRow>
</TableLayout>

Akan menghasilkan tampilan sebagai berikut :

E Frame Layout

Layout ini adalah layout yang paling sederhana. Layout ini akan membuat komponen yang ada didalamnya menjadi menumpuk atau saling menutupi satu dengan yang lainnya. Frame layout dapat digunakan untuk menyisipkan widget ke dalam widget lainnya. Komponen yang paling pertama pada layout ini akan menjadi bagian bawah dari komponen-komponen diatasnya. Berikuti lustrasi dari penggunaan FrameLayout terhadap child view yang dimiliki didalamnya.

Contoh Frame Layout :

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!-- Green Background -->
    <TextView
        android:background="#FFFFFF00"
        android:gravity="bottom"
        android:id="@+id/textView1"
        android:layout_height="200dp"
        android:layout_width="200dp"
        android:text="Contoh Text Satu"/>

    <!-- Blue Background -->
    <TextView
        android:background="#FF8004FF"
        android:gravity="bottom"
        android:id="@+id/textView2"
        android:layout_height="150dp"
        android:layout_width="150dp"
        android:text="Contoh Text Dua"
        android:layout_gravity="left|top"/>

</FrameLayout>

Akan menghasilkan tampilan sebagai berikut :

Latihan

Buat Masing-masing 1 Form dengan format layout yang berbeda-beda buat dengan isian data pribadi hingga alamat sekolah.
Jelaskan langkah-langkah membuatnya
Diberikan dosen pengampu

Daftar Isi - Pemrograman Mobile

TeachMeSoft