Membuat Constrain Layout Sederhana dan Responsif

Pada postingan kali ini penulis akan membagikan bagaimana caranya membuat Constrain Layout Sederhana dan Responsif

Apa itu Constrain Layout?

Constraint Layout adalah salah satu layout di Android Studio yang memungkinkan kamu untuk membuat UI yang lebih fleksibel dan responsif dengan mendefinisikan posisi dan ukuran view berdasarkan constraints (batasan) dari view lainnya. Layout ini memungkinkan elemen-elemen UI diatur dalam tata letak yang lebih kompleks tanpa menggunakan nested layouts (layout bersarang), sehingga membantu meningkatkan kinerja aplikasi.

Apa itu Responsif?

Responsif mengacu pada kemampuan aplikasi untuk tampil dengan baik di berbagai ukuran layar dan orientasi perangkat yang berbeda. Dalam konteks Android, responsif berarti tampilan aplikasi tetap optimal, baik di perangkat kecil seperti smartphone, maupun di perangkat yang lebih besar seperti tablet.

Berikut itu adalah sedikit informasi mengenai Constrain Layout dan Responsif, mari kita ke langkah pembuatannya

Pertama kita perlu membuat project pada Android Studio kita

        1. Kita New Project

        2. Pilih Empty Views Activity

Kedua kita edit kode di XML, berikut adalah kodenya 

  1. <?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:id="@+id/main" android:layout_width="match_parent" android:layout_height="match_parent" android:backgroundTint="#01796F" tools:context=".MainActivity"> <TextView android:id="@+id/textView3" android:layout_width="189dp" android:layout_height="35dp" android:text="TOKOPEDISHOP" android:textColor="#ff2400" android:textSize="20sp" android:textStyle="bold" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintHorizontal_bias="0.537" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" app:layout_constraintVertical_bias="0.19" /> <Button android:id="@+id/button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="36dp" android:backgroundTint="#ff2400" android:text="Bayar" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintHorizontal_bias="0.312"
  2. app:layout_constraintStart_toStartOf="parent"
  3. app:layout_constraintTop_toBottomOf="@+id/editTextText2" app:layout_constraintVertical_bias="0.008" /> <EditText android:id="@+id/editTextText" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="24dp" android:ems="10" android:inputType="text" android:text="Nama Barang" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toBottomOf="@+id/textView3" /> <Button android:id="@+id/button3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="36dp" android:backgroundTint="#ff2400" android:text="Deskripsi" android:textColorLink="#01796F" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintHorizontal_bias="0.671" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toBottomOf="@+id/editTextText2" app:layout_constraintVertical_bias="0.008" /> <EditText android:id="@+id/editTextText2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="28dp" android:ems="10" android:inputType="text" android:text="Harga" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintHorizontal_bias="0.502" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toBottomOf="@+id/editTextText" /> </androidx.constraintlayout.widget.ConstraintLayout>

Dan ini adalah tampilan dari Aplikasinya dalam bentuk portrait



Dan ini adalah tampilan Aplikasi dalam bentuk landscape


Selesai sudah pembahasan tentang bagaimana caranya membuat Constrain Layout dalam bentuk Responsif dalam postingan kali ini semoga membantu.



Komentar

Posting Komentar

Postingan populer dari blog ini

Gambar
KOMUNIKASI  ANTARA  FRAGMENT Postingan ini berisi tentang contoh sederhana bagaimana cara komunikasi antara Fragment ke Fragment di Android Studio menggunakan bahasa Java Berikut ini adalah link Source Code contohnya : https://github.com/Longhord/Komunikasi_Fragment.git Pertama kita buat dahulu projectnya, disini saya menggunakan Empty Views Activity Setelah itu kita beri nama untuk project kita, lalu untuk languagenya kita pilih Java Ketika project telah terbuat kita bisa langsung membuat Fragmentnya dengan cara mengklik tombol kanan mouse kita lalu kita pilih Fragment lalu pilih yang Fragment (Blank). Disini kita perlu membuat dua Fragment, saya beri nama First Fragment dan Second Fragment. Fungsi Fragment 1 yaitu mengirim pesan dan Fragment 2 itu untuk menerima pesan. Berikut ini adalah tampilan dari First Fragmentnya disini kita bisa menginput pesan kita. Lalu ini adalah tampilan dari Second Fragment, yang isinya itu menerima pesan dari First Fragment Dari semua langkah - ...
Baca selengkapnya

Aplikasi sederhana dengan implisit Intent

Gambar
Pada postingan kali ini penulis akan memberikan sebuah tutorial bagaimana caranya membuat Aplikasi Sederhana dengan Implisit Intent Apa itu Implisit Intent? Implisit intent adalah jenis intent di Android yang digunakan untuk meminta sistem Android melakukan suatu tindakan tanpa menyebutkan komponen aplikasi secara spesifik. Dengan kata lain, implisit intent memungkinkan aplikasi untuk memanggil fungsi dari aplikasi lain atau sistem, berdasarkan jenis tindakan yang ingin dilakukan. Contoh penggunaan implisit intent termasuk: Membuka halaman web. Mengirim email. Melakukan panggilan telepon. Berbagi konten melalui aplikasi lain (misalnya aplikasi pesan atau media sosial). Membuka peta atau aplikasi navigasi. Begitu saja sedikit penjelasan tentang apa itu Implisit Intent, selanjutnya kita akan mempraktekkannya di Android Studio kita. 1. Buat New Project di Android Studio, kemudian pilih yang Empty Views Activity  2. Kita edit code di bagian Activity Main.xml dan Main Activity.java ...
Baca selengkapnya