Skip to main content

Tutorial Pembuatan Layout

Kali ini, kita akan membuat macam-macam layout di Android Studio. Sebelum itu, layout adalah sebuah wadah atau tempat untuk memposisikan komponen yang akan kita masukkan.

Berikut tutorial pembuatan layout :

A. Relative Layout

1.       Langkah pertama yang dapat kita buat adalah, membuat projek baru. Dengan mengklik menu file, lalu new, dan pilih New Project.
 2.       Ketik Nama aplikasi di tempat yang tersedia, seperti contoh “Layout Ku”, setelah itu Next.
3.   Kemudian muncul kotak dialog Target Android Devices. Disini bisa kita setting factor apa saja yang diinginkan. Setelah itu klik “Next”.
4.  Kemudian muncul kotak dialog Add an Activity to Mobile. Pilih saja Empty Activity, lalu Next.
5.  Kita pilih yang default saja, maka langusng Next.
6.       Selanjutnya kita buat text baru dengan mendrag TextView, dengan contoh format,
7.       Kemudian isi ID dengan text1, layout_width menjadi match_parent untuk seperti gambar dibawah ini.

Lalu text kita ketik seperti contoh : “Belajar Android Studio” dan textSize : 14sp. Agar lebih cantik textAlignment : center. Seperti gambar dibawah ini.
8.  Untuk mengganti warna text, kita pilih textColour seperti pada gambar.
9.       Maka akan tampil kotak dialog seperti dibawah ini, maka pilih menu clour dan pilih warna yang anda sukai. Setelah itu ok.
10.      Selanjutnya kita buat tombol dengan mengdrag button ke layar seperti gambar dibawah ini.
11.      Edit button dengan layout_width : match_parent dan layout_height : match_parent untuk menyesuaikan lebar dan tinggi yang tersedia.
12.       Selanjutnya textSize button cukup 18sp dengan textStyle bold, dan textAligment dengan center.

13.  Selanjutnya ganti warna background untuk button dengan cara memilih settingan background.
14.      Maka akan muncul kotak dialog, pilih menu color dan pilih warna yang anda inginkan. Setelah itu klik OK.
15.      Jika ingin mengganti warna text pada button, kita dapat mengklik pada textColour. Lalu pilih warna yang anda inginkan seperti gambar diatas.
16.      Setelah itu, kita telah dapat mengjalankan aplikasi yang telah kita buat dengan mengklik icon Run seperti gambar dibawah ini.
17.      Maka akan tampil kotak dialog seperti gambar dibawah ini. Pilih Gennymotion dan klik Ok.
18.      Tunggu sampai aplikasi login yang telah kita buat dapat muncul di Gennymotion seperti gambar dibawah ini. Selesai.

B. Linear Layout

a. Linear Layout (Vertical)

1.       Pertama kita buat terlebih dahulu layout baru kita dengan membuka folder app, res, dan layout. Pada folder layout klik kanan, dan pilih New dan Layout resources file.
2.   Isi Nama File kemudian OK.
3.       Ambil textView untuk membuat judul. Dengan format seperti dibawah ini.
4.       Tambahkan plainText dengan mendrag plainText pada Text Field ke layar. Dengan format seperti gambar dibawah ini.
5.       Buka MainActivity.java dan edit menjadi lama layout yang telah dibuat seperti contoh yang di tandai dengan warna kuning.
6.       Setelah di run, dan akan tampil seperti gambar dibawah ini.

b. Linear Layout (Horizontal)

1.  Buat kembali layout baru dengan nama Horizontal. Untuk mendapatkan linear layout horizontal, ganti       
     orientation dengan horizontal seperti gambar dibawah ini.

2.       Tambahkan plaintext dan dua button. Seperti contoh vertikal. Maka jika dirun tampilnya akan seperti dibawah ini.

C. Frame Layout

1.       Buat layout baru seperti gambar dibawah ini.
2.       Isi File name dan Root element: FrameLayout. Kemudian klik Ok.
3.       Buatlah textView sebanyak 4 textView di FrameLayout.
4.       Ganti ID setiap textView seperti gambar dibawah ini.
5.     Pilih mode Text. Ketik seperti yang ditandai warna kuning dibawah ini untuk membuat ukuran layout dan warna layout agar lebih terlihat.

6.       Setelah itu di run applikasi frame. Maka akan tampil seperti gambar dibawah ini.

D. Scroll View

1.       Buat kembali layout baru dengan nama “scroll”. Kemudian klik OK.
2.       Tambahkan ScrollView di LinearLayout.
3.       Kemudian masukkan TextView di LinearLayout.
4.       Buatlah buton sebanyak-banyaknya.
5.       Setelah itu dirun dengan format “scroll”. Maka hasilnya seperti dibawah ini.
6.       Dan bisa Scroll dengan menarik layar ke atas.
Sekian belajar tutorial pembuatan Layout di Android Studio..
Semoga bermanfaat..

Comments

Post a Comment

Popular posts from this blog

CARA MEMBUAT APK MY FAVORITE SONG PADA ANDROID STUDIO

Langkah - langkah membuat apk untuk daftar lagu favorit : 1. buatlah project baru pada android studio. 2. kemudian design tampilan sesuai keinginan dengan memasukkan beberapa button. 3. kemudian buat android resource directory "raw" yang sama dengan cara pada postingan sebelumnya yaitu cara membuat audio player pada langkah 3. pastekan file mp3 pada raw tersebut. 4. berikut merupakan kodingan pada text 5. berikut kodingan pada mainactivity.java 5. aktifkan Genymotion sebagai emulator. run project yang ada pada android studio sehingga akan muncul tampilan berikut pada Genymotion.  
Post a Comment
Read more

CARA MEMBUAT APK SPINNER PADA ANDROID STUDIO

Langkah - langkah membuat spiner : 1. Buatlah project baru pada android studio. 2. designlah tampilan sesuai dengan keinginan. dengan memasukkan palette "imageview, TextView, dan Spinner" 3. coopylah foto pada folder app ----> mipmap 4. edit kodingan pada Text Activity.xml seperti berikut ini: 5. tambahkan koddingan seperti berikut ini pada Main_Activity.Java seperti berikut ini: 8. Hasil Run pada Genymotion Sebagai berikut:
Post a Comment
Read more

Tutorial Menjalankan Audio

Pertama , drug TextView dengan contoh nama : "Please Listen  My Song". Setelah itu drug tiga button dengan masing-masing nama : "Play","Pause","Stop" dan id : "buttonPlay","buttonPause","buttonStop". Properties buttonPlay Properties buttonPause Properties buttonStop Kedua , pada folder res, klik kanan kemudian pilih new>android resource directory. Setelah itu ganti nama menjadi raw dan pilih ok. Ketiga , coppy lagu yang ingin dijalankan. Kemudian klik kanan pada folder raw dan paste. Keempat , pada MainActivity.java seperti dibawah ini : Keempat, jalankan di emulator. Maka hasilnya seperti gambar dibawah ini :
Post a Comment
Read more