Layout dan Widget View pada Android Studio
Wednesday, 26 September 2018
Add Comment
1. View dan ViewGroup
Sebuah activity berisi View dan Viewgroup. View adalah sebuah widget yang mempunyai tampilan pada layar. Contoh dari view adalah button, label dan textbox. Sebuah view diturunkan dari class Android dasar, yaitu android.view.View.
Satu atau lebih view dapat dikelompokkan secara bersama ke dalam sebuah ViewGroup. Sebuah ViewGroup menyediakan layout di mana kita dapat melakukan setting tampilan dan view yang ditampilkan secara berurutan. Sebagai contoh, sebuah View Group meliputi Linear Layout dan Frame Layout. Sebuah ViewGroup diturunkan dari kelas dasar android.view.ViewGroup. Android mendukung ViewGroup berikut: LinearLayout, AbsoluteLayout, TableLayout, RelativeLayout, FrameLayout, ScrollView.
2. Linear Layout
LinearLayout menyusun view dalam bentuk satu kolom atau satu baris. Child view dapat disusun secara vertikal atau horisontal.
3. RelativeLayout
Relative Layout memungkinkan kita untuk menspesifikasikan bagaimana child view diposisikan secara relatif antara satu dengan yang lain.
Paket widget pada dasarnya merupakan visualisasi dari elemen user integace (UI) yang digunakan pada layar aplikasi Android di mana kita dapat merancang sendiri sesuai kebutuhan.
Widget di dalam Android ditampilkan dengan konsep View. Di mana aplikasi Android pada
umumnya menggunakan widget sebagai Layout XML. Untuk mengimplementasikan widget, selain file java kita juga membutuhkan tambahan dua file. Berikut ini adalah file-file yang umumnya kita butuhkan apabila kita membuat widget:
1. File Java. Berupa file java di mana merupakan file yang mengimplementasikan aksi dari widget.
Jika kita mendefinisikan suatu widget beserta posisinya di layar yang didefinisikan dari file XML, kita harus melakukan coding di file java di mana kita dapat mengambil semua nilai atribut dari tata letak file XML yang didefinisikan.
2. File XML. Sebuah file yang mendefinisikan komponen elemen-elemen XML yang digunakan untuk inisialisasi widget serta atribut yang mendukungnya.
3. Layout XML. File XML menggambarkan atau penambahan keterangan pada layout widget kita.
Beberapa komponen widget akan kita bahas saat ini.
Widget TextView, menampilkan teks ke layar dan memiliki optional bisa
dilakukan edit, tetapi secara default TextView tidak dapat diedit.
Untuk dapat melakukan edit harus menggunakan subclass yang berfungsi
untuk menampilkan TextView. EditText adalah kostumisasi TextView dimana
menjadi TextView yang dapat mengkonfigurasi dirinya sendiri sehingga
dapat diedit.
Sebuah button berisi teks atau icon (atau keduanya) yang mengkomunikasikan aksi apa yang
akan terjadi ketika user menyentuhnya.
Tergantung kepada apakah anda ingin sebuah button dengan teks, sebuah icon atau keduanya, anda dapat membuat button pada layout dengan 3 cara.
Dengan teks, menggunakan class Button :
<Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text= "@string/button_text"
... />
Dengan sebuah icon, menggunakan class ImageButton :
<ImageButton android:layout_width="wrap_content" android:layout_height="wrap_content" android:src= "@drawable/button_icon"
... />
Dengan teks dan icon, menggunakan class Button dengan atribut android:drawableLeft :
<Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text= "@string/button_text" android:drawableLeft="@drawable /button_icon"
... />
Berikut adalah sedikit scribt sederhana sebagai bahan latihan semoga kalian lebih mengerti setelah mempraktikkanya :
1. Linear Layout. Buat project baru dengan nama TryLinear. Kemudian buat sebuah activity.
Kodingnya adalah sebagai berikut.
F i le : content_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"
Sebuah button berisi teks atau icon (atau keduanya) yang mengkomunikasikan aksi apa yang
akan terjadi ketika user menyentuhnya.
Tergantung kepada apakah anda ingin sebuah button dengan teks, sebuah icon atau keduanya, anda dapat membuat button pada layout dengan 3 cara.
Dengan teks, menggunakan class Button :
<Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text= "@string/button_text"
... />
Dengan sebuah icon, menggunakan class ImageButton :
<ImageButton android:layout_width="wrap_content" android:layout_height="wrap_content" android:src= "@drawable/button_icon"
... />
Dengan teks dan icon, menggunakan class Button dengan atribut android:drawableLeft :
<Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text= "@string/button_text" android:drawableLeft="@drawable /button_icon"
... />
Berikut adalah sedikit scribt sederhana sebagai bahan latihan semoga kalian lebih mengerti setelah mempraktikkanya :
1. Linear Layout. Buat project baru dengan nama TryLinear. Kemudian buat sebuah activity.
Kodingnya adalah sebagai berikut.
F i le : content_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:paddingLeft="@dimen
/activity_horizontal_margin" android:paddingRight= "@dimen/activity_horizontal_margin"
android:paddingTop="@dime
n/activity_vertical_margin" android:paddingBottom= "@dimen/activity_vertical_margin"
tools:context=".layout" android:orientation="vertical"
android:weightSum="1">
<TextView android:text="Nama" android:layout_width="83dp" android:layout_height="wrap_content" android:id= "@+id/login" />
<EditText android:layout_width="match_parent" android:layout_height="26dp" android:id="@+id /loginData" android:layout_weight="0.06" />
<TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/password" android:id="@+id/passw" android:layout_below= "@+id/login" android:layout_alignParentLeft="true" android:layout_alignParentStart="true" android:layout_marginTop="31dp" android:layout_alignRight="@+id/login" android:layout_alignEnd="@+id/login" />
<EditText android:layout_width="match_parent" android:layout_height="22dp" android:id="@+id /passwData" android:layout_margin="16dp" android:layout_weight="0.06" />
<EditText android:layout_width="match_parent" android:layout_height="wrap_content" android:inputType="textPassword" android:ems="10" android:id="@+id/editText" />
<Button android:layout_width="168dp" android:layout_height="wrap_content" android:text="LOGIN" android:id= "@+id/button" android:layout_weight="0.09" />
<EditText android:layout_width="match_parent" android:layout_height="wrap_content" android:id= "@+id/editText2" android:layout_weight="0.12" />
</LinearLayout>
2. Jalankan dan amati hasilnya.
3. Kemudian lakukan perubahan nilai parameter untuk orientation.
android:weightSum="1">
<TextView android:text="Nama" android:layout_width="83dp" android:layout_height="wrap_content" android:id= "@+id/login" />
<EditText android:layout_width="match_parent" android:layout_height="26dp" android:id="@+id /loginData" android:layout_weight="0.06" />
<TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/password" android:id="@+id/passw" android:layout_below= "@+id/login" android:layout_alignParentLeft="true" android:layout_alignParentStart="true" android:layout_marginTop="31dp" android:layout_alignRight="@+id/login" android:layout_alignEnd="@+id/login" />
<EditText android:layout_width="match_parent" android:layout_height="22dp" android:id="@+id /passwData" android:layout_margin="16dp" android:layout_weight="0.06" />
<EditText android:layout_width="match_parent" android:layout_height="wrap_content" android:inputType="textPassword" android:ems="10" android:id="@+id/editText" />
<Button android:layout_width="168dp" android:layout_height="wrap_content" android:text="LOGIN" android:id= "@+id/button" android:layout_weight="0.09" />
<EditText android:layout_width="match_parent" android:layout_height="wrap_content" android:id= "@+id/editText2" android:layout_weight="0.12" />
</LinearLayout>
2. Jalankan dan amati hasilnya.
3. Kemudian lakukan perubahan nilai parameter untuk orientation.
4. Kemudian lakukan perubahan nilai parameter untuk layout_weight.
5. Kemudian, tambahkan pada kelas MainActivity.java koding berikut. . Kemudian buat sebuah activity. Kodingnya adalah sebagai berikut
M ethod onCreate pada kelas MainActivity.java
...............................
//button dari layout dijadikan object dari Java (nama object-nya tombol, nama dari layout button)
Button tombol = (Button) findViewById(R.id.button);
tombol.setOnClickListener(
new Button.OnClickListener() {
int duration = Toast.LENGTH_SHORT;
Toast toast = Toast.makeText(context,text,duration);
toast.show();
}
}
);
}
6. Kemudian cobalah untuk menambahkan atribut layout_gravity dari komponen- komponen yang ada, dengan nilai = top, bottom, left dan right.
7. RelativeLayout. Buat project baru dengan nama TryRelative. Kemudian buat sebuah activity. Kodingnya adalah sebagai berikut
F i le : content_main.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:layout_width="match_parent" android:layout_height="match_parent" android:paddingBottom= "@dimen/activity_vertical_margin" android:paddingLeft="@dimen /activity_horizontal_margin" android:paddingRight= "@dimen/activity_horizontal_margin" android:paddingTop="@dime n/activity_vertical_margin" app:layout_behavior= "@string/appbar_scrolling_view_behavior" tools:context="com.example.lucianugraheni.tryrelatif.MainActivity" tools:showIn="@layout/activity_main">
<TextView android:id="@+id/label" android:text="Nama" android:layout_width="wrap_content" android:layout_height="wrap_content" android:paddingTop="15px"/>
<EditText android:id="@+id/entry"
5. Kemudian, tambahkan pada kelas MainActivity.java koding berikut. . Kemudian buat sebuah activity. Kodingnya adalah sebagai berikut
M ethod onCreate pada kelas MainActivity.java
protected void onCreate(Bundle savedInstanceState) {
//koding yang sudah ada.
...............................
//button dari layout dijadikan object dari Java (nama object-nya tombol, nama dari layout button)
Button tombol = (Button) findViewById(R.id.button);
tombol.setOnClickListener(
new Button.OnClickListener() {
public void onClick(View v) {
Context context = getApplicationContext(); CharSequence text = "Hello
toast!";
int duration = Toast.LENGTH_SHORT;
Toast toast = Toast.makeText(context,text,duration);
toast.show();
}
}
);
}
6. Kemudian cobalah untuk menambahkan atribut layout_gravity dari komponen- komponen yang ada, dengan nilai = top, bottom, left dan right.
7. RelativeLayout. Buat project baru dengan nama TryRelative. Kemudian buat sebuah activity. Kodingnya adalah sebagai berikut
F i le : content_main.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:layout_width="match_parent" android:layout_height="match_parent" android:paddingBottom= "@dimen/activity_vertical_margin" android:paddingLeft="@dimen /activity_horizontal_margin" android:paddingRight= "@dimen/activity_horizontal_margin" android:paddingTop="@dime n/activity_vertical_margin" app:layout_behavior= "@string/appbar_scrolling_view_behavior" tools:context="com.example.lucianugraheni.tryrelatif.MainActivity" tools:showIn="@layout/activity_main">
<TextView android:id="@+id/label" android:text="Nama" android:layout_width="wrap_content" android:layout_height="wrap_content" android:paddingTop="15px"/>
<EditText android:id="@+id/entry"
android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_toRightOf="@id/label" android:layout_alignBaseline="@id/label"/>
<Button android:id="@+id/ok" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@id/entry" android:layout_alignRight="@id/entry" android:text="OK" android:drawableLeft= "@drawable/ok"/>
<Button android:id="@+id/cancel" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_toLeftOf="@id/ok" android:layout_alignTop="@id/ok" android:text="Cancel"/>
<ImageButton android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/anak" android:layout_toLeftOf="@id/cancel" android:layout_alignTop= "@id/cancel"/>
</RelativeLayout>
8. Carilah gambar dengan ukuran kecil dan diletakkan pada direktori res/drawable. Dua buah gambar dengan nama ok dan anak. (jika nama gambar anda lain, sesuaikan kodingnya)
9. Jalankan dan amati hasilnya.
10. Cobalah untuk mengubah atribut layout yang berhubungan dengan posisi : layout_below, layout_toLeftOf, dll.
0 Response to "Layout dan Widget View pada Android Studio"
Post a Comment