Tutorial Desain XML pada Android Studio

-

    Tutorial Desain XML pada Android Studio

Halo teman-teman semua, untuk melanjutkan tutorial Android Studio, saya akan memberikan panduan singkat tentang bagaimana mendesain tampilan UI di Android Studio dengan menggunakan XML.
 
Ada dua, metode untuk mendesain dengan menggunakan XML :
 
Cara 1, Coding manual dengan mengedit kode XML.
 
 
 
Cara 2, Drag and Drop, yaitu mendesain secara Visual. 
 

Darij dua gambar diatas, pastinya kalian melihat beberapa side bar, terdapat tiga diantaranya adalah :

1. Attributes
Attributes adalah elemen-elemen kunci yang digunakan dalam file XML untuk menggambarkan dan mengatur properti dari komponen antarmuka pengguna (UI) yang kalian buat.

berikut adalah penjelasan singkat tentang beberapa atribut penting yang biasanya ada di Android Studio:

  1. ID: Atribut ini memberikan identifikasi unik untuk komponen di dalam XML layout kalian. ID ini digunakan untuk mengidentifikasi dan mengakses komponen dari kode Java kalian.

  2. Layout Width dan Layout Height: Atribut ini menentukan lebar dan tinggi komponen. kalian dapat menentukan ukuran dalam piksel, dip, atau menggunakannya sebagai "wrap_content" untuk menyesuaikan ukuran dengan isi komponen atau "match_parent" untuk mengisi seluruh ruang yang tersedia.

  3. Text: Atribut ini menentukan teks yang ditampilkan pada komponen seperti TextView atau Button.

  4. Hint: Atribut ini memberikan petunjuk atau label temporer yang muncul di dalam komponen, biasanya dalam bentuk teks ringkas, untuk memberikan panduan pengguna.

  5. Src: Atribut ini digunakan untuk menentukan sumber gambar (seperti gambar PNG atau JPG) untuk komponen seperti ImageView atau ImageButton.

  6. Background: Atribut ini menentukan latar belakang dari komponen. kalian dapat menggunakan warna, gambar, atau bentuk yang telah didefinisikan dalam file XML.

  7. Padding: Atribut ini menentukan jarak antara konten dalam komponen dengan batas komponen itu sendiri.

  8. Gravity: Atribut ini mengatur posisi konten di dalam komponen. Misalnya, kalian dapat menggunakan "center", "start", atau "end" untuk mengatur posisi teks dalam TextView.

  9. Enabled: Atribut ini menentukan apakah komponen dapat berinteraksi atau diaktifkan. Jika diatur sebagai "false," maka komponen akan non-aktif.

  10. Click Listener: Bukan atribut dalam XML, tetapi penting untuk menyebutkannya. Dengan menetapkan "OnClickListener" pada komponen, kalian dapat memberikan tindakan atau aksi yang akan dilakukan ketika pengguna mengklik komponen tersebut.

2. Palette 
Palette adalah kotak alat yang berisi berbagai komponen UI siap pakai yang dapat kalian gunakan untuk membangun antarmuka pengguna. Di palet ini, kalian dapat menemukan elemen-elemen seperti tombol, teks, gambar, dan banyak lagi. Cukup seret komponen yang diinginkan dari palet dan tempatkan di halaman tampilan kalian. Ini memungkinkan kalian membuat tampilan antarmuka dengan cepat tanpa perlu menulis kode dari awal.
 

 
3. Component Tree 
Component Tree adalah tampilan daftar berjenjang dari semua elemen tampilan antarmuka pengguna (UI) dalam suatu halaman (layout) aplikasi di Android Studio. Dalam pohon komponen ini, kalian dapat melihat semua elemen UI yang ada dan bagaimana mereka disusun secara hierarkis. Ini membantu kalian memahami struktur tampilan dan membuat pengeditan lebih mudah.
 
 
Berikut adalah contoh penggunaan atribut pada elemen Button dalam file XML:
 
Contoh 1 :   
<Button
    android:id="@+id/myButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Klik Saya"
    android:onClick="onClickButton" />

Pada contoh di atas, kita menggunakan atribut "android:id" untuk memberikan identifikasi unik untuk elemen Button. Atribut "android:layout_width" dan "android:layout_height" digunakan untuk menetapkan lebar dan tinggi elemen. Atribut "android:text" menentukan teks yang akan ditampilkan pada Button, dan "android:onClick" menentukan metode yang akan dipanggil ketika Button diklik.

 

 Contoh 2 :
<TextView
    android:id="@+id/myTextView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Ini adalah teks contoh"
    android:gravity="center" />
Pada contoh di atas, atribut "android:gravity" diatur sebagai "center," sehingga teks dalam TextView akan berada di tengah area yang tersedia, baik secara vertikal maupun horizontal.

Comments

Post a Comment

Popular posts from this blog

Website Ticket Pesawat menggunakan Laravel

-
Image
Berikut adalah tutorial pembuatan webisite e-commerce ticketing pesawat menggunakan laravel.    Website ini memiliki 4 jenis pengguna, yaitu: Admin: Berperan sebagai pihak tertinggi yang bertugas menyetujui dan memvalidasi maskapai yang mendaftar di website ini. Maskapai: Berperan dalam membuat dan mengelola jadwal penerbangan, tiket, serta menyetujui dan memvalidasi transaksi yang dilakukan oleh pengguna. User: Berperan sebagai pengguna umum yang dapat mencari dan memesan tiket pesawat, serta melakukan pembayaran. Unvalidated: Merupakan status akun bagi maskapai yang baru mendaftar dan sedang menunggu proses validasi oleh admin. Secara singkat, cara kerja website ini adalah: Maskapai mendaftar di website dan menunggu proses validasi oleh admin. Setelah divalidasi, maskapai dapat membuat dan mengelola jadwal penerbangan dan tiket. Pengguna dapat mencari dan memesan tiket pesawat yang tersedia. Maskapai menyetujui dan memvalidasi transaksi yang dilakukan oleh pengguna. Pengguna...
Read more

Crud Laravel Single Field

-
Image
Crud Laravel Single Field Radja Mahesa Waluya XII RPL 1. Membuat Tabel Database, Pastekan Kode berikut pada Database phpMyAdmin. untuk membuat tabel yang berisi 1 Field. SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO" ; START TRANSACTION ; SET time_zone = "+00:00" ; CREATE TABLE ` tekstable ` ( `teks` varchar ( 50 ) NOT NULL ) ENGINE = InnoDB DEFAULT CHARSET = utf8mb4 COLLATE = utf8mb4_general_ci; INSERT INTO `tekstable` ( `teks` ) VALUES ( 'Ini Teks yang di edit' ); COMMIT ; 2. Membuat Controller <?php namespace App\Http\Controllers ; use App\Models\ teksmodel ; use Illuminate\Http\ Request ; class tekscontroller extends Controller { /** * Display a listing of the resource. * * @return \Illuminate\Http\ Response */ public function index () { $teks = teksmodel :: orderby ( 'teks' )-> paginate ( 100 ); return view ( 'crudfield.index' )-> with ( 'teks' , $teks )...
Read more

Basic Android Studio dengan JAVA

-
Image
       Basic Android Studio dengan JAVA Halo teman-teman semua, pada kesempatan ini saya akan memberikan tutorial untuk membuat aplikasi android sederhana dengan IDE Android Studio. Langkah 1 , Install Android Studio:  Pastikan sudah menginstall  Android Studio di laptop kalian masing-masing.  jika belum klik link tutorial berikut : https://radjamahesaw.blogspot.com/2023/06/setup-android-studio.html Langkah 2 , Membuat Project:  Silahkan membuat project baru dengan mengikuti langkah-langkah berikut :    1.    Klik New Project , untuk membuat project baru. ( Gambar 1) Gambar 1    2.    Pilih Empty Views Activity / Empty Activity.   ( Gambar 2) Gambar 2    3.    Pada Pilihan Berikut.  ( Gambar 3 & 4) Name (Nama Project Kalian) Package Name (com.optional.optional) Save location (Bebas) Language (Pilih Bahasa Java) Minumum SDK (API 24: Android 7.0/8.0) adalah versi min...
Read more