How to center the elements in ConstraintLayout

Question

I am using ConstraintLayout in my application to make applications layout  I am trying to a create a screen wheren one EditText and Button should be in center and Button should be below of EditText with a marginTop only 16dp   Here is my layout and screenshot how it is looking right now   activity authenticate content xml   lt android support constraint ConstraintLayout 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 layout width  match parent      android layout height  match parent      android paddingLeft  16dp      android paddingRight  16dp      tools context  com icici iciciappathon login AuthenticationActivity  gt        lt android support design widget TextInputLayout         android id    id client id input layout          android layout width  0dp          android layout height  wrap content          app layout constraintBottom toBottomOf  parent          app layout constraintLeft toLeftOf  parent          app layout constraintRight toRightOf  parent          app layout constraintTop toTopOf  parent  gt            lt android support design widget TextInputEditText             android layout width  match parent              android layout height  wrap content              android hint   string login client id              android inputType  textEmailAddress    gt        lt  android support design widget TextInputLayout gt        lt android support v7 widget AppCompatButton         android id    id authenticate          android layout width  0dp          android layout height  wrap content          android layout marginTop  16dp          android text   string login auth          app layout constraintBottom toBottomOf  parent          app layout constraintLeft toLeftOf   id client id input layout          app layout constraintRight toRightOf   id client id input layout          app layout constraintTop toTopOf   id client id input layout    gt    lt  android support constraint ConstraintLayout gt

User · Answer

add these tag in your view       app layout constraintCircleRadius  0dp      app layout constraintEnd toEndOf  parent      app layout constraintHorizontal bias  0 5      app layout constraintStart toStartOf  parent    and you can right click in design mode and choose center

User · Answer

You can center a view as a percentage of the screen size   This example uses 50  of width and height    lt android support constraint ConstraintLayout xmlns android  http   schemas android com apk res android      xmlns app  http   schemas android com apk res-auto      android layout width  match parent      android layout height  match parent  gt        lt LinearLayout xmlns android  http   schemas android com apk res android          android layout width  0dp          android layout height  0dp          android background   FF0000          android orientation  vertical          app layout constraintBottom toBottomOf  parent          app layout constraintHeight percent   5          app layout constraintLeft toLeftOf  parent          app layout constraintRight toRightOf  parent          app layout constraintTop toTopOf  parent          app layout constraintWidth percent   5  gt  lt  LinearLayout gt    lt  android support constraint ConstraintLayout gt    This was done using ConstraintLayout version 1 1 3  Don t forget to add it to your dependencies in the gradle  and increase the version if there is a new version out there   dependencies           implementation  com android support constraint constraint-layout 1 1 3

User · Answer

you can use layout constraintCircle for center view inside ConstraintLayout    lt android support constraint ConstraintLayout         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 mparent          android layout width  match parent          android layout height  match parent  gt           lt ImageButton             android id    id btn settings              android layout width  wrap content              android layout height  wrap content              app srcCompat   drawable ic home black 24dp              app layout constraintCircle   id mparent              app layout constraintCircleRadius  0dp                gt       lt  android support constraint ConstraintLayout gt    with constraintCircle to parent and zero radius you can make your view be center of parent

User · Answer

just add android gravity  quot center quot   and done

User · Answer

There is a simpler way  If you set layout constraints as follows and your EditText is fixed sized  it will get centered in the constraint layout   app layout constraintLeft toLeftOf  parent  app layout constraintRight toRightOf  parent  app layout constraintTop toTopOf  parent  app layout constraintBottom toBottomOf  parent    The left right pair centers the view horizontally and top bottom pair centers it vertically  This is because when you set the left  right or top bottom constraints bigger than the view it self  the view gets centered between the two constraints i e the bias is set to 50   You can also move view up down or right left by setting the bias your self  Play with it a bit and you will see how it affects the views position

User · Answer

The solution with guideline works only for this particular case with single line EditText  To make it work for multiline EditText you should use  packed  chain    lt android support constraint ConstraintLayout xmlns android  http   schemas android com apk res android      xmlns app  http   schemas android com apk res-auto      android layout width  match parent      android layout height  match parent      android paddingLeft  16dp      android paddingRight  16dp  gt        lt android support design widget TextInputLayout         android id    id client id input layout          android layout width  0dp          android layout height  wrap content          app layout constraintBottom toTopOf    id authenticate          app layout constraintLeft toLeftOf  parent          app layout constraintRight toRightOf  parent          app layout constraintTop toTopOf  parent          app layout constraintVertical chainStyle  packed  gt            lt android support design widget TextInputEditText             android layout width  match parent              android layout height  wrap content              android hint   string login client id              android inputType  textEmailAddress    gt        lt  android support design widget TextInputLayout gt        lt android support v7 widget AppCompatButton         android id    id authenticate          android layout width  0dp          android layout height  wrap content          android layout marginTop  16dp          android text   string login auth          app layout constraintBottom toBottomOf  parent          app layout constraintLeft toLeftOf   id client id input layout          app layout constraintRight toRightOf   id client id input layout          app layout constraintTop toBottomOf   id client id input layout    gt    lt  android support constraint ConstraintLayout gt    Here s how it looks     You can read more about using chains in following posts     Building interfaces with ConstraintLayout Build a Responsive UI with ConstraintLayout

User · Answer

Update  Chain You can now use the chain feature in packed mode as describe in Eugene s answer   Guideline You can use a horizontal guideline at 50  position and add bottom and top  8dp  constraints to edittext and button   lt android support constraint ConstraintLayout xmlns android  quot http   schemas android com apk res android quot      xmlns app  quot http   schemas android com apk res-auto quot      xmlns tools  quot http   schemas android com tools quot      android layout width  quot match parent quot      android layout height  quot match parent quot      android paddingLeft  quot 16dp quot      android paddingRight  quot 16dp quot  gt        lt android support design widget TextInputLayout         android id  quot   id client id input layout quot          android layout width  quot 0dp quot          android layout height  quot wrap content quot          android layout marginBottom  quot 8dp quot          app layout constraintBottom toTopOf  quot   id guideline quot          android layout marginRight  quot 8dp quot          app layout constraintRight toRightOf  quot parent quot          android layout marginLeft  quot 8dp quot          app layout constraintLeft toLeftOf  quot parent quot  gt            lt android support design widget TextInputEditText             android layout width  quot match parent quot              android layout height  quot wrap content quot              android hint  quot  string login client id quot              android inputType  quot textEmailAddress quot   gt        lt  android support design widget TextInputLayout gt        lt android support v7 widget AppCompatButton         android id  quot   id authenticate quot          android layout width  quot 0dp quot          android layout height  quot wrap content quot          android text  quot  string login auth quot          app layout constraintTop toTopOf  quot   id guideline quot          android layout marginTop  quot 8dp quot          android layout marginRight  quot 8dp quot          app layout constraintRight toRightOf  quot parent quot          android layout marginLeft  quot 8dp quot          app layout constraintLeft toLeftOf  quot parent quot   gt        lt android support constraint Guideline         android layout width  quot wrap content quot          android layout height  quot wrap content quot          android id  quot   id guideline quot          android orientation  quot horizontal quot          app layout constraintGuide percent  quot 0 5 quot   gt    lt  android support constraint ConstraintLayout gt

[android] How to center the elements in ConstraintLayout

Examples related to android

Examples related to android-layout

Examples related to android-constraintlayout