'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.

Solution 1:^[1]

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.

Solution 2:^[2]

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1
Solution 2

'Convert children to proper way in parent constraint layout Android

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]