Android Constraint layout, views with weight? - android

So like the picture below, I want view B be twice the length of view A.
What I exactly need is view A sticks to the left edge, view B sticks to the right edge and they stick to each other in between. And in the length, the B is going to be twice the length of A. I tried a lot, but no luck! in the end, something is not what I want. Either there is unwanted space between a view and its according edge or between the two views.
Here is my last try:
<?xml version="1.0" encoding="utf-8"?>
<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:padding="10dp"
tools:context=".MainActivity">
<EditText
android:id="#+id/editText"
android:layout_width="wrap_content"
android:layout_height="50dp"
android:layout_marginTop="36dp"
android:ems="10"
android:text="B"
android:inputType="textPersonName"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_weight="2"
app:layout_constraintStart_toEndOf="#+id/textView"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="50dp"
android:layout_marginTop="36dp"
android:gravity="center"
android:text="A"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>


You can use app:layout_constraintWidth_percent ti tell your view how to spread on the screen.
For your wanted look you can use it like this:
<?xml version="1.0" encoding="utf-8"?>
<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">
<Button
android:id="#+id/button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/button2"
app:layout_constraintWidth_percent=".33"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/button2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Button"
app:layout_constraintBottom_toBottomOf="#+id/button"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintWidth_percent=".66"
app:layout_constraintStart_toEndOf="#+id/button"
app:layout_constraintTop_toTopOf="#+id/button" />
</android.support.constraint.ConstraintLayout>
It will look like this


To use layout_constraintHorizontal_weight, you have to put your Views in a chain first. That means you have to constraint both Views to each other and the parent horizontally. What you are missing in your case is the app:layout_constraintEnd_toStartOf="#id/editText" on the TextView. You also need to change the android:layout_width of both Views to 0dp so that the weight is enforced:
<?xml version="1.0" encoding="utf-8"?>
<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:padding="10dp"
tools:context=".MainActivity">
<EditText
android:id="#+id/editText"
android:layout_width="0dp"
android:layout_height="50dp"
android:layout_marginTop="36dp"
android:ems="10"
android:text="B"
android:inputType="textPersonName"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_weight="2"
app:layout_constraintStart_toEndOf="#+id/textView"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/textView"
android:layout_width="0dp"
android:layout_height="50dp"
android:layout_marginTop="36dp"
android:gravity="center"
android:text="A"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toStartOf="#id/editText"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>

Related

How do I fix constraint layout not working

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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">
<TextView
android:id="#+id/textView"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="TextView"
app:layout_constraintBottom_toTopOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView"
app:layout_constraintBottom_toTopOf="parent"
app:layout_constraintEnd_toStartOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView"
app:layout_constraintBottom_toTopOf="parent"
app:layout_constraintEnd_toStartOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
I am trying to implement the ConstraintLayout, but as soon as I drop widgets onto the screen, they are immediately fixed to the top left corner, and even adding constraint won't fix it. How can I resolve this?
As you can see to the left, some constraints are set:

Your problem is this line:
app:layout_constraintBottom_toTopOf="parent"
That is aligning the TextView's bottom edge to the top edge of the parent. I assume you want each TextView to be right below the previous one. Remove that line from each TextView, and add a constraint to set the top of each TextView to the bottom of the previous one. Also, a couple of your TextViews have their end set to the parent's start, which is a similar problem to the first.
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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">
<TextView
android:id="#+id/textView"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="TextView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/textView" />
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/textView2" />
</androidx.constraintlayout.widget.ConstraintLayout>

Layout in fragment not centering

I'm building my first proper application for Android. I wish to use the Navigation Drawer Activity to switch between screens and options. So far so good. All working great. But my layouts that load in the content are not aligned properly. See pictures
I have tried to change the layout_width and layout_height to fill_parent, match_parent and wrap_content in all combinations. Also tried adding the gravity center and vertical gravity but so far i have failed.
content layout:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:showIn="#layout/app_bar_main_menu"
tools:context=".MainMenu">
<RelativeLayout
android:id="#+id/relativeLayout"
android:layout_width="wrap_content"
android:layout_height="match_parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
the content im trying to put in the content layout:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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" tools:layout_editor_absoluteY="81dp">
<ImageView
android:layout_width="34dp"
android:layout_height="34dp" app:srcCompat="#drawable/fragment_client_add_address"
android:id="#+id/imageView10"
app:layout_constraintEnd_toStartOf="#+id/editText10"
android:layout_marginEnd="12dp" android:layout_marginTop="8dp"
app:layout_constraintTop_toTopOf="#+id/editText10"/>
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:inputType="textPersonName"
android:hint="Kontakt broj"
android:ems="10"
android:id="#+id/editText9"
app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent"
android:layout_marginTop="24dp" app:layout_constraintTop_toBottomOf="#+id/editText11"/>
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:inputType="textPersonName"
android:hint="Adresa"
android:ems="10"
android:id="#+id/editText10"
app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent"
android:layout_marginTop="24dp" app:layout_constraintTop_toBottomOf="#+id/editText9"/>
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:inputType="textPersonName"
android:hint="Naziv klijenta"
android:ems="10"
android:id="#+id/editText11" android:layout_marginEnd="8dp"
app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent"
android:layout_marginTop="64dp" app:layout_constraintTop_toTopOf="parent"
app:layout_constraintHorizontal_bias="0.518"/>
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:inputType="textPersonName"
android:hint="E-Mail"
android:ems="10"
android:id="#+id/editText12"
app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent"
android:layout_marginTop="24dp" app:layout_constraintTop_toBottomOf="#+id/editText10"/>
<ImageView
android:layout_width="34dp"
android:layout_height="34dp" app:srcCompat="#drawable/round_person_black_48"
android:id="#+id/imageView11"
android:layout_marginTop="8dp"
app:layout_constraintTop_toTopOf="#+id/editText11" app:layout_constraintEnd_toStartOf="#+id/editText11"
android:layout_marginEnd="12dp"/>
<ImageView
android:layout_width="34dp"
android:layout_height="34dp" app:srcCompat="#drawable/round_call_black_48"
android:id="#+id/imageView12"
android:layout_marginTop="8dp"
app:layout_constraintTop_toTopOf="#+id/editText9" app:layout_constraintEnd_toStartOf="#+id/editText9"
android:layout_marginEnd="12dp"/>
<ImageView
android:layout_width="34dp"
android:layout_height="34dp" app:srcCompat="#drawable/fragment_client_add_email"
android:id="#+id/imageView13"
android:layout_marginTop="8dp"
app:layout_constraintTop_toTopOf="#+id/editText12" app:layout_constraintEnd_toStartOf="#+id/editText12"
android:layout_marginEnd="12dp"/>
<Spinner
android:layout_width="0dp"
android:layout_height="wrap_content"
android:id="#+id/spinner"
android:layout_marginTop="24dp"
app:layout_constraintTop_toBottomOf="#+id/editText12" app:layout_constraintStart_toStartOf="#+id/editText12"
app:layout_constraintEnd_toEndOf="#+id/editText12" android:entries="#array/clientType"
/>
<Spinner
android:layout_width="0dp"
android:layout_height="wrap_content"
android:id="#+id/spinner2" app:layout_constraintStart_toStartOf="#+id/spinner"
app:layout_constraintEnd_toEndOf="#+id/spinner" android:entries="#array/clientContract"
app:layout_constraintTop_toBottomOf="#+id/spinner" android:layout_marginTop="32dp"/>
<Button
android:text="#string/button_genericConfirm"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:id="#+id/button" android:layout_marginBottom="32dp"
app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintStart_toStartOf="parent"
android:layout_marginStart="128dp" app:layout_constraintEnd_toEndOf="parent"
android:layout_marginEnd="128dp" android:layout_marginTop="8dp"
app:layout_constraintTop_toBottomOf="#+id/spinner2" app:layout_constraintVertical_bias="1.0"/>
</androidx.constraintlayout.widget.ConstraintLayout>
This is what i expect it to look like:
But in reality this is what it looks like:

The issue in your RelativeLayout inside your content layout
You need to chnage the width of your RelativeLayout to android:layout_width="match_parent" in your content layout
Try this
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:showIn="#layout/app_bar_main_menu"
tools:context=".MainMenu">
<RelativeLayout
android:id="#+id/relativeLayout"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

The problem is not with your fragment layout implementation, I just tried in an activity and it is worked properly.
I would say to change the content layout to FrameLayout, which is often used to hold the fragments, more information can be found here :Why is a FrameLayout used for fragments?
The frame layout instead of relative layout should be
<FrameLayout
android:id="#+id/relativeLayout"
android:layout_width="match_parent"
android:layout_height="match_parent" />
Just left the id as relativeLayout, but feel free to change it.
Also, if you have such a problem, you can always use the layout inspector, it is in the tools menu, give it a try. Or you can just play with background colors, to check the layout sizes, just like back in time, before layout inspector.

It is always good to use drawablestart instead of imageview in all edit text
Please find below xml may it will be helpful
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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">
<EditText
android:id="#+id/editText11"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="64dp"
android:layout_marginEnd="8dp"
android:drawableStart="#mipmap/ic_launcher"
android:ems="10"
android:hint="Naziv klijenta"
android:inputType="textPersonName"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.518"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<EditText
android:id="#+id/editText9"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="24dp"
android:drawableStart="#mipmap/ic_launcher"
android:ems="10"
android:hint="Kontakt broj"
android:inputType="textPersonName"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/editText11" />
<EditText
android:id="#+id/editText10"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="24dp"
android:drawableStart="#mipmap/ic_launcher"
android:ems="10"
android:hint="Adresa"
android:inputType="textPersonName"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/editText9" />
<EditText
android:id="#+id/editText12"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="24dp"
android:drawableStart="#mipmap/ic_launcher"
android:ems="10"
android:hint="E-Mail"
android:inputType="textPersonName"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/editText10" />
<Spinner
android:id="#+id/spinner"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="24dp"
android:entries="#mipmap/ic_launcher"
app:layout_constraintEnd_toEndOf="#+id/editText12"
app:layout_constraintStart_toStartOf="#+id/editText12"
app:layout_constraintTop_toBottomOf="#+id/editText12" />
<Spinner
android:id="#+id/spinner2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="32dp"
android:entries="#mipmap/ic_launcher"
app:layout_constraintEnd_toEndOf="#+id/spinner"
app:layout_constraintStart_toStartOf="#+id/spinner"
app:layout_constraintTop_toBottomOf="#+id/spinner" />
<Button
android:id="#+id/button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="128dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="128dp"
android:layout_marginBottom="32dp"
android:text="xxxx"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/spinner2"
app:layout_constraintVertical_bias="1.0" />
</androidx.constraintlayout.widget.ConstraintLayout>
In case you want specific size for your imageview in left use below code
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"
>
<item
android:drawable="#drawable/icon"
android:width="#dimen/icon_size"
android:height="#dimen/icon_size"
/>
</layer-list >

Use FrameLayout instead of relative layout and finally remove the line from parent constraint layout..
tools:layout_editor_absoluteY="81dp"

try to use like below
<?xml version="1.0" encoding="utf-8"?>
<androidx.appcompat.widget.LinearLayoutCompat
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_gravity="center_vertical"
android:gravity="center_vertical"
android:layout_height="match_parent">
<ImageView
android:layout_width="34dp"
android:layout_height="34dp"
app:srcCompat="#drawable/fragment_client_add_address"
android:id="#+id/imageView10"
android:layout_marginEnd="12dp"
android:layout_marginTop="8dp"/>
</androidx.appcompat.widget.LinearLayoutCompat>
And for content main
<androidx.appcompat.widget.LinearLayoutCompat
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<FrameLayout
android:id="#+id/frame_container"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</androidx.appcompat.widget.LinearLayoutCompat>

You can use the property app:layout_constraintVertical_bias so that it is biased equally to parent. This can also be achieved in layout editor by constraining all 4 sides of the layout to parent.

How do I make two textviews in a ConstraintLayout in a CardView be flush?

I'm a bit new to Android development, so I apologize if this question is simple. I have two textviews stacked vertically that I would like to get flush with each other. There's too much whitespace between the two elements:
I have the following activity layout in which I've tried to make the TextViews flush by using a constraint view and setting the margin between the bottom and top to 0dp:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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/linearLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".PackageService">
<android.support.v7.widget.CardView
android:id="#+id/card_inventory"
android:layout_width="match_parent"
android:layout_height="101dp"
android:layout_marginBottom="1dp"
android:layout_marginTop="1dp">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/image_inventory"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:src="#android:drawable/btn_star"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.048"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.49" />
<TextView
android:id="#+id/text_inventory"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="0dp"
android:layout_marginStart="32dp"
android:text="Button Title"
android:textAppearance="#android:style/TextAppearance.Material.Large"
app:layout_constraintBottom_toTopOf="#id/text_last_scan"
app:layout_constraintStart_toEndOf="#+id/image_inventory"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/text_last_scan"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button Subtitle"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="#+id/text_inventory"
app:layout_constraintTop_toBottomOf="#+id/text_inventory" />
</android.support.constraint.ConstraintLayout>
</android.support.v7.widget.CardView>
</LinearLayout>
Any help would be appreciated.

Android Setup constraint for view2 to follow start of view1. But view1 has constraint to start of its parent

I cannot achieve this one.
I want viewB to follow the start of viewA.
Then I want to create a constraint to have a space from the start of viewA to its parent.
.
Code I tried:
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp">
<TextView
android:id="#+id/descriptionTxt"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="32dp"
android:layout_marginStart="8dp"
android:text="Txt1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/descriptionTxt2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:text="Txt2"
app:layout_constraintEnd_toEndOf="#+id/descriptionTxt"
app:layout_constraintStart_toStartOf="#+id/descriptionTxt"
app:layout_constraintTop_toBottomOf="#+id/descriptionTxt" />
</android.support.constraint.ConstraintLayout>
The code above will show in Preview that only viewA will have a margin from the left. viewB does not follow the left of viewA.
Im using com.android.support.constraint:constraint-layout:1.0.2

Do not use match_parent. Instead, start using "0dp" for match_parent and define left/right or top/bottom parent constraints
Here is working code:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_margin="10dp"
xmlns:android="http://schemas.android.com/apk/res/android">
<TextView
android:id="#+id/descriptionTxt"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="32dp"
android:layout_marginStart="8dp"
android:text="Txt1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/descriptionTxt2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:text="Txt2"
app:layout_constraintEnd_toEndOf="#+id/descriptionTxt"
app:layout_constraintStart_toStartOf="#+id/descriptionTxt"
app:layout_constraintTop_toBottomOf="#+id/descriptionTxt" />
</android.support.constraint.ConstraintLayout>
Also , it is good to use Guidelines to have uniform left/top/right/bottom margin.

try this :
<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="wrap_content">
<TextView
android:id="#+id/descriptionTxt"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Txt1"
android:layout_marginTop="20dp"
android:layout_marginLeft="20dp"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
/>
<TextView
android:id="#+id/descriptionTxt2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Txt2"
android:layout_marginTop="8dp"
app:layout_constraintRight_toRightOf="#+id/descriptionTxt"
app:layout_constraintLeft_toLeftOf="#+id/descriptionTxt"
app:layout_constraintTop_toBottomOf="#+id/descriptionTxt"
/>
</android.support.constraint.ConstraintLayout>

How to bring all the content of the layout at centre in ConstraintLayout

I am making a login screen where I have 2 EditText and 2 Buttons. I have placed them in vertical way one below each other. But I want to bring all the content at centre in my layout.
Below is my activity_login.xml:
<?xml version="1.0" encoding="utf-8"?>
<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:id="#+id/loginLayout"
android:orientation="vertical">
<android.support.design.widget.TextInputLayout
android:id="#+id/emailLayout"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="#+id/passwordLayout"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent">
<android.support.design.widget.TextInputEditText
android:id="#+id/loginEmail"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:drawableEnd="#drawable/ic_action_user"
android:hint="#string/email"
android:textAppearance="#style/TextLabel" />
</android.support.design.widget.TextInputLayout>
<android.support.design.widget.TextInputLayout
android:id="#+id/passwordLayout"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/emailLayout"
app:layout_constraintBottom_toBottomOf="#+id/logi">
<android.support.design.widget.TextInputEditText
android:id="#+id/loginPassword"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:drawableEnd="#drawable/ic_action_password"
android:hint="#string/password"
android:textAppearance="#style/TextLabel" />
</android.support.design.widget.TextInputLayout>
<Button
android:id="#+id/loginSubmit"
style="#style/Widget.AppCompat.Button.Colored"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="#string/login"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/passwordLayout" />
<Button
android:id="#+id/registerText"
style="#style/Widget.AppCompat.Button.Colored"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="#string/register"
android:theme="#style/RegistrationButton"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/loginSubmit" />
</android.support.constraint.ConstraintLayout>
Here is the image of the layout:
I am not able to bring those views at the centre.

First make sure you use an up to date version of the ConstraintLayout (at the time of writing 1.0.2). You can achieve vertical centering by giving the top most element (emailLayout) the app:layout_constraintVertical_chainStyle="packed" attribute.
Besides that you need to make sure that all elements are connected like a chain in the code. I.e. the upper most view (emailLayout) is under constraint of the parent on top and under constraint of the next sibling (passwordLayout) on the bottom.
The second view (passwordLayout) needs to be under constraint of the sibling before it at the top (emailLayout) and under constraint of the next sibling (loginSubmit) at the bottom and so on...
The last view (registerText) has a top constraint to the sibling before as well but has a bottom constraint to the bottom of the parent.
Hint: android:orientation="vertical" is useless in a ConstraintLayout. You can leave this out.
EDIT:
Here a minimum code example of vertical centering with the ConstraintLayout:
<?xml version="1.0" encoding="utf-8"?>
<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">
<View
android:id="#+id/view1"
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#ff0000"
app:layout_constraintVertical_chainStyle="packed"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toTopOf="#+id/view2"/>
<View
android:id="#+id/view2"
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#00ff00"
app:layout_constraintTop_toBottomOf="#+id/view1"
app:layout_constraintBottom_toTopOf="#+id/view3"/>
<View
android:id="#+id/view3"
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#0000ff"
app:layout_constraintTop_toBottomOf="#+id/view2"
app:layout_constraintBottom_toBottomOf="parent"/>
</android.support.constraint.ConstraintLayout>
Resulting in:

I am using packed chaining in my ConstraintLayout. So, yours should be like this:
<?xml version="1.0" encoding="utf-8"?>
<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:id="#+id/loginLayout"
android:orientation="vertical">
<android.support.design.widget.TextInputLayout
android:id="#+id/emailLayout"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toTopOf="#+id/passwordLayout"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintVertical_chainStyle="packed">
<android.support.design.widget.TextInputEditText
android:id="#+id/loginEmail"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:drawableEnd="#drawable/ic_action_user"
android:hint="#string/email"
android:textAppearance="#style/TextLabel" />
</android.support.design.widget.TextInputLayout>
<android.support.design.widget.TextInputLayout
android:id="#+id/passwordLayout"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#+id/emailLayout"
app:layout_constraintBottom_toTopOf="#+id/loginSubmit"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toLeftOf="parent">
<android.support.design.widget.TextInputEditText
android:id="#+id/loginPassword"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:drawableEnd="#drawable/ic_action_password"
android:hint="#string/password"
android:textAppearance="#style/TextLabel" />
</android.support.design.widget.TextInputLayout>
<Button
android:id="#+id/loginSubmit"
style="#style/Widget.AppCompat.Button.Colored"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="#string/login"
app:layout_constraintTop_toBottomOf="#+id/passwordLayout"
app:layout_constraintBottom_toTopOf="#+id/registerText"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toLeftOf="parent" />
<Button
android:id="#+id/registerText"
style="#style/Widget.AppCompat.Button.Colored"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="#string/register"
android:theme="#style/RegistrationButton"
app:layout_constraintTop_toBottomOf="#+id/loginSubmit"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toLeftOf="parent" />
</android.support.constraint.ConstraintLayout>
The resultant layout should be as follows:

Categories

Resources