#Android Studio

Android Studio Part 4 : Pengenalan Layout Android

By Muzanni
4 September 2017
Android Studio

Pengenalan Layout Android

Assalamualaikum,
Hallo sahabat malasngoding, pada tutorial android studio part 4 ini akan kita pelajari sekilas pengenalan layout android. saya berharap setelah mempelajari materi tentang layout ini, kalian bisa memahami penggunaan layout pada android dan dapat membuat tampilan semanarik mungkin aplikasi android yang sedang dibangun.

Ok, langkah pertama kita harus tau dulu apa itu layout ?
Layout merupakan tempat dimana kita melatakkan suatu kompenen yang kita butuhkan dalam aplikasi android sehingga tata letak dari komponen tersebut menjadi lebih teratur dan menarik, nah pada android studio layout sendiri didesain menggunakan bahasa XML. Letak file untuk layuout di android studio dapat dilihat di folder res-layout (dapat dilihat pada gambar berikut) :

Letak file untuk desain layout

Pada android ada beberapa jenis layout yang bisa digunakan sesuai dengan kebutuhan, adapun jenis layout tersebut antara lain :

Jenis Layout Android

Untuk jenis layout dapat dilihat pada gambar di atas, sedangkan fungsi untuk masing-masing layout tersebut dapat di baca lebih jelas di sini.

Dalam mendesain halaman untuk aplikasi android kita bisa menggunakan beberapa jenis layout dalam satu halaman, dan dalam satu layout kita bisa meletakkan lebih dari satu jenis komponen. Untuk masing-masing contoh layout saya harapkan dapat di peraktekan sendiri penerapannya dalam program yang sedang di bangun.

sebagai contoh saya ingin membuat sebuah tampilan sebagai berikut :

Contoh Penggunaan Layout

Dalam membuat tampilan seperti di atas, kita bisa menggunakan jenis layout Relative, Linear, ataupun counstrain. tapi disini saya menggunakan Relatif dan Linear Layout. Untuk penggunaannya dapat diperhatikan pada source code berikut :

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

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

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

android:layout_width="match_parent"

android:layout_height="match_parent">

<LinearLayout

android:id="@+id/linearLayout"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:background="@color/colorAccent"

android:weightSum="1">

<TextView

android:id="@+id/textView"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_alignParentLeft="true"

android:layout_alignParentStart="true"

android:layout_alignParentTop="true"

android:layout_marginTop="46dp"

android:textColor="#000"

android:gravity="center"

android:text="Judul"/>

</LinearLayout>

<LinearLayout

android:id="@+id/linearLayout2"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_below="@+id/linearLayout">

<ImageView

android:paddingTop="4dp"

android:id="@+id/imageView2"

android:layout_width="match_parent"

android:layout_height="191dp"

android:layout_alignParentLeft="true"

android:layout_alignParentStart="true"

android:layout_below="@+id/linearLayout"

android:filterTouchesWhenObscured="false"

android:fitsSystemWindows="false"

android:focusable="false"

app:srcCompat="@drawable/image_1"/>

</LinearLayout>

<Button

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:text="NEXT"

android:layout_alignParentBottom="true"

android:layout_alignParentLeft="true"

android:layout_alignParentStart="true"

android:layout_marginBottom="87dp"/>

<TextView

android:id="@+id/textView3"

android:paddingTop="10dp"

android:paddingLeft="10dp"

android:paddingRight="10dp"

android:textColor="#000"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_alignParentLeft="true"

android:layout_alignParentStart="true"

android:layout_centerVertical="true"

android:text="@string/lorem"/>

</RelativeLayout>

Tampilan di atas sangat sederhana, kalian bisa mengembangkan tampilan sesuai dengan kebutuhan. Sebelum menuju ke tutorial selanjutnya, saya harap kalian dapat memperaktekkan pengunaan layout lainnya agar tau fungsi dari masing-masing layout pada android.

Sekian dulu tutorial sekilas pengenalan layout android. kita lanjut lagi di tutorial selanjutnya.
Terimakasih.