Smart Phone Terbaru di Amazon

Layout Manager

Table Layout

  • TableLayout meletakan komponen dalam bentuk tabel (baris dan kolom), mirip seperti Table yang digunakan di HTML untuk mengatur layout. Pengguna mendefinisikan baris dengan tag <TableRow> dan secara otomatis system mendefinisikan kolomnya. Penentuan bahwa elemen harus menempati lebih dari satu kolom menggunakan android: layout_span. Hal ini dapat meningkatkan jumlah total kolom juga, jadi jika kita memiliki baris dengan dua elemen dan setiap elemenmemiliki android: layout_span = "3" maka akan memiliki setidaknya enam kolom dalam tabel. Kolom dimulai dari nol.
  • Langkah pertama membuat aplikasi Table Layout, buka program Esclipe nya dan bikin project baru dengan cara klik menu File > New > Android Aplication Project. Setelah itu beri nama projectnya.



  • Klik next saja sampai ke pengaturan configurasi icon project kita. Lalu  klik Next saja sampe finish.


  • Berikut tampilan awal project nya.

  • Setelah itu kita masuk ke Actifity main XML nya, lalu masukan coding, seperti gambar berikut.



  • Setelah kita selesai memasukan koding nya lalu save dan pastikan tidak ada yang error, maka tampilan Graphic nya akan berubah  seperti berikut :

  • Selanjutnya kita Run, dengan cara klik kanan pada project kita, lalu pilih Run AS  > Android Application. Tetapi sebelumnya pastikan terlebih dahulu kita sudah membuat Emulatornya.

  • Maka hasilnya seperti gambar berikut.










Absolud layout


  • Absolute layout didasarkan pada ide sederhana dengan menempatkan masing-masing kontrol pada posisi absolut. Penentuan koordinat x dan y pada layar untuk setiap control.
  • Langkahnya untuk membuat Absolud Layout yaitu buka program Esclipe nya dan bikin project baru dengan cara klik menu File > New > Android Aplication Project. Setelah itu beri nama projectnya.
  • Klik next saja sampai ke pengaturan configurasi icon project kita. Lalu  klik Next saja sampe finish.



  • Setelah itu kita masuk ke Actifity main XML nya, lalu masukan coding, seperti gambar berikut :



  • Setelah kita selesai memasukan koding nya lalu save dan pastikan tidak ada yang error, maka tampilan Graphic nya akan berubah  seperti berikut :


  • Setelah itu run project kita, maka hasilnya seperti gambar berikut :









RELATIVE LAUOUT


  • RelativeLayout mengatur posisi secara relatif berdasarkan posisi widget yang lain atau parentnya. Hal ini bisa dibilang tata letak yang rumit , dan kita perlu beberapa properti untuk benar-benar mendapatkan tata letak yang kita inginkan.
  • Langkah pertama membuat aplikasi Relative Layout, buka program Esclipe nya dan bikin project baru dengan cara klik menu File > New > Android Aplication Project. Setelah itu beri nama projectnya.
  • Klik next saja sampai ke pengaturan configurasi icon project kita. Lalu  klik Next saja sampe finish.




  • Berikut tampilan awal project nya.


  • Setelah itu kita masuk ke Actifity main XML nya, lalu masukan coding, seperti gambar berikut :



  • Setelah kita selesai memasukan koding nya lalu save dan pastikan tidak ada yang error, maka tampilan Graphic nya akan berubah  seperti berikut :


  • Selanjutnya kita Run, dengan cara klik kanan pada project kita, lalu pilih Run AS  > Android Application. Tetapi sebelumnya pastikan terlebih dahulu kita sudah membuat Emulatornya.










Linera Layout


  • Tata letak linear mengatur elemen sepanjang garis tunggal. Menentukan apakah garis yang vertikal atau horizontal menggunakan android: orientasi. Berikut contoh tata letak XML sampel menggunakan Linear Layout.

  • Kita buat projectnya dan beri nama.

  • Kita configurasi icon Aplikasi sesuka kita.


  • Klik Next terus smpe finish.


  • Dan tampilan awal project linear layout nya seperti berikut :


  • Setelah itu kita masuk ke Actifity main XML nya, lalu masukan coding, seperti gambar berikut.



  • Setelah selesai coding, kita save dan  berikut tampilan pada graphic nya.

  • Selanjutnya kita Run, dengan cara klik kanan pada project kita, lalu pilih Run AS  > Android Application. Tetapi sebelumnya pastikan terlebih dahulu kita sudah membuat Emulatornya.


  • Berikut, hasilnya ketika di jalankan di emulator.












Frame Layout


  • Framelayout digunakan untuk menampilkan satu komponen. Jika ada lebih dari satu widget, maka akan ditampilkan secara bertumpuk. Kita bisa menambahkan layout lain sebagai child di dalam frame layout.

  • Langkah pertama membuat aplikasi Frame Layout, buka program Esclipe nya dan bikin project baru dengan cara klik menu File > New > Android Aplication Project. Setelah itu beri nama projectnya.


  • Klik next saja sampai ke pengaturan configurasi icon project kita. Lalu  klik Next saja sampe finish.



  • Berikut tampilan awal project Frame layoutnya.

  • Langkah selanjutnya yaitu utuk memnampilkan gambar , disini kita harus cermat.. kita siapkan terlebih  dahulu gambar yang akan kita tampilkan, terserah gambar apa saja sesuka hati kita yang terpenting formatnya harus (Png). Kalo  masih JPEG, atao JPG ubah dahulu formatnya, karena untuk mempermudah dan juga rasanya format selain (Png) tdk bisa kita load, atao akan menimbulkan error di coding nya.
  • Lalu carnya adalah bisa dengan kita Drop & Down gambar yang kita siapkan ke folder  (drawable-xxhdpi) yang terletak di folder  > Res ,, yang berada di Package Project kita. Seperti gambar berikut :
  • Atou juga bisa dengan cara copi- gambar nya yang kita siapkan dan dan pastekan di folder (drawable-xxhdpi).

  • Setelah itu kita masuk coding yang harus di perhatikan disini adalah di bagian > android : scr nya,, pada ImageView , di situ tertulis ( “@drawable/juve” ) nah,, kata juve itu merupakan nama dari file gambar yang tadi ditambahkan. Ingat penulisanya harus sama seperti nama file gambar kita dan nama nya saja formatnya tidak usah di tulis. Sama juga pada bagian ImageView yang kedua. Seperti pada gambar di bawah ini :

  • Setelah selesai mengcoding maka hasil grapichalnya seperti di bawah ini :

  • Setelah itu kita run aplikasi kita, tentunya emulatornya harus aktifkan terlebih dahulu , dan hasilnya seperti berikut :





Selesaii........
0 Komentar untuk " Layout Manager "

Back To Top