11 Mar

Fungsi Layout Weight sebagai Spacer dalam Linear Layout

Dear JavaClopedia Fans,

Kemarin hari Sabtu saya penasaran dengan yang namanya android:layout_weight di dalam desain XML Layout Android. Pasalnya saya asal pakai di dalam membuat produk Marbel Dongeng. Karena awalnya asal pakai jadinya tidak begitu paham dan saya niatkan untuk menelusuri apa maksud dari komponen tersebut. Nah sobat JavaClopedia, berikut ulasannya.

Sebelum kita melihat implementasi secara langsung, kasusnya adalah sebagai berikut. Saya ingin membuat desain layout di Android dengan urutan:

** Icon 1 ********* Icon 2 ** Icon 3 **

Icon 1 memiliki layout LEFT, sedangkan Icon 2 dan Icon 3 memiliki layout RIGHT. Seandainya dijalankan di dalam device yang lebih lebar akan menjadi seperti ini:

** Icon 1 ***************************** Icon 2 ** Icon 3 **

kesimpulannya adalah, seberapa lebar device yang ada. Maka posisi Icon 2 dan Icon 3 akan berada di bagian kanan (RIGHT). seandainya Icon 2 saya hapus akan menjadi seperti ini nantinya:

** Icon 1 ************************************** Icon 3 **

Contoh kasus di atas dapat kita wujudkan menggunakan komponen android:layout_weight sebagai spacer. Kenapa disebut spacer? karena dapat memberikan ruang yang dinamis kepada komponen View tertentu.

Berikut contoh kode programnya:

<linearlayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="72dp" android:orientation="horizontal" android:background="@android:color/holo_purple">
 
    <imageview android:layout_width="72dp" android:layout_height="fill_parent" android:src="@android:drawable/star_big_on" android:background="@android:color/transparent"></imageview>
     
    <!-- If only 1 View has a layout weight then it will automatically fill the rest of the LinearLayout in that dimension. -->
    <imageview android:id="@+id/SpacerView" android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1"></imageview>
     
    <imagebutton android:id="@+id/show_map" android:layout_width="72dp" android:layout_height="fill_parent" android:src="@android:drawable/ic_menu_add" android:background="@android:color/transparent"></imagebutton>
    <imagebutton android:id="@+id/show_phone" android:layout_width="72dp" android:layout_height="fill_parent" android:src="@android:drawable/ic_menu_edit" android:background="@android:color/transparent"></imagebutton>
 
</linearlayout>

Perhatikan baik-baik bagian android:layout_weight=”1″, pada bagian tersebut artinya adalah komponen tersebut akan memiliki weight (lebar) yang semaksimal mungkin sisa dari pemakaian ruang dari komponen yang lain. Apabila tidak ada komponen yang lain maka otomatis akan memenuhi lebar device.

Semoga bermanfaat bagi teman-teman

Best Regards,

Andi Taru – JavaClopedia Founder

11 Mar

Deteksi Click pada Radio Button Android

Dear JavaClopedia Developers,

Tutorial baru lagi nih, mumpung super semangat. Berikut akan saya bahas mengenai cara mendeteksi event Click pada Radio Button yang telah kita masukkan ke dalam desain Layout XML. Ada 2 cara memberikan deteksi event Click pada Radion Button. Kita mulai yang pertama.

1. Ditentukan melalui Layout XML

cara yang pertama, kita dapat menentukan method yang akan dipanggil ketika Radio Button tersebut di click. perhatikan potongan kode program pada XML Layout berikut ini:

RadioButton
        android:id="@+id/radio_right1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/rad_option1"
        android:checked="true"
        android:textColor="#f00"
        android:onClick="onRadioButtonClick"
/>

perhatikan kode program android:onClick=”onRadionButtonClick” artinya adalah kita tentukan apabila nanti RadioButton di klik, maka panggilan method onRadionButtonClick(). Kira-kira begitu logika gampangnya. selanjutnya berarti di dalam Activity, kita harus tambahkan method tersebut seperti berikut ini:

public void onRadioButtonClick(View v) {
    RadioButton button = (RadioButton) v;
    Toast.makeText(SimpleRadioButtonActivity.this,
        button.getText() + " was chosen.",
        Toast.LENGTH_SHORT).show();
}

2. Diset di dalam kode program (programatically)

cara yang kedua, adalah dengan menggunakan kode program secara langsung. Perhatikan potongan kode program berikut ini:

RadioGroup radio = (RadioGroup) findViewById(R.id.radio_right1);
OnClickListener radio_listener = new OnClickListener() {
    public void onClick(View v) {
        onRadioButtonClick(v);
    }
};

Perhatikan bahwa di dalam kode program di atas, kita override method public void onClick() kemudian di dalamnya kita isi dengan kode program yang akan dijalankan ketika Radio Button tersebut di click oleh user.

Selamat Mencoba!

Best Regards,

Andi Taru – JavaClopedia