CARA MEMBUAT APLIKASI SEDERHANA PENGGUNAAN CONSTRAINT LAYOUT DAN SCROLL VIEW DI ANDROID STUDIO

Welcome To My Blog

Android Studio adalah Integrated Development Environment (IDE) yang sangat populer untuk mengembangkan aplikasi Android. Salah satu komponen layout yang sangat direkomendasikan oleh Google untuk mendesain antarmuka pengguna (UI) adalah Constraint Layout. Layout ini memungkinkan Anda membuat tampilan UI yang kompleks dengan struktur yang fleksibel dan efisien.

Pada artikel blog ini, kita akan membahas bagaimana membuat sebuah aplikasi Android sederhana dengan menggunakan Constraint Layout di Android Studio. Dengan layout ini, Anda bisa dengan mudah mengatur tampilan elemen-elemen UI seperti tombol, teks, gambar, dan lain-lain dengan menggunakan relasi antar elemen. ConstraintLayout adalah jenis layout yang sangat fleksibel di Android. Layout ini memudahkan kita untuk mendesain tampilan UI dengan cara yang lebih efisien dan responsif, baik di ponsel maupun tablet. Dengan ConstraintLayout, kita bisa mengatur posisi dan ukuran elemen UI berdasarkan satu sama lain.Yuk kita mulai!

Langkah-Langkah Menggunakan ConstraintLayout

Bikin Proyek Baru: Buka Android Studio dan buat proyek baru. Pilih Empty Activity dan berikan nama yang keren.

Edit Layout menggunakan scroll view: Buka file layout yang ada di res/layout/activity_main.xml. Tambahkan ConstraintLayout di dalamnya:



Source code:
<ScrollView 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:fillViewport="true">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

    </androidx.constraintlayout.widget.ConstraintLayout>

</ScrollView>

Tambahin Elemen UI ke editor: Kita bisa langsung memilih widget daru palette lalu menarik widget yang kita mau tambahkan ke dalam editor, misalnya kita mau tambahin dua TextView dan satu Button. Contohnya kayak gini:
Tambahkan Constraint: Tarik Klik pegangan constraint berupa lingkaran yang ada di tiap sisi lalu tarik dan hubungkan ke ujung editor. Perhatikan bahwa saat kamu menarik pegangan constraint, Layout Editor akan menampilkan titik jangkar yang mungkin dan overlay biru

Menghapus constraint dapat dilakukan dengan mudah, dengan cara memilih constraint yang ingin dihapus, lalu tekan Delete.

Jika kamu menambahkan constraint yang berlawanan pada sebuah widget, maka widget tersebut diatur secara otomatis ke "fixed" atau "wrap content", di mana view akan terpusat di antara constraint tersebut. Jika kamu ingin view tersebut memperbesar ukurannya untuk memenuhi constraint, ubah ukuran menjadi "match constraints". Jika kamu ingin mempertahankan ukuran saat ini tetapi memindahkan view agar tidak terpusat.

Contoh layout plikasi dengan tema wisata pantai anyer

Dari materi yang sudah diberikan kalian bisa mencoba untuk membuat layout sesuai dengan kreasi kalian sendiri, disini saya sudah membuat layout berupa halaman login yang dapat kalian lihat pada video dibawah:

Source Code

<ScrollView 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:fillViewport="true">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">


    <TextView
            android:id="@+id/textView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Wisata Pantai Anyer"
            android:textStyle="bold"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.498"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintVertical_bias="0.053" />

        <ImageView
            android:id="@+id/imageView"
            android:layout_width="301dp"
            android:layout_height="172dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/textView"
            app:layout_constraintVertical_bias="0.046"
            app:srcCompat="@drawable/anyer" />

        <TextView
            android:id="@+id/textView3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="36dp"
            android:text="Pantai Anyer adalah salah satu destinasi wisata paling terkenal di Provinsi Banten, Indonesia, yang menawarkan keindahan pantai berpasir putih, ombak yang relatif tenang, dan pemandangan laut lepas yang memukau. Terletak di pesisir barat Pulau Jawa, Pantai Anyer menjadi tujuan favorit bagi wisatawan lokal dan mancanegara yang ingin menikmati suasana pantai dengan berbagai fasilitas wisata yang lengkap.  Pantai ini sangat cocok untuk berbagai aktivitas seperti berenang, berjemur di bawah matahari, bermain pasir, atau sekadar bersantai di tepi pantai sambil menikmati angin laut yang sejuk. Wisatawan juga bisa berjalan-jalan di sepanjang bibir pantai untuk menikmati panorama indah, terutama saat matahari terbenam yang sering menjadi momen paling ditunggu di Pantai Anyer.  Selain bersantai di pantai, Pantai Anyer juga menawarkan berbagai pilihan olahraga air seperti banana boat, jet ski, parasailing, dan snorkeling. Aktivitas ini sangat diminati oleh para pengunjung yang ingin menikmati sensasi bermain di laut atau mengeksplorasi keindahan bawah laut yang memikat. Bagi para penyelam, snorkeling menjadi pilihan menarik untuk melihat kekayaan terumbu karang dan ikan-ikan kecil yang berenang bebas di sekitar kawasan pantai.  Tak hanya itu, di Anyer terdapat Mercusuar Cikoneng, salah satu peninggalan bersejarah yang dibangun pada masa kolonial Belanda.Mercusuar ini dibangun sebagai penanda untuk kapal-kapal yang melintasi Selat Sunda dan kini menjadi salah satu ikon wisata Anyer. Pengunjung bisa menaiki mercusuar hingga ke puncaknya untuk menikmati pemandangan laut dari ketinggian, yang memberikan pengalaman tak terlupakan dengan panorama luas yang menyejukkan mata.  Kawasan sekitar Pantai Anyer juga memiliki banyak pilihan akomodasi, mulai dari penginapan sederhana hingga resort dan hotel mewah yang menawarkan fasilitas lengkap. Banyak penginapan yang memiliki akses langsung ke pantai, sehingga wisatawan bisa menikmati suasana pantai kapan saja selama menginap. Beberapa resort di Anyer juga dilengkapi dengan kolam renang, restoran, serta fasilitas olahraga, menjadikannya tempat yang ideal untuk liburan keluarga atau rombongan."
            app:layout_constraintEnd_toEndOf="@+id/imageView"
            app:layout_constraintHorizontal_bias="0.466"
            app:layout_constraintStart_toStartOf="@+id/imageView"
            app:layout_constraintTop_toBottomOf="@+id/imageView" />

    </androidx.constraintlayout.widget.ConstraintLayout>

</ScrollView>

Kesimpulan

Dengan ConstraintLayout, kita bisa bikin layout yang rapih dan responsif. Gak perlu takut lagi sama tampilan yang acak-acakan! Coba deh eksperimen dengan berbagai elemen UI dan constraint sesuai kebutuhan desain kamu.Berikut video Hasil aplikasi yang sudah dibuat:

Cari Blog Ini

Daffa tri handika