Design Form Login Menggunakan Constraint Layout Yang Responsive

Cara Membuat Design Form Login Dengan Menggunakan Constraint Layout Pada Android Studio

Disini saya akan membuat serta memberitahu kamu cara membuat desain form login menggunakan constraint layout. 

Baik, langkah-langkah dalam membuat design form login ini yaitu :

1. Membuat Layout Resource File

     - Buka folder res → layout didalam project android studio

     - Klik kanan pada folder layout, lalu pilih new → layout resource file

     - Beri nama layout (misalnya activity_main) dan pastikan constraintlayout dipilih sebagai root                    element. ini akan menjadi container utama untuk elemen-elemen UI anda.

     - Klik ok untuk membuat file layout baru.

2. Menambahkan Elemen UI

    - Buka file layout yang baru (activity_main.xml atau yang sudah anda buat ).

    - Di dalam editor desain, ada dua tampilan : design dan code. pilih design untuk menggunakan antar

      muka grafis.

    - Pilih elemen UI dari panel palette di sisi kiri (seperti TextView, Button, EditText, dll).

    - Drag and drop elemen dari palette ke area desain.

3. Mengatur Constraint Layout Untuk Setiap Elemen

    Constraint adalah aturan posisi yang menentukan dimana elemen ditempatkan di layar relatif

    terhadap elemen lainnya atau tepi layar.

        - Pilih elemen yang ingin anda tempatkan di layar.

        - Di setiap sisi elemen, akan ada titik - titik anchor kecil untuk mengatur constraint.

        - Klik dan tarik titik tersebut ke tepi layar (parent) atau ke elemen lain untuk mengatur posisinya.

          anda bisa mengatur :

                1. Top Constraint (untuk posisi atas elemen)

                2. Bottom Constraint (untuk posisi bawah elemen)

                3. Start/Left Constraint (untuk posisi kiri elemen)

                4. End/RightConstraint (untuk posisi kanan elemen)

        - Anda harus mengatur setidaknya satu constraint horizontal (seperti Left/Right) dan satu vertikal

          (seperti Top/Bottom) agar posisi elemen stabil pada berbagai ukuran layar.

4. Menyesuaikan Atribut Elemen UI

    - Setelah elemen terpasang, buka panel Attributes disisi kanan untuk menyesuaikan atribut seperti :

       1. Layout Width dan Layout Height : pilih antara wrap_content, match_parent, atau nilai ukuran

           khusus.

       2. Text (untuk TextView) : tambahkan teks yang ingin ditampilkan.

       3. Background Color : menambahkan warna latar untuk elemen.

       4. Margins : mengatur jarak elemen dari constraint yang ditentukan (misalnya, margin kiri, atas, dll)

5. Menggunakan Fitur Chains

    - Chains memungkinkan beberapa elemen berada dalam posisi tertentu, seperti menampilkan bebe

       rapa Button secara sejajar.

        1. Pilih dua atau lebih elemen yang ingin diatur dalam chain.

        2. Klik kanan salah satu elemen, pilih Chains → Create Horizontal Chain atau Create Vertical

            Chain.

        3. Anda bisa memilih pengaturan Spread, Spread Inside, atau Packed di panel Attributes untuk

            menyesuaikan posisi setiap elemen dalam chain.

6. Menambahkan Guidelines

    - Guidelines adalah garis bantu virtual yang memudahkan pengaturan layout yang konsisten.

    - Untuk menambahkan, pilih Guideline dari Palette, lalu tarik ke area layout.

    - Setelah guideline ditambahkan, atur posisinya (misalnya di 20% atau 50% dari lebar atau tinggi

      layar) untuk menentukan titik referensi elemen-elemen.

7. Preview dan Uji Layout

    - Klik preview untuk melihat tampilan di berbagai ukuran layar.

    - Anda bisa melihat dan menguji layout di perangkat atau emulator untuk memastikan bahwa semua

      constraint bekerja seperti yang diharapkan.

Kodingan xml Constraint Layout

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="LOG IN"
        android:textSize="24sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.283" />

    <EditText
        android:id="@+id/editTextTextPersonName"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:ems="10"
        android:inputType="textPersonName"
        android:text="Username"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.497"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView"
        app:layout_constraintVertical_bias="0.141" />

    <EditText
        android:id="@+id/editTextTextPersonName2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:ems="10"
        android:inputType="textPersonName"
        android:text="Password"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.497"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/editTextTextPersonName"
        app:layout_constraintVertical_bias="0.092" />

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Masuk"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.479"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/editTextTextPersonName2"
        app:layout_constraintVertical_bias="0.243" />

</androidx.constraintlayout.widget.ConstraintLayout>

    Berikut jika di running kalian bisa lihat video di bawah ini :