Tutorial Membuat dan Mengatur Constraint Layout Sederhana

 

Hallo Gaiss !

Hari ini, kita akan membuat aplikasi Android sederhana yang menggunakan Contrainlayout.

Fungsi ConstraintLayout:

1. Mengatur Posisi dan Ukuran Elemen UI: ConstraintLayout memungkinkan kita menempatkan elemen UI berdasarkan keterkaitan antar elemen lain, seperti tepi, tengah, atau sudut layar.
2. Mendukung Desain Responsif: Layout ini memudahkan penyesuaian tampilan untuk berbagai ukuran layar, baik di ponsel, tablet, maupun perangkat lainnya.
3. Mengurangi Kebutuhan Nested Layout: Dengan ConstraintLayout, kita dapat menghindari penggunaan banyak nested layout (layout bersarang), sehingga aplikasi lebih ringan dan performanya meningkat.

Tujuan ConstraintLayout:

Tujuannya adalah mempermudah pembuatan desain UI yang fleksibel, efisien, dan responsif dengan pengaturan posisi dan ukuran elemen secara dinamis. Hal ini memungkinkan desainer dan pengembang membuat antarmuka yang terlihat baik di berbagai perangkat dan ukuran layar tanpa terlalu banyak mengandalkan nested layout.

ConstraintLayout merupakan layout yang sangat fleksibel di Android, memungkinkan desain UI yang lebih efisien dan responsif untuk berbagai perangkat seperti ponsel dan tablet. Dengan menggunakan ConstraintLayout, posisi dan ukuran elemen UI dapat diatur dengan mudah berdasarkan hubungan antar elemen. Yuk, kita mulai!

1. Langkah Pertama :

Buka Android Studio.

Pilih opsi New Project.

Pada jendela Select Project Template, pilih template Empty Activity, lalu klik Next.

Di jendela Configure Your Project:

• Name: Masukkan nama proyek, misalnya "Constrainlayout_sederhana".
• Package Name: Kamu bisa membiarkan pengaturan ini default atau menyesuaikannya sesuai kebutuhan.
• Save Location: Tentukan lokasi di mana proyek ini akan disimpan.
• Minimum API Level: Pilih API Level yang sesuai, seperti API 24 (Android 7.0 ) 

Klik Finish, dan Android Studio akan membuat proyek baru untukmu.

2. Langkah Kedua :

Membuat activity_main.xml sebagai berikut :

Pada halaman ini terdapat judul Welcome Back ! dengan menggunakan TextView, Kolom Name, Kolom Email, Kolom Password , Text Lupa Password? , Button Login dan Button Register.

3. Langkah Ketiga :

Membuat dan Mengatur ConstraintLayout sebagai berikut :

Deskripsi Constraint layout  : 

1. TextView “Welcome Back” menggunakan constraint top, left, right, dan bottom pada  panel layar. 

2. Plain Text “Name” menggunakan constraint top ke TextView, left dan right ke panel layar. 

2. Plain Text “Email” menggunakan constraint top ke Plain Text “Name”, left dan right pada panel layar.

4. Password diberi constraint top ke Plain Text “Username”, left dan right ke panel layar. 

5. TextView “Lupa Password ?” menggunakan constraint top ke Plain Text “password”, left dan right pada panel layar.

5. Button "Login" dan "register" menggunakan constraint top ke TextView “Lupa Password ?”, lalu left, right, dan bottom ke panel layar.

HASIL RUNNING :

Dengan ConstraintLayout, tampilan akan tetap stabil dan proporsional baik dalam orientasi portrait maupun landscape, menjadikan layout lebih responsif dan adaptif terhadap perubahan ukuran layar.

JANGAN LUPA SELALU IKUTI SOCIAL MEDIA SAYA AGAR SELALU MENDAPATKAN UPDATE TUTORIAL DARI SAYA !