Layout
Pertemuan ke
Alokasi Waktu : 1,5 Jam
Kompetensi Dasar : Praktikan dapat membuat sebuah tampilan Linear dan
Relative Layout
Indikator : Mengenal dan mempraktekkan Linear dan Relative Layout
Android dengan Android Studio
A. Teori Pendukung
Layout berisi satu atau lebih objek anak dan tingkah laku untuk menempatkannya pada
layar dalam bujur sangkar objek induknya. Terdapat beberapa jenis layout, yaitu:
Frame Layout: menyusun anak dimulai dari layar kiri atas. Hanya satu view yang akan
ada pada layar.
Linear layout: menyusun anak pada kolom atau baris single. Ini merupakan layout yang
paling sering digunakan.
Relative layout : menyusun anak dengn hubungan satu dengan lain atau induk.
Table layout: menyusun anak dengan baris dan kolom, seperti pada table html.
Bagian ini menjadi dasar untuk mengembangkan User Interface sebuah aplikasi. Seperti
apa sih tampilan LinearLayout?? Jangan pedulikan scriptnya dahulu, karena kelihatanya
banyak dan susah, namun sebenarnya sangat sederhana dan mudah dimengerti. Semakin
banyak Anda berlatih coding, semakin paham juga maksud programnya.
B. Langkah Praktikum
1. Percobaan 1 (Linear Layout)
a. Jalankan Android Studio, Buatlah sebuah project android.
b. Pada Java Explorer, pilih res/layout/activity_main.xml. sesuaikan menjadi
seperti berikut:
1. <?xml version="1.0" encoding="utf-8"?>
2. <LinearLayout xmlns:android="[Link]
3. xmlns:tools="[Link]
4. android:id="@+id/activity_main"
5. android:layout_width="match_parent"
6. android:layout_height="match_parent"
7. android:orientation="vertical"
8. tools:context="[Link]">
9.
10. <LinearLayout
11. android:layout_width="match_parent"
12. android:layout_height="match_parent"
13. android:layout_weight="2"
14. android:orientation="horizontal">
15.
16. <TextView
17. android:layout_width="wrap_content"
18. android:layout_height="match_parent"
19. android:layout_weight="1"
20. android:background="#aa0000"
21. android:gravity="center_horizontal"
22. android:text="Merah" />
23.
24. <TextView
25. android:layout_width="wrap_content"
26. android:layout_height="match_parent"
27. android:layout_weight="1"
28. android:background="#03fa40"
29. android:gravity="center_horizontal"
30. android:text="Hijau" />
31.
32. </LinearLayout>
33.
34. </LinearLayout>
activity_main.xml
c. Pastikan pada [Link] seperti berikut:
1. package [Link];
2.
3. import [Link];
4. import [Link];
5.
6. public class MainActivity extends AppCompatActivity {
7.
8. @Override
9. protected void onCreate(Bundle savedInstanceState) {
10. [Link](savedInstanceState);
11. setContentView([Link].activity_main);
12. }
13. }
d. Lakukan Run dengan shortcut SHIFT+F10 atau klik Run Button
e. Pastikan tampilan program pada AVD/Smartphone anda seperti gambar 2.3
Gambar 2.3
2. Percobaan 2 (Relative Layout)
a. Buatlah satu file baru xml dengan klik kanan para folder layout, lalu pilih New->Xml-
>Layout Xml File. Beri nama relative_layout lalu Finish.
b. Isikan kotak dialog new seperti berikut
c. Pada relative_layout.xml. sesuaikan menjadi seperti berikut:
1. <?xml version="1.0" encoding="utf-8"?>
2. <RelativeLayout xmlns:android="[Link]
3. android:layout_width="match_parent"
4. android:layout_height="match_parent">
5.
6. <TextView
7. android:layout_width="wrap_content"
8. android:layout_height="wrap_content"
9. android:text="Type here:"
10. android:id="@+id/textview1"
11. android:paddingTop="10dp"
12. android:layout_alignParentTop="true"
13. android:layout_alignParentLeft="true"
14. />
15. <EditText
16. android:layout_width="match_parent"
17. android:layout_height="wrap_content"
18. android:hint="Input disini"
19. android:inputType="text"
20. android:id="@+id/entry"
21. android:layout_below="@id/textview1"
22. />
23.
24. <Button
25. android:layout_width="wrap_content"
26. android:layout_height="wrap_content"
27. android:text="OK"
28. android:layout_below="@id/entry"
29. android:id="@+id/ok"
30. android:layout_alignParentRight="true"
31. android:layout_marginLeft="10dp"
32. />
33.
34. <Button
35. android:layout_width="wrap_content"
36. android:layout_height="wrap_content"
37. android:text="Cancel"
38. android:layout_toLeftOf="@id/ok"
39. android:layout_alignTop="@id/ok"/>
40.
41. </RelativeLayout>
Gambar 2.4
a. Pastikan pada [Link] seperti gambar 2.5
1. package [Link];
2.
3. import [Link];
4. import [Link];
5.
6. public class MainActivity extends AppCompatActivity {
7.
8. @Override
9. protected void onCreate(Bundle savedInstanceState) {
10. [Link](savedInstanceState);
11. setContentView([Link].activity_main);
12. }
13. }
Gambar 2.5
e. Lakukan Run dengan shortcut SHIFT+F10.
f. Pastikan tampilan AVD anda seperti gambar 3.2
Gambar 2.6
3. Percobaan 3 (GridView Layout)
a. Buatlah satu file baru xml dengan klik kanan para folder layout, lalu pilih New->Xml-
>Layout Xml File. Beri nama gridview lalu Finish.
b. Isikan kotak dialog new seperti berikut
c. Pada [Link]. sesuaikan menjadi seperti berikut:
1. <?xml version="1.0" encoding="utf-8"?>
2. <GridView xmlns:android="[Link]
3. android:id="@+id/grid_view"
4. android:layout_width="fill_parent"
5. android:layout_height="fill_parent"
6. android:numColumns="auto_fit"
7. android:columnWidth="90dp"
8. android:horizontalSpacing="10dp"
9. android:verticalSpacing="10dp"
10. android:gravity="center"
11. android:stretchMode="columnWidth" >
12.
13. </GridView>
d. Buat sebuah class java bernama ImageAdapter yang akan digunakan sebagai resource
gridview layout. Dan isikan class [Link] seperti berikut:
1. package [Link];
2.
3. import [Link];
4. import [Link];
5. import [Link];
6. import [Link];
7. import [Link];
8. import [Link];
9.
10. /**
11. * Created by Yoza on 14/09/2016.
12. */
13.
14. public class ImageAdapter extends BaseAdapter {
15.
16. private Context mContext;
17.
18. // Keep all Images in array
19. public Integer[] mThumbIds = {
20. [Link].pic_1, [Link].pic_2,
21. [Link].pic_3, [Link].pic_4,
22. [Link].pic_5, [Link].pic_6,
23. [Link].pic_7, [Link].pic_8,
24. [Link].pic_9, [Link].pic_10,
25. [Link].pic_12, [Link].pic_13,
26. [Link].pic_14, [Link].pic_15
27. };
28.
29. // Constructor
30. public ImageAdapter(Context c){
31. mContext = c;
32. }
33.
34. @Override
35. public int getCount() {
36. return [Link];
37. }
38.
39. @Override
40. public Object getItem(int position) {
41. return mThumbIds[position];
42. }
43.
44. @Override
45. public long getItemId(int position) {
46. return 0;
47. }
48.
49. @Override
50. public View getView(int position, View convertView, ViewGroup parent) {
51. ImageView imageView = new ImageView(mContext);
52. [Link](mThumbIds[position]);
53. [Link]([Link].CENTER_CROP);
54. [Link](new [Link](70, 70));
55. return imageView;
56. }
57.
58. }
e. Ubahlah file [Link] menjadi seperti ini:
1. package [Link];
2.
3. import [Link];
4. import [Link];
5. import [Link];
6.
7. public class MainActivity extends AppCompatActivity {
8.
9. @Override
10. protected void onCreate(Bundle savedInstanceState) {
11. [Link](savedInstanceState);
12. setContentView([Link]);
13. GridView gridView = (GridView) findViewById([Link].grid_view);
14.
15. // Instance of ImageAdapter Class
16. [Link](new ImageAdapter(this));
17. }
18. }
C. Evaluasi
1. Menerapkan/membuat desain layout untuk aplikasi yang telah dipilih. Mulai dari
menu awal sampai kepada konten didalam masing2 menu.
Pengenalan Widget Form Bagian 1
Pertemuan ke
Alokasi Waktu : 1,5 Jam
Kompetensi Dasar : Praktikan dapat membuat sebuah tampilan Form Widget Basic
Views seperti Textview, Radiobutton, RadioGroup, Check
Box, Editext, Button, ImageButton.
Indikator : Mengenal dan mempraktekkan tampilan Form Widget
Basic Views dengan Android Studio
A. Teori Pendukung
Basic Views umumnya seperti Textview, Radiobutton, RadioGroup, Check Box, Editext,
Button, ImageButton.
TextView digunakan untuk menampilkan teks ke pengguna.
EditText merupakan subclass dari Views TextView, bedanya memungkinkan pengguna
untuk mengedit isi teks.
Button mewakili sebuah widget tombol push.
ImageButton mirip dengan tampilan Button, perbedaannya dapat menampilkan gambar
sebagai tombol
CheckBox berfungsi sebagai tipe khusus dari tombol yang memiliki dua keadaan yaitu
checked atau unchecked
ToggleButton berfungsi untuk menampilkan keadaan checked atau unchecked
menggunakan lampu indikator
RadioButton memiliki dua keadaan yaitu checked atau unchecked. Sekali sebuah
RadioButton diberi checked, maka tidak dapat di unchecked kembali.
Sebuah RadioGroup digunakan untuk mengelompokkan satu atau lebih views
RadioButton, dengan demikian mengizinkan hanya satu RadioButton yang akan di
checked dalam RadioGroup.
B. Langkah Praktikum
1. Jalankan Android Studio, File > New > New Project
2. Isikan kotak dialog new seperti berikut
Project Name My Second Android
Company Domain [Link]
Build Target API 15/Android 4.0.3
Activity Selected Empty Activity
Activity Name MainActivity
Layout Name actvity_main
3. Pada Package Explorer, pilih app/res/layout/activity_main.xml. sesuaikan menjadi
seperti berikut:
3. <?xml version="1.0" encoding="utf-8"?>
4. <LinearLayout
5. xmlns:android="[Link]
6. xmlns:tools="[Link]
7. xmlns:app="[Link]
8. android:id="@+id/activity_main"
9. android:layout_width="match_parent"
10. android:layout_height="match_parent"
11. android:orientation="vertical"
12. tools:context="[Link]">
13.
14. <TextView
15. android:layout_width="match_parent"
16. android:layout_height="wrap_content"
17. android:text="Hello World!"
18. android:id="@+id/heading"
19. />
20.
21. <EditText
22. android:layout_width="match_parent"
23. android:layout_height="wrap_content"
24. android:id="@+id/isinama"
25. />
26.
27. <RadioGroup
28. android:layout_width="match_parent"
29. android:id="@+id/radiogrup"
30. android:layout_height="wrap_content">
31.
32. <RadioButton
33. android:layout_width="match_parent"
34. android:layout_height="wrap_content"
35. android:id="@+id/rdb1"
36. android:text="Laki-laki"
37. android:checked="true"
38. />
39. <RadioButton
40. android:layout_width="match_parent"
41. android:layout_height="wrap_content"
42. android:id="@+id/rdb2"
43. android:text="Perempuan"
44. android:checked="false"/>
45.
46. </RadioGroup>
47.
48. <CheckBox
49. android:layout_width="match_parent"
50. android:layout_height="wrap_content"
51. android:id="@+id/checkAgree"
52. android:text="Semua Yang Diisikan Benar"
53. />
54.
55. <ImageButton
56. android:layout_width="match_parent"
57. android:layout_height="wrap_content"
58. android:src="@mipmap/ic_launcher"
59. android:onClick="hasil"/>
60. </LinearLayout>
activity_main.xml
4. Buatlah sebuah file [Link] padadirektori app/res/layout, kemudian rubahlah isi file
tersebut menjadi sebagai berikut:
5. <?xml version="1.0" encoding="utf-8"?>
6. <LinearLayout xmlns:android="[Link]
7. android:layout_width="match_parent"
8. android:orientation="vertical"
9. android:layout_height="match_parent">
10.
11.
12. <TextView
13. android:layout_width="match_parent"
14. android:layout_height="wrap_content"
15. android:id="@+id/tampilNama"
16. android:text="Tampil Nama"/>
17. <TextView
18. android:layout_width="match_parent"
19. android:layout_height="wrap_content"
20. android:id="@+id/tampilJenisKelamin"
21. android:text="Tampil Jenis Kelamin"/>
22. <TextView
23. android:layout_width="match_parent"
24. android:layout_height="wrap_content"
25. android:id="@+id/tampilSetuju"
26. android:text="Tampil Setuju"/>
27.
28.
29.
30. </LinearLayout>
5. Ubah file [Link] pada direktori src menjadi seperti berikut:
1. package [Link];
2.
3. import [Link];
4. import [Link];
5. import [Link];
6. import [Link];
7. import [Link];
8. import [Link];
9. import [Link];
10. import [Link];
11. import [Link];
12.
13. public class MainActivity extends AppCompatActivity {
14.
15. private EditText Nama;
16. private RadioGroup jnskelamin;
17. private RadioButton LakiLaki;
18. private RadioButton perempuan;
19. private CheckBox setuju;
20. private TextView TampilNama;
21. private TextView TampilJenisKelamin;
22. private TextView TampilSetuju;
23. @Override
24. protected void onCreate(Bundle savedInstanceState) {
25. [Link](savedInstanceState);
26. setContentView([Link].activity_main);
27. Nama=(EditText)findViewById([Link]);
28. jnskelamin=(RadioGroup)findViewById([Link]);
29. LakiLaki=(RadioButton)findViewById([Link].rdb1);
30. perempuan=(RadioButton)findViewById([Link].rdb2);
31. setuju=(CheckBox)findViewById([Link]);
32.
33. }
34.
35. public void hasil(View view){
36. setContentView([Link]);
37.
38. TampilNama=(TextView)findViewById([Link]);
39. [Link]([Link]);
40. [Link]([Link]);
41. [Link]([Link]());
42.
43. TampilJenisKelamin=(TextView)findViewById([Link]);
44. [Link]([Link]);
45. if ([Link]()){
46. [Link]([Link]);
47. [Link]("Laki-laki");
48. }
49. if ([Link]()){
50. [Link]([Link]);
51. [Link]("Perempuan");
52.
53. }
54.
55. TampilSetuju=(TextView)findViewById([Link]);
56. [Link]([Link]);
57.
58. if ([Link]()){
59. [Link]([Link]);
60. [Link]("Semua Yang Di Isikan Benar");
61. }
62. else {
63. [Link]([Link]);
64. [Link]("Ada yang salah");
65. }
66. }
67. }
6. Lakukan Run dengan shortcut SHIFT+F10 .
C. Evaluasi
1. Dari desain layout yang telah dibuat pada praktikum kedua, silahkan
ditambahkan dengan widget yang sesuai dengan kebutuhannya.