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
Related
<?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>
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>
I want my textView to be center align to screen and also don't want it to overlap the image. Can you please help me achieve this using constraint.
<android.support.constraint.ConstraintLayout
android:id="#+id/merge"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/iv_close"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="#dimen/paa_action_bar_back_margin"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/vc_nav_bar_back" />
<TextView
android:id="#+id/tv_actionbar_page_title"
style="#style/db_title_4.semibold"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="#{title}"
android:textColor="#color/shade_grease"
android:textSize="16sp"
android:visibility="#{TextUtils.isEmpty(title) ? View.GONE : View.VISIBLE}"
app:layout_constraintBottom_toBottomOf="#+id/iv_close"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/iv_close"
tools:text="#tools:sample/lorem"
tools:visibility="visible" />
</android.support.constraint.ConstraintLayout>
You need to set margins, as for marginTop, marginBottom, marginLeft, marginRight.
For example:
<TextView
android:id="#+id/tv_actionbar_page_title"
style="#style/db_title_4.semibold"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#{title}"
android:textColor="#color/shade_grease"
android:textSize="16sp"
android:visibility="#{TextUtils.isEmpty(title) ? View.GONE : View.VISIBLE}"
app:layout_constraintBottom_toBottomOf="#+id/iv_close"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/iv_close"
android:layout_marginTop="10dp"
android:layout_marginBottom="10dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
tools:text="#tools:sample/lorem"
tools:visibility="visible" />
You can configure the different margin values and make it fit your requirements. Or you can even remove some margins. In the end, it depends on you and your design.
Edit: As a reminder constraint layout works in a relative kind of manner. One object depends on the other, so make sure that your lines/guidelines are correct (in the .xml labeled as constraint_toStartOf, etc.)
This should work. Text will never overlap with the Image and Image will be aligned to the start.
<android.support.constraint.ConstraintLayout android:id="#+id/merge"
android:layout_width="match_parent"
android:layout_height="match_parent"
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">
<ImageView
android:id="#+id/iv_close"
android:layout_width="0dp"
app:layout_constraintWidth_default="wrap"
android:layout_height="wrap_content"
android:layout_margin="#dimen/paa_action_bar_back_margin"
app:layout_constraintHorizontal_bias="0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toStartOf="#id/tv_actionbar_page_title"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/vc_nav_bar_back" />
<TextView
android:id="#+id/tv_actionbar_page_title"
style="#style/db_title_4.semibold"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="center"
android:text="#{title}"
android:textColor="#color/shade_grease"
android:textSize="16sp"
android:visibility="#{TextUtils.isEmpty(title) ? View.GONE : View.VISIBLE}"
app:layout_constraintBottom_toBottomOf="#+id/iv_close"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/iv_close"
app:layout_constraintTop_toTopOf="#+id/iv_close"
tools:text="#tools:sample/lorem"
tools:visibility="visible" />
</android.support.constraint.ConstraintLayout>
Try to constrain your text view to your image and give it android:layout_width="0dp" so it will only expand according to the space available.
Because his new width is not wrap_content your text view will not overlap the image and that's why he will only expand according to his constraints.
So you need to do something like this:
<?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="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto">
<ImageView
android:id="#+id/iv_close"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher_background"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/tv_actionbar_page_title"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="8dp"
android:gravity="center"
android:text="some very long txtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasda"
android:textSize="16sp"
app:layout_constraintBottom_toBottomOf="#+id/iv_close"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/iv_close"
app:layout_constraintTop_toTopOf="#+id/iv_close" />
</android.support.constraint.ConstraintLayout>
If you want your text view to be exactly the same height as the image view add android:layout_height="0dp", now when you will have a long text it will get scrollable and will not expand vertically.
It will look like this:
Edit according to comment:
You can use your layout 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">
<TextView
android:id="#+id/tv_actionbar_page_title"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:gravity="center"
android:text="some very long txtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasda"
android:textSize="16sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/iv_close"
app:layout_constraintVertical_bias="0.0" />
<ImageView
android:id="#+id/iv_close"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher_background"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
In order to get this look:
Or you can use this layout:
<?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">
<TextView
android:id="#+id/tv_actionbar_page_title"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:gravity="center"
android:text="some very long txtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasdatxtsadasdasdasdasdasda"
android:textSize="16sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0" />
<ImageView
android:id="#+id/iv_close"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher_background"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
In order to get this look:
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>
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