·
Layout
Linier Vertikal dan Horizontal
Layout merupakan tampilan antar muka atau tampilan UI
android, dengan kata lain layout yang mengontrol posisi utama dalam tampilan
android. Layout ini di bagi menjadi beberapa macam :
- Linier layout
- Relative layout
- List View
- Frame layout
- Absolute layout
- Table layout
- Grid layout
1. Linier layout
Linier
layout merupakan salah satu jenis layout yang menggabungkan view dalam satu
urutan dapat berupa horizontal atau vertikal. Linier Layout dibuat dengan
<LinierLayout> dan ditutup dengan </LinierLayout>.
Buatlah project baru namanya terserah sahabat, namun
disini kami menggunakan nama linier_layout_vertical. Dengan android target 4.0
tampilan awal setelah project dibuat :
perhatikan syntax yang berada di activity_main.xml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
<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">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:layout_width="100px"
android:layout_height="50px"
android:background="#B8E9F7"
android:gravity="center_vertical"
android:text="OKE"/>
<TextView
android:layout_width="100px"
android:layout_height="50px"
android:background="#8FF7E2"
android:gravity="center_vertical"
android:text="YES"/>
<TextView
android:layout_width="100px"
android:layout_height="50px"
android:background="#CBFA6C"
android:gravity="center_vertical"
android:text="OPEN"/>
</LinearLayout>
</LinearLayout>
|
penjelasan syntax :
1
2
3
4
5
|
<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">
|
syntax ini merupakan pemanggilan library yang
digunakan untuk layout dasar.
1
2
3
4
|
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
|
syntax ini digunakan untuk layout kedua dimana dalam
layout ini akan dibuat tampilan linier layout vertical.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<TextView
android:layout_width="100px"
android:layout_height="50px"
android:background="#B8E9F7"
android:gravity="center_vertical"
android:text="OKE"/>
<TextView
android:layout_width="100px"
android:layout_height="50px"
android:background="#8FF7E2"
android:gravity="center_vertical"
android:text="YES"/>
<TextView
android:layout_width="100px"
android:layout_height="50px"
android:background="#CBFA6C"
android:gravity="center_vertical"
android:text="OPEN"/>
|
pada syntax ini library dipanggil untuk membuat baris,
panjang, warna dan sebagainya. ini tampilan aplikasi setelah di jalankan :
linier layout vertical. ubahlah tampilan di atas menjadi linier layout
horizontal. nah, untuk masukannya silahkan ubah kata vertical menjadi horizontal.
2. Relative layout
Relative
layout merupakan layout yang menyusun view-view didalamnya. misalkan di dalam
view induk terdapat view-view anak yang tersusun secara relative. Relative
layout lebih efektif digunakan di user interface dari pada Linear Layout.
contoh
penyusunan posisi view secara relative :
1
2
3
|
android:layout_toRightOf=""
android:layout_toRightOf=""
android:layout_below=""
|
penyusunan posisi view relative dengan
view induk.
1
2
3
|
android:padding=""
android:layout_alignParentLeft=""
android:layout_centerHorizontal=""
|
dan masih banyak lainnya untuk penyusunan view
relative. untuk
lebih jelasnya perhatikan program aplikasi berikut :
1. activity_main.xml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
|
<?xml version="1.0"
encoding="utf-8"?>
<RelativeLayout
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="16dp"
android:paddingRight="16dp"
>
<EditText
android:id="@+id/name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:hint="@string/reminder"
/>
<Button
android:id="@+id/button1"
android:layout_width="96dp"
android:layout_height="wrap_content"
android:layout_alignLeft="@+id/name2"
android:layout_below="@+id/name2"
android:layout_marginTop="67dp"
android:text="insert"
/>
<EditText
android:id="@+id/name3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignLeft="@+id/name2"
android:layout_below="@+id/name2"
android:ems="67"
android:hint="@string/coba"
>
<requestFocus
/>
</EditText>
<EditText
android:id="@+id/name2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignLeft="@+id/name"
android:layout_below="@+id/name"
android:ems="10"
android:hint="@string/tes"
/>
</RelativeLayout>
|
penjelasan :
1
2
3
4
5
6
7
|
<?xml version="1.0"
encoding="utf-8"?>
<RelativeLayout
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="16dp"
android:paddingRight="16dp"
>
|
syntax di atas untuk membuat layout utama/view induk
1
2
3
4
5
6
|
<EditText
android:id="@+id/name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:hint="@string/reminder"
/>
|
syntax ini untuk membuat editText pertama.
1
2
3
4
5
6
7
8
|
<Button
android:id="@+id/button1"
android:layout_width="96dp"
android:layout_height="wrap_content"
android:layout_alignLeft="@+id/name2"
android:layout_below="@+id/name2"
android:layout_marginTop="67dp"
android:text="insert"
/>
|
Syntax ini digunakan untuk membuat tombol di
aplikasi android.
1
2
3
4
5
6
7
8
9
10
|
<EditText
android:id="@+id/name3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignLeft="@+id/name2"
android:layout_below="@+id/name2"
android:ems="67"
android:hint="@string/coba"
>
</EditText>
|
Syntax di atas digunakan untuk membuat EditText yang
kedua.
1
2
3
4
5
6
7
8
|
<EditText
android:id="@+id/name2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignLeft="@+id/name"
android:layout_below="@+id/name"
android:ems="10"
android:hint="@string/tes"
/>
|
Syntax ini digunakan untuk membuat editText yang
ketiga.
setelah semua syntak sudah siap ditulis, perhatikan di
syntax EditText yang pertama sampai ketiga. disitu terdapat @String/.. maksudnya
disini akan dipanggil isi dari String. untuk membuat String yang di
panggil di activity_main.xml, lihat di folder res/value/String.xml (perhatikan
syntax berikut untuk menambahkan String)
String.xml
1
2
3
4
5
6
7
8
9
10
11
|
<?xml version="1.0"
encoding="utf-8"?>
<resources>
<string
name="app_name">ck_layout</string>
<string
name="hello_world">Hello world!</string>
<string
name="action_settings">Settings</string>
<string
name="reminder">insert name</string>
<string
name="tes">inset email</string>
<string
name="coba">insert phone</string>
</resources>
|
disini sahabat bisa menambahkan string yang sahabat
maksudkan. selain
ditambahkan secara syntak, sahabat bisa juga menambahkan secara manual.
contohnya :
Menambahkan String
Untuk menambahkan secara manual, di tab paling bawah pilih
Resources, tekan tombol add yang berada di samping, dapat sahabat lihat di
gambar di atas.
manambahkan string disini dapat
kita pilih mana yang akan kita tambah, disini kita akan menambahkan
String, klik OK
menambahkan string string yang
saya tambah disini dengan nama cari, dan value(isi dalam string cari)
yaitu carikode.com setelah
kita tulis
nama dan value dengan sendirinya string telah dibuat,
oke, setelah semua berjalan dengan lancar, selanjutnya
jalankan program yang telah dibuat, dan lihat hasilnya :
3. Table layout
TableLayout
merupakan layout yang menampilkan view/tampilan dalam suatu posisi baris
atau kolom yang berbentuk table. untuk lebih pahamnya perhatikan aplikasi berikut :
1. Buat project
baru, (jika kurang paham lihat tutorial sebelumnya).
2. Berikut isi dari
activity_main.xml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
|
<?xml version="1.0"
encoding="utf-8"?>
<TableLayout
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:stretchColumns="1">
<TableRow>
<TextView
android:layout_column="1"
android:text="open"
android:padding="3dip"/>
<TextView
android:text="ctr+o"
android:gravity="right"
android:padding="3dip"/>
</TableRow>
<TableRow>
<TextView
android:layout_column="1"
android:text="save"
android:padding="3dip"/>
<TextView
android:text="ctr+s"
android:gravity="right"
android:padding="3dip"/>
</TableRow>
<TableRow>
<TextView
android:layout_column="1"
android:text="blocs"
android:padding="3dip"
/>
<TextView
android:text="ctr+a"
android:gravity="right"
android:padding="3dip"/>
</TableRow>
<View
android:layout_height="3dip"
android:background="#25f7b4"/>
<TableRow >
<TextView
android:text="X"
android:padding="3dip"/>
<TextView
android:text="import.."
android:padding="3dip"/>
</TableRow>
<TableRow >
<TextView
android:text="Y"
android:padding="3dip"/>
<TextView
android:text="exsport"
android:padding="3dip"/>
<TextView
android:text="ctr+e"
android:gravity="right"
android:padding="3dip"/>
</TableRow>
<View
android:padding="2dip"
android:background="#FF909090"/>
<TableRow >
<TextView
android:layout_column="1"
android:text="Quit"
android:padding="3dp"/>
</TableRow>
</TableLayout>
|
catatan :
untuk membuat tampilan itu letak scrib nya di res – layout – activity_main.xml (namun disinilah tempat untuk membuat tampilan).
untuk membuat tampilan itu letak scrib nya di res – layout – activity_main.xml (namun disinilah tempat untuk membuat tampilan).
penjelasan :
1
2
3
4
5
6
|
<TableLayout
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:stretchColumns="1">
</TableLayout>
|
Syntax diatas yaitu membuat tablelayout utama
dimana Scrib berikutnya akan diletakkan di dalam scrib ini, contohnya
dapat sahabat lihat di aplikasi di atas.
1
2
3
4
5
6
7
8
9
10
|
<TableRow>
<TextView
android:layout_column="1"
android:text="open"
android:padding="3dip"/>
<TextView
android:text="ctr+o"
android:gravity="right"
android:padding="3dip"/>
</TableRow>
|
Scrib di atas untuk membuat tablelayout yang berbentuk
TableRow(tabel baris), isi didalamnya TextView.
1
2
3
4
5
6
7
8
9
10
|
<TableRow>
<TextView
android:layout_column="1"
android:text="save"
android:padding="3dip"/>
<TextView
android:text="ctr+s"
android:gravity="right"
android:padding="3dip"/>
</TableRow>
|
sama halnya dengan scrib di atas cuman isi nama dari
isi didalamnya dirubah
1
2
3
|
<View
android:layout_height="3dip"
android:background="#25f7b4"/>
|
Scrib diatas untuk membuat tampilan pemisah antara
TableRow untuk
scrib lainnya sebenarnya sama saja, namun isi didalamnya di ganti nama. silahkan
perhatikan aplikasi sesudah di jalankan:
