Hai Sobat Blogger...
Kali ini saya akan membuat tampilan aplikasi menggunakan constraint layout dan juga menggunakan scroll view
ConstraintLayout merupakan salah satu komponen penting dalam pengembangan aplikasi Android modern. Layout ini hadir sebagai solusi untuk menciptakan antarmuka pengguna yang kompleks namun tetap efisien. Berbeda dengan layout tradisional seperti RelativeLayout atau LinearLayout, ConstraintLayout memungkinkan kita untuk membangun tampilan yang responsif dengan cara yang lebih fleksibel dan terstruktur.
Bayangkan ConstraintLayout seperti sebuah kanvas digital di mana setiap elemen dapat dihubungkan satu sama lain menggunakan constraint atau batasan. Misalnya, kita bisa mengatur sebuah tombol agar selalu berada di tengah layar, atau memastikan sebuah teks selalu berjarak tetap dari gambar di atasnya. Keunggulan utama ConstraintLayout adalah kemampuannya untuk menciptakan layout yang kompleks tanpa perlu menumpuk banyak layout bersarang, yang pada akhirnya meningkatkan performa aplikasi.
ScrollView, di sisi lain, adalah komponen yang tidak kalah pentingnya dalam pengembangan Android. Komponen ini berperan sebagai wadah yang memungkinkan pengguna untuk menggulir konten yang melebihi ukuran layar. Bayangkan membaca sebuah artikel panjang di ponsel Anda - tanpa ScrollView, Anda hanya akan bisa melihat sebagian kecil dari konten tersebut.
Keistimewaan ScrollView terletak pada kemampuannya untuk menangani konten dinamis dengan mulus. Meskipun ScrollView hanya dapat memiliki satu child view langsung, view tersebut bisa berupa layout container seperti LinearLayout yang dapat menampung banyak elemen di dalamnya. Ini membuat ScrollView menjadi pilihan ideal untuk menampilkan berbagai jenis konten, mulai dari artikel blog hingga form input yang panjang.
Dalam pengembangan aplikasi modern, kombinasi ConstraintLayout dan ScrollView sering kali menjadi pilihan untuk menciptakan antarmuka yang tidak hanya menarik secara visual, tetapi juga fungsional dan mudah digunakan. ConstraintLayout memastikan elemen-elemen tertata dengan rapi dan responsif, sementara ScrollView memastikan semua konten dapat diakses dengan mudah oleh pengguna.
sekarang kita akan mencoba membuat sebuah tampilan aplikasi Ensiklopedia yang menggunakan scroll view dan Cosntraint Layout. Silahkan teman-teman membuat proyek baru pada Android Studio dan tempelkan kode berikut pada activity_main.xml
<?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"
android:padding="16dp"
tools:context=".MainActivity">
<!-- Search Bar -->
<com.google.android.material.textfield.TextInputLayout
android:id="@+id/searchLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Search Encyclopedia"
style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:startIconDrawable="@android:drawable/ic_menu_search">
<com.google.android.material.textfield.TextInputEditText
android:id="@+id/searchInput"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="text"/>
</com.google.android.material.textfield.TextInputLayout>
<!-- Category Chips -->
<HorizontalScrollView
android:id="@+id/chipScroll"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
app:layout_constraintTop_toBottomOf="@id/searchLayout">
<com.google.android.material.chip.ChipGroup
android:id="@+id/categoryChips"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:singleLine="true">
<com.google.android.material.chip.Chip
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="History"/>
<com.google.android.material.chip.Chip
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Science"/>
<com.google.android.material.chip.Chip
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Technology"/>
<com.google.android.material.chip.Chip
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Religion"/>
<com.google.android.material.chip.Chip
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="History"/>
<com.google.android.material.chip.Chip
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Film"/>
<com.google.android.material.chip.Chip
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Book"/>
</com.google.android.material.chip.ChipGroup>
</HorizontalScrollView>
<!-- Content RecyclerView -->
<ScrollView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_marginTop="8dp"
app:layout_constraintTop_toBottomOf="@id/chipScroll"
app:layout_constraintBottom_toBottomOf="parent">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<!-- Row 1 -->
<ImageView
android:id="@+id/image1"
android:layout_width="0dp"
android:layout_height="180dp"
android:layout_margin="4dp"
android:scaleType="centerCrop"
android:src="@drawable/image_ico"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toStartOf="@id/image2"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintWidth_percent="0.5"/>
<TextView
android:id="@+id/text1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Gambar 1"
android:textSize="16sp"
android:layout_marginTop="4dp"
app:layout_constraintTop_toBottomOf="@id/image1"
app:layout_constraintStart_toStartOf="@id/image1"
app:layout_constraintEnd_toEndOf="@id/image1"/>
<ImageView
android:id="@+id/image2"
android:layout_width="0dp"
android:layout_height="180dp"
android:layout_margin="4dp"
android:scaleType="centerCrop"
android:src="@drawable/image_ico"
app:layout_constraintStart_toEndOf="@id/image1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintWidth_percent="0.5"/>
<TextView
android:id="@+id/text2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Gambar 2"
android:textSize="16sp"
android:layout_marginTop="4dp"
app:layout_constraintTop_toBottomOf="@id/image2"
app:layout_constraintStart_toStartOf="@id/image2"
app:layout_constraintEnd_toEndOf="@id/image2"/>
<!-- Row 2 -->
<ImageView
android:id="@+id/image3"
android:layout_width="0dp"
android:layout_height="180dp"
android:layout_margin="4dp"
android:scaleType="centerCrop"
android:src="@drawable/image_ico"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toStartOf="@id/image4"
app:layout_constraintTop_toBottomOf="@id/text1"
app:layout_constraintWidth_percent="0.5"/>
<TextView
android:id="@+id/text3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Gambar 3"
android:textSize="16sp"
android:layout_marginTop="4dp"
app:layout_constraintTop_toBottomOf="@id/image3"
app:layout_constraintStart_toStartOf="@id/image3"
app:layout_constraintEnd_toEndOf="@id/image3"/>
<ImageView
android:id="@+id/image4"
android:layout_width="0dp"
android:layout_height="180dp"
android:layout_margin="4dp"
android:scaleType="centerCrop"
android:src="@drawable/image_ico"
app:layout_constraintStart_toEndOf="@id/image3"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="@id/text2"
app:layout_constraintWidth_percent="0.5"/>
<TextView
android:id="@+id/text4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Gambar 4"
android:textSize="16sp"
android:layout_marginTop="4dp"
app:layout_constraintTop_toBottomOf="@id/image4"
app:layout_constraintStart_toStartOf="@id/image4"
app:layout_constraintEnd_toEndOf="@id/image4"/>
<!-- Row 3 -->
<ImageView
android:id="@+id/image5"
android:layout_width="0dp"
android:layout_height="180dp"
android:layout_margin="4dp"
android:scaleType="centerCrop"
android:src="@drawable/image_ico"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toStartOf="@id/image6"
app:layout_constraintTop_toBottomOf="@id/text3"
app:layout_constraintWidth_percent="0.5"/>
<TextView
android:id="@+id/text5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Gambar 5"
android:textSize="16sp"
android:layout_marginTop="4dp"
app:layout_constraintTop_toBottomOf="@id/image5"
app:layout_constraintStart_toStartOf="@id/image5"
app:layout_constraintEnd_toEndOf="@id/image5"/>
<ImageView
android:id="@+id/image6"
android:layout_width="0dp"
android:layout_height="180dp"
android:layout_margin="4dp"
android:scaleType="centerCrop"
android:src="@drawable/image_ico"
app:layout_constraintStart_toEndOf="@id/image5"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="@id/text4"
app:layout_constraintWidth_percent="0.5"/>
<TextView
android:id="@+id/text6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Gambar 6"
android:textSize="16sp"
android:layout_marginTop="4dp"
app:layout_constraintTop_toBottomOf="@id/image6"
app:layout_constraintStart_toStartOf="@id/image6"
app:layout_constraintEnd_toEndOf="@id/image6"/>
<!-- Row 4 -->
<ImageView
android:id="@+id/image7"
android:layout_width="0dp"
android:layout_height="180dp"
android:layout_margin="4dp"
android:scaleType="centerCrop"
android:src="@drawable/image_ico"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toStartOf="@id/image8"
app:layout_constraintTop_toBottomOf="@id/text5"
app:layout_constraintWidth_percent="0.5"/>
<TextView
android:id="@+id/text7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Gambar 7"
android:textSize="16sp"
android:layout_marginTop="4dp"
app:layout_constraintTop_toBottomOf="@id/image7"
app:layout_constraintStart_toStartOf="@id/image7"
app:layout_constraintEnd_toEndOf="@id/image7"/>
<ImageView
android:id="@+id/image8"
android:layout_width="0dp"
android:layout_height="180dp"
android:layout_margin="4dp"
android:scaleType="centerCrop"
android:src="@drawable/image_ico"
app:layout_constraintStart_toEndOf="@id/image7"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="@id/text6"
app:layout_constraintWidth_percent="0.5"/>
<TextView
android:id="@+id/text8"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Gambar 8"
android:textSize="16sp"
android:layout_marginTop="4dp"
app:layout_constraintTop_toBottomOf="@id/image8"
app:layout_constraintStart_toStartOf="@id/image8"
app:layout_constraintEnd_toEndOf="@id/image8"/>
<!-- Row 5 -->
<ImageView
android:id="@+id/image9"
android:layout_width="0dp"
android:layout_height="180dp"
android:layout_margin="4dp"
android:scaleType="centerCrop"
android:src="@drawable/image_ico"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toStartOf="@id/image10"
app:layout_constraintTop_toBottomOf="@id/text7"
app:layout_constraintWidth_percent="0.5"/>
<TextView
android:id="@+id/text9"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Gambar 9"
android:textSize="16sp"
android:layout_marginTop="4dp"
app:layout_constraintTop_toBottomOf="@id/image9"
app:layout_constraintStart_toStartOf="@id/image9"
app:layout_constraintEnd_toEndOf="@id/image9"/>
<ImageView
android:id="@+id/image10"
android:layout_width="0dp"
android:layout_height="180dp"
android:layout_margin="4dp"
android:scaleType="centerCrop"
android:src="@drawable/image_ico"
app:layout_constraintStart_toEndOf="@id/image9"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="@id/text8"
app:layout_constraintWidth_percent="0.5"/>
<TextView
android:id="@+id/text10"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Gambar 10"
android:textSize="16sp"
android:layout_marginTop="4dp"
android:layout_marginBottom="8dp"
app:layout_constraintTop_toBottomOf="@id/image10"
app:layout_constraintStart_toStartOf="@id/image10"
app:layout_constraintEnd_toEndOf="@id/image10"
app:layout_constraintBottom_toBottomOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>
</ScrollView>
<!-- Floating Action Button -->
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="@+id/fabAdd"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:src="@android:drawable/ic_input_add"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>
Tampilan Aplikasi
Layout ini menggunakan ConstraintLayout sebagai dasar dengan padding 16dp di semua sisi. Di bagian atas terdapat search bar yang diimplementasikan menggunakan TextInputLayout dari Material Design, dilengkapi dengan gaya OutlinedBox dan ikon pencarian di sebelah kiri. Search bar ini memungkinkan pengguna untuk mencari konten dalam aplikasi.
Di bawah search bar, terdapat deretan category chips yang bisa di-scroll secara horizontal. Chips ini ditampung dalam HorizontalScrollView dan berisi berbagai kategori seperti History, Science, Technology, Religion, Film, dan Book. Chips ini memungkinkan pengguna untuk memfilter konten berdasarkan kategori yang dipilih.
Bagian utama layout terdiri dari grid gambar yang ditata dalam ScrollView vertikal. Grid ini menampilkan 10 gambar yang disusun dalam format 2 kolom dan 5 baris. Setiap gambar memiliki lebar 50% dari layar dan tinggi tetap 180dp, dengan scaleType centerCrop untuk penyesuaian gambar yang optimal. Setiap gambar juga dilengkapi dengan caption text di bawahnya yang berjarak 4dp dari gambar.
Struktur grid diatur menggunakan constraint untuk memastikan posisi yang tepat antar elemen. Gambar-gambar disusun berpasangan (kiri-kanan) dengan margin 4dp, menciptakan tampilan yang rapi dan teratur. Layout ini mendukung scrolling vertikal yang smooth untuk mengakomodasi konten yang panjang.
Di pojok kanan bawah, terdapat Floating Action Button (FAB) dengan ikon tambah yang selalu terlihat di atas konten scroll. FAB ini memiliki margin 16dp dari tepi layar dan berfungsi untuk menambah item baru ke dalam aplikasi.
Layout ini dirancang dengan mempertimbangkan responsivitas berkat penggunaan constraint dan persentase lebar untuk gambar. Struktur ini sangat cocok untuk aplikasi galeri, katalog, atau ensiklopedia yang membutuhkan fitur pencarian, filtering kategori, tampilan grid gambar, dan kemampuan untuk menambah konten baru. Desain ini mengoptimalkan penggunaan ruang layar sambil tetap menjaga kemudahan navigasi dan interaksi pengguna.
Komentar
Posting Komentar