This is my layout file.
<?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">
<EditText
android:layout_width="150dp"
android:layout_height="50dp"
android:hint="please input test content"
android:inputType="phone"
android:textColorHint="#android:color/holo_red_light"
android:textSize="13sp"
app:layout_constraintBottom_toTopOf="parent"
app:layout_constraintRight_toLeftOf="parent" />
<TextView
android:layout_width="80dp"
android:layout_height="50dp"
android:gravity="center"
android:text="Hello"
android:textColor="#android:color/black"
app:layout_constraintBottom_toTopOf="parent"
app:layout_constraintHorizontal_bias="0.5" />
</android.support.constraint.ConstraintLayout>
Follow pic is preview view.
I want to move TextView to center_horizontal to parent view , but layout_constraintHorizontal_bias=0.5" seems not work.
Who has ideas for this problem ? Thanks for first !
Try 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">
<EditText
android:id="#+id/editText2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="16dp"
android:ems="10"
android:hint="please input test content"
android:inputType="phone"
android:textColorHint="#android:color/holo_red_light"
android:textSize="13sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<TextView
android:layout_width="80dp"
android:layout_height="50dp"
android:gravity="center"
android:text="Hello"
android:textColor="#android:color/black"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
EDIT
to use bias you need to give constrained it to any parent.
Try this:
app:layout_constraintHorizontal_bias="0.5" is not working because
you haven't constrained it to any parent. Read more about bias.
<?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:layout_width="80dp"
android:layout_height="50dp"
android:gravity="center"
android:text="Hello"
android:textColor="#android:color/black"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<EditText
android:id="#+id/editText2"
android:layout_width="150dp"
android:layout_height="50dp"
android:layout_marginBottom="16dp"
android:ems="10"
android:hint="please input test content"
android:inputType="phone"
android:textColorHint="#android:color/holo_red_light"
android:textSize="13sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
First of if i were you i would look at some guides explaining constraint layouts, since you seem to be missing some key elements. ConstraintLayout
When that is said, your problem is that you are asking your layout to constrain at a 0.5 bias to nothing. Your textView is not constrained to anything other than app:layout_constraintBottom_toTopOf="parent"
Which btw is a little wierd constraining the bottom of your textview to the top of your parent.
In order for bias to work, it needs to know which elements to be biased between. If you simple want it to be center of the parent then constrain the textview to the parent like so:
<TextView
android:layout_width="80dp"
android:layout_height="50dp"
android:gravity="center"
android:text="Hello"
android:textColor="#android:color/black"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintHorizontal_bias="0.5" />
Also at that point you wont need the bias, i left it in though since you could then use it to move it at other percentages.
There is no need of bias as bias used for spacing between elements since its not require one can constaint to parent from left right bottom and top
Thanks
Related
I have 3 text views placed horizontally. Leftmost one and rightmost one are of fixed size, but middle one can vary in length significantly. Something like this:
<?xml version="1.0" encoding="utf-8"?>
<layout 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">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="16dp">
<TextView
android:id="#+id/left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingEnd="8dp"
android:text="LEFT"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/message"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:paddingEnd="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/right"
app:layout_constraintStart_toEndOf="#+id/left"
app:layout_constraintTop_toTopOf="parent"
tools:text="#tools:sample/lorem/random" />
<TextView
android:id="#+id/right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="RIGHT"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/message"
app:layout_constraintTop_toTopOf="parent"
tools:visibility="visible" />
</androidx.constraintlayout.widget.ConstraintLayout>
</layout>
This results in following layout:
But if we have short text in the middle, like this:
tools:text="#tools:sample/lorem"
it will look:
Rightmost view is "glued" to the end.
I want it to follow the middle view, like this:
How can it be achieved?
You should use app:layout_constraintWidth_default="wrap" for the middle view and app:layout_constraintHorizontal_chainStyle="packed". Also don't forget to set app:layout_constraintHorizontal_bias="0.0" for the first view to align the whole layout to the start of the screen. Here how the whole layout should look:
<?xml version="1.0" encoding="utf-8"?>
<layout 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">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="16dp">
<TextView
android:id="#+id/left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="8dp"
android:text="LEFT"
app:layout_constraintEnd_toStartOf="#id/message"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/message"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:padding="8dp"
app:layout_constraintEnd_toStartOf="#id/apply_text"
app:layout_constraintStart_toEndOf="#id/left"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintWidth_default="wrap"
tools:text="#tools:sample/lorem" />
<TextView
android:id="#+id/apply_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="8dp"
android:text="RIGHT"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/message"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
Here is the result:
It is quite a challenge. AFAIK, To do what you want, you have to change the width of the middle TextView to wrap_content and remove right TextView constraint with parent's right.
You could try something like calculating width of left and right then if the total width of the device is more than or equal left + right + middle then you switch from
to this
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>
How to align text in TextView when it is inside ConstraintLayout? I cannot use layout_width="match_parent. Tried this, does not work :(
android:gravity="start"
android:textAlignment="gravity"
Make the TextView match parent with:
android:layout_width="0dp"
Then define the textAlignment property:
android:textAlignment="viewEnd"
Example, align right in a left to right language:
<TextView
android:id="#+id/tv_item"
style="#style/text_highlight_small_title"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="#string/my_text"
android:textAlignment="viewStart"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:text="Sample Text" />
Note you can use different values for textAlignment as defined in the documentation.
Unfortunately, we are missing the whole XML of your layout, but let's assume you have something like this:
<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">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Something Important to align"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
Now if you create exactly this layout, TextView is gonna be in the center. This is the default behavior of the ConstraintLayout, it always tries to center views in it if you set constraints this way. This behavior can be influenced by app:layout_constraintHorizontal_bias and app:layout_constraintVertical_bias property of the TextView. Default values for both are 0.5 what you can translate to 50%. If you set them both to 0, you will find the TextView in the top left position. If you set them both to 1, the TextView will end up in the bottom right position. You got the idea, this way you can position your TextView or any View wherever you want.
The bias properties are also described in the official documentation here.
Fully working example of TextView aligned to center vertically and aligned to right horizontally:
<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">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Something Important to align"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.5" />
</android.support.constraint.ConstraintLayout>
Solution:
use this xml code
<?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">
<TextView
android:text="TextView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:id="#+id/textView"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginLeft="16dp"
android:layout_marginEnd="16dp"
android:gravity="start"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginRight="16dp" />
</android.support.constraint.ConstraintLayout>
Hope it helps.
use this xml code
<?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">
<TextView
android:text="TextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/textView"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginLeft="16dp"
android:layout_marginEnd="16dp"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginRight="16dp" />
</android.support.constraint.ConstraintLayout>
In general, if you have more then one TextView in a single line it is not trivial to align the first TextView to the left. I have used a Guideline for this pourpose and it works perfectly. If you remove the GuideLine it doesn't works.
Here is the xml:
<TextView
android:id="#+id/textView1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="130dp"
android:ellipsize="end"
android:maxLines="1"
android:text="first very long very long long long long long very long text"
android:textAlignment="viewStart"
app:layout_constraintEnd_toStartOf="#id/textView2"
app:layout_constraintStart_toStartOf="#+id/guideline"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="130dp"
android:text="second text"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<android.support.constraint.Guideline
android:id="#+id/guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_begin="0dp" />
Try this:
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/textView"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:gravity="right"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginLeft="16dp"
android:layout_marginEnd="16dp"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginRight="16dp" />
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="match_parent"
tools:context="com.example.YOURUSER.YOURPROJECT.YOURACTIVITY">
<TextView
android:id="#+id/TextView1"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
Use design because it is much easier than xml video file
Here's a reproduction of my issue:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
xmlns:app="http://schemas.android.com/apk/res-auto">
<TextView
android:id="#+id/textView"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintEnd_toStartOf="#id/textView2"
android:text="Text"/>
<TextView
android:id="#+id/textView2"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintStart_toEndOf="#id/textView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginStart="16dp"
android:text="muchlongertextmuchlongertextmuchlongertextmuchlongertextmuchlongertextmuchlongertextmuchlongertextmuchlongertextmuchlongertextmuchlongertextmuchlongertext"/>
<android.support.constraint.Barrier
android:id="#+id/barrier"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:barrierDirection="bottom"
app:constraint_referenced_ids="textView, textView2"/>
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#id/barrier"
android:text="muchlongertextmuchlongertextmuchlongertextmuchlongertextmuchlongertextmuchlongertextmuchlongertextmuchlongertextmuchlongertextmuchlongertextmuchlongertext"/>
</android.support.constraint.ConstraintLayout>
When you set the parent height to match_parent, the Barrier works as intended. But, as soon as you set it to wrap_content, it doesn't do the layout properly.
Here's how it looks with wrap_content, and at the right with match_parent:
If anyone could point me in the right direction it would be much appreciated. I didn't find anyone advocating against using Barriers this way, but didn't find anyone who got that kind of layout working.
Is that a mistake on my part or is that a bug in Barrier?
It is not clear what you mean by "parent". If I set the height of the ConstraintLayout (the only parent I can see) to match_parent, nothing changes. The result is as your first picture.
What you have to do, to make the barrier hold back the bottom textView3 is to complete the vertical chain between textView, textView2 and barrier. The code will then look 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="wrap_content">
<TextView
android:id="#+id/textView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Text"
app:layout_constraintBottom_toTopOf="#id/barrier"
app:layout_constraintEnd_toStartOf="#id/textView2"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/textView2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:text="muchlongertextmuchlongertextmuchlongertextmuchlongertextmuchlongertextmuchlongertextmuchlongertextmuchlongertextmuchlongertextmuchlongertextmuchlongertext"
app:layout_constraintBottom_toTopOf="#id/barrier"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/textView"
app:layout_constraintTop_toTopOf="parent" />
<android.support.constraint.Barrier
android:id="#+id/barrier"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:barrierDirection="bottom"
app:constraint_referenced_ids="textView, textView2" />
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="muchlongertextmuchlongertextmuchlongertextmuchlongertextmuchlongertextmuchlongertextmuchlongertextmuchlongertextmuchlongertextmuchlongertextmuchlongertext"
app:layout_constraintTop_toBottomOf="#id/barrier" />
</android.support.constraint.ConstraintLayout>
Here is the Constraintlayout with 3 views:
<?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">
<ImageView
android:id="#+id/iv_profile_image"
android:layout_width="100dp"
android:layout_height="100dp"
app:layout_constraintBottom_toTopOf="#+id/tv_name"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<TextView
android:id="#+id/tv_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=""
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="#+id/iv_profile_image" />
<TextView
android:id="#+id/tv_headline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=""
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="#+id/tv_name" />
</android.support.constraint.ConstraintLayout>
The result:
As you can see, there is a big gap between each view. How can I remove those gaps and have them centered on the screen. I can achieve this easily using RelativeLayout or LinearLayout, but how can I do it in this ConstraintLayout? Is ConstraintLayout suppose to be a replacement for RelativeLayout?
When a view has two opposing constraints, ConstraintLayout will center the view between those constraints. This is what is happening in your layout.
If you want the views stacked one on top of another in the center of the screen, one way to do it is to used a packed chain.
Here is your layout using a vertical packed chain:
Here is the XML. Notice how the views are vertically constrained.
<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">
<ImageView
android:id="#+id/iv_profile_image"
android:layout_width="100dp"
android:layout_height="100dp"
android:src="#mipmap/ic_launcher"
app:layout_constraintBottom_toTopOf="#+id/tv_name"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_chainStyle="packed" />
<TextView
android:id="#+id/tv_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="tv_name"
app:layout_constraintBottom_toTopOf="#+id/tv_headline"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/iv_profile_image" />
<TextView
android:id="#+id/tv_headline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="tv_headline"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tv_name" />
</android.support.constraint.ConstraintLayout>
ConstraintLayouts are said to give a flatter view hierarchy and better performance than normal RelativeLayouts.
I see some things that might cause wierd behaviour. For example in this view:
<TextView
android:id="#+id/tv_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=""
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="#+id/iv_profile_image" />
You say that the top of this view should be aligned with the top of the #+id/iv_profile_image-view. Are you sure you don't mean that the top of this view should be aligned with the bottom of the #+id/iv_profile_image-view? And so on for the other views...
Try this it was helpful for you
we,ve to used all four constraints like left,right,top and bottom
you can implement like this also
I don'nt think you always prefer Drag and Drop you may go with the programmatic approarch also
<?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">
<ImageView
android:id="#+id/iv_profile_image"
android:layout_width="100dp"
android:layout_height="100dp"
app:layout_constraintBottom_toTopOf="#+id/tv_name"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<TextView
android:id="#+id/tv_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=""
app:layout_constraintTop_toBottomOf="#+id/iv_profile_image"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toTopOf="#+id/tv_headline" />
<TextView
android:id="#+id/tv_headline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=""
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tv_name" />
</android.support.constraint.ConstraintLayout>
Happy to help you