Contoh Code Design ConstraintLayout pada Layout XML

  • Post
    codeorayo
    Keymaster
    none
    ConstraintLayout  adalah salah satu layout manager, yang dapat mendefinisikan ,setiap posisi pada Konten View ,yang terikat satu sama lain berdasarkan Konten View atau Parent View ,yang saling berdekatan, dengan mendesainya  secara langsung di bagian design editor pada Android Studio. 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).

    [img width=320,height=213]https://2.bp.blogspot.com/-zznhbTYdQUQ/WQfqbLCeTGI/AAAAAAAAG1M/2PeMPSVrfEAt53tU_dFu5trqhsBatm6mgCLcB/s320/Contoh-Code%2BPenerapan-Design-ConstraintLayout-android-Layout-XML.png[/img]

    Berikut beberapa Contoh Codenya:


  •     xmlns:android=”http://schemas.android.com/apk/res/android

  •     xmlns:app=”http://schemas.android.com/apk/res-auto

  •     xmlns:tools=”http://schemas.android.com/tools

  •     android:id=”@+id/activity_main_done”

  •     android:layout_width=”match_parent”

  •     android:layout_height=”match_parent”

  •     app:layout_editor_absoluteX=”0dp”

  •     app:layout_editor_absoluteY=”80dp”

  •     tools:layout_editor_absoluteX=”0dp”

  •     tools:layout_editor_absoluteY=”80dp”>

  •  

  •     

  •         android:src=”@drawable/singapore”

  •         android:layout_width=”0dp”

  •         android:layout_height=”0dp”

  •         app:layout_editor_absoluteX=”0dp”

  •         app:layout_editor_absoluteY=”0dp”

  •         android:id=”@+id/header”

  •         android:scaleType=”centerCrop”

  •         android:contentDescription=”@string/dummy”

  •         app:layout_constraintLeft_creator=”1″

  •         app:layout_constraintTop_creator=”1″

  •         app:layout_constraintRight_creator=”1″

  •         app:layout_constraintBottom_creator=”1″

  •         app:layout_constraintLeft_toLeftOf=”@+id/activity_main_done”

  •         tools:layout_constraintLeft_creator=”1″

  •         app:layout_constraintTop_toTopOf=”@+id/activity_main_done”

  •         tools:layout_constraintTop_creator=”1″

  •         app:layout_constraintRight_toRightOf=”@+id/activity_main_done”

  •         tools:layout_constraintRight_creator=”1″

  •         app:layout_constraintBottom_toBottomOf=”@+id/favorite”

  •         android:layout_marginBottom=”16dp”

  •         tools:layout_constraintBottom_creator=”1″

  •         app:layout_constraintHorizontal_bias=”0.0″

  •         app:layout_constraintVertical_bias=”1.0″ />

  •  

  •     

  •         android:src=”@drawable/ic_star”

  •         android:layout_width=”36dp”

  •         android:layout_height=”36dp”

  •         app:layout_editor_absoluteX=”359dp”

  •         app:layout_editor_absoluteY=”104dp”

  •         android:id=”@+id/favorite”

  •         android:background=”@drawable/info_background”

  •         android:padding=”5dp”

  •         android:contentDescription=”@string/dummy”

  •         app:layout_constraintTop_creator=”1″

  •         app:layout_constraintRight_creator=”1″

  •         app:layout_constraintBottom_creator=”0″

  •         tools:layout_editor_absoluteX=”359dp”

  •         tools:layout_editor_absoluteY=”104dp”

  •         app:layout_constraintTop_toTopOf=”@+id/activity_main_done”

  •         tools:layout_constraintTop_creator=”0″

  •         app:layout_constraintRight_toRightOf=”@+id/activity_main_done”

  •         android:layout_marginEnd=”16dp”

  •         tools:layout_constraintRight_creator=”0″

  •         app:layout_constraintBottom_toBottomOf=”@+id/activity_main_done”

  •         android:layout_marginBottom=”16dp”

  •         tools:layout_constraintBottom_creator=”0″

  •         app:layout_constraintVertical_bias=”0.19″ />

  •  

  •     

  •         android:text=”@string/singapore”

  •         android:layout_width=”wrap_content”

  •         android:layout_height=”wrap_content”

  •         app:layout_editor_absoluteX=”16dp”

  •         app:layout_editor_absoluteY=”140dp”

  •         android:id=”@+id/title”

  •         android:textSize=”24sp”

  •         app:layout_constraintLeft_creator=”1″

  •         app:layout_constraintTop_creator=”0″

  •         tools:layout_editor_absoluteX=”16dp”

  •         tools:layout_editor_absoluteY=”140dp”

  •         app:layout_constraintLeft_toLeftOf=”@+id/activity_main_done”

  •         android:layout_marginStart=”16dp”

  •         tools:layout_constraintLeft_creator=”0″

  •         app:layout_constraintTop_toBottomOf=”@+id/header”

  •         android:layout_marginTop=”16dp”

  •         tools:layout_constraintTop_creator=”0″ />

  •  

  •     

  •         android:layout_width=”0dp”

  •         android:layout_height=”wrap_content”

  •         android:inputType=”textPersonName”

  •         android:text=”@string/camera_value”

  •         android:ems=”10″

  •         app:layout_editor_absoluteX=”73dp”

  •         app:layout_editor_absoluteY=”176dp”

  •         android:id=”@+id/cameraType”

  •         app:layout_constraintLeft_creator=”1″

  •         app:layout_constraintTop_creator=”1″

  •         app:layout_constraintRight_creator=”1″

  •         tools:layout_editor_absoluteX=”73dp”

  •         tools:layout_editor_absoluteY=”176dp”

  •         app:layout_constraintLeft_toLeftOf=”@+id/settings”

  •         tools:layout_constraintLeft_creator=”1″

  •         app:layout_constraintTop_toBottomOf=”@+id/title”

  •         android:layout_marginTop=”8dp”

  •         tools:layout_constraintTop_creator=”0″

  •         app:layout_constraintRight_toRightOf=”@+id/settings”

  •         tools:layout_constraintRight_creator=”1″ />

  •  

  •     

  •         android:text=”@string/camera”

  •         android:layout_width=”wrap_content”

  •         android:layout_height=”wrap_content”

  •         app:layout_editor_absoluteX=”16dp”

  •         app:layout_editor_absoluteY=”189dp”

  •         android:id=”@+id/cameraLabel”

  •         android:labelFor=”@+id/cameraType”

  •         app:layout_constraintLeft_creator=”1″

  •         app:layout_constraintBaseline_creator=”1″

  •         tools:layout_editor_absoluteX=”16dp”

  •         tools:layout_editor_absoluteY=”189dp”

  •         app:layout_constraintLeft_toLeftOf=”@+id/activity_main_done”

  •         android:layout_marginStart=”16dp”

  •         tools:layout_constraintLeft_creator=”0″

  •         app:layout_constraintBaseline_toBaselineOf=”@+id/cameraType”

  •         tools:layout_constraintBaseline_creator=”0″ />

  •  

  •     

  •         android:text=”@string/settings”

  •         android:layout_width=”wrap_content”

  •         android:layout_height=”wrap_content”

  •         app:layout_editor_absoluteX=”16dp”

  •         app:layout_editor_absoluteY=”238dp”

  •         android:id=”@+id/settingsLabel”

  •         android:labelFor=”@+id/settings”

  •         app:layout_constraintLeft_creator=”1″

  •         app:layout_constraintBaseline_creator=”1″

  •         tools:layout_editor_absoluteX=”16dp”

  •         tools:layout_editor_absoluteY=”238dp”

  •         app:layout_constraintLeft_toLeftOf=”@+id/activity_main_done”

  •         android:layout_marginStart=”16dp”

  •         tools:layout_constraintLeft_creator=”0″

  •         app:layout_constraintBaseline_toBaselineOf=”@+id/settings”

  •         tools:layout_constraintBaseline_creator=”0″ />

  •  

  •     

  •         android:layout_width=”0dp”

  •         android:layout_height=”wrap_content”

  •         android:inputType=”textPersonName”

  •         android:text=”@string/camera_settings”

  •         android:ems=”10″

  •         app:layout_editor_absoluteX=”73dp”

  •         app:layout_editor_absoluteY=”225dp”

  •         android:id=”@+id/settings”

  •         app:layout_constraintLeft_creator=”1″

  •         app:layout_constraintTop_creator=”1″

  •         app:layout_constraintRight_creator=”1″

  •         tools:layout_editor_absoluteX=”73dp”

  •         tools:layout_editor_absoluteY=”225dp”

  •         app:layout_constraintLeft_toRightOf=”@+id/settingsLabel”

  •         android:layout_marginStart=”6dp”

  •         tools:layout_constraintLeft_creator=”1″

  •         app:layout_constraintTop_toBottomOf=”@+id/cameraType”

  •         android:layout_marginTop=”8dp”

  •         tools:layout_constraintTop_creator=”0″

  •         app:layout_constraintRight_toRightOf=”@+id/description”

  •         tools:layout_constraintRight_creator=”1″ />

  •  

  •     

  •         android:text=”@string/upload”

  •         android:layout_width=”wrap_content”

  •         android:layout_height=”wrap_content”

  •         app:layout_editor_absoluteX=”307dp”

  •         app:layout_editor_absoluteY=”538dp”

  •         android:id=”@+id/upload”

  •         app:layout_constraintRight_creator=”1″

  •         app:layout_constraintBottom_creator=”1″

  •         tools:layout_editor_absoluteX=”307dp”

  •         tools:layout_editor_absoluteY=”538dp”

  •         app:layout_constraintRight_toRightOf=”@+id/activity_main_done”

  •         android:layout_marginEnd=”16dp”

  •         tools:layout_constraintRight_creator=”0″

  •         app:layout_constraintBottom_toBottomOf=”@+id/activity_main_done”

  •         android:layout_marginBottom=”16dp”

  •         tools:layout_constraintBottom_creator=”0″ />

  •  

  •     

  •         android:text=”@string/discard”

  •         android:layout_width=”wrap_content”

  •         android:layout_height=”wrap_content”

  •         app:layout_editor_absoluteX=”211dp”

  •         app:layout_editor_absoluteY=”538dp”

  •         android:id=”@+id/discard”

  •         android:elevation=”0dp”

  •         app:layout_constraintRight_creator=”0″

  •         app:layout_constraintBaseline_creator=”1″

  •         tools:layout_editor_absoluteX=”211dp”

  •         tools:layout_editor_absoluteY=”538dp”

  •         app:layout_constraintRight_toLeftOf=”@+id/upload”

  •         android:layout_marginEnd=”8dp”

  •         tools:layout_constraintRight_creator=”0″

  •         app:layout_constraintBaseline_toBaselineOf=”@+id/upload”

  •         tools:layout_constraintBaseline_creator=”0″ />

  •  

  •     

  •         android:text=”@string/singapore_description”

  •         android:layout_width=”0dp”

  •         android:layout_height=”0dp”

  •         app:layout_editor_absoluteX=”16dp”

  •         app:layout_editor_absoluteY=”274dp”

  •         android:id=”@+id/description”

  •         android:fadingEdge=”vertical”

  •         android:ellipsize=”end”

  •         android:textSize=”15sp”

  •         app:layout_constraintLeft_creator=”1″

  •         app:layout_constraintTop_creator=”0″

  •         app:layout_constraintRight_creator=”1″

  •         app:layout_constraintBottom_creator=”0″

  •         tools:layout_editor_absoluteX=”16dp”

  •         tools:layout_editor_absoluteY=”274dp”

  •         app:layout_constraintLeft_toLeftOf=”@+id/activity_main_done”

  •         android:layout_marginStart=”16dp”

  •         tools:layout_constraintLeft_creator=”1″

  •         app:layout_constraintTop_toBottomOf=”@+id/settings”

  •         android:layout_marginTop=”8dp”

  •         tools:layout_constraintTop_creator=”1″

  •         app:layout_constraintRight_toRightOf=”@+id/activity_main_done”

  •         android:layout_marginEnd=”16dp”

  •         tools:layout_constraintRight_creator=”1″

  •         app:layout_constraintBottom_toTopOf=”@+id/discard”

  •         android:layout_marginBottom=”8dp”

  •         tools:layout_constraintBottom_creator=”1″ />



  • Code diatas di ambil dari sample di CodeLabs Google ,Hasilnya akan terlihat seperti ini :

    [table]

    [tr]

    [/tr]

    [tr]

    [/tr]

    [/table]

    [td][img width=320,height=275]https://3.bp.blogspot.com/-30cs9gc7ZDM/WQfjOGWZyhI/AAAAAAAAG00/AU6pWwgTDVsy83oQfz5W6g4qygASXTpjwCLcB/s320/Contoh-design-constraintlayout-android-studio.png[/img][/td]
    [td]Contoh Design ConstraintLayout Android[/td]

    code:

  • ?xml version=”1.0″ encoding=”utf-8″?>


  • http://schemas.android.com/apk/res/android

  •     xmlns:app=”http://schemas.android.com/apk/res-auto

  •     xmlns:tools=”http://schemas.android.com/tools

  •     android:orientation=”vertical”

  •     android:layout_width=”match_parent”

  •     android:layout_height=”match_parent”>

  •  

  •     

  •         android:id=”@+id/textView3″

  •         android:layout_width=”wrap_content”

  •         android:layout_height=”wrap_content”

  •         android:layout_marginTop=”16dp”

  •         android:text=”@string/aspect_ratio”

  •         android:textSize=”30sp”

  •         app:layout_constraintLeft_toLeftOf=”parent”

  •         app:layout_constraintRight_toRightOf=”parent”

  •         app:layout_constraintTop_toTopOf=”parent”

  •         tools:layout_constraintLeft_creator=”1″

  •         tools:layout_constraintRight_creator=”1″

  •         tools:layout_constraintTop_creator=”1″ />

  •  

  •     

  •         android:id=”@+id/textView4″

  •         android:layout_width=”wrap_content”

  •         android:layout_height=”wrap_content”

  •         android:layout_marginStart=”8dp”

  •         android:layout_marginTop=”24dp”

  •         android:text=”@string/big_android_icon”

  •         android:textSize=”24sp”

  •         app:layout_constraintLeft_toRightOf=”@+id/imageButton”

  •         app:layout_constraintTop_toBottomOf=”@+id/imageView”

  •         tools:layout_constraintTop_creator=”1″ />

  •  

  •     

  •         android:id=”@+id/textView5″

  •         android:layout_width=”wrap_content”

  •         android:layout_height=”wrap_content”

  •         android:text=”@string/textview”

  •         android:textSize=”24sp”

  •         app:layout_constraintLeft_toLeftOf=”@+id/textView4″

  •         app:layout_constraintTop_toBottomOf=”@+id/textView4″

  •         tools:layout_constraintLeft_creator=”1″

  •         tools:layout_constraintTop_creator=”1″ />

  •  

  •     

  •         android:id=”@+id/imageView”

  •         android:layout_width=”0dp”

  •         android:layout_height=”0dp”

  •         android:layout_marginEnd=”16dp”

  •         android:layout_marginStart=”16dp”

  •         android:scaleType=”centerCrop”

  •         android:contentDescription=”@string/lake_tahoe_image”

  •         app:layout_constraintDimensionRatio=”h,16:9″

  •         app:layout_constraintLeft_toLeftOf=”parent”

  •         app:layout_constraintRight_toRightOf=”parent”

  •         app:srcCompat=”@drawable/lake”

  •         tools:layout_constraintLeft_creator=”1″

  •         tools:layout_constraintRight_creator=”1″

  •         android:layout_marginTop=”16dp”

  •         app:layout_constraintTop_toBottomOf=”@+id/textView3″ />

  •  

  •     

  •         android:id=”@+id/imageButton”

  •         android:layout_width=”0dp”

  •         android:layout_height=”0dp”

  •         app:srcCompat=”@drawable/ic_android_black_24dp”

  •         tools:layout_constraintBottom_creator=”1″

  •         app:layout_constraintBottom_toBottomOf=”@+id/textView5″

  •         app:layout_constraintTop_toTopOf=”@+id/textView4″

  •         android:layout_marginStart=”16dp”

  •         app:layout_constraintLeft_toLeftOf=”parent”

  •         app:layout_constraintDimensionRatio=”w,1:1″

  •         android:contentDescription=”@string/android_button” />



  • Code diatas di ambil dari sample android Constraint Layout di Github , yang hasilnya akan terlihat seperti ini :

    [table]

    [tr]

    [/tr]

    [tr]

    [/tr]

    [/table]

    [td][img width=320,height=289]https://2.bp.blogspot.com/-dRXdb4sanp0/WQfnn1zaR8I/AAAAAAAAG1A/n7Kr7D-yUa0m3ob4xqqk6_bqIKhVZdMcgCLcB/s320/Contoh-design-constraintlayout-android-studio2.png[/img][/td]
    [td]Contoh Design ConstraintLayout Android[/td]

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.