1 . Apa itu ViewGroup ?

ViewGroup adalah container atau wadah yang dapat menampung dan mengatur widget lainnya, bahkan ViewGroup itu sendiri.  ViewGroup merupakan parent class dari layout di android, seperti LinearLayout, RelativeLayout, ConstraintLayout dan FrameLayout.  Kita akan belajar beberapa jenis layout pada tutorial selanjutnya.


2 . Mengenal LinearLayout

Mengenal Linear Layout. LinearLayout merupakan viewgroup yang mengatur widget lainnya untuk menampilkan satu arah, secara vertikal dan horizontal. Kita dapat mengatur arah layout dengan mendefinisikan atribut android:orientation di widget LinearLayout. Jika kita mendefinikasikan android:orientation=”vertical”, anak (widget) di dalam LinearLayout akan ditumpuk satu sama lainnya secara vertikal. Berikut gambaran dari LinearLayout dengan orientasi secara vertikal.

linear-layout-vertikal.png (10 KB)

Jika kita mendefinikasikan android:orientation=”horizontal”, anak (widget) dalam LinearLayout akan ditampilkan satu baris secara horizontal. Berikut gambaran dari LinearLayout dengan orientasi horizontal.

linear-layout-horizontal.png (17 KB)

Sekarang kita mencoba membuat project android studio baru untuk mempelajari LinearLayout dengan orientasi secara vertikal dan horizontal. Buat project baru seperti biasa, di jendela choose your project pilih Empty Activity dan selanjutnya di jendela Configure your project ikuti seperti berikut :

  • Name: "Belajar Layout Android"
  • Package name: "com.teknorial.belajarlayoutandroid"
  • Language: Java
  • Biarkan opsi lain sebagaimana adanya.

Kemudian Klik Finish.

Setelah project berhasil dibuat, kita akan membuat layout baru berupa halaman login seperti pada gambar di bawah dengan menggunakan beberapa widget seperti :  TextView, EditText, ImageButton, dan Button.

struktur-linear-layout.png (51 KB)

Buat file layout baru dengan klik kanan di folder layout, kemudian pilih new -> Layout resource file. Pada jendela New Resource File masukan data seperti berikut :

  • File name : "activity_login"
  • Root element : "LinearLayout"
  • Biarkan opsi lain sebagaimana adanya.

Kemudian Klik OK.
 menambah-layout-baru.png (28 KB)

new-resource-file.jpg (46 KB)

Buka layout activity_login.xml yang telah dibuat. Sekarang kita dapat melihat LinearLayout dengan orientasi vertikal menjadi element root. Sekarang akan menambahkan widget TextView, EditText dan button menjadi anak dari Linearlayout. Silahkan ketik kode dibawah ke dalam activity_login.xml.

<?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:orientation="vertical">

    <TextView
        android:id="@+id/textView2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:padding="10dp"
        android:text="Login"
        android:textAppearance="@style/TextAppearance.AppCompat.Display1" />

    <EditText
        android:id="@+id/editText2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:hint="Email"
        android:inputType="textEmailAddress" />

    <EditText
        android:id="@+id/editText3"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:hint="Password"
        android:inputType="textPassword" />


    <Button
        android:id="@+id/button8"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:background="@color/colorAccent"
        android:text="Sign In"
        android:textColor="@android:color/white" />

</LinearLayout>

Sekarang buka tab design untuk melihat tampilan layout activity_login.xml. Kita dapat melihat dengan mendefinisikan android:orientation=”vertical” maka anak/widget di dalam linear layout akan satu sama lainnya secara vertikal. Kamu dapat modifikasi beberapa atribut seperti android:gravity, android:margin dan beberapa atribut lainnya untuk kamu pelajari dan lihat apa yang terjadi di tab design. 
linear-layout-horizontal-android-studio.jpg (45 KB)

Kita akan menambah beberapa widget ImageButton berupa tombol login via social media di dalam LinearLayout secara horizontal. Untuk Gambar ikon social media, kamu bisa download di sini. Copy ketiga gambar dan paste di folder drawable.

menambah-icon-di-drawable.jpg (20 KB)

 Tambahkan kode di bawah tepat di atas Button Sign In, kita akan menambahkan LinearLayout secara horizontal dengan widget ImageButton di dalamnya.

<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:layout_margin="10dp"
    android:orientation="horizontal">

    <ImageButton
        android:layout_width="45dp"
        android:layout_height="45dp"
        android:layout_margin="5dp"
        android:background="@drawable/googleplus" />

    <ImageButton
        android:layout_width="45dp"
        android:layout_height="45dp"
        android:layout_margin="5dp"
        android:background="@drawable/fb" />

    <ImageButton
        android:layout_width="45dp"
        android:layout_height="45dp"
        android:layout_margin="5dp"
        android:background="@drawable/twitter" />

</LinearLayout>

Dengan atribut android:orientation=”horizontal” di LinearLayout akan membuat anak/widget di dalam LinearLayout akan ditampilkan satu baris secara horizontal. Buka kembali tab design dan lihat desain layout sudah kita buat. 
 hasil-akhir-linear-layout.jpg (43 KB)

Kita telah menggunakan LinearLayout secara vertikal dan horizontal dalam satu layout. Setelah ini, Coba memodifikasi beberapa atribut di dalam widget untuk mempelajari apa saja pengaruhnya terhadap widget tersebut. Berikut source code dari activity_login.xml yang kita buat.

<?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:orientation="vertical">

    <TextView
        android:id="@+id/textView2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:padding="10dp"
        android:text="Login"
        android:textAppearance="@style/TextAppearance.AppCompat.Display1" />

    <EditText
        android:id="@+id/editText2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:hint="Email"
        android:inputType="textEmailAddress" />

    <EditText
        android:id="@+id/editText3"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:hint="Password"
        android:inputType="textPassword" />

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_margin="10dp"
        android:orientation="horizontal">

        <ImageButton
            android:layout_width="45dp"
            android:layout_height="45dp"
            android:layout_margin="5dp"
            android:background="@drawable/googleplus" />

        <ImageButton
            android:layout_width="45dp"
            android:layout_height="45dp"
            android:layout_margin="5dp"
            android:background="@drawable/fb" />

        <ImageButton
            android:layout_width="45dp"
            android:layout_height="45dp"
            android:layout_margin="5dp"
            android:background="@drawable/twitter" />

    </LinearLayout>

    <Button
        android:id="@+id/button8"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:background="@color/colorAccent"
        android:text="Sign In"
        android:textColor="@android:color/white" />

</LinearLayout>

Demikian tutorial Mengenal LinearLayout. Kita telah berhasil membuat layout dengan menggunakan LinearLayout. Jika kamu mengalami kesulitan dalam mengikuti tutorial ini, jangan ragu untuk bertanya di kotak komentar. Terima kasih :)


3 . Mengenal RelativeLayout

Mengenal RelativeLayout. RelativeLayout merupakan ViewGroup yang menampilkan widget secara relative atau bebas. Posisi widget dapat dibuat spesifik terhadap widget seperti di samping kiri atau di atas sebuah widget lainnya. Posisi widget dapat juga dibuat spesifik di dalam parent (RelativeLayout) seperti di atas, di tengah atau di bawah. RelativeLayout dapat menghilangkan pengunaan nested viewgroup atau viewgroup bersarang sehingga hirarki dari layout menjadi sederhana atau flat, yang dapat menambah peforma.  
struktur-relativelayout.jpg (32 KB)
Kita dapat melihat gambar di atas merupakan contoh struktur layout dari RelativeLayout. Button 2 terletak di bawah dari Button 1, untuk membuat hal tersebut kita perlu menambahkan atribut  android:layout_below="@+id/btn_1" di widget Button 2. Untuk membuat widget Button 3 terletak di posisi tengah dari parent (RelativeLayout), kita cukup menambahkan atribut android:layout_centerInParent="true" di dalam widget Button 3. Terakhir, Untuk membuat widget Button 4 terletak paling di bawah terhadap parent(RelativeLayout), tambahkan atribut android:layout_alignParentBottom="true" di dalam widget Button 4. Banyak lagi atribut posisi yang dimiliki oleh RelativeLayout, kamu bisa pelajari lebih lanjut disini. 

Sekarang  kita akan membuat tampilan yang sama seperti di tutorial sebelumnya berupa halaman login, Tapi menggunakan satu ViewGroup yaitu RelativeLayout. Gunakan project pada tutorial sebelumnya, Buat file layout baru dengan klik kanan di folder layout, kemudian pilih new -> Layout resource file. Pada jendela New Resource File masukan data seperti berikut :

  • File name : "activity_login2"
  • Root element : "RelativeLayout"
  • Biarkan opsi lain sebagaimana adanya.

Kemudian Klik OK.

membuat-relative-layout.jpg (47 KB)

Buka acitivty_login2.xml, kita akan menambah beberapa widget ke dalam RelativeLayout seperti TextView, EditText, ImageButton dan Button. Ketik kode di bawah ini ke dalam activity_login2.xml.

<?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"
    android:layout_margin="10dp">

    <TextView
        android:id="@+id/tv_login"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:padding="10dp"
        android:text="Login"
        android:textAppearance="@style/TextAppearance.AppCompat.Display1" />

    <EditText
        android:id="@+id/et_email"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/tv_login"
        android:layout_centerHorizontal="true"
        android:hint="Email"
        android:inputType="textEmailAddress" />

    <EditText
        android:id="@+id/et_password"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/et_email"
        android:hint="Password"
        android:inputType="textPassword" />


    <ImageButton
        android:id="@+id/ib_fb"
        android:layout_width="45dp"
        android:layout_height="45dp"
        android:layout_below="@id/et_password"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="10dp"
        android:background="@drawable/fb" />

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/ib_fb"
        android:layout_marginTop="15dp"
        android:background="@color/colorAccent"
        android:text="Sign In"
        android:textColor="@android:color/white" />

</RelativeLayout>

tutorial-relative-layout.jpg (22 KB)

Kita telah menyusun beberapa widget dengan menggunakan atribut android:layout_below disetiap widget. Pada posisi widget ImageButton Login via FB, kita membuatnya posisi di bawah dari EditText password dan di tengah dengan menggunakan atribut  android:layout_centerHorizontal="true". Sekarang bagaimana cara membuat widget ImageButton Google Plus dan Twitter berada di posisi sebelah widget ImageButton FB ? Dengan menambahkan  atribut android:layout_toRightOf dan android:layout_toEndOf untuk membuat widget di posisi kanan dari sebuah widget. Untuk membuat widget berada di posisi sebelah kiri dari sebuah widget, tambahkan atribut android:layout_toLeftOf dan android:layout_toStartOf. 

Kembali ke activity_login2.xml, Tambah dua widget ImageButton ke dalam RelativeLayout  dengan ketik kode bawah ini. 

<ImageButton
    android:id="@+id/ib_googleplus"
    android:layout_width="45dp"
    android:layout_height="45dp"
    android:layout_below="@id/et_password"
    android:layout_margin="10dp"
    android:layout_toLeftOf="@id/ib_fb"
    android:layout_toStartOf="@id/ib_fb"
    android:background="@drawable/googleplus" />

<ImageButton
    android:id="@+id/ib_twitter"
    android:layout_width="45dp"
    android:layout_height="45dp"
    android:layout_below="@id/et_password"
    android:layout_margin="10dp"
    android:layout_toRightOf="@id/ib_fb"
    android:layout_toEndOf="@id/ib_fb"
    android:background="@drawable/twitter" />

Setelah memasukan dua widget ImageButton, kita dapat melihat layout seperti gambar di bawah.
membuat-relative-layout-di-android-studio.jpg (22 KB)
Berikut kode keseluruhan dari activity_login2.xml yang telah modifikasi dalam tutorial ini.

<?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"
    android:layout_margin="10dp">

    <TextView
        android:id="@+id/tv_login"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:padding="10dp"
        android:text="Login"
        android:textAppearance="@style/TextAppearance.AppCompat.Display1" />

    <EditText
        android:id="@+id/et_email"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/tv_login"
        android:layout_centerHorizontal="true"
        android:hint="Email"
        android:inputType="textEmailAddress" />

    <EditText
        android:id="@+id/et_password"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/et_email"
        android:hint="Password"
        android:inputType="textPassword" />


    <ImageButton
        android:id="@+id/ib_fb"
        android:layout_width="45dp"
        android:layout_height="45dp"
        android:layout_below="@id/et_password"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="10dp"
        android:background="@drawable/fb" />


    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/ib_fb"
        android:layout_marginTop="15dp"
        android:background="@color/colorAccent"
        android:text="Sign In"
        android:textColor="@android:color/white" />

    <ImageButton
        android:id="@+id/ib_googleplus"
        android:layout_width="45dp"
        android:layout_height="45dp"
        android:layout_below="@id/et_password"
        android:layout_margin="10dp"
        android:layout_toLeftOf="@id/ib_fb"
        android:layout_toStartOf="@id/ib_fb"
        android:background="@drawable/googleplus" />

    <ImageButton
        android:id="@+id/ib_twitter"
        android:layout_width="45dp"
        android:layout_height="45dp"
        android:layout_below="@id/et_password"
        android:layout_margin="10dp"
        android:layout_toRightOf="@id/ib_fb"
        android:layout_toEndOf="@id/ib_fb"
        android:background="@drawable/twitter" />

</RelativeLayout>

Demikian tutorial Mengenal RelativeLayout. Jika mengalami kesulitan dalam mengikut tutorial, jangan untuk bertanya di kotak komentar. Terima kasih.


4 . Mengenal ConstraintLayout

ConstraintLayout adalah viewgroup yang mirip dengan Relativelayout yang menampilkan widget secara relative atau bebas. Posisi widget dapat dibuat spesifik terhadap widget dan dengan Parent Layoutnya sendiri. ConstraintLayout lebih fleksibel daripada RelativeLayout dan lebih mudah digunakan di layout editor. Dalam ConstraintLayout, widget memiliki titik (lingkaran bulat) setiap sisinya yang dapat ditarik dan diikatkan  terhadap titik yang dimiliki oleh widget lainnya atau parent layout. Pada tutorial Mengenal ConstraintLayout, kita akan membangun tampilan halaman Register dengan menggunakan layout editor di android studio.

Buat file layout baru dengan klik kanan di folder layout, kemudian pilih new -> Layout resource file. Pada jendela New Resource File masukan data seperti berikut :

  • File name : "activity_register"
  • Biarkan opsi lain sebagaimana adanya.

Kemudian Klik OK.

new-resource-file-constraint-layout.jpg (48 KB)

Buka file activity_register.xml yang kita buat, klik tab design. Kita dapat melihat terdapat tab Palette yang memiliki widget dan viewgroup. Kita dapat menggunakan fitur drag & drop untuk mengambil widget dari Palette ke tampilan Layout.  Di tengah kita dapat melihat tampilan layout yang sesungguhnya dan sebelah kanan terdapat tampilan berwarna biru yang merupakan Blueprint (hanya menampilkan outline dari tampilan layout. 

activity-register.jpg (59 KB)

Namun pada tutorial ini kita akan menggunakan tab Text dan menambah widget dengan kode, agar kamu dapat melihat perubahan atribut saat membuat constraint terhadap widget. Rancangan tampilan yang akan kita buat seperti gambar di bawah. Kita akan belajar cara menggunakan beberapa fitur dari ConstraintLayout.

rancangan-constraint-layout.jpg (59 KB)

Buka activity_register.xml dan tambah widget TextView seperti kode di bawah.

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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">

    <TextView
        android:id="@+id/tv_judul"
        style="@style/TextAppearance.AppCompat.Display1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Daftar" />

</android.support.constraint.ConstraintLayout>

Klik tab  Preview yang berada di sebelah kananan dan kita dapat melihat layout seperti gambar di bawah. widget-textview-activiy-register.jpg (96 KB)

Sekarang kita akan membuat widget TextView  berada di posisi tengah dan paling atas terhadap parent. Klik widget Textview di dalam layout, kemudian klik titik lingkaran yang berada di posisi kanan, klik & tahan, tarik garis sampai ke posisi kanan terhadap parent. Untuk lebih jelas, ikuti video  di bawah dan lihat secara fullscreen agar terlihat lebih jelas perubahan atribut di dalam text Editor.

Setelah membuat kita membuat constraint kanan dari widget TextView, terdapat tiga penambahan atribut  yaitu : 

android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
app:layout_constraintEnd_toEndOf="parent"

terdapat penambahan margin ke kanan dan atribut ConstraintEnd_toEndOf. Apa yang dimaksud dari kata End disini? Secara Default, layout akan menggunakan Arah LTR (Left to Right), jadi Start digunakan untuk menjelaskan posisi paling awal dan End digunakan untuk menjelaskan posisi paling akhir. Atribut layout_constraintEnd_toEndOf=”parent”, menjelaskan bahwa constraint kanan dari Textview menuju ke paling kanan terhadap parent.  Berikut gambaran dari setiap titik constraint terhadap widget. titik-constraint.jpg (10 KB)

Kita akan membuat constraint kanan dan atas untuk widget TextView. Untuk lebih jelas, ikuti video di bawah.

Dalam widget TextView  terdapat penambahan beberapa baris atribut, yaitu :

android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="8dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"

Seperti sebelumnya terdapat penambahan margin sesuai dengan constraint yang kita buat. Pada widget TextView, kita telah menambah Constraint  kiri dan atas terhadap parent. Setelah kita berhasil membuat constraint untuk widget TextView. Selanjutnya kita akan membuat dua widget dalam satu baris. Untuk memudahkan kita membuat dua widget dalam satu baris, gunakan garis bantu atau GuideLine secara vertikal.  Klik icon guidelines dan pilih add Vertical GuideLine.

guidelines.jpg (31 KB)

Setelah menambahkan Guideline secara vertikal, kita akan melihat garis putus – putus secara vertikal. guidelines-constraint.jpg (31 KB)

Klik lambang segitiga yang berada di atas garis bantu sampai menjadi lambang persen dan meletakkan garis bantu di tengah dari layout. Untuk lebih jelasnya ikut video di bawah. 

Terdapat perubahan atribut di widget Guideline yaitu  app:layout_constraintGuide_percent = "0.5" , artinya kita telah membuat posisi widget garis bantu berada di tengah (0.5) terhadap parent. Sekarang kita akan menambahkan dua widget EditText dan meletakannya dalam satu baris dengan bantuan garis bantu yang telah kita buat.  Tambahkan dua widget EditText ke dalam layout seperti kode di bawah.

<EditText
    android:id="@+id/et_nama_depan"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:hint="Nama Depan" />

<EditText
    android:id="@+id/et_nama_belakang"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:hint="Nama Belakang" />

Lihat tampilan layout dan kita akan melihat dua widget EditText saling menumpuk. Untuk memudahkan kita membuat constraint terhadap widget tersebut, klik dan tahan di widget, kemudian geser sesuai ke posisi yang kita inginkan. Untuk lebih jelas ikuti video di bawah.

Posisi widget yang telah di geser sebelumnya, hanya berpengaruh di layout editor saja. Kita bisa melihat ada penambah dua atribut di setiap widget.

tools:layout_editor_absoluteX
tools:layout_editor_absoluteY

setiap awalan tools di atribut, maka atribut tersebut hanya akan berpengaruh di layout editor saja dan saat aplikasi di build, atribut tools tidak gunakan. Sekarang kita akan membuat constraint dari widget EditText terhadap widget TextView(Daftar), parent dan  garis bantu vertikal. Ikuti video di bawah.

Kita telah berhasil membuat constraint atas, samping kanan dan kiri untuk kedua widget EditText. Constraint atas telah kita ikatkan terhadap widget TextView yang bertulisan Daftar, agar posisinya berada di bawah dari Widget TextView tersebut. Berikut contoh constraint atas dari sebuah widget.

app:layout_constraintTop_toBottomOf="@+id/tv_judul" />

Constraint samping kiri dan kanan telah masing kita ikatkan terhadap parent dan garis bantu vertikal, sehingga posisi widget berada di antara parent dan garis bantu. Berikut contoh constraint samping kanan dan kiri dari sebuah widget.

app:layout_constraintEnd_toStartOf="@+id/guideline"
app:layout_constraintStart_toStartOf="parent"

Pada gambar layout di bawah, kita dapat melihat  lebar ke dua widget EditText belum berukuran sama dengan constraint karena kita menggunakan wrap_content.  

 dua-widget-dalam-satu-baris.jpg (13 KB)

Untuk membuat lebar sebuah widget sama dengan constraint, kita dapat mengubah atribut android:layout_width=”wrap_content” menjadi  android:layout_width="0dp". Ubah kedua menjadi atribut android:layout_width="0dp"di widget EditText menjadi seperti kode di bawah.

<EditText
    android:id="@+id/et_nama_depan"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginStart="8dp"
    android:layout_marginLeft="8dp"
    android:layout_marginTop="8dp"
    android:layout_marginEnd="8dp"
    android:layout_marginRight="8dp"
    android:hint="Nama Depan"
    app:layout_constraintEnd_toStartOf="@+id/guideline"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/tv_judul" />

<EditText
    android:id="@+id/et_nama_belakang"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginStart="8dp"
    android:layout_marginLeft="8dp"
    android:layout_marginTop="8dp"
    android:layout_marginEnd="8dp"
    android:layout_marginRight="8dp"
    android:hint="Nama Belakang"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="@+id/guideline"
    app:layout_constraintTop_toBottomOf="@+id/tv_judul" />

Sekarang lihat kembali preview layout dan perubahan kedua widget EditText akan seperti di gambar bawah. match-constraint.jpg (16 KB)

Pada gambar di atas, kita dapat melihat lebar kedua widget EditText menjadi sesuai dengan constraint yang telah diikat.

Sekarang kita akan menambah tiga widget EditText dan satu Button dengan  posisi berurutan. Tambah kode di bawah ke dalam ConstraintLayout.

<EditText
    android:id="@+id/et_email"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:hint="Alamat Email"
    android:inputType="textEmailAddress" />

<EditText
    android:id="@+id/et_password"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:hint="Password"
    android:inputType="textPassword" />

<EditText
    android:id="@+id/et_konfirmasi_password"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:hint="Konfirmasi Password"
    android:inputType="textPassword" />

<Button
    android:id="@+id/btn_daftar"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Daftar Akun" />

Kita akan membuat constraint terhadap widget yang telah di tambahkan, untuk membuat posisi widget saling berurutan, buat constraint atas dan ikatkan terhadap titik di bawah widget lainnya. Untuk lebih jelas ikuti video di bawah.

Kita telah menyusun empat widget secara berurutan dengan membuat constraint atas disetiap widget. Sekarang layout kamu seharusnya seperti pada gambar di bawah.

final-constraint-layout.jpg (53 KB)Kita telah berhasil membuat layout sederhana dengan menggunakan beberapa fitur dari ConstraintLayout. Masih banyak fitur ConstraintLayout yang belum kita pelajari dalam tutorial ini, namun ini awal yang baik sebelum kamu mempelajari semua fitur dari ConstraintLayout. Demikian tutorial Mengenal ConstraintLayout, jika kamu mengalami kesulitan dalam mengikuti tutorial ini, jangan ragu bertanya di kotak komentar. Terima kasih.


5 . Mengenal FrameLayout

Mengenal FrameLayout. FrameLayout merupakan ViewGroup yang dapat membuat widget saling tumpang tindih. Berikut gambaran posisi widget dalam penggunaan FrameLayout.

struktur-framelayout.jpg (20 KB)Dalam FrameLayout, widget paling atas dalam kode akan di tampilan paling belakang, sedangkan widget paling bawah dalam kode akan ditampilkan paling depan. Berikut contoh kode penggunaan framelayout.

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/widget_1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/colorPrimary" />

    <Button
        android:id="@+id/widget_2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="Widget 2" />
</FrameLayout>

Pada tutorial Mengenal FrameLayout, Kita akan membangun layout sederhana dengan menggunakan dua widget yaitu ImageView dan TextView. Posisi  TextView akan di buat berada paling depan dari ImageView. 

Buat file layout baru dengan klik kanan di folder layout, kemudian pilih new -> Layout resource file. Pada jendela New Resource File masukan data seperti berikut :

  • File name : "activity_budimo"
  • Root element : "FrameLayout"
  • Biarkan opsi lain sebagaimana adanya.

Kemudian Klik OK.

activity-budimo.jpg (47 KB)

Untuk Gambar yang akan digunakan widget ImageView, kamu bisa download di sini. Copy gambar tersebut dan paste di folder drawable.  

Buka activity_budimo.xml dan modifikasi framelayout seperti kode di bawah.

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

    <ImageView
        android:id="@+id/widget_1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/budimo" />

    <TextView
        android:id="@+id/widget_2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity= "bottom|center"
        android:layout_marginBottom="8dp"
        android:background="@android:color/black"
        android:padding="8dp"
        android:text="Wow"
        android:textAppearance="@style/TextAppearance.AppCompat.Display1"
        android:textColor="@android:color/white" />


</FrameLayout>

Setelah kita masukkan kode atas, maka layout akan seperti gambar di bawah.

wow.jpg (46 KB)Dalam Framelayout, posisi widget hanya dapat di atur menggunakan atribut android:layout_gravity.  Posisi TextView yang telah kita buat berada di bawah dan di tengah dengan mendefinisikan atribut  android:layout_gravity="bottom|center", kamu dapat menggunakan value lainnya  seperti top, bottom, left, right, center, center_vertical dan center_horizontal.

Demikian tutorial mengenal FrameLayout, kita telah berhasil membuat widget saling saling tumpang tindih. FrameLayout dapat juga digunakan sebagai container untuk Fragment, kita akan pelajari itu di kursus Selanjutnya. Terima kasih.