Apa sih Layout itu?
Sebelum
kita membahas tentang jenis dan fungsi Layout, alangkah lebih baiknya
jika kita membahas dulu apa sebenernya Layout itu. Layout merupakan
suatu tampilan tata letak di Android untuk mengatur penempatan teks,
gambar, ataupun komponen lainnya sehingga tampilan pada aplikasi yang
dibuat terlihat rapih dan nyaman untuk dilihat oleh pengguna. Android
Studio sendiri masih banyak nih yang masih binggung tentang jenis,fungsi
dan penggunaan layout itu sendiri. Maka pada kesempatan kali ini kita
akan bahas itu semua.
Jenis - jenis dan fungsi Layout
1. Linear Layout
Linear Layout adalah layout yang menyejajarkan semua child view-nya dalam satu arah, secara vertikal atau horizontal. Anda bisa menetapkan arah layout dengan atribut
android:orientation
.
Semua anak
LinearLayout
akan ditumpuk satu sama lain, jadi daftar vertikal hanya akan memiliki
satu anak per baris, seberapa pun lebarnya, dan daftar horizontal hanya
akan setinggi satu baris (tinggi anak yang tertinggi, ditambah pengisi).
LinearLayout
akan mengikuti margin antara anak dan gravity (sejajar kanan, tengah, atau kiri) setiap anak.
Contoh
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:paddingRight="16dp"android:layout_height="match_parent" android:paddingLeft="16dp"android:layout_width="match_parent"android:orientation="vertical" > <EditText android:layout_height="wrap_content"android:layout_height="wrap_content"android:hint="@string/to" /> <EditText android:layout_width="match_parent"android:layout_height="0dp"android:hint="@string/subject" /> <EditText android:layout_width="match_parent" android:layout_weight="1"android:layout_height="wrap_content"android:gravity="top" android:hint="@string/message" /> <Button android:layout_width="100dp" android:layout_gravity="right"</LinearLayout>android:text="@string/send" />
Hasil
2. Relative Layout
Relative Layout
adalah layout yang penataan nya ini adalah penataan yang menempatkan
widget-widget didalamnya seperti layer, sehingga sebuah widget dapat
berada di atas/di bawah widget lainnya atau dengan kata lain Relative
merupakan layout yang penataannya lebih bebas (Relative) sehingga bisa
di tata di mana saja.
Jadi dapat diartikan bahwa Relative Layout
adalah desain tampilan pada aplikasi dengan tata letak objek atau
komponen secara bebas tanpa aturan sesuai orientasi (horizontal atau
vertical) seperti yang diterapkan pada Linear Layout.
Contoh:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:paddingRight="16dp" >android:layout_height="match_parent" android:paddingLeft="16dp"android:layout_width="match_parent"<EditText android:id="@+id/name"android:hint="@string/reminder" />android:layout_height="wrap_content" <Spinner android:id="@+id/dates"android:layout_below="@id/name"android:layout_width="0dp" android:layout_height="wrap_content"android:id="@id/times"android:layout_alignParentLeft="true" android:layout_toLeftOf="@+id/times" /> <Spinnerandroid:layout_alignParentRight="true" />android:layout_width="96dp" android:layout_height="wrap_content" android:layout_below="@id/name" <Buttonandroid:layout_alignParentRight="true"android:layout_width="96dp" android:layout_height="wrap_content" android:layout_below="@id/times" android:text="@string/done" /></RelativeLayout>
Hasil
3. Constraint Layout
Sebenarnya Constraint Layout mirip dengan Relative Layout, karena letak View bergantung pada View lain dalam satu Layout ataupun dengan Parent Layoutnya. Contohnya di Relative Layout
kita bisa meletakkan sebuah View di atas, bawah, atau samping View
lain. Kita juga dapat mengatur posisinya berdasarkan Parent Layout
menggunakan tag seperti centerVertical, alignParentBottom, dll. Akan
tetapi, Constraint Layout jauh lebih fleksibel dan lebih mudah digunakan di Layout Editor.
Pada Constraint Layout,
setiap View memiliki tali (Constraint) yang menarik tiap sisinya, yang
mana tali tersebut bisa kita atur Elastisitas, Margin, dsb. Tali
tersebut wajib kita “ikatkan” kepada anchor point atau suatu titik yang
dapat berupa sisi dari Parent Layout, View lain, ataupun titik bantu
(helper) yang bisa kita buat sendiri.
Contoh:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayoutxmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_height="match_parent"<android.support.v7.widget.CardViewandroid:background="@drawable/bggradient" tools:context=".MainActivity"> android:layout_width="300dp"app:layout_constraintBottom_toBottomOf="parent"android:layout_height="50dp" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent"app:cardBackgroundColor="@color/colorAccent"app:cardCornerRadius="15dp" app:cardElevation="20dp" android:id="@+id/cardView" android:layout_marginBottom="50dp">android:text="Login"<android.support.constraint.ConstraintLayout android:layout_width="match_parent" android:layout_height="match_parent"> <TextViewapp:layout_constraintStart_toStartOf="parent"android:layout_width="wrap_content" android:layout_height="wrap_content" app:layout_constraintTop_toTopOf="parent" android:layout_marginTop="16dp"app:fontFamily="sans-serif"app:layout_constraintEnd_toEndOf="parent" android:id="@+id/textView" android:layout_marginBottom="8dp" app:layout_constraintBottom_toBottomOf="parent"<android.support.v7.widget.CardViewandroid:textColor="@android:color/background_light" android:textSize="24sp" app:layout_constraintVertical_bias="1.0"/> </android.support.constraint.ConstraintLayout> </android.support.v7.widget.CardView>android:layout_marginBottom="8dp"android:layout_width="320dp" android:layout_height="400dp" app:layout_constraintStart_toStartOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintTop_toTopOf="parent" android:layout_marginTop="8dp"android:layout_width="match_parent"app:layout_constraintBottom_toTopOf="@+id/cardView" app:cardCornerRadius="15dp" app:cardElevation="20dp" app:layout_constraintVertical_bias="0.781" android:id="@+id/cardView2"> <android.support.constraint.ConstraintLayout android:layout_height="match_parent">android:layout_marginTop="36dp"<ImageView android:layout_width="150dp" android:layout_height="150dp" app:srcCompat="@drawable/logo" app:layout_constraintStart_toStartOf="parent" app:layout_constraintEnd_toEndOf="parent" android:id="@+id/imageView"android:layout_height="wrap_content"app:layout_constraintTop_toTopOf="parent" android:layout_marginBottom="8dp" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintVertical_bias="0.0"/> <android.support.design.widget.TextInputLayout android:layout_width="300dp"app:passwordToggleTint="@color/colorAccent">app:layout_constraintStart_toStartOf="parent" app:layout_constraintEnd_toEndOf="parent" android:id="@+id/textInputLayout2" app:layout_constraintTop_toBottomOf="@+id/imageView" android:layout_marginTop="50dp" style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"android:layout_width="300dp"<android.support.design.widget.TextInputEditText android:layout_width="match_parent" android:layout_height="wrap_content" android:hint="Email" android:inputType="textEmailAddress"/> </android.support.design.widget.TextInputLayout> <android.support.design.widget.TextInputLayoutapp:layout_constraintTop_toBottomOf="@+id/textInputLayout2"android:layout_height="wrap_content" app:layout_constraintEnd_toEndOf="parent" android:layout_marginBottom="16dp" app:layout_constraintStart_toStartOf="parent" app:layout_constraintBottom_toBottomOf="parent" android:id="@+id/textInputLayout3" android:layout_marginTop="8dp"</android.support.design.widget.TextInputLayout>style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox" app:passwordToggleTint="@color/colorAccent"> <android.support.design.widget.TextInputEditText android:layout_width="match_parent" android:layout_height="wrap_content" android:hint="Password" android:inputType="textPassword"/></android.support.constraint.ConstraintLayout></android.support.constraint.ConstraintLayout></android.support.v7.widget.CardView>
Hasil
4. Frame Layout
Frame Layout
adalah Layout yang biasanya digunakan untuk membuat objek yang saling
bertindihan contohnya yaitu kita membuat button di atas image. Untuk
lebih jelasnya lihat contoh dibawah:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:background="#1113">android:layout_height="match_parent" <ImageViewandroid:layout_gravity="center"android:layout_width="300dp" android:layout_height="300dp"android:layout_width="300px"android:background="@color/colorPrimary" /> <Button android:layout_height="100px"android:textColor="#fff"android:layout_gravity="center" android:text="Tombol" android:background="@color/colorAccent" android:textSize="20sp" /></FrameLayout>
Hasil
5. Table Layout
Table Layout
adalah Layout yang digunakan untuk membangun user interface (tampilan
antar muka ) aplikasi android dengan berdasarkan Baris dan Kolom. Table Layout terdiri dari:
- Row/ baris pada dasarnya digunakan untuk menyimpan satu jenis record, hanya satu informasi yang dapat disimpan.
- Kolom adalah sub bagian terbagi dari setiap baris dan satu baris dapat menampung beberapa jenis kolom. Setiap kolom terdiri dari jenis informasi yang berbeda mengenai baris tersebut.
Tag Table Layout
Beberapa tag pada Table Layout :
- TableLayout : Tag pembuka untuk menggunakan TableLayout
- TableRow : Tag untuk membuat Baris
Untuk gambaran lebih jelasnya perhatikan contoh di bawah ini
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="fill_parent"
android:paddingTop="10px"android:layout_height="fill_parent" > <TableRow<TextViewandroid:gravity="center" android:layout_marginTop="20px">android:layout_gravity="center"android:id="@+id/status" android:layout_width="wrap_content"android:textSize="25sp"android:layout_span="2" android:text="LOGIN" android:textColor="#890000"<TextViewandroid:textStyle="bold" /> </TableRow> <TableRow android:layout_marginTop="20dip" >android:textColor="#000000"android:layout_width="wrap_content" android:text="Username :" android:textSize="20sp"android:layout_height="wrap_content"android:layout_marginLeft="20dip" ></TextView> <EditText android:id="@+id/screenName"</TableRow>android:layout_marginLeft="20dip" android:layout_marginRight="20dip" android:layout_weight="1" > </EditText> <TableRowandroid:textColor="#000000"android:layout_marginTop="20dip" > <TextView android:text="Password :" android:layout_width="wrap_content" android:textSize="20sp"android:layout_height="wrap_content"android:layout_height="wrap_content" android:layout_marginLeft="20dip"></TextView> <EditText android:id="@+id/password" android:layout_marginLeft="20dip"<Buttonandroid:layout_marginRight="20dip" android:layout_weight="1" > </EditText> </TableRow> <TableRow android:gravity="center" android:layout_marginTop="20dip" > android:text="Submit"</TableLayout>android:clickable="true" android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/save" android:layout_span="2" ></Button> </TableRow>
Hasil
Nah
setelah membaca artikel diatas diharapkan kawan - kawan sudah mengerti
tentang jenis - jenis dan fungsi Layout pada Android Studio. Pada
Artikel berikutnya kita akan tentang Constraint Layout lebih lanjut jadi
ayo cek terus update artikel di Code Politan.
No comments:
Post a Comment