PENGENALAN LAYOUTING (LinearLayout, RelativeLayout, TableLayout, AbsoluteLayout) PADA ANDROID STUDIO

Berikut adalah beberapa contoh praktikum Pengenalan Layout : 

A. Praktikun Linear Layout 1

• Buka Aplikasi Android Studio. Setelah muncul seperti ini, klik Star a new Android Studio project.

• Pilih template yang akan digunakan sesuai dengan kebutuhan, dan next.

• Akan muncul tampilan seperti dibawah ini. Kita hanya perlu memberi nama project pada “Name” dan pilih lokasi penyimpanan project-nya akan disimpan difolder mana pada bagian “Save location”, selebihnya cukup biarkan saja. Untuk name kita beri nama “LinearLayout1”. Jika sudah, klik “Finish”.

• Ketikkan script dibawah ini : 

<?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="wrap_content"

    android:orientation="vertical"

    tools:context=".MainActivity">

    <TextView

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:background="#6645C0"

        android:padding="16dp"

        android:text="Vertical 1"

       android:textColor="@android:color/white" />

   <TextView

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:background="#F3D029"

        android:padding="16dp"

        android:text="Vertical 2"

       android:textColor="@android:color/white" />

    <LinearLayout

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:orientation="horizontal">

         <TextView

         android:layout_width="wrap_content"

         android:layout_height="wrap_content"

         android:background="#26A96C"

         android:padding="16dp"

         android:text="horizontal 1"

       android:textColor="@android:color/white" />

          <TextView

          android:layout_width="wrap_content"

          android:layout_height="wrap_content"

          android:background="#F05D5E"

          android:padding="16dp"

          android:text="horizontal 2"

       android:textColor="@android:color/white" />

           <TextView

           android:layout_width="wrap_content"

           android:layout_height="wrap_content"

           android:background="#3322AA"

           android:padding="16dp"

           android:text="horizontal 3"

       android:textColor="@android:color/white" />

        </LinearLayout>

    </LinearLayout>

• Lalu klik Run/dijalankan, maka akan menghasilkan tampilan seperti dibawah ini: 

B. Praktikum Linear Layout 2

• Buka Aplikasi Android Studio. Setelah muncul seperti ini, klik Star a new Android Studio project. 
• Pilih template yang akan digunakan sesuai dengan kebutuhan, dan next.
• Pada langkah ini pengisiannya sama seperti praktikum sebelumnya. Hanya saja Namanya kita ganti “LinearLayout2”.

• Ketikkan script yang ada dibawah ini : 

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:paddingLeft="16dp"

    android:paddingRight="16dp"

    android:orientation="vertical" >

    <EditText

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:hint="to" />

    <EditText

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:hint="subject" />

    <EditText

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:layout_weight="1"

        android:gravity="top"

        android:hint="message" />

    <Button

        android:layout_width="100dp"

        android:layout_height="wrap_content"

        android:layout_gravity="right"

        android:text="send" />

</LinearLayout>

• Maka, jika di Run akan menampilkan seperti ini : 

C. Praktikum Relative Layout 1

• Buka Aplikasi Android Studio. Setelah muncul seperti ini, klik Star a new Android Studio project. 
• Pilih template yang akan digunakan sesuai dengan kebutuhan, dan next.
• Pada langkah ini pengisiannya sama seperti praktikum sebelumnya. Hanya saja Namanya kita ganti “RelativeLayout”.

• Lalu kita ketikkan script dibawah ini : 

<?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"

    tools:context=".MainActivity">

    <Button

        android:id="@+id/button1"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_centerInParent="true"

        android:text="Tengah"

        android:textSize="18sp" />

    <Button

        android:id="@+id/button2"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_alignParentLeft="true"

        android:layout_centerHorizontal="true"

        android:text="Kiri Atas"

        android:textSize="18sp" />

    <Button

        android:id="@+id/button3"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_centerHorizontal="true"

        android:text="T.Atas"

        android:textSize="18sp" />

    <Button

        android:id="@+id/button4"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_alignParentRight="true"

        android:layout_centerHorizontal="true"

        android:text="Kanan Atas"

        android:textSize="18sp" />

    <Button

        android:id="@+id/button5"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_centerVertical="true"

        android:text="Kiri.T"

        android:textSize="18sp" />

    <Button

        android:id="@+id/button6"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_alignParentRight="true"

        android:layout_centerVertical="true"

        android:text="Kanan T"

        android:textSize="18sp" />

    <Button

        android:id="@+id/button7"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_alignParentLeft="true"

        android:layout_alignParentBottom="true"

        android:text="Kiri Bawah"

        android:textSize="18sp" />

    <Button

        android:id="@+id/button8"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_alignParentBottom="true"

        android:layout_centerHorizontal="true"

        android:text="T.Bawah"

        android:textSize="18sp" />

    <Button

        android:id="@+id/button9"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_alignParentRight="true"

        android:layout_alignParentBottom="true"

        android:text="Kanan Bawah"

        android:textSize="18sp" />

</RelativeLayout>

• Dan jika dijalankan akan menghasilkan tampilan seperti dibawah ini : 

D. Praktikum Relative Layout 2

• Buka Aplikasi Android Studio. Setelah muncul seperti ini, klik Star a new Android Studio project. 
• Pilih template yang akan digunakan sesuai dengan kebutuhan, dan next.
• Pada langkah ini pengisiannya sama seperti praktikum sebelumnya. Hanya saja Namanya kita ganti “RelativeLayout2”.

• Selanjutnya ketikkan script dibawah ini :

 <?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:background="#BAECBD">

    <EditText

        android:id="@+id/name"

        android:layout_width="200dp"

        android:layout_height="wrap_content"

        android:background="#f8eff8f3"

        android:hint="Nama"

        android:padding="16dp" />

    <EditText

        android:id="@+id/email"

        android:layout_width="210dp"

        android:layout_height="wrap_content"

        android:layout_marginLeft="5dp"

        android:layout_toRightOf="@+id/name"

        android:background="#f8eff8f3"

        android:hint="Alamat Email"

        android:padding="16dp" />

    <EditText

        android:id="@+id/subject"

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:layout_below="@+id/name"

        android:layout_marginTop="16dp"

        android:background="#f8eff8f3"

        android:hint="Subjek"

        android:padding="16dp" />

    <EditText

        android:id="@+id/message"

        android:layout_width="match_parent"

        android:layout_height="200dp"

        android:layout_below="@+id/subject"

        android:layout_marginTop="16dp"

        android:background="#f8eff8f3"

        android:gravity="top"

        android:hint="Pesan"

        android:padding="16dp" />

    <Button

        android:id="@+id/submit"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_below="@+id/message"

        android:layout_centerHorizontal="true"

        android:padding="16dp"

        android:text="KIRIM" />

    

</RelativeLayout>

• Lalu klik Run, dan akan muncul tampilan seperti ini : 

E. Praktikum Tabel Layout 1

• Buka Aplikasi Android Studio. Setelah muncul seperti ini, klik Star a new Android Studio project. 
• Pilih template yang akan digunakan sesuai dengan kebutuhan, dan next.
• Pada langkah ini pengisiannya sama seperti praktikum sebelumnya. Hanya saja Namanya kita ganti "TabelLayout”.

• Ketikkan script dibawah ini : 

<?xml version="1.0" encoding="utf-8"?>

<TableLayout

    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="10dp"

    android:stretchColumns="1, 3"

    tools:context=".MainActivity">

    <TableRow

        android:layout_width="match_parent"

        android:layout_height="match_parent">

        <TextView

            android:id="@+id/TextView"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:layout_span="4"

            android:gravity="center"

            android:text="Form Login"

            android:textSize="22sp" />

    </TableRow>

    <TableRow

        android:layout_width="match_parent"

        android:layout_height="match_parent">

        <TextView

            android:id="@+id/TextView2"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:paddingRight="10dp"

            android:text="User name" />

        <EditText

            android:id="@+id/editText"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:layout_span="3"

            android:ems="10"

            android:inputType="textPersonName" />

    </TableRow>

    <TableRow

        android:layout_width="match_parent"

        android:layout_height="match_parent">

        <TextView

            android:id="@+id/textView3"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:paddingRight="10dp"

            android:text="Password" />

        <EditText

            android:id="@+id/editText2"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:layout_span ="3"

            android:ems="10"

            android:inputType="textPassword"/>

    </TableRow>

    <TableRow

        android:layout_width="match_parent"

        android:layout_height="match_parent">

        <Button

            android:id="@+id/button5"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:layout_column="1"

            android:layout_gravity="right"

            android:text="Login" />

        <Button

            android:id="@+id/button6"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="Cancel" />

        <Button

            android:id="@+id/button7"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:layout_gravity="left"

            android:text="Foget Pswd?"/>

    </TableRow>

</TableLayout>

• Jika dijalankan, akan menghasilkan tampilan seperti dibawah ini : 

F. Praktikum Tabel Layout 2

• Buka Aplikasi Android Studio. Setelah muncul seperti ini, klik Star a new Android Studio project. 
• Pilih template yang akan digunakan sesuai dengan kebutuhan, dan next.
• Pada langkah ini pengisiannya sama seperti praktikum sebelumnya. Hanya saja Namanya kita ganti “Komponen (Button & Image)”.

• Ketikkan script dibawah ini :

<?xml version="1.0" encoding="utf-8"?>

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:app="http://schemas.android.com/apk/res-auto"

    xmlns:tools="http://schemas.android.com/tools"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:stretchColumns="1"

    tools:context=".MainActivity">

    <TableRow

        android:background="#22ff">

        <TextView

            android:layout_column="1"

            android:text="Open..."

            android:padding="3dip"/>

        <TextView

            android:text="Ctrl-O"

            android:layout_gravity="right"

            android:padding="3dip"/>

    </TableRow>

    <TableRow

        android:background="#22ff">

        <TextView

            android:layout_column="1"

            android:text="Save.."

            android:padding="3dip"/>

        <TextView

            android:text="Ctrl-S"

            android:layout_gravity="right"

            android:padding="3dip"/>

    </TableRow>

    <View

        android:layout_height="2dip"

        android:background="#FF909090"/>

    <TableRow android:background="#ffff00">

        <TextView

            android:text="X"

            android:padding="3dip"/>

        <TextView

            android:text="Import.."

            android:padding="3dip"/>

    </TableRow>

    <TableRow android:background="#ffff00">

        <TextView

            android:text="X"

            android:padding="3dip"/>

        <TextView

            android:text="Export.."

            android:padding="3dip" />

        <TextView

            android:text="Ctrl-E"

            android:gravity="right"

            android:padding="3dip"/>

    </TableRow>

    <View

        android:layout_height="2dip"

        android:background="#FF909090"/>

    <TableRow android:background="#aaf">

        <TextView

            android:layout_column="1"

            android:text="Quit"

            android:padding="3dip"/>

    </TableRow>

</TableLayout>

• Lalu jalankan/klik Run, maka akan muncul hasil seperti dibawah ini : 

G. Praktikum Absolute Layout

• Buka Aplikasi Android Studio. Setelah muncul seperti ini, klik Star a new Android Studio project. 
• Pilih template yang akan digunakan sesuai dengan kebutuhan, dan next.
• Pada langkah ini pengisiannya sama seperti praktikum sebelumnya. Hanya saja Namanya kita ganti “AbsoluteLayout”.

• Lalu ketikkan script dibawah 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:layout_margin="8dp"

    android:background="#FFF5F5F5"

    tools:context=".MainActivity"

    tools:Ignore="Deprecated">

    <TextView

        android:id="@+id/textView"

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:gravity="center"

        android:text="Contoh Absolute Layout"

        android:textSize="15sp"

        android:textStyle="bold"

        tools:layout_editor_absoluteX="64dp"

        tools:layout_editor_absoluteY="72dp" />

    <EditText

        android:id="@+id/EditText"

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:layout_y="30dp"

        android:hint="Email"

        android:inputType="textPersonName"

        tools:layout_editor_absoluteX="0dp"

        tools:layout_editor_absoluteY="28dp" />

    <EditText

        android:id="@+id/EditText2"

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:layout_y="80dp"

        android:hint="Password"

        android:inputType="textPersonName"

        tools:layout_editor_absoluteX="0dp"

        tools:layout_editor_absoluteY="28dp" />

    <Button

        android:id="@+id/button"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_y="125dp"

        android:text="Masuk"

        tools:layout_editor_absoluteX="0dp"

        tools:layout_editor_absoluteY="126dp" />

    <Button

        android:id="@+id/button2"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_x="215dp"

        android:layout_y="125dp"

        android:text="Daftar"

        tools:layout_editor_absoluteX="0dp"

        tools:layout_editor_absoluteY="126dp" />

</AbsoluteLayout>

• Selanjutnya klik Run/dijalankan, maka akan muncul tampilan seperti dibawah ini : 

Terima Kasih Telah Berkunjung Ke Blog Ini 

Dan Semoga Bermanfaat😊