I have an issue with constraint Layout overlapping. Basically, I have an image on the left and text view on the right. I am trying to have the text in the text view to appear in the centre of the screen, and it's appearing as expected. But when the text size is too big, the text view is overlapping with the image view.
If I set the TextView left constraint to the right of ImageView, the overlapping is not occurring. But when the text is small, the text is not appearing in the centre of the screen.
I tried to implement solutions from this post. But, it's not working for me. Kindly help me with this issue.
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="35dp"
android:gravity="center_vertical"
android:orientation="horizontal"
app:layout_constraintTop_toTopOf="parent">
<ImageView
android:id="#+id/imgBack"
android:layoutWidth="wrap_content"
android:layoutHeight="match_parent"
android:contentDescription="#null"
android:src="#drawable/image"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/tvUserName"
android:layout_width="0dp"
android:layout_height="match_parent"
android:ellipsize="end"
android:text="I have a problem when the text is so big. It's overlapping"
android:fontFamily="#font/proxima_nova_semibold"
android:gravity="center"
android:lines="1"
android:textColor="#color/white"
android:textSize="#dimen/header_sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
/>
</androidx.constraintlayout.widget.ConstraintLayout>
Please try this solution.
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="350dp"
android:gravity="center_vertical"
android:orientation="horizontal"
app:layout_constraintTop_toTopOf="parent">
<ImageView
android:id="#+id/imgBack"
android:layout_width="0dp"
android:layout_height="match_parent"
android:contentDescription="#null"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#id/tvUserName"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:src="#tools:sample/backgrounds/scenic" />
<TextView
android:id="#+id/tvUserName"
android:layout_width="200dp"
android:layout_height="match_parent"
android:ellipsize="end"
android:gravity="center"
android:lines="1"
android:text="I have a problem when the text is so big. It's overlapping"
android:textColor="#color/white"
android:textSize="12sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
It doesn't overlap anymore:
<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:orientation="horizontal">
<ImageView
android:id="#+id/imgBack"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#null"
android:src="#mipmap/ic_launcher"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/tvUserName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="I have a problem when the text is so big. It's overlapping"
android:textSize="20sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toEndOf="#+id/imgBack"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
Beside the issues the other user respond, i.e app:layout_constraintStart_toStartOf="parent" or wrap_content to the ImageView and the like, these attributes:
android:layoutWidth="wrap_content"
android:layoutHeight="match_parent"
Had typo.
Related
i have a image and a textview in a constraint layout, what what I am trying to do is, to centre both image and textview in the centre and when the text is smaller I want it to expand from the centre when the text is longer
What I want to get to is
What I have at the moment is
When the text is longer it is fine but when the text is smaller I want them at the centre
is that possible please
code I have at the moment
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/tariffTileHeader"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent">
<androidx.appcompat.widget.AppCompatImageView
android:id="#+id/tariffIconIV"
android:layout_width="36dp"
android:layout_height="36dp"
android:layout_marginTop="4dp"
android:src="#drawable/ic_electricity_circle_logo"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/tariffDescTV"
style="#style/Text.Large.Bold"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:textAlignment="center"
android:lines="3"
app:layout_constraintStart_toEndOf="#+id/tariffIconIV"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:text="This is a very " />
</androidx.constraintlayout.widget.ConstraintLayout>
You can horizontally chain the two views and set the chainStyle to packed.
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/tariffTileHeader"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<androidx.appcompat.widget.AppCompatImageView
android:id="#+id/tariffIconIV"
android:layout_width="36dp"
android:layout_height="36dp"
android:layout_marginTop="4dp"
android:src="#drawable/ic_launcher_background"
app:layout_constraintEnd_toStartOf="#+id/tariffDescTV"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/tariffDescTV"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:lines="3"
android:textAlignment="center"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/tariffIconIV"
app:layout_constraintTop_toTopOf="parent"
tools:text="This is a very " />
</androidx.constraintlayout.widget.ConstraintLayout>
I think you can constraint baseline of your imageView to baseline of your textView
<androidx.appcompat.widget.AppCompatImageView
android:id="#+id/tariffIconIV"
android:layout_width="36dp"
android:layout_height="36dp"
android:layout_marginTop="4dp"
android:src="#drawable/ic_electricity_circle_logo"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintBaseline_toBaselineOf="#id/tariffDescTV" />
your requirement need some trick:
capsulate both ImageView and TextView inside a LinearLayout(Horizontal)
then put linearlayout(here is our parent for ImageView and TextView) as child inside constraintlayout and constraint it by:
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
by this solution,when your text get smaller or get longer, both component(ImageView and TextView) are in center of screen and next to each other
here is my full sample XML file:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayoutxmlns: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">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<ImageView
android:id="#+id/imageView2"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_weight="1"
tools:srcCompat="#tools:sample/avatars" />
<TextView
android:id="#+id/textView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:text="lorium ipsum" />
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
I hope this answer help you
I need to create chain with ConstraintLayout.I want the TextView to be attached to the left side, the text is immediately followed by a ImageView, and another ImageView is attached to the right side of the screen. See an example.
If the TextView contains long text, I need the text to go to another line. That is, so that the TextView does not overlap with the image view on the right, but is limited to margin. See an example.
Here is my code:
<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"
tools:ignore="MissingPrefix">
<TextView
android:id="#+id/tvTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/text"
android:textColor="#color/black"
android:textSize="#dimen/text_size_14"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0" />
<ImageView
android:id="#+id/ivFirst"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginEnd="16dp"
android:src="#drawable/ic_first"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#id/ivSecond"
app:layout_constraintHorizontal_bias="0"
app:layout_constraintStart_toEndOf="#id/tvTitle"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0" />
<ImageView
android:id="#+id/ivSecond"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_second"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0" />
</androidx.constraintlayout.widget.ConstraintLayout>
If the text is not long, then everything works well, but if the text is long, then it is superimposed on the ImageView and goes beyond the screen. I tried to use chain but nothing worked. Please, help me.
You can achieve this by fixing ivSecond to the end of the parent and then creating a horizontal chain of tvTitle and ivFirst, so long as you apply a packed chain style and a bias of 0 to the chain and use constrainedWidth on the text view.
<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">
<TextView
android:id="#+id/tvTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constrainedWidth="true"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#id/ivFirst"
app:layout_constraintHorizontal_bias="0"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:text="hello world"/>
<ImageView
android:id="#+id/ivFirst"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#id/ivSecond"
app:layout_constraintStart_toEndOf="#id/tvTitle"
app:layout_constraintTop_toTopOf="parent"/>
<ImageView
android:id="#+id/ivSecond"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>
When the text is short, the first image is right up against it:
When the text is long, the first image stops at the edge of the second image and the text wraps to another line:
you can do it with layout_constrainedWidth . For this your text view needs to be constrained horizontally . try the layout below i have made few changes in it .
<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"
tools:ignore="MissingPrefix">
<TextView
android:id="#+id/tvTitle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:textSize="14sp"
app:layout_constrainedWidth="true"
app:layout_constraintEnd_toStartOf="#+id/ivFirst"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0" />
<ImageView
android:id="#+id/ivFirst"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginEnd="16dp"
android:src="#mipmap/ic_launcher"
app:layout_constraintEnd_toStartOf="#id/ivSecond"
app:layout_constraintStart_toEndOf="#id/tvTitle"
app:layout_constraintTop_toTopOf="parent"
/>
<ImageView
android:id="#+id/ivSecond"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#mipmap/ic_launcher"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
/>
</androidx.constraintlayout.widget.ConstraintLayout>
You can use FlexboxLayout to wrap the tvTitle TextView & the ivFirst ImageView; So that it controls to wrap the content of the TextView to the next line and avoid pushing the ivFirst to the right/end.
<?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">
<com.google.android.flexbox.FlexboxLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:orientation="horizontal"
app:alignContent="center"
app:alignItems="center"
app:flexDirection="row"
app:flexWrap="nowrap"
app:layout_constraintBottom_toBottomOf="#+id/ivSecond"
app:layout_constraintEnd_toStartOf="#+id/ivSecond"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:id="#+id/tvTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/text"
android:textColor="#color/black"
android:textSize="#dimen/text_size_14"
app:layout_flexShrink="10000" />
<ImageView
android:id="#+id/ivFirst"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_first"
android:layout_marginStart="8dp"
android:layout_marginEnd="16dp"/>
</com.google.android.flexbox.FlexboxLayout>
<ImageView
android:id="#+id/ivSecond"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_second"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
Also make sure to add the gradle dependency at module level:
implementation 'com.google.android.flexbox:flexbox:3.0.0'
Preview:
I have to design this layout. Icon should stick to the textview.
This is what I've tried which looks exactly what is needed.
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingStart="#dimen/padding_m"
android:paddingTop="#dimen/padding_s"
android:paddingEnd="#dimen/padding_m"
android:paddingBottom="#dimen/padding_s"
app:layout_constraintTop_toTopOf="parent">
<LinearLayout
android:id="#+id/title_container"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#id/more_options"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:id="#+id/active_group_name"
style="#style/AppbarTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:maxLines="1"
app:layout_constrainedWidth="true"
tools:text="Ranjan Malav" />
<FrameLayout
android:id="#+id/account_option_icon_container"
android:layout_width="36dp"
android:layout_height="36dp"
android:layout_gravity="center"
android:layout_marginStart="#dimen/margin_xs"
android:background="#drawable/circle_background_36dp">
<ImageView
android:id="#+id/account_option_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
app:srcCompat="#drawable/ic_outline_settings_24" />
</FrameLayout>
</LinearLayout>
<ImageView
android:id="#+id/more_options"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_baseline_more_vert_24"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
But when the text is long, setting icon is getting hidden.
How can I give icon priority and let it take the space and then textview should wrap itself in the remaining space?
This works as intended. This answer on strackoverflow was helpful https://stackoverflow.com/a/44412219/6168272.
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingStart="#dimen/padding_m"
android:paddingTop="#dimen/padding_s"
android:paddingEnd="#dimen/padding_m"
android:paddingBottom="#dimen/padding_s"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:id="#+id/active_group_name"
style="#style/AppbarTitle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:maxLines="1"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#id/account_option_icon_container"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintWidth_default="wrap"
tools:text="Ranjan Ranjan Ranjan Ranjan Ranjan" />
<FrameLayout
android:id="#+id/account_option_icon_container"
android:layout_width="36dp"
android:layout_height="36dp"
android:layout_gravity="center"
android:layout_marginStart="#dimen/margin_xs"
android:background="#drawable/circle_background_36dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#id/more_options"
app:layout_constraintStart_toEndOf="#id/active_group_name"
app:layout_constraintTop_toTopOf="parent">
<ImageView
android:id="#+id/account_option_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
app:srcCompat="#drawable/ic_outline_settings_24" />
</FrameLayout>
<ImageView
android:id="#+id/more_options"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_baseline_more_vert_24"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
Create your ImageView before textview
I don't think you can do that, and i think it's bad design to have and ImageView that have dynamic position based on the width of the title.
What best is i think to put your imageView as action in your menu.xml
I tried to add on the top right corner of my app a notificationBar which shows how many msgs are in the inbox.
Later on I want to add a custom drawable to my background, for now I added only a black color as bg to reach my goal, as you can see on the left side of my image: This is a TextView constraint to the END of my ImageView. I want my Background to go behind the imageview BUT not to go outside of its dimensions neither to start before the imageview (you would see the top left and bottom right corner of the textview - rectangle
I'm stuck on that with the following Code:
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/msg_bar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintEnd_toEndOf="parent"
>
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/black"
app:layout_constraintStart_toEndOf="#+id/imageView"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="0 MSGs"
android:textColor="#color/white"
android:paddingStart="#dimen/default_padding"
android:padding="#dimen/small_padding"
/>
</androidx.constraintlayout.widget.ConstraintLayout>
<ImageView
android:id="#+id/imageView"
android:layout_width="46dp"
android:layout_height="0dp"
app:layout_constraintDimensionRatio="W, 1:1"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:background="#drawable/ic_contact"/>
</androidx.constraintlayout.widget.ConstraintLayout>
How can I fix this?
If no other view is constrained to the TextView you can simply apply a negative "x" translation to the TextView: android:translationX="-15dp". I chose -15dp but it could be another negative value that works for your layout.
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/msg_bar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#android:color/black"
android:padding="#dimen/small_padding"
android:paddingStart="#dimen/default_padding"
android:text="0 MSGs"
android:textColor="#color/white"
android:translationX="-15dp"
app:layout_constraintBottom_toBottomOf="#id/imageView"
app:layout_constraintStart_toEndOf="#+id/imageView"
app:layout_constraintTop_toTopOf="#id/imageView" />
<ImageView
android:id="#+id/imageView"
android:layout_width="46dp"
android:layout_height="0dp"
android:background="#drawable/ic_contact"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintDimensionRatio="W, 1:1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
SebastienRieu's solution should work but you may need to add a margin to the start of the TextView to hide its top-left and bottom-left corners.
change constraint of textview to start with imageView and add text alignment to textview
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/msg_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintEnd_toEndOf="parent" >
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#color/black"
app:layout_constraintStart_toStartOf="#+id/imageView"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent" >
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="0 MSGs"
android:textColor="#color/white"
android:paddingStart="#dimen/default_padding"
android:padding="#dimen/default_padding"
android:textAlignment="textEnd"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
<ImageView
android:id="#+id/imageView"
android:layout_width="46dp"
android:layout_height="0dp"
app:layout_constraintDimensionRatio="W, 1:1"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:background="#drawable/ic_contact" />
</androidx.constraintlayout.widget.ConstraintLayout>
Constraint layout works as a frame layout. For such designs, we can use guidelines. Guidelines work greats for such a view .
I have made a few changes in your layout, I hope this can be helpful.
<?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:id="#+id/msg_bar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#android:color/darker_gray"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:id="#+id/text_msg_count"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/black_primary"
android:paddingStart="#dimen/space_28"
android:text="0 MSGs"
android:textAlignment="textEnd"
android:textColor="#color/white_color"
android:layout_marginEnd="#dimen/space_28"
android:paddingEnd="10dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toBottomOf="#id/imageView"
app:layout_constraintStart_toStartOf="#+id/guideline"
app:layout_constraintTop_toTopOf="#+id/imageView" />
<ImageView
android:id="#+id/imageView"
android:layout_width="46dp"
android:layout_height="0dp"
android:layout_margin="#dimen/space_28"
android:background="#drawable/ic_contact"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintDimensionRatio="W, 1:1"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.3"
app:layout_constraintEnd_toEndOf="#id/imageView"
app:layout_constraintStart_toStartOf="#id/imageView" />
</androidx.constraintlayout.widget.ConstraintLayout>
Below link, you can use to get more info on guidelines https://constraintlayout.com/basics/guidelines.html
I want to create a dialog with round corners using ConstraintLayout, DialogFragment and a custom background.
The dialog must have a scroll area at the top and a custom button at the bottom. The dialog should resize in height based on the size of the scroll view.
I tried on Android 6 and Android 9 but the issue with the above combination is present on both platforms.
<?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="wrap_content"
android:fitsSystemWindows="true"
android:paddingStart="12dp"
android:paddingTop="8dp"
android:paddingEnd="12dp"
android:paddingBottom="8dp"
app:layout_constrainedHeight="true">
<ImageView
android:id="#+id/iv_icon"
android:layout_width="32dp"
android:layout_height="32dp"
android:contentDescription="#null"
android:scaleType="fitXY"
android:src="#drawable/animated_vector_cross"
app:layout_constraintBottom_toTopOf="#+id/tv_title"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/tv_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:paddingStart="8dp"
android:paddingEnd="8dp"
android:text="#string/info"
android:textColor="#color/sweet_dialog_bg_color_dark"
android:textSize="#dimen/fs_XXLarge_Land"
android:textStyle="bold"
app:layout_constraintBottom_toTopOf="#+id/scrollView5"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/iv_icon" />
<TextView
android:id="#+id/bt_ok"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="4dp"
android:layout_marginEnd="8dp"
android:background="#drawable/dialog_accept_bt_ripple"
android:clickable="true"
android:focusable="true"
android:paddingStart="8dp"
android:paddingTop="0dp"
android:paddingEnd="8dp"
android:paddingBottom="0dp"
android:text="#string/dialog_ok"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="#+id/guideline3"
app:layout_constraintTop_toBottomOf="#+id/scrollView5"
tools:ignore="ContentDescription" />
<ScrollView
android:id="#+id/scrollView5"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:fillViewport="false"
android:orientation="vertical"
app:layout_constrainedHeight="true"
app:layout_constraintBottom_toTopOf="#+id/bt_ok"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tv_title">
<TextView
android:id="#+id/tv_message"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/lorem_ipsum"
android:textSize="#dimen/fs_XLarge_Land" />
</ScrollView>
<android.support.constraint.Guideline
android:id="#+id/guideline3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.5" /> </android.support.constraint.ConstraintLayout>
The problem is that if the text that I put inside the scroll view is big the bottom button will be pushed outside of the dialog.
With little text the dialog shrinks but the bottom button is correctly displayed.
With big text the button is pushed outside.
What settings do I miss?
The issue was solved by wrapping the ConstraintLayout with a LinearLayout and using wrap_content parameters.