Cara Membuat Dan Mengatur Constrain Layout Pada Android Studio Dolphin

05.13 No Comments

 

HALLO SOBAT BLOGGERS !!!

Pada Hari ini kita bakal membahas tentang ConstraintLayout di Android dengan menggunakan Android Studio Dolphin, agar tampilan aplikasi buatan kalian jadi lebih rapih dan efisien, Sobat Bloggers pasti tahu dong kalo tampilan desain yang rapih itu penting banget buat pengalaman pengguna. Nah Sobat Bloggers  dengan ConstraintLayout, kita bisa atur posisi dan ukuran elemen UI tanpa ribet, dan yang paling penting, hasilnya bisa responsif di berbagai ukuran layar.

CONSTRAINT LAYOUT

ConstraintLayout adalah sebuah layout dalam Android yang memungkinkan pengembang untuk mengatur tampilan elemen UI dengan lebih fleksibel dan efisien. Dibandingkan dengan layout tradisional seperti RelativeLayout atau LinearLayout, ConstraintLayout menawarkan kontrol yang lebih mendetail dalam mengatur posisi dan ukuran elemen.

MULAI MEMBUAT CONSTRAINT LAYOUT 

1. Buat Proyek Baru, Open Android Studio dan buat New Project. Pilih Empty Activity dan berikan nama sesuai keinginan Sobat Blogger Yach.

2. Edit Layout: Open file layout yang ada di res/layout/activity_main.xml.Tambahkan ConstraintLayout di dalamnya

3. Tambahkan Element UI : Sobat Bloggers bisa langsung memilih widget baru palette lalu menarik widget yang kita mau tambahkan ke dalam editor, misalnya kita mau tambahin dua TextView dan satu Button. Contohnya seperti gambar dibawah:

Penjelasan Element

• TextView: adalah elemen dasar dalam Android Studio yang digunakan untuk menampilkan teks statis atau dinamis di layar. Elemen ini sering digunakan untuk menampilkan judul, deskripsi, atau teks lain yang tidak perlu diubah oleh pengguna.
• Button: adalah elemen UI yang digunakan untuk memicu suatu tindakan ketika pengguna mengetuknya. Elemen ini sangat umum dipakai dalam aplikasi untuk mengeksekusi perintah seperti navigasi, pengiriman data, dan lain-lain.

Menambahkan dan Menghapus Constraint Layout Pada Android Studio Dolphin

Untuk menambahkan Costraint Layout Sobat Bloggers Cukup ikutin langkah-langkah berikut ini:

• Drag Widget ke Editor: Tarik sebuah widget dari jendela Palette ke editor. Saat Sobat Bloggers menambahkan widget di ConstraintLayout, widget tersebut akan muncul dalam kotak pembatas dengan pegangan persegi di setiap sudut dan pegangan lingkaran di setiap sisi.
• Tambahkan Constraint: 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, Sobat Bloggers Cukup dengan memilih constraint yang ingin dihapus, lalu tekan Delete.

Jika Sobat Bloggers menambahkan constraint yang saling 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 Sobat Bloggers ingin mempertahankan ukuran saat ini tetapi memindahkan view agar tidak terpusat disatu titik.

CONTOH CONSTRAINT LAYOUT

Dari materi yang sudah diberikan Sobat Bloggers bisa langsung mencoba untuk membuat layout sesuai dengan kreasi Sobat Bloggers Masing-masing yach, disini saya sudah membuat layout berupa halaman Penjualan Ticket Konser JKT48 yang dapat kalian lihat pada video dibawah:

KESIMPULAN

dalam Android Studio yang memungkinkan penempatan elemen UI dengan fleksibel dan efisien menggunakan "constraint" atau batasan posisi relatif terhadap elemen lain atau tepi layar. Layout ini memudahkan pengembangan antarmuka yang responsif, mengurangi tingkat hierarki, sehingga mempercepat proses rendering aplikasi. Dengan fitur seperti Chain, Bias, Barrier, dan Guidelines, ConstraintLayout sangat cocok untuk tata letak yang kompleks tanpa menurunkan performa aplikasi.

Read More

Cara Membuat Aplikasi Android Menggunakan Android Studio (E-Commerce Gultik Pak Drawan) Dengan Mengirim Data Antar Fragment

03.28 No Comments

HALO SOBAT BLOGGERS !!!

Ingin tahu bagaimana cara mengembangkan aplikasi Android yang canggih? Kali ini, Saya akan membahas langkah-langkah bagaimana caranya mengirim data antar Fragment A ke Fragment B menggunakan Android Studio? Dari konsep dasar hingga implementasi praktis?, disini Saya akan membahas setiap langkah secara detail agar kalian Sobat Bloggers bisa membuat aplikasi yang lebih dinamis dan interaktif hanya dengan Menggunakan  Android Studio Kita juga akan pakai SharedViewModel supaya data yang dipilih di satu fragment bisa dengan mudah dibagi ke fragment lain..

Tapi sebelum kita mulai boleh dong saya menyampaikan satu pantun? bilang cakep ya

Ke pasar beli buah mangga (cakep)
Pulangnya mampir ke warung nasi (cakep)
Kalau malas belajar tiap hari saja (cakep)
Nanti penyesalan datang di hari nanti (cakep)

 Yuk, kita mulai!

Persiapan pastikan kalian sudah menginstal Android Studio Dolphin

Kalau Sobat Bloggers belum punya Android Studio Dolphin, pastikan kamu download dan install versi ini dulu dari situs resmi Android Studio. Setelah selesai mengistal, kita siap bikin project baru!

Langkah Pertama : Buat Project Baru  DiAndroid Studio Dolphin

• Buka Aplikasi Android Studio Dolphin
• Pilih New Project
• Pada jendela Select Project Template, pilih template Empty Activity, kemudian klik Next.
• Pada jendela Configure Your Project:
  • Name: Isi dengan nama project, misalnya "BelajarFragment".
  • Package Name: Ini bisa dibiarkan default atau disesuaikan dengan kebutuhanmu.
  • Save Location: Tentukan di mana project ini akan disimpan.
  • Language: Pilih Java.
  • Minimum API Level: Pilih API Level yang sesuai, misalnya API 17 ( 4.2 JellyBean) agar bisa menjangkau lebih banyak device
• Selanjutnya Klik Finish dan Android Studio akan membuatkan project baru untukmu
• marvelous! Kamu Sudah punya project baru yang siap dikembangkan

Langkah Kedua : Buat SharedViewModel (Untuk data sharing)

  Nah Sekarang kita akan membuat "SharedViewModel" , Sedikit penjelasan SharedViewModel adalah sebuah pola yang sering digunakan dalam arsitektur aplikasi Android, khususnya dalam arsitektur berbasis MVVM (Model-View-ViewModel), untuk berbagi data antar fragment atau activity. Dengan SharedViewModel, beberapa fragment atau activity dapat mengakses dan berbagi data secara efisien, tanpa harus langsung berkomunikasi satu sama lain.

• Di Project Explorer sebelah kiri, kalian buat file baru dengan cara klik kanan pada folder yang bernama java/{Gultik_Pak_Drawan}, lalu kemudian pilih New > Java Class.
• Beri nama file ini 
SharedViewModel.

Isi File "SharedViewModel.java" dengan kode sebagai berikut:

Langkah Ketiga : Buat Fragment A / Fragment Satu 

Pada Fragment A, kita akan membuat tiga buah tombol yang memiliki fungsi memilih warna. Ketika kamu klik salah tombol tersebut warna yang kalian pilih akan dikirim ke file ShareViewModel yang sudah kita buat awal tadi.

1. Buat New File untuk Fragment A

Klik kanan pada folder java/{fragmensatu}, pilih New > Fragment > Fragment (Blank)

Beri nama file dengan "fragmensatu"

  2. Isi File "Fragmentsatu.java" dengan codingan seperti berikut ini :

     3. Nah Sekarang kalian buat layout untuk Fragment A di res/layout/fragment_satu.xml   

Dengan Setup Codingan seperti ini, Fragment A akan memiliki tiga buah tombol yang bisa kalian klik untuk memilih warna sesuai keinginan kalian.

Langkah Ke Empat  : Buat Fragment B / Fragment dua

Nah Sekarang kita akan membuat Fragment B yang akan menampilkan warna dari Fragment A

1. Buat File baru untuk Fragment B Seperti langkah sebelumnya dan diberi nama Fragmentdua
2. Isi File "Fragmentdua" dengan codingan seperti berikut ini :

    3. Buat Layout untuk Fragment B di file res/layout/fragment_dua.xml: 

Langkah kelima : Gabungkan Kedua Fragment di MainActivity  

Nah Terakhir kita akan menggabungkan kedua Fragment A dan Fragment B didalam File MainActivity Supaya bisa tampil secara bersamaan. 

1. Open File "MainActivity.java" dan tambahkan codingan seperti berikut ini :

   2. Selanjutnya, Buat Layout untuk MainActivity di res/layout/activity_main.xml:

Langkah Ke Enam : Running Aplikasi yang sudah Kalian Buat

Nah Sobat Bloggers Sekarang saatnya kalian Running aplikasinya, ketika Aplikasi dijalankan, Sobat Bloggers akan melihat dua Fragement: 

• Fragment A diatas berfungsi untuk memilih warna sesuai keinginan kalian.
• Fragment B dibawab berfungsi untuk menampilkan warna yang sudah kalian pilih tadi.

Setiap Sobat Bloggers memilih warna di Fragment A, Fragment B akan langsung meng-update background dan teks sesuai dengan warna yang solid. Berikut ini adalah preview aplikasi saya yang sudah jadi silahkan disimak videonya: 

Kesimpulan

Nah Sobat Bloggers sekarang aplikasi android studio kalian sudah jadi nih kesimpulan nya adalah kalian sudah berhasil membuat Aplikasi sederhana menggunakan Android Studio dengan mengirim data antar Fragment menggunakan SharedViewModel dengan Fragment A dan Fragment B bisa saling berbagi data dengan tutorial seperti diatas.

Selamat Mencoba Sobat Bloggers!!!

Read More