penggunaan Layout dan Widget View pada Android Studio bagi pemula lengkap

Layout dan Widget View
Hai kembali lagi di blog saya malasnugas.com . kali ini saya akan membahas tentang penggunaan Layout dan Widget View pada android studio .
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 :

Dengan sebuah icon, menggunakan class ImageButton :

Dengan teks dan icon, menggunakan class Button dengan atribut android:drawableLeft :

Untuk mempermudah anda untuk memahami penggunaan Layout dan Widget View pada Android Studio alangkah baiknya anda mencobanya menggunakan script program sederhana yang telah saya sediakan sehingga nantinya anda akan lebih bisa mengerti fungsi serta penggunaanya.
Berikut adalah langkah-langkahnya :
1. Linear Layout. Buat project baru dengan nama TryLinear. Kemudian buat sebuah activity.
Kodingnya adalah sebagai berikut.
File : 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="@dimen/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.
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
Method 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 komponenkomponen
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
File : 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="@dimen/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.

penggunaan Layout dan Widget View pada Android Studio bagi pemula lengkap

0 Response to "penggunaan Layout dan Widget View pada Android Studio bagi pemula lengkap"

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel