Develop Reference

Convert children to proper way in parent constraint layout Android

Hey I am working in android Constraint layout. In my xml I used constraint layout with linear layout. I want to know is there in any way, I can use only constraint layout remove other children layout like linear layout.
item_layout.xml
<?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="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="10dp"
android:orientation="vertical">
<LinearLayout
android:id="#+id/container"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:background="#drawable/item_selector_background"
android:orientation="vertical"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:id="#+id/text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="10dp"
tools:text="25mg" />
<TextView
android:id="#+id/subtext"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginStart="10dp"
android:layout_marginEnd="10dp"
android:layout_marginBottom="8dp"
tools:text="from $1.65" />
</LinearLayout>
<LinearLayout
android:id="#+id/tagContainer"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/item_tag_background"
android:visibility="gone"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0"
tools:visibility="visible">
<TextView
android:id="#+id/tagText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:paddingStart="10dp"
android:paddingEnd="10dp" />
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
My view look like this
I only want to achieve this through constraint layout.

There is definitely a way to do it. Something like this may work for you:
<ConstraintLayout>
<TextView
android:id="#+id/text
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="10dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:text="25mg" />
<TextView
android:id="#+id/subtext"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginStart="10dp"
android:layout_marginEnd="10dp"
android:layout_marginBottom="8dp"
app:layout_constraintTop_toBottomOf="#id/text"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintBottom_toTopOf="#id/tagText"
tools:text="from $1.65" />
<TextView
android:id="#+id/tagText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:paddingStart="10dp"
android:paddingEnd="10dp"
app:layout_constraintTop_toBottomOf="#id/subtext"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintBottom_toBottomOf="parent"/>
</ConstraintLayout>
Just pull the child layouts out and constrain the views the way that you want them.
Note: This is not exact. You may have to play with the constraints to get them the way you want it.

You can use View behind them to set background for the first two TextViews like,
<ConstraintLayout
...>
<View
android:id="#+id/backgroundView"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#drawable/item_selector_background"
app:layout_constraintTop_toTopOf="#id/text"
app:layout_constraintEnd_toEndOf="#id/subtext"
app:layout_constraintStart_toStartOf="#id/subtext"
app:layout_constraintBottom_toBottomOf="#id/subtext"/>
<TextView
android:id="#+id/text"
...
/>
<TextView
android:id="#+id/subtext"
...
/>
<TextView
android:id="#+id/tagText"
...
/>
...
</ConstraintLayout>
the height and width of the backgroundView can be constrained to match the first two TextViews

Linear Layout, 2 items, align 2nd item to the right. Limit its interaction box to its size - how to add dynamic blank space

I have a TextView and a Switch in a Linear Layout.
The way I can lay these two out is shown in the pictures below:
But what I actually want, is that the switch is on the right side (as in the 2nd picture) but the size box related to the switch is only as big as it needs to be (as seen in the 1st picture).
This is important for my OnClickListeners.
So I guess I am looking for a way to add a TextView (or whatever else, just a "div" like behaviour) in between, which takes exactly the space available between the two, so that area becomes unclickable. But that area is dynamic, varying on different screen sizes.
Relevant Code:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<TextView
android:id="#+id/terms_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/activity_horizontal_margin"
android:layout_marginTop="8dp"
android:layout_marginBottom="24dp"
android:text="#string/profile_permissions_user_data_accept_terms" />
<Switch
android:id="#+id/permissions_accept_terms"
style="#style/Body"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/activity_horizontal_margin"
android:layout_marginTop="8dp"
android:layout_marginEnd="#dimen/activity_horizontal_margin"
android:layout_marginBottom="24dp"
android:gravity="end"/>
</LinearLayout>

You can use RelativeLayout or ConstraintsLayout. Because with these you can align one view to another view thats not possible with LinearLayout.
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:padding="8dp"
android:layout_height="wrap_content"
>
<TextView
android:id="#+id/terms_text"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginTop="8dp"
app:layout_constraintEnd_toStartOf="#+id/permissions_accept_terms"
android:layout_marginBottom="24dp"
android:text="profile_permissions_user_data_accept_terms" />
<Switch
android:id="#+id/permissions_accept_terms"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="24dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
/>
</androidx.constraintlayout.widget.ConstraintLayout>
Or
<RelativeLayout
android:layout_width="match_parent"
android:padding="8dp"
android:layout_height="wrap_content"
>
<TextView
android:id="#+id/terms_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_toStartOf="#+id/permissions_accept_terms"
android:layout_marginTop="8dp"
android:layout_marginBottom="24dp"
android:text="profile_permissions_user_data_accept_terms" />
<Switch
android:id="#+id/permissions_accept_terms"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_alignParentEnd="true"
android:layout_marginBottom="24dp"
/>
</RelativeLayout>

To keep it within the LinearLayout you can assign it like so:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:gravity="end"
xmlns:android="http://schemas.android.com/apk/res/android">
<TextView
android:id="#+id/terms_text"
android:layout_width="0dp"
android:layout_weight="0.8"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/activity_horizontal_margin"
android:layout_marginTop="8dp"
android:layout_marginBottom="24dp"
android:text="something" />
<Switch
android:id="#+id/permissions_accept_terms"
style="#style/Body"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/activity_horizontal_margin"
android:layout_marginTop="8dp"
android:layout_marginEnd="#dimen/activity_horizontal_margin"
android:layout_marginBottom="24dp"
android:gravity="end"/>
</LinearLayout>
By assiging a weight to the textfield you allow it to scale but equally, constrain the switch to always be the same side.
Textview changes:
android:layout_width="0dp"
android:layout_weight="0.8"
Switch Changes:
android:layout_width="wrap_content"
Linear Layout changes:
android:gravity="end"
Gravity consistantly links to to the end of the layout.

As you want to use LinearLayout, you cannot leave any empty space in the layout.
What you can do is to expand the TextView to match all the space left by the Switch, by using layout_weight attribute:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"/>
<Switch
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0"/>
</LinearLayout>

Two rows ConstraintLayout

I'm trying to create a two-row ConstraintLayout, each row has two views. The problem with what I have now is the left views is overlapping the right views, as you can see in the screenshot:
This is the code I'm using:
<?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"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:padding="5dp"
android:orientation="horizontal">
<TextView
android:id="#+id/title"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_constraintTop_toTopOf="parent"
/>
<ImageView
android:id="#+id/download"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:paddingStart="5dp"
android:paddingTop="5dp"
android:paddingBottom="5dp"
/>
<TextView
android:id="#+id/date"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:textSize="13sp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/title"
android:layout_marginTop="4dp"
/>
<TextView
android:id="#+id/duration"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="13sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/title"
android:layout_marginTop="4dp"
/>
</androidx.constraintlayout.widget.ConstraintLayout>
I would like the left views (title, date) to stop where the download image and duration start. I haven't worked with ConstraintLayouts much so it might be something easy.

There are a lot of different ways to achieve this, one way would be to constraint your text into the image and give them the same height.
They won't overlap each other if you will do something like this :
In your example, you used android:layout_width="match_parent" on the text so it was expanded throw all of the row and overlapped your other view.You should use android:layout_width="0dp" (it is match_constraint) so your views won't overlap each other.
Here is an example of a layout that looks like the row you want to achieve:
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/textView4"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:text="loot at this text that wont everlap the image"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/imageView"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/imageView"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_marginEnd="8dp"
app:layout_constraintBottom_toBottomOf="#+id/textView4"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="#+id/textView4"
tools:src="#tools:sample/avatars[1]" />
</androidx.constraintlayout.widget.ConstraintLayout>

Why does my layout ignore Constraint Layout Guideline?

I am having a Guideline in a Constraint Layout that I use to anchor a LinearLayout to keep to its left as follows:
So, you can see the Guideline a bit right to middle and between LinearLayout on the left and the ImageView to the right.
Now, when I run the App and set the text of Skill Set or Tutor Types or Location considerably large, it crosses the GuideLine to being behind the ImageView as follows:
(Note: This is NOT a real person's data but mock data)
If you see the XML, you will find that the LinearLayout is indeed meant to be anchored to_left_of the Guideline but that doesn't happen.
So, what is the problem here? Is there a bug in Constraint Layout or am I missing something?
Layout for reference:
<?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:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginStart="10dp"
android:layout_marginRight="10dp"
android:layout_marginEnd="10dp"
android:background="#color/lightGrey"
android:layout_marginBottom="10dp"
android:layout_marginTop="10dp"
android:paddingBottom="10dp"
android:elevation="2dp">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginLeft="16dp"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#+id/guideline"
android:layout_marginRight="8dp"
android:layout_marginEnd="8dp"
app:layout_constraintHorizontal_bias="0.0"
android:id="#+id/linearLayout"
tools:layout_editor_absoluteY="16dp">
<TextView
android:text="#string/tutor_name"
android:textStyle="bold"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/tutor_name"/>
<TextView
android:text="#string/tutor_skill_set"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="12dp"
android:id="#+id/skill_set"/>
<TextView
android:text="#string/tutor_types"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="12dp"
android:id="#+id/tutor_types" />
<TextView
android:text="#string/tutor_location"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/location"
android:layout_marginTop="12dp" />
</LinearLayout>
<ImageView
android:layout_width="80dp"
android:layout_height="80dp"
app:srcCompat="#android:color/holo_blue_light"
android:id="#+id/display_pic"
android:adjustViewBounds="false"
android:scaleType="centerCrop"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginTop="16dp"
android:layout_marginRight="16dp"
android:layout_marginEnd="16dp"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginLeft="8dp"
android:layout_marginStart="8dp"
app:layout_constraintLeft_toLeftOf="#+id/guideline"
app:layout_constraintHorizontal_bias="1.0" />
<com.iarcuschin.simpleratingbar.SimpleRatingBar
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/tutor_rating"
android:layout_below="#+id/display_pic"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
app:srb_starSize="13dp"
app:srb_numberOfStars="5"
app:srb_borderColor="#color/blue"
app:srb_fillColor="#color/blue"
app:srb_starBorderWidth="1"
app:srb_isIndicator="true"
android:layout_marginRight="0dp"
app:layout_constraintRight_toRightOf="#+id/display_pic"
android:layout_marginTop="8dp"
app:layout_constraintTop_toBottomOf="#+id/display_pic"
android:layout_marginLeft="8dp"
app:layout_constraintLeft_toLeftOf="#+id/guideline"
app:layout_constraintHorizontal_bias="1.0" />
<TextView
android:id="#+id/tutor_requested_time"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:text="Requested time"
android:textStyle="italic"
android:layout_marginTop="24dp"
app:layout_constraintTop_toBottomOf="#+id/tutor_rating"
app:layout_constraintRight_toLeftOf="#+id/guideline"
android:layout_marginRight="8dp"
app:layout_constraintLeft_toLeftOf="#+id/linearLayout"
app:layout_constraintHorizontal_bias="0.0" />
<android.support.constraint.Guideline
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/guideline"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.6796875" />
</android.support.constraint.ConstraintLayout>

Change the android:layout_width="wrap_content" property of the LinearLayout to android:layout_width="0dp".
This will work because setting the layout_width to 0dp means that the width for the LinearLayout will be computed based on the constraints placed on it. Whereas if the width is set to wrap_content the width will be computed based on the size of it's child views.

How to update constraints after scale a view in Android ConstraintLayout

Update:
I just used setTextScaleX instead of setScalex to scale the textView and it worked as what I expected this time.
Just like the photos above.
I use ConstraintLayout to keep the space between "$" and center textView and "00".
When I set 5555 to the center textView, it became wider, but I want to keep its original size.
So I scaled the "5555" part, I found the constraints did not update as well.
Can anybody give me some advice?
Thanks a lot!
My layout xml is as following.
<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.echo.tipcalculator.fragments.FeeUnitFragment">
<TextView
android:id="#+id/fee_title"
android:layout_width="150dp"
android:layout_height="wrap_content"
android:layout_marginLeft="16dp"
android:layout_marginTop="16dp"
android:text="title"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginStart="16dp" />
<TextView
android:id="#+id/fee_unit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="$"
android:textSize="20dp"
android:layout_marginTop="8dp"
app:layout_constraintTop_toBottomOf="#+id/fee_title"
app:layout_constraintLeft_toLeftOf="#+id/fee_title" />
<TextView
android:id="#+id/fee_main"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:layout_marginStart="8dp"
android:clickable="true"
android:ellipsize="end"
android:gravity="top"
android:includeFontPadding="false"
android:maxLines="1"
android:text="0"
android:textSize="80dp"
app:layout_constraintLeft_toRightOf="#+id/fee_unit"
app:layout_constraintTop_toTopOf="#+id/fee_unit" />
<TextView
android:id="#+id/fee_decimal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="00"
android:textSize="20dp"
app:layout_constraintTop_toTopOf="#+id/fee_main"
app:layout_constraintLeft_toRightOf="#+id/fee_main"
android:layout_marginLeft="8dp"
android:layout_marginStart="8dp" />
</android.support.constraint.ConstraintLayout>