1. Layout : Layout merupakan perluasan dari kelas ViewGroup. Layout berfungsi sebagai wadah komponen lainnya. Layout mengatur bagaimana komponen lainnya akan ditampilkan. Jenis-jenis layout yaitu LinearLayout, RelativeLayout, FrameLayout, TableLayout, dan GridLayout.
2. Widget : Widget terdiri dari Button, Checkbox, Textview, Switches, Imageview, Progress bar, spinner, dan Webview. Widget disebut juga dengan UI Control.
3. Text Field : Dengan komponen ini user dapat melakukan input teks.
4. Container : Merupakan komponen yang umum digunakan untuk menampilkan komponen-komponen yang sama. Beberapa container yaitu radio group, list view, scroll view.
5. Date & Time : Komponen ini digunakan untuk menampilkan tanggal dan waktu.
Ada beberapa terminologi umum untuk User Interface (Antarmuka) Android, yaitu :
1) Views : View adalah base class untuk semua komponen visual (biasa disebut sebagai controls atau widgets). Semua widget UI, termasuk layout UI, mewarisi kelas View.
2) View Groups : View Group adalah perluasan dari kelas View yang berfungsi menampung beberapa child View.
3) Fragments : Fragments berfungsi sebagai pembungkus layout dan mengoptimasi tampilan layout pada ukuran layar perangkat yang berbeda-beda.
4) Activities : Activity adalah sesuatu yang ditampilkan, yang merepresentasikan window atau layar. Untuk menampilkan User Interface maka kita melekatkan View pada activity.
Untuk mempermudah dalam pengelompokan, maka Views dikelompokkan menjadi :
1. Basic Views : Basic view merupakan objek View dasar yang meliputi Widget (Control) dan TextField
2. Picker Views : Merupakan View yang menyediakan list untuk dipilih user, seperti TimePicker dan DatePicker.
3. List Views : Merupakan View yang menampilkan item list yang panjang, seperti ListView dan SpinnerView
1. Graphical Editor
Buka layout utama /src/main/res/layout/activity_main.xml di project kita. Graphical Editor akan terbuka sendirinya. Untuk mengganti tampilan menjadi Graphical Editor atau Text Editor, klik tab yang ada di bawah, Design dan Text. Di sini kita bisa menambahkan komponen User Interface melalui “Components Palette”.
Pada toolbar (nomor3) terdapat beberapa option untuk mengganti style dan preview layout.
2. Text Editor
Ganti graphical editor menjadi text editor dengan mengklik Text tab. Untuk menambahkan komponen User Interface dapat kita lakukan dengan menuliskan tag xml melalui text Editor ini.
3. Membuat layout baru
Ketika kita membuat main activity, layout juga dibuat secara otomatis.
activity_main.xml merupakan file layout yang digunakan untuk mengatur tampilan “main activity”.
4. Menambahkan Komponen
Kita menggunakan LinearLayout sebagai layout kita yang mengandung text view yang mencetak “Hello world!”. Untuk memperunik, kita tambahkan beberapa komponen UI.
Kita akan membuat aplikasi seperti screenshot berikut :
Silakan gunakan baris kode berikut pada activity_main.xml dan MainActivity.java .
Hapus kode xml kita dan ganti dengan kode xml di bawah
Activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="com.reinhardjs.uicomponents.MainActivity">
<TextView
android:id="@+id/textPrint"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="30dp"
android:textSize="20sp"
android:layout_gravity="center"
android:text="Hello world!"/>
<EditText
android:id="@+id/textField"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="30dp"
android:hint="Masukkan nama" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="30dp"
android:layout_marginLeft="15dp"
android:text="Saya berasal dari pulau "/>
<RadioGroup
android:id="@+id/pilihan_pulau"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp">
<RadioButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Sumatera"/>
<RadioButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Kalimantan"/>
<RadioButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Sulawesi"/>
<RadioButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Jawa"/>
<RadioButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Papua"/>
</RadioGroup>
<Button
android:id="@+id/submitButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="30dp"
android:layout_gravity="center"
android:text="Klik"/>
</LinearLayout>
Tambahkan kode program berikut di bawah setContentView(...).
MainActivity.java
// Mendapatkan referensi objek yang telah ditambahkan pada activity_main.xml
final TextView myTextView = (TextView) findViewById(R.id.textPrint);
final EditText textField = (EditText) findViewById(R.id.textField);
final RadioGroup myRadioGroup = (RadioGroup) findViewById(R.id.pilihan_pulau);
Button myButton = (Button) findViewById(R.id.submitButton);
// Menambahkan event listener ketika objek Button dengan id submitButton diklik
// onClick(View v) akan dijalankan pada saat tombol diklik
myButton.setOnClickListener(new View.OnClickListener(){
@Override
public void onClick(View v){
// Mendapatkan posisi pilihan, dimana posisi pilihan dimulai dari 0
int id_pilihan = myRadioGroup.getCheckedRadioButtonId();
// Mendapatkan objek radio_pilihan menggunakan id
RadioButton pulau_pilihan = (RadioButton) findViewById(id_pilihan);
// Mengubah nilai teks dari objek TextView dengan id textPrint
myTextView.setText("Halo, " + textField.getText().toString() + " \ndari "
+ pulau_pilihan.getText().toString());
}
});
Menggunakan kode XML untuk mengatur tampilan layout
Tidak ada komentar