{"id":18687964,"url":"https://github.com/anitaa1990/constraintlayout-sample","last_synced_at":"2025-09-11T16:02:22.862Z","repository":{"id":117939795,"uuid":"133075949","full_name":"anitaa1990/ConstraintLayout-Sample","owner":"anitaa1990","description":"A demo app to showcase constraint layout implementation in Android","archived":false,"fork":false,"pushed_at":"2019-03-20T10:23:21.000Z","size":12653,"stargazers_count":106,"open_issues_count":1,"forks_count":38,"subscribers_count":7,"default_branch":"new_changes","last_synced_at":"2025-03-26T00:51:23.386Z","etag":null,"topics":["android","android-app","android-development","constraint-layout","data-binding"],"latest_commit_sha":null,"homepage":null,"language":"Java","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/anitaa1990.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-05-11T18:39:29.000Z","updated_at":"2024-08-15T19:57:51.000Z","dependencies_parsed_at":null,"dependency_job_id":"10bff161-9035-4050-91ba-d3fea858b902","html_url":"https://github.com/anitaa1990/ConstraintLayout-Sample","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anitaa1990%2FConstraintLayout-Sample","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anitaa1990%2FConstraintLayout-Sample/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anitaa1990%2FConstraintLayout-Sample/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anitaa1990%2FConstraintLayout-Sample/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/anitaa1990","download_url":"https://codeload.github.com/anitaa1990/ConstraintLayout-Sample/tar.gz/refs/heads/new_changes","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248522468,"owners_count":21118287,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["android","android-app","android-development","constraint-layout","data-binding"],"created_at":"2024-11-07T10:35:04.180Z","updated_at":"2025-04-12T05:29:08.134Z","avatar_url":"https://github.com/anitaa1990.png","language":"Java","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ConstraintLayout-Sample\n[![Android Arsenal](https://img.shields.io/badge/Android%20Arsenal-Constraint%20Layout%20Demo-blue.svg?style=flat)](https://android-arsenal.com/details/3/7050)\n\nA demo app to showcase constraint layout implementation in Android\n\nPlease checkout the medium article [here](https://medium.com/@anitaa_1990/learning-to-implement-constraintlayout-in-android-8ddc69fe0a1a) for a detailed explanation on how to build the above user interface.\n\n\u003cimg src=\"https://github.com/anitaa1990/ConstraintLayout-Sample/blob/new_changes/media/demo.gif\" width=\"300\" style=\"max-width:100%;\"\u003e\u003c/br\u003e\u003c/br\u003e\n\n\n\u003ch3\u003eSome of the common concepts in ConstraintLayout\u003c/h3\u003e\n\n\u003cb\u003e1. How to set Aspect Ratio:\u003c/b\u003e\n\nUsing ``` app:layout_constraintDimensionRatio=\"H,3:1\" ```\n\nH,3:1 will always make the ImageView appear 3 times wider than height. The prefix H or W tells ConstraintLayout which dimension should respect the ratio. If it is H then it means width will be first computed from other constraints and then height will be adjusted according to the aspect ratio. \n\n``` \n\u003cImageView\n    android:id=\"@+id/image\"\n    android:layout_width=\"0dp\"\n    android:layout_height=\"0dp\"\n    android:scaleType=\"centerCrop\"\n    app:layout_constraintDimensionRatio=\"H,16:9\"\n    app:layout_constraintEnd_toEndOf=\"parent\"\n    app:layout_constraintStart_toStartOf=\"parent\"\n    app:layout_constraintTop_toTopOf=\"parent\" /\u003e\n```\n\u003c/br\u003e  \n\n\u003cb\u003e2. Some commonly used attributes in ConstraintLayout:\u003c/b\u003e\n\u003c/br\u003e  \n  a. \u003cb\u003elayout_constraintEnd_toEndOf\u003c/b\u003e — The end of the widget will be aligned to the end of the parent view.\u003c/br\u003e\n  b. \u003cb\u003elayout_constraintStart_toStartOf\u003c/b\u003e — The start of the widget will be aligned to the start of the parent view.\u003c/br\u003e\n  c. \u003cb\u003elayout_constraintTop_toTopOf\u003c/b\u003e — The top of the widget will be aligned to the top of the parent view.\u003c/br\u003e\n  d. \u003cb\u003elayout_constraintTop_toBottomOf\u003c/b\u003e — The top of the widget will be aligned to the bottom of the parent view.\u003c/br\u003e\n  e. \u003cb\u003elayout_constraintBottom_toTopOf\u003c/b\u003e — The bottom of the widget will be aligned to the top of the parent view.\u003c/br\u003e\n  f. \u003cb\u003elayout_constraintBottom_toBottomOf\u003c/b\u003e — The bottom of the widget will be aligned to the bottom of the parent view. \u003c/br\u003e\n  g. \u003cb\u003elayout_constraintLeft_toTopOf\u003c/b\u003e — The left of the widget will be aligned to the top of the parent view.\u003c/br\u003e\n  h. \u003cb\u003elayout_constraintLeft_toBottomOf\u003c/b\u003e — The left of the widget will be aligned to the bottom of the parent view.\u003c/br\u003e\n  i. \u003cb\u003elayout_constraintLeft_toLeftOf\u003c/b\u003e — The left of the widget will be aligned to the left of the parent view.\u003c/br\u003e\n  j. \u003cb\u003elayout_constraintLeft_toRightOf\u003c/b\u003e — The left of the widget will be aligned to the right of the parent view.\u003c/br\u003e\n  k. \u003cb\u003elayout_constraintRight_toTopOf\u003c/b\u003e — The right of the widget will be aligned to the top of the parent view.\u003c/br\u003e\n  l. \u003cb\u003elayout_constraintRight_toBottomOf\u003c/b\u003e — The right of the widget will be aligned to the bottom of the parent view.\u003c/br\u003e\n  m. \u003cb\u003elayout_constraintRight_toLeftOf\u003c/b\u003e — The right of the widget will be aligned to the left of the parent view.\u003c/br\u003e\n  n. \u003cb\u003elayout_constraintRight_toRightOf\u003c/b\u003e — The right of the widget will be aligned to the right of the parent view.\u003c/br\u003e  \n\u003ch4\u003eNote: Within a ConstraintLayout, side margins for a child view will only take effect if that side is constrained to another view.\u003c/h4\u003e\n\n\n      \u003c!-- From the below example you can see that if we need to add a textView below the ImageView, \n           then we need to add  app:layout_constraintTop_toBottomOf=\"@+id/profile_image\" this line.\n           Alternatively, if we need to add margin between the imageview and textview, we need to add a\n           constraint between the textView and the imageView --\u003e\n           \n      \u003candroid.support.constraint.ConstraintLayout\n        android:layout_width=\"wrap_content\"\n        android:layout_height=\"wrap_content\"\n        android:orientation=\"vertical\"\u003e\n        \n        \u003ccom.an.constraintlayout.views.CircleImageView\n            android:id=\"@+id/profile_image\"\n            android:layout_width=\"@dimen/profile_item_image_size\"\n            android:layout_height=\"@dimen/profile_item_image_size\"\n            app:layout_constraintHorizontal_bias=\"0.5\"\n            android:layout_marginLeft=\"@dimen/margin\"\n            android:layout_marginRight=\"@dimen/margin\"\n            app:layout_constraintLeft_toRightOf=\"parent\"\n            app:layout_constraintRight_toLeftOf=\"parent\"\n            app:civ_border_color=\"@android:color/transparent\"\n            app:civ_border_width=\"0dp\" /\u003e\n\n        \u003ccom.an.customfontview.CustomTextView\n            android:id=\"@+id/txt_name\"\n            android:layout_width=\"wrap_content\"\n            android:layout_height=\"wrap_content\"\n            android:layout_marginLeft=\"@dimen/margin\"\n            android:layout_marginRight=\"@dimen/margin\"\n            android:layout_marginTop=\"@dimen/margin_small\"\n            android:ellipsize=\"end\"\n            android:maxEms=\"6\"\n            android:maxLines=\"1\"\n            android:textColor=\"@color/profile_item_name\"\n            android:textSize=\"@dimen/font_small\"\n            app:layout_constraintHorizontal_bias=\"0.5\"\n            app:layout_constraintLeft_toRightOf=\"parent\"\n            app:layout_constraintRight_toLeftOf=\"parent\"\n            app:layout_constraintTop_toBottomOf=\"@+id/profile_image\"\n            app:textFontPath=\"fonts/gt_medium.otf\" /\u003e\n\n\n    \u003c/android.support.constraint.ConstraintLayout\u003e\n   \n\u003c/br\u003e \n\n\u003cb\u003e3. How to center a view vertically or horizontally?\u003c/b\u003e\n\u003c/br\u003e \u003cb\u003eUsing Horizontal Bias:\u003c/b\u003e This means that the position of a view along the horizontal axis can be defined using a bias value. For example: ``` app:layout_constraintHorizontal_bias=\"0.5\" ``` will center a view horizontally.\n\u003c/br\u003e \u003cb\u003eUsing Vertical Bias:\u003c/b\u003e This means that the position of a view along the vertical axis can be defined using a bias value. For example: ``` app:layout_constraintVertical_bias=\"0.5\" ``` will center a view vertically.\n\u003c/br\u003e\u003c/br\u003e\n\n\n\u003cb\u003e4. How to resize a view?\u003c/b\u003e\n\u003c/br\u003e Using ```app:layout_constrainedHeight=\"true\"```\nThis will wrap the CardView height according to its contents.\n\u003c/br\u003e Using ```app:layout_constrainedWidth=\"true\"```\nThis will wrap the CardView width according to its contents.\n\u003c/br\u003e\n\nYou can checkout some of the other constraints we have not looked at in this article.\u003c/br\u003e\n* [Chains](https://developer.android.com/reference/android/support/constraint/ConstraintLayout#Chains)\n* [Guideline](https://developer.android.com/reference/android/support/constraint/Guideline)\n* [Dimension Constraints](https://developer.android.com/reference/android/support/constraint/ConstraintLayout#DimensionConstraints)\n* [Circular Positioning](https://developer.android.com/reference/android/support/constraint/ConstraintLayout#CircularPositioning)\n* [Visibility Behaviour](https://developer.android.com/reference/android/support/constraint/ConstraintLayout#VisibilityBehavior)\n\n\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fanitaa1990%2Fconstraintlayout-sample","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fanitaa1990%2Fconstraintlayout-sample","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fanitaa1990%2Fconstraintlayout-sample/lists"}