I'm trying to create a bulleted list in Android where the bullet is aligned to the vertical center of the first line in a TextView like so:
The XML for a single bullet/text row is this:
<android.support.constraint.ConstraintLayout
android:id="#+id/setup_intro_bullet_first_container"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:id="#+id/setup_intro_bullet_first"
style="#style/TextAppearance.AppCompat.Headline"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="#string/bullet"
android:textColor="#color/colorAccent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/setup_intro_bullet_first_text"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="4dp"
android:paddingTop="14dp"
android:text="#string/setup_intro_benefit_notification"
android:textColor="#android:color/white"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toRightOf="#id/setup_intro_bullet_first"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
Here I use padding on the TextView to align with the bullet, but this is not a solution because the alignment isn't consistent across other resolutions. I've also tried putting the bullet character in the text string itself but then the second line of text will sit under the bullet, which is not what I want. I'd like some advice on how to accomplish this.
The solution I came up with is to create a circle Drawable and use it in an ImageView. You can define the baseline of an ImageView which allowed me to properly align it with the baseline of the TextView. Here is the circle XML:
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid android:color="#color/colorAccent" />
</shape>
And the layout XML:
<ImageView
android:id="#+id/setup_intro_bullet_first"
style="#style/TextAppearance.AppCompat.Headline"
android:layout_width="4dp"
android:layout_height="4dp"
android:baseline="7dp"
android:src="#drawable/circle"
app:layout_constraintBaseline_toBaselineOf="#+id/setup_intro_bullet_first_text"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#+id/setup_intro_bullet_first_text" />
<TextView
android:id="#+id/setup_intro_bullet_first_text"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="4dp"
style="#style/TextAppearance.AppCompat.Subhead"
android:text="#string/setup_intro_benefit_notification"
android:textColor="#android:color/white"
app:layout_constraintLeft_toRightOf="#id/setup_intro_bullet_first"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
Use the app:layout_constraintBaseline_toBaselineOf attribute to constrain your "bullet" view's baseline to the baseline of your text view.
Constraints for your bullet view:
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#+id/setup_intro_bullet_first_text"
app:layout_constraintBaseline_toBaselineOf="#+id/setup_intro_bullet_first_text"
And for your text:
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toRightOf="#id/setup_intro_bullet_first"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
Related
I have a layout with an Imageview and a Textview. Imageview will occupy all the size of the layer, and Textview will be on top of the image, and always at the same relative distance to the corners of the image. For instance, I want the Textview to be at a position such that its y position is 1/3 of the height of the Imageview. How can I do this?
I'm open to any kind of layout you consider is necessary. Please avoid third libraries or deprecated android methods.
Thank you #Zain. Here there is the example using a SVG image!
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/parent_layout"
android:layout_width="0dp"
android:layout_height="200dp"
android:layout_marginStart="32dp"
android:layout_marginEnd="32dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<ImageView
android:id="#+id/img_example"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintHeight_max="200dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:srcCompat="#drawable/photo" />
<TextView
android:id="#+id/lbl_example"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintVertical_bias="0.80"
app:layout_constraintHorizontal_bias="0.5"
android:text="Example"
android:textSize="20sp" />
</androidx.constraintlayout.widget.ConstraintLayout>
I have created a login page which has two editText fields for username and password. I have included an ImageView in the activity also.
I have made an XML file to make rounded white background for the editText fields. However, that did not work and was still transparent. On changing the background from the created XML file to simple white colour, I could still not see the editText fields.
Below is the code I have used for the following:
Login.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:id="#+id/constraintLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipToPadding="false"
android:onClick="Clicked"
android:padding="10dp"
android:paddingBottom="10dp"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:paddingTop="10dp"
tools:context=".MainActivity">
<Button
android:id="#+id/button"
android:layout_width="307dp"
android:layout_height="63dp"
android:layout_marginBottom="17dp"
android:layout_marginEnd="327dp"
android:layout_marginStart="84dp"
android:foreground="#drawable/emailsignup"
android:text="#string/button"
app:layout_constraintBottom_toTopOf="#+id/editTextTextPersonName"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.104"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/button2"
app:layout_constraintVertical_bias="1.0" />
<Button
android:id="#+id/button2"
android:layout_width="293dp"
android:layout_height="57dp"
android:layout_marginEnd="146dp"
android:layout_marginStart="63dp"
android:layout_marginTop="200dp"
android:foreground="#drawable/gmailsignup"
android:text="#string/button2"
app:layout_constraintBottom_toTopOf="#+id/button"
app:layout_constraintEnd_toStartOf="#+id/imageView"
app:layout_constraintHorizontal_bias="0.006"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/button3"
android:layout_width="88dp"
android:layout_height="48dp"
android:layout_marginBottom="269dp"
android:layout_marginEnd="253dp"
android:layout_marginStart="150dp"
android:layout_marginTop="43dp"
android:background="#drawable/loginbg"
android:fontFamily="monospace"
android:text="#string/LoginText"
android:textSize="18sp"
android:textStyle="bold"
app:layout_constraintBottom_toTopOf="#+id/imageView"
app:layout_constraintEnd_toStartOf="#+id/imageView"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/editTextTextPassword"
app:layout_constraintVertical_bias="0.0" />
<EditText
android:id="#+id/editTextTextPassword"
android:layout_width="228dp"
android:layout_height="51dp"
android:layout_marginBottom="132dp"
android:layout_marginEnd="95dp"
android:layout_marginStart="179dp"
android:layout_marginTop="430dp"
android:autofillHints=""
android:background="#drawable/edittextround"
android:ems="10"
android:fontFamily="sans-serif-medium"
android:hint="#string/PasswordHint"
android:inputType="textPassword"
android:textSize="24sp"
app:layout_constraintBottom_toTopOf="#+id/imageView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.978"
app:layout_constraintStart_toEndOf="#+id/imageView"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0" />
<EditText
android:id="#+id/editTextTextPersonName"
android:layout_width="281dp"
android:layout_height="54dp"
android:layout_marginBottom="320dp"
android:layout_marginEnd="153dp"
android:layout_marginStart="58dp"
android:layout_marginTop="88dp"
android:autofillHints=""
android:ems="10"
android:background="#drawable/edittextround"
android:hint="#string/LoginTextHint"
android:inputType="textPersonName"
android:textSize="24sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/imageView"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/imageView"
app:layout_constraintVertical_bias="0.962" />
<ImageView
android:id="#+id/imageView"
android:layout_width="566dp"
android:layout_height="972dp"
android:adjustViewBounds="false"
android:contentDescription="#string/todo"
android:cropToPadding="false"
android:foreground="?android:attr/selectableItemBackgroundBorderless"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.503"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.344"
app:srcCompat="#drawable/picture1_2" />
</androidx.constraintlayout.widget.ConstraintLayout>
edittextround.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" android:padding="10dp">
<solid android:color="#FFFFFF"/>
<gradient
android:centerY="0.2"
android:startColor="#D3D3D3"
android:centerColor="#65FFFFFF"
android:endColor="#00FFFFFF"
android:angle="270"
/>
<stroke
android:width="0.7dp"
android:color="#BDBDBD" />
<corners
android:radius="15dp" />
</shape>
I tried putting the edittextbackground.xml on the login button and it worked perfectly.
The images related to this activity are below:
Image of the design
Please help me figure out why my editText fields do not show their backgrounds
ok got it
so the problem is below
app:layout_constraintBottom_toTopOf="#+id/imageView"
app:layout_constraintTop_toBottomOf="#+id/imageView"
you are setting the constraints to imageView and that imageView also renders in the area of Editext but not in the background because it is at same elevation as of Editexts so if you just increase the elevation of of editexts they will show up , i tried it , it works
just add android:elevation="1dp" in both edittexts the imageview is at 0dp so editext will show above it.
Although it works but your constraints are confusing use parent instead
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#id/button" will also do
also i want to say if you use constraint layout correctly you will not need to set layout_width and layout_height in most cases you can set them to 0 the constraints will determine the correct width and height also you don't need to use margins your constraint will handle them if you use bias, chains, groups ,barrier, guidelines etc correctly , please learn more about constraint layout and you can reduce the lines in above layout file to half.
this tutorial will give you good start, also watch other videos in that series
have a good day
I'm using ConstraintLayout to display a RecyclerView or a Image with TextView conditionally based on the data in the RecyclerView. The problem is that the Image and TextView won't center vertically even when I've properly put constraints on all 4 directions. I'm also using the packed chain style. Here's my layout:
<?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"
android:gravity="center"
app:layout_constraintVertical_chainStyle="packed"
tools:context=".ShortlistFragment">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/shortlistedProfilesRV"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:visibility="gone" />
<me.zhanghai.android.materialprogressbar.MaterialProgressBar
android:id="#+id/interestProgress"
style="#style/Widget.MaterialProgressBar.ProgressBar.Horizontal"
android:layout_width="160dp"
android:layout_height="wrap_content"
android:indeterminate="true"
android:visibility="invisible"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:mpb_progressStyle="horizontal" />
<ImageView
android:id="#+id/shortlistBgImageView"
android:layout_width="128dp"
android:layout_height="121dp"
android:contentDescription="Star image"
android:src="#drawable/star"
app:layout_constraintBottom_toTopOf="#id/shortlistHelperText"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_chainStyle="packed" />
<TextView
android:id="#+id/shortlistHelperText"
android:layout_width="200dp"
android:layout_height="wrap_content"
android:gravity="center"
android:text="Some Text Here!"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/shortlistBgImageView"
app:layout_constraintVertical_chainStyle="packed" />
</androidx.constraintlayout.widget.ConstraintLayout>
In Android Studio Preview the image and text is totally centered as expected. But in an actual device its at the top (I'm texting Android 9). I need to give layout_marginTop to my ImageView to have it centered, but that is just a hacky way of doing things. What am I doing wrong here?
I was actually using this fragment inside a NavHostFragment which had its height set to wrap_content.
I would like to achieve the following layout
The bottom layover TextView has a rounded rectangle drawable as a background. I would like to align the text inside the TextView with the top text. Currently what happens is that the rounded edges align with the text and not the actual text.
Any ideas on how to implement this with ConstraintLayout? I tried setting layout_constraintStart_toStartOf the text above and set negative padding but I guess constraints have priority here and ignores the padding.
Here is the full xml layout:
<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="wrap_content">
<androidx.appcompat.widget.AppCompatImageView
android:id="#+id/trip_type_icon"
android:layout_width="24dp"
android:layout_height="24dp"
android:tint="#color/oslo_gray"
app:layout_constraintBottom_toBottomOf="#+id/trip_month"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/trip_date"
app:srcCompat="#drawable/ic_car_pickup" />
<View
android:id="#+id/divider"
android:layout_width="1dp"
android:layout_height="0dp"
android:layout_marginStart="12dp"
android:layout_marginTop="12dp"
android:background="#color/oslo_gray"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/trip_type_icon" />
<TextView
android:id="#+id/trip_date"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:textColor="#color/shark"
app:layout_constraintEnd_toEndOf="#+id/trip_month"
app:layout_constraintStart_toEndOf="#+id/trip_type_icon"
app:layout_constraintTop_toTopOf="parent"
tools:text="5" />
<TextView
android:id="#+id/trip_month"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="4dp"
android:textColor="#color/emperor"
app:layout_constraintBottom_toBottomOf="#+id/trip_timeline_subtitle"
app:layout_constraintStart_toEndOf="#+id/trip_type_icon"
app:layout_constraintTop_toBottomOf="#+id/trip_date"
tools:text="Sep" />
<TextView
android:id="#+id/trip_timeline_title"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:textColor="#color/shark"
app:layout_constraintEnd_toStartOf="#+id/navigate_arrow"
app:layout_constraintStart_toEndOf="#+id/trip_date"
app:layout_constraintTop_toTopOf="parent"
tools:text="PVG -> PEK" />
<TextView
android:id="#+id/trip_timeline_subtitle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginBottom="48dp"
android:textColor="#color/emperor"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="#+id/trip_timeline_title"
app:layout_constraintStart_toEndOf="#+id/trip_date"
app:layout_constraintTop_toBottomOf="#+id/trip_timeline_title"
tools:text="2:10pm - 4:45pm" />
<androidx.appcompat.widget.AppCompatImageView
android:id="#+id/navigate_arrow"
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_marginStart="24dp"
app:layout_constraintBottom_toBottomOf="#+id/trip_timeline_subtitle"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/trip_timeline_title"
app:layout_constraintTop_toTopOf="#+id/trip_timeline_title"
app:srcCompat="#drawable/ic_arrow_right_vector" />
<TextView
android:id="#+id/trip_timeline_flight_layover"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#drawable/rounded_rectangle_radius_12dp"
android:textColor="#color/emperor"
android:visibility="gone"
app:layout_constraintEnd_toEndOf="#id/navigate_arrow"
app:layout_constraintStart_toStartOf="#+id/trip_timeline_subtitle"
app:layout_constraintTop_toBottomOf="#id/trip_timeline_subtitle"
tools:background="#drawable/rounded_rectangle_radius_12dp"
tools:text="2h 25m Layover at PEK"
tools:visibility="visible" />
</androidx.constraintlayout.widget.ConstraintLayout>
Rounded rectangle drawable rounded_rectangle_radius_12dp:
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle"
android:tint="#color/porcelain">
<corners android:radius="12dp" />
<padding android:left="12dp"
android:right="12dp"
android:top="2dp"
android:bottom="2dp"/>
</shape>
I would define padding inside your trip_timeline_flight_layover TextView instead of your drawable:
<TextView
android:id="#+id/trip_timeline_flight_layover"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:paddingTop="2dp"
android:paddingBottom="2dp"
android:paddingStart="12dp"
android:paddingEnd="12dp"
android:background="#drawable/rounded_rectangle_radius_12dp"
android:textColor="#color/emperor"
android:visibility="gone"
app:layout_constraintEnd_toEndOf="#id/navigate_arrow"
app:layout_constraintStart_toStartOf="#+id/trip_timeline_subtitle"
app:layout_constraintTop_toBottomOf="#id/trip_timeline_subtitle"
tools:background="#drawable/rounded_rectangle_radius_12dp"
tools:text="2h 25m Layover at PEK"
tools:visibility="visible" />
And then set layout_marginStart of trip_timeline_title equal to the padding of your layover``TextView, in this case, 12dp.
EDIT:
I actually don't think you have to define padding inside your TextView, just making margin of your title equal to the side padding should work.
how can I align TextView to end of ImageView that TextView would be centered vertically using ConstraintLayout I managed to align it to the end of ImageView but it's not centered vertically because ImageView is a bit bigger than TextView I know how to do it using RelativeLayout, but wanna use best practices and use only ConstraintLayout
Here is an example how it should look (Cloud icon and text Last Backup)
Just use app:layout_constraintTop_toTopOf and app:layout_constraintBottom_toBottomOf together, and it will cause the TextView center vertical align to the ImageView.
<ImageView
android:id="#+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#mipmap/ic_launcher"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="16dp"
android:text="Last Backup"
app:layout_constraintStart_toEndOf="#+id/imageView"
app:layout_constraintTop_toTopOf="#+id/imageView"
app:layout_constraintBottom_toBottomOf="#+id/imageView"
/>
Use drawable left for your TextView like this and change gravity by your root layout as you want
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:drawablePadding="15dp"
android:drawableLeft="#drawable/google"
android:text="#string/textGoogle" />
You can do like in using ConstraintLayout:
Set Textview top and bottom constrain to ImageView top and bottom.
These constraints will set TextView in center of ImageView.
<?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.support.v7.widget.AppCompatImageView
android:id="#+id/imageview"
android:layout_width="50dp"
android:layout_height="50dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/ic_icon"/>
<android.support.v7.widget.AppCompatTextView
android:id="#+id/textview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView"
android:textColor="#android:color/white"
android:textSize="14sp"
app:layout_constraintStart_toEndOf="#+id/imageview"
app:layout_constraintBottom_toBottomOf="#+id/imageview"
app:layout_constraintTop_toTopOf="#+id/imageview"/>
</android.support.constraint.ConstraintLayout>
Set parent constrain end top and bottom. These constraints will set center of constrain
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintEnd_toEndOf="parent".
<ImageView
android:id="#+id/ivImg"
android:layout_width="#dimen/dimen_24dp"
android:layout_height="#dimen/dimen_24dp"
android:layout_marginTop="#dimen/dimen_40dp"
android:src="#android:drawable/ic_menu_search"
android:layout_marginEnd="#dimen/dimen_20dp"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintEnd_toStartOf="#+id/txtlbResult"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/txtlbResult"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/black"
android:textSize="#dimen/text14sp"
android:layout_marginTop="#dimen/dimen_40dp"
android:text="#string/your_result_are_here"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/ivImg"
app:layout_constraintTop_toTopOf="parent" />