Skip to content Skip to sidebar Skip to footer
loading...

Cara Mudah Belajar Layout di Android Studio

Cara Mudah Belajar Layout di Android StudioLayout adalah hal paling penting sebelum memulai project pada android studio, karena layout berfungsi untuk meletakkan bermacam-macam komponen di atasnya, bisa dibilang layout adalah sebuah wadah atau tempat untuk memposisikan komponen yang akan kita masukkan.

Dalam pemprograman Android, ada beberapa layout yang digunakan untuk menempatkan bermacam-macam “view” seperti button dan text. Untuk membuat layout cukup mudah, melalui folder “res/layout “ dalam project, tempatkan file .xml di dalam folder tersebut.
Pada tutorial kali ini Saya akan membahas Layout di Android. Layout memungkinkan Anda untuk membuat tampilan desain menggunakan file XML. Semua file layout harus di simpan dalam path /res/layout folder.

Pada tutorial kali ini kita akan membuat 5 layout dalan 1 project. Tanpa berpanjang lebar lagi yuk simak penjelasannya dibawah ini.

A. Relative Layout
RelativeLayout adalah layout yang menampilkan elemen-elemen view dalam posisi yang relatif. Posisi dari sebuah view yang dapat diletakkan relatif terhadap posisi elemen view di sekitarnya atau relatif terhadap area layout utama. Sebuah desain tampilan aplikasi bisa dibuat lebih mudah dan sederhana menggunakan RelativeLayout dibandingkan dengan LinearLayout.
Cara pembuatannya sebagai berikut:
1. Klik menu file >> New >> New Project.


2. Isi Application Name nya “Belajar_Layout” atau boleh terserah anda. Kemudian klik Next.

Relative Layout

3. Pada Target Android Devices silahkan pilih untuk “Phone dan Tablet” dan untuk minimum SDK nya kita pilih saja “IceCreamSandwich”. Kemudian klik Next.

Relative Layout

4. untuk Activity nya kita pilih saja yang “Empty Activity”. Lalu klik Next.

Relative Layout

5. Kemudian isi kan Activity Name nya sesuai keinginan anda atau biarkan itu defaultnya lalu klik Finish.

Relative Layout

6. Tunggu sesaat, jika tampilannya sudah tampil. Kamu pilih tab “activity_main.XML” lalu pilih tab “Design”.

Relative Layout

7. silahkan kamu klik “Hello World!” maka akan muncul jendela properties disebalah kiri. Kamu bisa ubah kalimat tersebut pada bagian Text dan silahkan isi juga ID nya.

Relative Layout

8. Untuk layout_width & layout height ada dua pilihan, pertama “match_parent” dan yang kedua “warp_content”.
Match_parent ini akan menyesuaikan lebar atau tinggi sesuai ukuran layout.
Wrap_content ini kita bisa mengatur lebar dan tinggi sesuai keinginan kita.
Nah untuk textView ini anda sesuaikan saja dengan gambar berikut.

Relative Layout

9. Sekarang kita akan mengedit tulisan ini pada bagian properties. Klik item yang ingin di edit lalu pilih View all Properties.

Relative Layout

10. Silahkan anda cari yang berhubungan dengan “text” anda bisa merubah ukuran tulisan, warna tulisan, letak tulisan, dan bnayak lainnya di properties ini. Untuk merubah ukuran tulisan cari TextSize dan rubah ukurannya.

Relative Layout

11. untuk mengatur posisi tulisan cari “TextAligment” kemudian pilih “Center” untuk rata tengah.

Relative Layout

12. Untuk warna tulisan cari TextColor.

Relative Layout

13. Maka akan muncul jendela baru, kamu pilih tab “Color” lalu pilih warna tulisan yang kamu inginkan. Jika sudah klik OK.


14. Sekarang kita masukkan item “button”. Silahkan anda pilih botton pada kolom pallete lalu drag  (tarik) ke tampilan androidnya.

Relative Layout

15. sekarang kita edit “botton” tersebut. Select button nya kemudian di tab properties ada Layout_width dan layout height, kamu pilih “match_content” maka dia akan menyesuaikan lebar dan tinggi sesuai space yang tersedia. Untuk mengganti text bisa di ganti pada kolom text.

Relative Layout

16. Kemudian kamu klik kembali view all properties. Kita akan mengganti warna tombol tersebut. Caranya kamu cari “backgroud” dan kamu klik.

PROPERTIES

17. maka akan muncul jendela baru, kamu pilih tab color dan kamu pilih warna yang kamu inginkan. Lalu klik OK.


18. Kamu juga bisa mengedit tulisan pada tombol tersebut, silahkan cari fungsi dibwah ini.

  • TextAligment = untuk perataan penulisan seperti rata tengah,kiri,kanan atauu justify/
  • TextColor = untuk warna tulisan.
  • TextSize = ukruan tulisan
  • TextStyle =  jenis tulisan / gaya tulisan seperti “ times new roman, clibri dll” tapi fontstyle disi masih terbatas. Kamu bisa mengimport jenis tulisannya jika kamu mau.

19. Jika dirasa sudah bagus. Sekarang kita coba running program nya. Silahkan klik tombol RUN kemudian kamu pilih emulator yang kamu miliki, lalu klik OK.

20. Kemudian pilih Install and Continue.


21. Tunggu beberapa saat sampai proses gradle selesai, jika sudah selesai maka tampilannya akan seperti ini:
Relative Layout

Nah itu dia tadi tentang relativelayout, selanjutnya kita akan membahas linear_layout.

B. Linear Layout
LinearLayout adalah layout yang menampilkan elemen-elemen view dengan arah linear, vertikal ataupun horizontal. Ini adalah layout paling sederhana di Android.

a. Linear Layout (Vertical).
Linear layout vertical ini akan menyusun komponen atau item secara vertikal.
1. Masih pada project yang sama. Kamu lihat di kolom sebelah kiri pada susunan file. Pilih folder “Res >> Layout”. Klik kanan pada Layout kemudian pilih “New >> Layout resource file”

Linear Layout

2. Maka akan muncul jendela baru. Kamu isi File name nya “linear_layout” (untuk file name, ketetapan dari android studio untuk huruf kecil pada awal kalimat). Lalu untuk Root element kita ganti menjadi LinearLayout. Jika sudah klik OK.

Linear Layout

3. Kamu bisa lihat pada component Tree nya sudah ada LinearLayout (Vertical).


4. Komponen yang diperlukan adalah:

KOMPONEN TEXT ID LAYOUT
WIDTH HEIGHT
TextView Contoh Layout Txt1 Match_parent Wrap_content
EditText/PlainText Username EditText Match_parent Wrap_content
Button LOGIN Button1 Match_parent Wrap_content
Button CANCEL Button2 Match_parent Wrap_content

Linear Layout

Linear Layout

5. Jika sudah meletakkan semua komponen, sekarang kita edit sedikit. Kita pilih tab “TEXT” pada bagian bawah.

Linear Layout

6. Kemudian kamu cari EditText, kamu ganti android:text menjadi android:hint. Android hint ini berfungsi untuk membuat tulisan pada text akan hilang jika kita mulai mengetik pada komponen tersebut. Atau kalian bisa lihat gambar berikut:
before

after

7. Kemudian kita pilih tab “MainActivity.java”.

Linear Layout

8. Rubahlah tujuan layout yang akan ditampilkan dengan layout yang baru kita buat.


9. Kemudian RUN program anda. Klik Install anda continue.


10. Jika berhasil maka hasilnya akan sperti ini:

Linear Layout

11. Ketika kamu ketikkan pada username maka tulisan tersebut akan hilang, itulah fungsi dari hint.


Nah mudah bukan? Sekarang kita lanjut ke Linear layout (horizontal).

b. Linear_layout ( Horizontal )

layout ini akan membuat komponen yang anda inputkan disusun secara horizontal. Yuk kita coba buat.

1. Masih pada layout vertical tadi. Kamu cukup merubah nya menjadi horizontal. Caranya klik “Linear_layout (vertical) kemudian pada kolom properties kamu pilih orientationnya menjadi horizontal. Maka tampilan template kamu akan berubah horizontal.


2. template mu akan kelihatan berantakan, tetapi tak usah khawatir, kamu tinggal atur lebar dan tinggi dari masing-masing komponen maka tampilannya akan kembali normal.


3. Jika dirasa sudah rapi susunannya, kamu bisa RUN programnya. Dan hasilnya akan seperti ini:

 Linear_layout ( Horizontal )

Mudah bukan? ^^ sekarang kita lanjutkan ke Table_layout.

C. Table Layout
TableLayout adalah layout yang menampilkan elemen view berdasarkan baris dan kolom. Bagi Anda yang telah mempelajari HTML, penggunaan TableLayout disini seperti penggunaan table di HTML yaitu dengan tag <table> dan <tr> serta <td>.

1. Masih pada project yang sama. Klik kanan pada folder Layout >> New >> Layout resource file.

Table Layout

2. File name kamu isi “table_layout”. Root Element kamu isi “TableLayout”.lalu klik OK.

Table Layout

3. Selanjutnya kamu masukkan komponen “TableRow”. Drag tablerow tepat pada TableLayout. Masukkan table row sebanyak 4 buah.

Table Layout

4. Maka hasilnya akan seprti ini pada Component Tree:

PROPERTIES

5. kemudian edit ID table menjadi tabel1, table2, table3 dan table4.

Table Layout

6. Kemudian kamu inputkan komponen TextView pada table1. Drag Text View dan pas kan pada table 1.


7. Kemudian kamu masukkan komponen berikut sesuai dengan table nya. Bisa kamu drag.

KOMPONEN TABEL
TextView Table1
EditText Table2
EditText Table3
Button Table4
Button Table5

8. Kamu bisa lihat susunan Component Tree nya seprti ini:


9. Jika sudah selesai dengan desain, kita kembali edit sedikti pada bagian Text.

Table Layout

10. Kamu cari EditText. Dan kamu ubah sesuai dengan Gambar berikut:

Table Layout

11. Jika sudah. Kamu pilih tab “MainActivity.Java” untuk merubah layout yang akan ditampilkan. Kamu ganti menjadi layout yang ingin kamu tampilkan.


12. Jika sudah. RUN program dan klik Install and continue.


13. Maka hasilnya akan seperti ini:

Table Layout

Mudah juga bukan? Sekarang kita lanjutkan tutorialnya pada FrameLayout.

D. Frame Layout
Frame layout adalah sebuah layout seperti bingkai.

1. Masih pada project yang sama. Kamu pilih “Layout >> New >> layout resource file”.

Frame Layout

2. pada Filename isi “frame_layout” pada RootElement isi “FrameLayout”. Lalu klik OK.

Frame Layout

3. kemudian kamu drag TextView sebanyak 4 buah ke dalam FrameLayout. Kemudian ubah setiap ID nya menjadi warna biar mudah membedakannya. Komponen paling atas akan berada paling bawah di template.


4. Kemudian kamu klik Biru. Lalu kamu tarik dan atur ukuranya. Seperti pada gambar. Kemudian klik “View all Properties”

Frame Layout

5. Kamu cari “background”.

PROPERTIES

6. Maka akan muncul jendala baru, kamu pilih tab”color” dan pilih warna biru. Lalu klik OK.


7. Lakukan hal yang sama pada TextView lannya. Sehingga hasilnya akan seprti ini.

Frame Layout

8. jika sudah selesai editing, klik tab MainActivity.java kemudian kamu ganti dengan layout yang akan kamu tampilkan seprti diatas tadi. Atau lihat gambar berikut:

Frame Layout

9. Kemudian RUN program, klik install and continue.


10. Maka hasilnya akan sperti ini.

Frame Layout

Gimana mudah juga bukan?? ^^ sekarang kita lanjut ke layout terakhir yaitu scrollView.

E. Scroll View
ScrollView digunakan untuk membuat suatu halaman bisa di scroll. Atau seperti artikel yang panjang kebawah maka kita bisa gunakan scrollview.

1. Masih di project yang sama. Klik “Layout >> New >> layout resource File”.

Scroll View

2. untuk file name isi “scroll_view” boleh bebas, untuk root element  isi “Linear Layout”. Jika sudah klik OK.

Scroll View

3. Kemudian pilih scroll view dan drag ke linearlayout.


4. kemudian kamu drag kembali TextView ke dalam ScrollView >> Linear Layout.

PROPERTIES

5. kemudian kamu masukkan komponen button di bawah textview sebanyak-banyaknya sampai melebihi template android. Bisa dilihat pada gambar berikut:

component Tree

6. Kemudian kamu pilih tab “ MainActivity.java” kamu ubah lagi layout yang ingin ditampilkan.


7. Jika sudah, RUN program kamu. Dan hasilnya akan seperti ini.

Scroll View

Nah Bagaimana…? apakah sekarang kamu sudah mengerti apa itu yang dimaksud dengan Layout dan Cara Mudah Belajar Layout di Android Studio? Mungkin itu saja tulisan yang membahas tentang pengertian Layout dan Cara Mudah Belajar Layout di Android Studio, jika terdapat kekurangan ataupun kesalahan dalam penulisan mohon di maafkan dan perbaiki atau lengkapi saja jika terdapat kesalahan. Kalau memang tulisan ini bermanfaat tidak ada salahnya jika men-Sharenya kepada teman kamu yang lain, sekian dan terimakasih.

5 comments for "Cara Mudah Belajar Layout di Android Studio"

  1. Sangan informatif dan sangat membantu sy sebagai pemula yang imgin belajar android.. layout memang harus dikuasai sehingga bisa membuat tampilan sesuai keinginan. Thanks y sudah sharing

    ReplyDelete
  2. Needed to compose you a very little word to thank you yet again regarding the nice suggestions you’ve contributed here.

    Best Hadoop training in chennai

    ReplyDelete

= > Silahkan berkomentar sesuai artikel diatas
= > Berkomentar dengan url ( mati / hidup ) tidak akan di publish

loading...
loading...
loading...