CODEWITHSUNDEEP
androidandroid-layoutandroid-constraintlayout
ant2009
ant2009

Reputation: 22586

Aligning a textview after a textview it was aligned to visibility is gone

This is my screen

When the coupon which is the small icon is gone, this part in the layout

<androidx.appcompat.widget.AppCompatImageView
    android:id="@+id/imageViewCoupon"
    android:layout_width="14dp"
    android:layout_height="14dp"
    android:layout_marginStart="12dp"
    android:layout_marginTop="1dp"
    android:scaleType="fitXY"
    android:src="@drawable/icon_coupon"
    app:layout_constraintStart_toEndOf="@+id/imageView"
    app:layout_constraintTop_toBottomOf="@+id/textViewTitle"
    tools:visibility="gone"/>

Should align like in the green box

The green box I have drawn should be where the description should be aligned. I have tried using the barrier but could get that to work

I have the following layout

<?xml version="1.0" encoding="utf-8"?>
<com.google.android.material.card.MaterialCardView
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:elevation="@dimen/margin_0dp"
    app:cardElevation="0dp"
    android:layout_height="wrap_content">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/layoutCartItem"
        android:layout_width="match_parent"
        android:layout_height="72dp">

        <View
            android:id="@+id/highlineView"
            android:layout_width="@dimen/margin_6dp"
            android:layout_height="match_parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            android:background="@color/yellowHighlineColor"
            />

        <androidx.constraintlayout.widget.Guideline
            android:id="@+id/guideLineDisplayDateVertical"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            app:layout_constraintGuide_percent="0.13"/>

        <androidx.constraintlayout.widget.Guideline
            android:id="@+id/guideLineDisplayDateHorizontal"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            app:layout_constraintGuide_percent="0.5"/>

        <com.google.android.material.textview.MaterialTextView
            android:id="@+id/textViewDate"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:includeFontPadding="false"
            android:gravity="center_vertical|end"
            android:lineSpacingExtra="@dimen/order_label_lines_pace_extra"
            android:textStyle="bold"
            android:maxLength="2"
            android:layout_marginBottom="-6dp"
            android:textColor="@color/blackSectionTitle"
            android:textSize="@dimen/text_size_20sp"
            app:fontFamily="@font/ibmp_lexsansthai_semi"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="@id/guideLineDisplayDateVertical"
            app:layout_constraintBottom_toTopOf="@id/guideLineDisplayDateHorizontal"
            tools:text="12" />

        <com.google.android.material.textview.MaterialTextView
            android:id="@+id/textViewDay"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:includeFontPadding="false"
            android:lineSpacingExtra="@dimen/order_label_lines_pace_extra"
            android:textColor="@color/blackSectionTitle"
            android:textSize="@dimen/text_size_12sp"
            android:maxLength="3"
            app:fontFamily="@font/ibmp_lexsansthai_regular"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="@id/guideLineDisplayDateVertical"
            app:layout_constraintTop_toBottomOf="@id/guideLineDisplayDateHorizontal"
            tools:text="Mon" />

        <com.airbnb.lottie.LottieAnimationView
            android:id="@+id/imageView"
            android:layout_width="@dimen/margin_44dp"
            android:layout_height="@dimen/margin_44dp"
            android:layout_marginTop="8dp"
            android:layout_marginBottom="8dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toStartOf="@id/guideLineDisplayDateVertical"
            app:layout_constraintTop_toTopOf="parent"
            tools:src="@tools:sample/avatars" />

        <com.google.android.material.textview.MaterialTextView
            android:id="@+id/textViewTitle"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginStart="12dp"
            android:layout_marginTop="@dimen/margin_12dp"
            android:ellipsize="end"
            android:textSize="14sp"
            android:textStyle="bold"
            android:gravity="start"
            android:maxLines="1"
            android:textColor="@color/blackSectionTitle"
            app:fontFamily="@font/ibmp_lexsansthai_semi"
            app:layout_constraintHorizontal_bias="0.0"
            app:layout_constraintStart_toEndOf="@+id/imageView"
            app:layout_constraintEnd_toStartOf="@id/imageViewChevron"
            app:layout_constraintTop_toTopOf="parent"
            tools:text="This is the title" />

        <androidx.appcompat.widget.AppCompatImageView
            android:id="@+id/imageViewCoupon"
            android:layout_width="14dp"
            android:layout_height="14dp"
            android:layout_marginStart="12dp"
            android:layout_marginTop="1dp"
            android:scaleType="fitXY"
            android:src="@drawable/icon_coupon"
            app:layout_constraintStart_toEndOf="@+id/imageView"
            app:layout_constraintTop_toBottomOf="@+id/textViewTitle"
            tools:visibility="visible"/>

        <com.google.android.material.textview.MaterialTextView
            android:id="@+id/textViewDescription"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginTop="-3dp"
            android:textSize="12sp"
            android:ellipsize="end"
            android:layout_marginStart="4dp"
            android:layout_marginBottom="14dp"
            android:gravity="center_vertical|start"
            android:lineSpacingExtra="@dimen/order_label_lines_pace_extra"
            android:maxLines="1"
            android:textColor="#FF3D1C"
            app:fontFamily="@font/ibmp_lexsansthai_regular"
            app:layout_constraintHorizontal_bias="0.0"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toEndOf="@+id/imageViewCoupon"
            app:layout_constraintEnd_toStartOf="@id/imageViewChevron"
            app:layout_constraintTop_toBottomOf="@+id/textViewTitle"
            tools:text="This is the description" />

        <androidx.appcompat.widget.AppCompatImageView
            android:id="@+id/imageViewChevron"
            android:layout_width="20dp"
            android:layout_height="20dp"
            android:layout_marginEnd="12dp"
            android:scaleType="fitXY"
            app:layout_constraintHorizontal_bias="1"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"
            android:src="@drawable/icons_chevron_right" />
    </androidx.constraintlayout.widget.ConstraintLayout>

</com.google.android.material.card.MaterialCardView>

Upvotes: 1

Views: 321

Answers (7)

Aks4125
Aks4125

Reputation: 5720

Edit: Here is new idea to have blank view of size 4dp wrapped in ConstraintLayout.

The only catch is you need to do visibility on layout which contains Imageview & View (EmptyView).

Your XML should look like:

<androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/constraintLayout"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintStart_toStartOf="@+id/textViewTitle"
        app:layout_constraintTop_toTopOf="@+id/guideLineDisplayDateHorizontal"
        tools:visibility="visible">

        <androidx.appcompat.widget.AppCompatImageView
            android:id="@+id/imageViewCoupon"
            android:layout_width="14dp"
            android:layout_height="14dp"
            android:scaleType="fitXY"
            android:src="@drawable/splash_icon"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <View
            android:layout_width="4dp"
            android:layout_height="10dp"
            app:layout_constraintBottom_toBottomOf="@+id/imageViewCoupon"
            app:layout_constraintStart_toEndOf="@+id/imageViewCoupon"
            app:layout_constraintTop_toTopOf="@+id/imageViewCoupon" />

    </androidx.constraintlayout.widget.ConstraintLayout>


    <com.google.android.material.textview.MaterialTextView
        android:id="@+id/textViewDescription"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:ellipsize="end"
        android:gravity="center_vertical|start"
        android:lineSpacingExtra="5dp"
        android:maxLines="1"
        android:textColor="#FF3D1C"
        android:textSize="12sp"
        app:layout_constraintStart_toEndOf="@+id/constraintLayout"
        app:layout_constraintTop_toTopOf="@+id/guideLineDisplayDateHorizontal"
        app:layout_constraintVertical_bias="0.0"
        tools:text="This is the description" />

Below is the sample result if you do visibility = gone.

enter image description here

Alternatively, you should use same bottom textview and use drawableStart, which allows drawablePadding option.

Upvotes: 3

Fahim Parkar
Fahim Parkar

Reputation: 31647

You answered your own question by drawing the box in green which is what you need to make...

You just put all what you have inside box in 1 view and make inner view alignments with this box which will fix your problem.

Means your Title, image, description will go in one view and Title, image, description will align with this view...

Also

Just update to the below.

<androidx.appcompat.widget.AppCompatImageView
    android:id="@+id/imageViewCoupon"
    android:layout_width="14dp"
    android:layout_height="14dp"
    android:layout_marginStart="12dp"
    android:layout_marginEnd="4dp"
    android:layout_marginTop="1dp"
    android:scaleType="fitXY"
    android:src="@drawable/icon_coupon"
    app:layout_constraintStart_toEndOf="@+id/imageView"
    app:layout_constraintTop_toBottomOf="@+id/textViewTitle"
    tools:visibility="visible"/>

<com.google.android.material.textview.MaterialTextView
    android:id="@+id/textViewDescription"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginTop="-3dp"
    android:textSize="12sp"
    android:ellipsize="end"
    android:layout_marginBottom="14dp"
    android:gravity="center_vertical|start"
    android:lineSpacingExtra="@dimen/order_label_lines_pace_extra"
    android:maxLines="1"
    android:textColor="#FF3D1C"
    app:fontFamily="@font/ibmp_lexsansthai_regular"
    app:layout_constraintHorizontal_bias="0.0"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintStart_toEndOf="@+id/imageViewCoupon"
    app:layout_constraintEnd_toStartOf="@id/imageViewChevron"
    app:layout_constraintTop_toBottomOf="@+id/textViewTitle"
    tools:text="This is the description" />

I shift layout_marginStart from textViewDescription to layout_marginEnd in imageViewCoupon

Using this when image is hidden, automatically description will come to start of the view...

Upvotes: 1

Rahul Rokade
Rahul Rokade

Reputation: 162

try this

<RelativeLayout
        android:layout_below="@id/li_bi"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="10dp">
        <View
            android:id="@+id/av"
            android:layout_width="5dp"
            android:layout_height="90dp"
            android:background="@color/green"/>
        <LinearLayout
            android:id="@+id/date_b"
            android:layout_toEndOf="@id/av"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:layout_centerVertical="true"
            android:layout_marginHorizontal="5dp"
            android:padding="@dimen/dim_10dp">
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="12"
                android:gravity="center"
                android:layout_gravity="center_horizontal"
                android:textColor="@color/black"
                android:textSize="12sp"/>
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="MoN"
                android:textAllCaps="true"
                android:gravity="center"
                android:layout_gravity="center_horizontal"
                android:textColor="@color/black"
                android:textSize="12sp"/>
        </LinearLayout>
        <ImageView
            android:id="@+id/img"
            android:layout_toEndOf="@id/date_b"
            android:layout_width="20dp"
            android:layout_height="20dp"
            android:scaleType="fitXY"
            android:src="@drawable/domepro"
            android:layout_marginEnd="@dimen/dim_5dp"
            android:layout_centerVertical="true"/>
        <LinearLayout
            android:id="@+id/name"
            android:layout_toEndOf="@id/img"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:layout_centerVertical="true"
            android:layout_marginHorizontal="5dp"
            android:padding="@dimen/dim_10dp">
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="This is the title"
                android:paddingVertical="2dp"
                android:textStyle="bold"
                android:textColor="@color/black"
                android:textSize="14sp"/>
            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_vertical"
                android:orientation="horizontal">
                <ImageView
                    android:layout_width="15dp"
                    android:layout_height="15dp"
                    android:src="@drawable/ic_pdf"
                    android:layout_gravity="center"
                    android:visibility="gone"
                    android:padding="2dp"/>
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="This is the decription"
                    android:textAllCaps="true"
                    android:layout_gravity="center_vertical"
                    android:paddingVertical="2dp"
                    android:textColor="@color/black"
                    android:textSize="14sp"/>
            </LinearLayout>
        </LinearLayout>
        <ImageView
            android:id="@+id/im_ar"
            android:layout_toStartOf="@id/name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_arrowright"
            android:layout_centerHorizontal="true"
            android:layout_margin="5dp"
            android:layout_centerVertical="true"
            android:layout_alignParentEnd="true"/>
    </RelativeLayout>

Upvotes: 1

C.F.G
C.F.G

Reputation: 1463

Just use ConstraintLayout feature and set app:layout_goneMarginStart="12dp" (the Start Margin of ImageView) for Material text view.

Upvotes: 4

Zain
Zain

Reputation: 40878

You'd add a barrier to the end of the imageView avatar, and transfer the start 12dp margin of the imageViewCoupon & textViewTitle to that barrier using app:barrierMargin attribute:

<androidx.constraintlayout.widget.Barrier
    android:id="@+id/barrier"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:barrierMargin="@dimen/margin_12dp"
    app:barrierDirection="right"
    app:constraint_referenced_ids="imageView" />

Then constraint the start of the imageViewCoupon & textViewTitle to that barrier:

<androidx.appcompat.widget.AppCompatImageView
    android:id="@+id/imageViewCoupon"
    android:layout_width="14dp"
    android:layout_height="14dp"
    android:layout_marginTop="1dp"
    android:scaleType="fitXY"
    android:src="@drawable/icon_coupon"
    app:layout_constraintStart_toEndOf="@+id/barrier"
    app:layout_constraintTop_toBottomOf="@+id/textViewTitle"
    tools:visibility="visible" />

<com.google.android.material.textview.MaterialTextView
    android:id="@+id/textViewTitle"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginTop="@dimen/margin_12dp"
    android:ellipsize="end"
    android:gravity="start"
    android:maxLines="1"
    android:text="This is the title"
    android:textColor="@color/blackSectionTitle"
    android:textSize="14sp"
    android:textStyle="bold"
    app:layout_constraintEnd_toStartOf="@id/imageViewChevron"
    app:layout_constraintHorizontal_bias="0.0"
    app:layout_constraintStart_toEndOf="@+id/barrier"
    app:layout_constraintTop_toTopOf="parent" />

Now when the imageViewCoupon is gone, the textViewDescription will be constrained to the barrier.

Upon those modifications, the entire layout would be:

<?xml version="1.0" encoding="utf-8"?>
<com.google.android.material.card.MaterialCardView 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="wrap_content"
    android:elevation="@dimen/margin_0dp"
    app:cardElevation="0dp">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/layoutCartItem"
        android:layout_width="match_parent"
        android:layout_height="72dp">

        <View
            android:id="@+id/highlineView"
            android:layout_width="@dimen/margin_6dp"
            android:layout_height="match_parent"
            android:background="@color/yellowHighlineColor"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <androidx.constraintlayout.widget.Guideline
            android:id="@+id/guideLineDisplayDateVertical"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            app:layout_constraintGuide_percent="0.13" />

        <androidx.constraintlayout.widget.Guideline
            android:id="@+id/guideLineDisplayDateHorizontal"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            app:layout_constraintGuide_percent="0.5" />

        <com.google.android.material.textview.MaterialTextView
            android:id="@+id/textViewDate"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginBottom="-6dp"
            android:gravity="center_vertical|end"
            android:includeFontPadding="false"
            android:lineSpacingExtra="@dimen/order_label_lines_pace_extra"
            android:maxLength="2"
            android:textColor="@color/blackSectionTitle"
            android:textSize="@dimen/text_size_20sp"
            android:textStyle="bold"
            app:fontFamily="@font/ibmp_lexsansthai_semi"
            app:layout_constraintBottom_toTopOf="@id/guideLineDisplayDateHorizontal"
            app:layout_constraintEnd_toEndOf="@id/guideLineDisplayDateVertical"
            app:layout_constraintStart_toStartOf="parent"
            tools:text="12" />

        <com.google.android.material.textview.MaterialTextView
            android:id="@+id/textViewDay"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:includeFontPadding="false"
            android:lineSpacingExtra="@dimen/order_label_lines_pace_extra"
            android:maxLength="3"
            android:textColor="@color/blackSectionTitle"
            android:textSize="@dimen/text_size_12sp"
            app:fontFamily="@font/ibmp_lexsansthai_regular"
            app:layout_constraintEnd_toEndOf="@id/guideLineDisplayDateVertical"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@id/guideLineDisplayDateHorizontal"
            tools:text="Mon" />

        <androidx.constraintlayout.widget.Barrier
            android:id="@+id/barrier"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:barrierMargin="@dimen/margin_12dp"
            app:barrierDirection="right"
            app:constraint_referenced_ids="imageView" />
        
        <com.airbnb.lottie.LottieAnimationView
            android:id="@+id/imageView"
            android:layout_width="@dimen/margin_44dp"
            android:layout_height="@dimen/margin_44dp"
            android:layout_marginTop="8dp"
            android:layout_marginBottom="8dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toStartOf="@id/guideLineDisplayDateVertical"
            app:layout_constraintTop_toTopOf="parent"
            tools:src="@tools:sample/avatars" />

        <com.google.android.material.textview.MaterialTextView
            android:id="@+id/textViewTitle"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginTop="@dimen/margin_12dp"
            android:ellipsize="end"
            android:gravity="start"
            android:maxLines="1"
            android:textColor="@color/blackSectionTitle"
            android:textSize="14sp"
            android:textStyle="bold"
            app:fontFamily="@font/ibmp_lexsansthai_semi"
            app:layout_constraintEnd_toStartOf="@id/imageViewChevron"
            app:layout_constraintHorizontal_bias="0.0"
            app:layout_constraintStart_toEndOf="@+id/barrier"
            app:layout_constraintTop_toTopOf="parent"
            tools:text="This is the title" />

        <androidx.appcompat.widget.AppCompatImageView
            android:id="@+id/imageViewCoupon"
            android:layout_width="14dp"
            android:layout_height="14dp"
            android:layout_marginTop="1dp"
            android:scaleType="fitXY"
            android:src="@drawable/icon_coupon"
            app:layout_constraintStart_toEndOf="@+id/barrier"
            app:layout_constraintTop_toBottomOf="@+id/textViewTitle"
            tools:visibility="visible" />

        <com.google.android.material.textview.MaterialTextView
            android:id="@+id/textViewDescription"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginStart="4dp"
            android:layout_marginTop="-3dp"
            android:layout_marginBottom="14dp"
            android:ellipsize="end"
            android:gravity="center_vertical|start"
            android:lineSpacingExtra="@dimen/order_label_lines_pace_extra"
            android:maxLines="1"
            android:textColor="#FF3D1C"
            android:textSize="12sp"
            app:fontFamily="@font/ibmp_lexsansthai_regular"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toStartOf="@id/imageViewChevron"
            app:layout_constraintHorizontal_bias="0.0"
            app:layout_constraintStart_toEndOf="@+id/imageViewCoupon"
            app:layout_constraintTop_toBottomOf="@+id/textViewTitle"
            tools:text="This is the description" />

        <androidx.appcompat.widget.AppCompatImageView
            android:id="@+id/imageViewChevron"
            android:layout_width="20dp"
            android:layout_height="20dp"
            android:layout_marginEnd="12dp"
            android:scaleType="fitXY"
            android:src="@drawable/icons_chevron_right"
            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" />
    </androidx.constraintlayout.widget.ConstraintLayout>
</com.google.android.material.card.MaterialCardView>

Upvotes: 1

Jaydip Ramani
Jaydip Ramani

Reputation: 88

You have to make two changes one remove start margin and second change start Constraint.

<androidx.appcompat.widget.AppCompatImageView
    android:id="@+id/imageViewCoupon"
    android:layout_width="14dp"
    android:layout_height="14dp"
    android:layout_marginTop="1dp"
    android:scaleType="fitXY"
    android:src="@drawable/icon_coupon"
    app:layout_constraintStart_toStartOf="@+id/textViewTitle"
    app:layout_constraintTop_toBottomOf="@+id/textViewTitle"
    tools:visibility="visible"/>

Upvotes: 2

Jay Panchal
Jay Panchal

Reputation: 304

Try this...

 <?xml version="1.0" encoding="utf-8"?>
 <com.google.android.material.card.MaterialCardView
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:elevation="@dimen/margin_0dp"
app:cardElevation="0dp"
android:layout_height="wrap_content">

<androidx.constraintlayout.widget.ConstraintLayout
    android:id="@+id/layoutCartItem"
    android:layout_width="match_parent"
    android:layout_height="72dp">

    <View
        android:id="@+id/highlineView"
        android:layout_width="@dimen/margin_6dp"
        android:layout_height="match_parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        android:background="@color/yellowHighlineColor"
        />

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideLineDisplayDateVertical"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.13"/>

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideLineDisplayDateHorizontal"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.5"/>

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/headerGL"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.27" />

    <com.google.android.material.textview.MaterialTextView
        android:id="@+id/textViewDate"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:includeFontPadding="false"
        android:gravity="center_vertical|end"
        android:lineSpacingExtra="@dimen/order_label_lines_pace_extra"
        android:textStyle="bold"
        android:maxLength="2"
        android:layout_marginBottom="-6dp"
        android:textColor="@color/blackSectionTitle"
        android:textSize="@dimen/text_size_20sp"
        app:fontFamily="@font/ibmp_lexsansthai_semi"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="@id/guideLineDisplayDateVertical"
        app:layout_constraintBottom_toTopOf="@id/guideLineDisplayDateHorizontal"
        tools:text="12" />

    <com.google.android.material.textview.MaterialTextView
        android:id="@+id/textViewDay"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:includeFontPadding="false"
        android:lineSpacingExtra="@dimen/order_label_lines_pace_extra"
        android:textColor="@color/blackSectionTitle"
        android:textSize="@dimen/text_size_12sp"
        android:maxLength="3"
        app:fontFamily="@font/ibmp_lexsansthai_regular"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="@id/guideLineDisplayDateVertical"
        app:layout_constraintTop_toBottomOf="@id/guideLineDisplayDateHorizontal"
        tools:text="Mon" />

    <com.airbnb.lottie.LottieAnimationView
        android:id="@+id/imageView"
        android:layout_width="@dimen/margin_44dp"
        android:layout_height="@dimen/margin_44dp"
        android:layout_marginTop="8dp"
        android:layout_marginBottom="8dp"
        app:layout_constraintBottom_toBottomOf="parent"          
    app:layout_constraintStart_toStartOf="@id/guideLineDisplayDateVertical"
        app:layout_constraintTop_toTopOf="parent"
        tools:src="@tools:sample/avatars" />

    <com.google.android.material.textview.MaterialTextView
        android:id="@+id/textViewTitle"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="12dp"
        android:layout_marginTop="@dimen/margin_12dp"
        android:ellipsize="end"
        android:textSize="14sp"
        android:textStyle="bold"
        android:gravity="start"
        android:maxLines="1"
        android:textColor="@color/blackSectionTitle"
        app:fontFamily="@font/ibmp_lexsansthai_semi"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toEndOf="@+id/imageView"
        app:layout_constraintEnd_toStartOf="@id/imageViewChevron"
        app:layout_constraintTop_toTopOf="parent"
        tools:text="This is the title" />

    <androidx.appcompat.widget.AppCompatImageView
        android:id="@+id/imageViewCoupon"
        android:layout_width="14dp"
        android:layout_height="14dp"
        android:layout_marginStart="12dp"
        android:layout_marginTop="1dp"
        android:scaleType="fitXY"
        android:src="@drawable/icon_coupon"
        app:layout_constraintStart_toEndOf="@+id/headerGL"
        app:layout_constraintTop_toBottomOf="@+id/textViewTitle"
        tools:visibility="visible"/>

    <com.google.android.material.textview.MaterialTextView
        android:id="@+id/textViewDescription"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="-3dp"
        android:textSize="12sp"
        android:ellipsize="end"
        android:layout_marginBottom="14dp"
        android:gravity="center_vertical|start"
        android:lineSpacingExtra="@dimen/order_label_lines_pace_extra"
        android:maxLines="1"
        android:textColor="#FF3D1C"
        app:fontFamily="@font/ibmp_lexsansthai_regular"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toEndOf="@+id/imageViewCoupon"
        app:layout_constraintEnd_toStartOf="@id/imageViewChevron"
        app:layout_constraintTop_toBottomOf="@+id/textViewTitle"
        tools:text="This is the description" />

    <androidx.appcompat.widget.AppCompatImageView
        android:id="@+id/imageViewChevron"
        android:layout_width="20dp"
        android:layout_height="20dp"
        android:layout_marginEnd="12dp"
        android:scaleType="fitXY"
        app:layout_constraintHorizontal_bias="1"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        android:src="@drawable/icons_chevron_right" />
</androidx.constraintlayout.widget.ConstraintLayout>

</com.google.android.material.card.MaterialCardView>

Upvotes: 2

Related Questions