Convert children to proper way in parent constraint layout Android-CodePudding

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.

CodePudding user response：

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.

CodePudding user response：

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