{"id":905,"date":"2018-12-27T06:09:28","date_gmt":"2018-12-26T23:09:28","guid":{"rendered":"https:\/\/luckytruedev.com\/learning\/?p=905"},"modified":"2019-09-21T21:41:53","modified_gmt":"2019-09-21T14:41:53","slug":"pengenalan-android-ui-constraint-layout","status":"publish","type":"post","link":"https:\/\/luckytruedev.com\/learning\/pengenalan-android-ui-constraint-layout\/","title":{"rendered":"Pengenalan Android UI Constraint Layout"},"content":{"rendered":"\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"832\" src=\"https:\/\/luckytruedev.com\/learning\/wp-content\/uploads\/2018\/12\/Picture1-13-1024x832.png\" alt=\"\" class=\"wp-image-913\" srcset=\"https:\/\/luckytruedev.com\/learning\/wp-content\/uploads\/2018\/12\/Picture1-13.png 1024w, https:\/\/luckytruedev.com\/learning\/wp-content\/uploads\/2018\/12\/Picture1-13-300x244.png 300w, https:\/\/luckytruedev.com\/learning\/wp-content\/uploads\/2018\/12\/Picture1-13-768x624.png 768w, https:\/\/luckytruedev.com\/learning\/wp-content\/uploads\/2018\/12\/Picture1-13-110x89.png 110w, https:\/\/luckytruedev.com\/learning\/wp-content\/uploads\/2018\/12\/Picture1-13-420x341.png 420w, https:\/\/luckytruedev.com\/learning\/wp-content\/uploads\/2018\/12\/Picture1-13-529x430.png 529w, https:\/\/luckytruedev.com\/learning\/wp-content\/uploads\/2018\/12\/Picture1-13-20x16.png 20w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption>Android Constraint Layout<\/figcaption><\/figure><\/div>\n\n\n\n<p>Google untuk menambahkan layout Constraint pada Konferensi Google I \/ O.<\/p>\n\n\n<div id=\"lucky-3212871614\"><script async src=\"\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js?client=ca-pub-5605825534849002\" crossorigin=\"anonymous\"><\/script><ins class=\"adsbygoogle\" style=\"display:block;\" data-ad-client=\"ca-pub-5605825534849002\" \ndata-ad-slot=\"5317815257\" \ndata-ad-format=\"auto\" data-full-width-responsive=\"true\"><\/ins>\n<script> \n(adsbygoogle = window.adsbygoogle || []).push({}); \n<\/script>\n<\/div>\n\n\n<p><br><br>Android ConstraintLayout digunakan untuk mendefinisikan tata letak dengan menetapkan batasan untuk setiap tampilan \/ widget child dibandingkan dengan tampilan lainnya.<br><br><strong>Catatan: <\/strong>Pastikan Anda memiliki Versi Android Studio &amp; SDK terbaru.<\/p>\n\n\n\n<p><strong>Kongfigurasi Tata Letak Constraint<\/strong><br><br>Buat proyek aktivitas kosong baru dan tambahkan dependensi berikut di dalam file&nbsp;<strong>build.gradle<\/strong>:<br><\/p>\n\n\n\n<pre class=\"wp-block-syntaxhighlighter-code brush: plain; notranslate\">implementation 'com.android.support.constraint:constraint-layout:1.1.0'<\/pre>\n\n\n\n<p>Kemudian klik convert menjadi ConstraintLayout.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"688\" src=\"https:\/\/luckytruedev.com\/learning\/wp-content\/uploads\/2018\/12\/Picture2-6-1024x688.png\" alt=\"\" class=\"wp-image-914\" srcset=\"https:\/\/luckytruedev.com\/learning\/wp-content\/uploads\/2018\/12\/Picture2-6.png 1024w, https:\/\/luckytruedev.com\/learning\/wp-content\/uploads\/2018\/12\/Picture2-6-300x202.png 300w, https:\/\/luckytruedev.com\/learning\/wp-content\/uploads\/2018\/12\/Picture2-6-768x516.png 768w, https:\/\/luckytruedev.com\/learning\/wp-content\/uploads\/2018\/12\/Picture2-6-110x74.png 110w, https:\/\/luckytruedev.com\/learning\/wp-content\/uploads\/2018\/12\/Picture2-6-420x282.png 420w, https:\/\/luckytruedev.com\/learning\/wp-content\/uploads\/2018\/12\/Picture2-6-640x430.png 640w, https:\/\/luckytruedev.com\/learning\/wp-content\/uploads\/2018\/12\/Picture2-6-20x13.png 20w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption>Konversi ke Constraint Layout<\/figcaption><\/figure><\/div>\n\n\n<div id=\"lucky-3052550541\"><script async src=\"\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js?client=ca-pub-5605825534849002\" crossorigin=\"anonymous\"><\/script><ins class=\"adsbygoogle\" style=\"display:block;\" data-ad-client=\"ca-pub-5605825534849002\" \ndata-ad-slot=\"3760179245\" \ndata-ad-format=\"auto\" data-full-width-responsive=\"true\"><\/ins>\n<script> \n(adsbygoogle = window.adsbygoogle || []).push({}); \n<\/script>\n<\/div>\n\n\n<h2 class=\"wp-block-heading\"><strong>Menggunakan Constraint Layout<\/strong><\/h2>\n\n\n\n<p><strong>1- <\/strong>Tarik dan lepaskan TextView pada layout dan tetapkan kendala padanya.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"737\" src=\"https:\/\/luckytruedev.com\/learning\/wp-content\/uploads\/2018\/12\/Picture3-5-1024x737.png\" alt=\"\" class=\"wp-image-915\" srcset=\"https:\/\/luckytruedev.com\/learning\/wp-content\/uploads\/2018\/12\/Picture3-5.png 1024w, https:\/\/luckytruedev.com\/learning\/wp-content\/uploads\/2018\/12\/Picture3-5-300x216.png 300w, https:\/\/luckytruedev.com\/learning\/wp-content\/uploads\/2018\/12\/Picture3-5-768x553.png 768w, https:\/\/luckytruedev.com\/learning\/wp-content\/uploads\/2018\/12\/Picture3-5-110x79.png 110w, https:\/\/luckytruedev.com\/learning\/wp-content\/uploads\/2018\/12\/Picture3-5-420x302.png 420w, https:\/\/luckytruedev.com\/learning\/wp-content\/uploads\/2018\/12\/Picture3-5-597x430.png 597w, https:\/\/luckytruedev.com\/learning\/wp-content\/uploads\/2018\/12\/Picture3-5-20x14.png 20w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption>Penggunaan Constraint Layout<\/figcaption><\/figure><\/div>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"531\" height=\"417\" src=\"https:\/\/luckytruedev.com\/learning\/wp-content\/uploads\/2018\/12\/Screen-Shot-2018-12-23-at-09.08.58.png\" alt=\"\" class=\"wp-image-916\" srcset=\"https:\/\/luckytruedev.com\/learning\/wp-content\/uploads\/2018\/12\/Screen-Shot-2018-12-23-at-09.08.58.png 531w, https:\/\/luckytruedev.com\/learning\/wp-content\/uploads\/2018\/12\/Screen-Shot-2018-12-23-at-09.08.58-300x236.png 300w, https:\/\/luckytruedev.com\/learning\/wp-content\/uploads\/2018\/12\/Screen-Shot-2018-12-23-at-09.08.58-110x86.png 110w, https:\/\/luckytruedev.com\/learning\/wp-content\/uploads\/2018\/12\/Screen-Shot-2018-12-23-at-09.08.58-420x330.png 420w, https:\/\/luckytruedev.com\/learning\/wp-content\/uploads\/2018\/12\/Screen-Shot-2018-12-23-at-09.08.58-20x16.png 20w\" sizes=\"auto, (max-width: 531px) 100vw, 531px\" \/><figcaption>Penggunaan Constraint Layout<\/figcaption><\/figure><\/div>\n\n\n\n<p> Perhatikan panel Properti inspector di sisi kanan : <\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"423\" height=\"414\" src=\"https:\/\/luckytruedev.com\/learning\/wp-content\/uploads\/2018\/12\/Picture4-3.png\" alt=\"\" class=\"wp-image-917\" srcset=\"https:\/\/luckytruedev.com\/learning\/wp-content\/uploads\/2018\/12\/Picture4-3.png 423w, https:\/\/luckytruedev.com\/learning\/wp-content\/uploads\/2018\/12\/Picture4-3-300x294.png 300w, https:\/\/luckytruedev.com\/learning\/wp-content\/uploads\/2018\/12\/Picture4-3-110x108.png 110w, https:\/\/luckytruedev.com\/learning\/wp-content\/uploads\/2018\/12\/Picture4-3-420x411.png 420w, https:\/\/luckytruedev.com\/learning\/wp-content\/uploads\/2018\/12\/Picture4-3-20x20.png 20w\" sizes=\"auto, (max-width: 423px) 100vw, 423px\" \/><figcaption>Properti Inspector Constraint Layout<\/figcaption><\/figure><\/div>\n\n\n<div id=\"lucky-531358147\"><script async src=\"\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js?client=ca-pub-5605825534849002\" crossorigin=\"anonymous\"><\/script><ins class=\"adsbygoogle\" style=\"display:block;\" data-ad-client=\"ca-pub-5605825534849002\" \ndata-ad-slot=\"3760179245\" \ndata-ad-format=\"auto\" data-full-width-responsive=\"true\"><\/ins>\n<script> \n(adsbygoogle = window.adsbygoogle || []).push({}); \n<\/script>\n<\/div>\n\n\n<h2 class=\"wp-block-heading\"><strong>Simbol pada Constraint Layout<\/strong><\/h2>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/luckytruedev.com\/learning\/wp-content\/uploads\/2018\/12\/Picture5-2.png\" alt=\"\" class=\"wp-image-918\" width=\"106\" height=\"112\" srcset=\"https:\/\/luckytruedev.com\/learning\/wp-content\/uploads\/2018\/12\/Picture5-2.png 212w, https:\/\/luckytruedev.com\/learning\/wp-content\/uploads\/2018\/12\/Picture5-2-104x110.png 104w, https:\/\/luckytruedev.com\/learning\/wp-content\/uploads\/2018\/12\/Picture5-2-20x20.png 20w\" sizes=\"auto, (max-width: 106px) 100vw, 106px\" \/><figcaption> Wrap Content <\/figcaption><\/figure><\/div>\n\n\n\n<p>Wrap Content &#8211; Ini membungkus tampilan untuk mengisi kontennya. <\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/luckytruedev.com\/learning\/wp-content\/uploads\/2018\/12\/Picture6-2.png\" alt=\"\" class=\"wp-image-919\" width=\"109\" height=\"109\" srcset=\"https:\/\/luckytruedev.com\/learning\/wp-content\/uploads\/2018\/12\/Picture6-2.png 212w, https:\/\/luckytruedev.com\/learning\/wp-content\/uploads\/2018\/12\/Picture6-2-150x150.png 150w, https:\/\/luckytruedev.com\/learning\/wp-content\/uploads\/2018\/12\/Picture6-2-125x125.png 125w, https:\/\/luckytruedev.com\/learning\/wp-content\/uploads\/2018\/12\/Picture6-2-110x110.png 110w, https:\/\/luckytruedev.com\/learning\/wp-content\/uploads\/2018\/12\/Picture6-2-20x20.png 20w\" sizes=\"auto, (max-width: 109px) 100vw, 109px\" \/><figcaption>Any Size<\/figcaption><\/figure><\/div>\n\n\n\n<p>\n\n\n\n\n\n\n\n\nAny Size &#8211; Ini mirip dengan\nMatch\nParent yang cocok.\n\n\n\n<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/luckytruedev.com\/learning\/wp-content\/uploads\/2018\/12\/Picture7-1.png\" alt=\"\" class=\"wp-image-920\" width=\"120\" height=\"121\" srcset=\"https:\/\/luckytruedev.com\/learning\/wp-content\/uploads\/2018\/12\/Picture7-1.png 212w, https:\/\/luckytruedev.com\/learning\/wp-content\/uploads\/2018\/12\/Picture7-1-150x150.png 150w, https:\/\/luckytruedev.com\/learning\/wp-content\/uploads\/2018\/12\/Picture7-1-125x125.png 125w, https:\/\/luckytruedev.com\/learning\/wp-content\/uploads\/2018\/12\/Picture7-1-110x110.png 110w, https:\/\/luckytruedev.com\/learning\/wp-content\/uploads\/2018\/12\/Picture7-1-20x20.png 20w\" sizes=\"auto, (max-width: 120px) 100vw, 120px\" \/><figcaption>FIxed Size<\/figcaption><\/figure><\/div>\n\n\n\n<p>Fixed Size \u2013 Hal ini memungkinkan kita untuk mengatur lebar dan tinggi konstan. <\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"547\" height=\"517\" src=\"https:\/\/luckytruedev.com\/learning\/wp-content\/uploads\/2018\/12\/Screen-Shot-2018-12-23-at-09.16.53.png\" alt=\"\" class=\"wp-image-921\" srcset=\"https:\/\/luckytruedev.com\/learning\/wp-content\/uploads\/2018\/12\/Screen-Shot-2018-12-23-at-09.16.53.png 547w, https:\/\/luckytruedev.com\/learning\/wp-content\/uploads\/2018\/12\/Screen-Shot-2018-12-23-at-09.16.53-300x284.png 300w, https:\/\/luckytruedev.com\/learning\/wp-content\/uploads\/2018\/12\/Screen-Shot-2018-12-23-at-09.16.53-110x104.png 110w, https:\/\/luckytruedev.com\/learning\/wp-content\/uploads\/2018\/12\/Screen-Shot-2018-12-23-at-09.16.53-420x397.png 420w, https:\/\/luckytruedev.com\/learning\/wp-content\/uploads\/2018\/12\/Screen-Shot-2018-12-23-at-09.16.53-455x430.png 455w, https:\/\/luckytruedev.com\/learning\/wp-content\/uploads\/2018\/12\/Screen-Shot-2018-12-23-at-09.16.53-20x20.png 20w\" sizes=\"auto, (max-width: 547px) 100vw, 547px\" \/><figcaption>Simbol Lainnya<\/figcaption><\/figure><\/div>\n\n\n\n<p>Mesin inferensi menciptakan kendala di antara semua elemen dalam tata letak.  Ia mencoba mencari dan menciptakan koneksi optimal berdasarkan berbagai faktor seperti posisi widget dan ukurannya. <br><br>Sumber : Master Android (App)<\/p>\n<div id=\"lucky-3464337474\" class=\"lucky-after-content lucky-entity-placement\"><script async src=\"\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js?client=ca-pub-5605825534849002\" crossorigin=\"anonymous\"><\/script><ins class=\"adsbygoogle\" style=\"display:block;\" data-ad-client=\"ca-pub-5605825534849002\" \ndata-ad-slot=\"5317815257\" \ndata-ad-format=\"auto\" data-full-width-responsive=\"true\"><\/ins>\n<script> \n(adsbygoogle = window.adsbygoogle || []).push({}); \n<\/script>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Google untuk menambahkan layout Constraint pada Konferensi Google I \/ O. Android ConstraintLayout digunakan untuk mendefinisikan tata letak dengan menetapkan batasan untuk setiap tampilan \/ widget child dibandingkan dengan tampilan lainnya. Catatan: Pastikan Anda memiliki Versi Android Studio &amp; SDK terbaru. Kongfigurasi Tata Letak Constraint Buat proyek aktivitas kosong baru dan tambahkan dependensi berikut di [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":913,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[],"class_list":["post-905","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ltdv-android-tutor"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/luckytruedev.com\/learning\/wp-json\/wp\/v2\/posts\/905","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/luckytruedev.com\/learning\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/luckytruedev.com\/learning\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/luckytruedev.com\/learning\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/luckytruedev.com\/learning\/wp-json\/wp\/v2\/comments?post=905"}],"version-history":[{"count":1,"href":"https:\/\/luckytruedev.com\/learning\/wp-json\/wp\/v2\/posts\/905\/revisions"}],"predecessor-version":[{"id":2274,"href":"https:\/\/luckytruedev.com\/learning\/wp-json\/wp\/v2\/posts\/905\/revisions\/2274"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/luckytruedev.com\/learning\/wp-json\/wp\/v2\/media\/913"}],"wp:attachment":[{"href":"https:\/\/luckytruedev.com\/learning\/wp-json\/wp\/v2\/media?parent=905"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/luckytruedev.com\/learning\/wp-json\/wp\/v2\/categories?post=905"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/luckytruedev.com\/learning\/wp-json\/wp\/v2\/tags?post=905"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}