Belajar Membangun Responsive UI ConstraintLayout di Android Studio

  • Post
    codeorayo
    Keymaster
    none
    Salah satu fitur layout manager terbaru ,yang hadir di Android Studio 2.2 adalah ConstraintLayout ,yang  digunakan untuk memudahkan developer android , dalam  mendesain user interface atau antarmuka pada Aplikasi ,secara fleksibel dan dinamis ,dengan cara drag and drop , tanpa harus melibatkan banyak layout bersarang (Nested Multiple Layout). Jadi kita tidak perlu lagi ,membangun layout secara hirarki ,seperti di dalam RelativeLayout ,terdapat LinearLayout.  Beberapa Konten View akan saling terikat dan berdampingan satu sama lain. Jika kalian sudah pernah membangun UI di xcode ,pada perangkat iOS ,mungkin kalian sudah sangat kenal dan fimiliar ,dan tidak perlu membutuhkan waktu lama untuk beradapatasi dan menyesuaikan dengan layout ini (Saya sih belum pernah hehe).

    [img width=400,height=266]https://2.bp.blogspot.com/-UwQXaDDmjqI/WPrE4J-d7iI/AAAAAAAAGzo/sXBwl0w06h8xhGlFgTTpSFIU_C3CjFoawCLcB/s400/Cara-membuat-ui-aplikasi-sederhana-constraint-layout-android-studio.png[/img]

    Hal ini juga dapat dijadikan  salah satu cara alternatif ,untuk meningkatkan performa dalam mendesain Layout.  Kita tidak perlu menulis code lagi secara berulang-ulang, hanya untuk mengembangkan Aplikasi , pada ukuran layar yang berbeda-beda(Konsisten di semua ukuran layar) ,di  perangkat Android. Salah satu perbedaaan saat kita mendesain  komponen User Interface  dengan ConstraintLayout ,dibandingkan kita mendesain layout dengan cara biasa. Secara otomatis atribut-atribut yang akan tergenerate, lebih banyak dari kita membuat atau mendesain ,dengan menggunakan RelativeLayout atau LinearLayout sebagai Parent Layout.

    Pada tutorial belajar android kali ini, kita akan belajar membangun komponen User Interface seperti EditText dan Button, dengan menggunakan layout manager ConstraintLayout.

    1. Pertama kalian bisa membuka project , yang sudah ada di Android Studio.

    2.  Pada  build.gradle (Module App) Kalian bisa menambahkan library, dari ConstraintLayout  , di bagian dependencies seperti pada gambar dibawah :

    [table]

    [tr]

    [/tr]

    [tr]

    [/tr]

    [/table]

    [td][img width=640,height=324]https://1.bp.blogspot.com/-IuTj04Tzjig/WPnv4zAq0GI/AAAAAAAAGyo/tu9RAqF3KLMvPuijgMGs-1WhYc0Ez_YgQCLcB/s640/dependencies-constraint-layout-android-studio.png[/img][/td]
    [td]dependencies ConstraintLayout[/td]

    3. Lalu kita bisa mendrag ConstraintLayout ,pada jendela kiri Palette , lalu pilih Layouts , dan kemudian  pilih ConstraintLayout. seperti pada gambar dibawah :

    [table]

    [tr]

    [/tr]

    [tr]

    [/tr]

    [/table]

    [td][img width=640,height=497]https://2.bp.blogspot.com/-2Qc5WhtQzQA/WPn3Yb8oJUI/AAAAAAAAGy4/ZqrriHchvZY3tlGbq44tnZfupSFETRedwCLcB/s640/cara-buat-constraint-layout-android-studio.png[/img][/td]
    [td]drag and drop ConstraintLayout[/td]

    Terdapat icon-icon atau toolbar khusus ,jika kita sedang membangun User Interface dengan  ConstraintLayout, seperti

  • 1. Untuk mengaktifkan atau menonaktifkan, sembunyikan constraint

  • 2. Untuk mengaktifkan atau menonaktifkan , Autoconnect constraint

  • 3. Untuk menghapus constraint yang terkait

  • 4. Untuk mengaitkan kembali constraint

  • 5. Ukuran standar Margin di ConstraintLayout


    Atau kalian juga bisa mengconvert RelativeLayout  ke ConstraintLayout , pada window Component Tree .dengan klik kanan pada mouse , lalu pilih Convert RelativeLayout to ConstraintLayout. 

    [table]

    [tr]

    [/tr]

    [tr]

    [/tr]

    [/table]

    [td][img width=640,height=630]https://1.bp.blogspot.com/-MI-4rkFBBk0/WPqxZpW53FI/AAAAAAAAGzY/LWsbZYkbHtgofTgU4mt4prz2oyp5LQrtACLcB/s640/convert-layout-to-constraintlayout-android-studio.png[/img][/td]
    [td]Convert to ConstraintLayout[/td]

    4.  Nah , untuk codingan xmlnya , kalian bisa lihat pada gambar dibawah:

    Disini kita dapat menggunakan namespace khusus ,seperti xmlns:app=”http://schemas.android

    .com/apk/res-auto” ,  dan xmlns:tools=”http://schemas.android.com/tools. untuk menggunakan atribut-atribut yang tersedia di library ConstraintLayout.

    [table]

    [tr]

    [/tr]

    [tr]

    [/tr]

    [/table]

    [td][img width=640,height=585]https://2.bp.blogspot.com/-X7iUsGd_gZ4/WPoQyPfbiqI/AAAAAAAAGzI/EUS0CSikVuUYvKDOsBrucNPXZYQLPVhCwCLcB/s640/code-codingan-constraintlayout-android-studio.png[/img][/td]
    [td]Contoh Hasil Code ConstraintLayout XML[/td]

    5. Sekarang kita akan mulai mencoba mendesain ,User Interfaceya dengan cara drag and drop . Kita akan mencoba mendesain ,dengan menggunakan EditText dan juga Button pada ConstraintLayout ,dan bagaimana caranya agar bisa konsisten, di semua ukuran layar pada perangkat Android. Selengkapnya kalian bisa tonton video berikut:

    Seperti yang kalian sudah tonton pada  Video diatas ,ConstraintLayout dapat mendefinisikan ,setiap posisi pada Konten View ,yang terikat satu sama lain berdasarkan Konten View atau Parent View ,yang saling berdekatan.

    Kita juga dapat mempersingkat waktu ,untuk mendesain Komponen User Interface yang pas dan sesuai,  di segala ukuran layar pada perangkat Android ,serta tidak perlu melibatkan banyak layout bersarang (Nested Multiple Layout).

    Hasil Codenya akan terlihat seperti ini :

    [table]

    [tr]

    [/tr]

    [tr]

    [/tr]

    [/table]

    [td][img width=400,height=377]https://3.bp.blogspot.com/-M8XemS-YGy4/WPrLspdWeJI/AAAAAAAAGz4/q3PrfEuhxbUNfto-wcTdz4RGKUstevylQCLcB/s400/contoh-code-constraintlayout-android-studio-xml.png[/img][/td]
    [td]Contoh Hasil Code EditText dan Button di dalam ConstraintLayout [/td]

    //latihan tulis code manual ya hehe 

    Untuk memahaminya ,kalian bisa perhatikan pada contoh gambar ilustrasi ini :

    [table]

    [tr]

    [/tr]

    [tr]

    [/tr]

    [/table]

    [td][img width=400,height=152]https://developer.android.com/training/basics/firstapp/images/constraint-example_2x.png[/img][/td]
    [td]Ilustrasi 2 View yang posisinya di dalam ConstraintLayout [/td]

    Keterangan :

    View  A dengan Parent Layout mempunyai ukuran spasi atau margin 16 dp ke atas

    View A dengan Parent Layout mempunyai ukuran spasi atau margin 16 dp ke kiri

    View B  dengan  View A mempunyai ukuran spasi atau margin 16 dp ke kiri

    View B sejajar pada bagian atas dengan View A

Ampuh! Ini rahasia mengembangkan aplikasi secara instan, tinggal download dan kembangkan. Gabung sekarang juga! Premium Membership [PRIVATE] https://premium.codeorayo.com
  • You must be logged in to reply to this topic.