ConstraintLayout TextView cutting text off - android

I have a strange problem where the text in a TextView is not being displayed if it's wrapping to a new line.
This screenshot shows my issue:
The bold text is causing a word to wrap to the next line but it's not being shown. This is what it looks like without the bold:
And this is what it looks like if I force two lines using android:lines="2":
This is the code I'm using:
<?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/episode_row_item_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:padding="5dp"
android:foreground="?android:attr/selectableItemBackground"
android:orientation="horizontal">
<ImageView
android:id="#+id/episode_row_item_title_thumbnail"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:scaleType="fitCenter"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:visibility="gone"
/>
<!-- This is the problematic textview-->
<TextView
android:id="#+id/episode_row_item_title"
android:layout_width="0dp"
android:layout_height="match_parent"
android:lineSpacingExtra="2dp"
android:layout_marginEnd="8dp"
android:breakStrategy="simple"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toStartOf="#+id/episode_row_item_download"
android:foreground="?android:attr/selectableItemBackground"
/>
<ImageView
android:id="#+id/episode_row_item_download"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingTop="2dp"
app:layout_constraintTop_toTopOf="#+id/episode_row_item_title"
app:layout_constraintEnd_toEndOf="parent"
android:foreground="?android:attr/selectableItemBackground"
/>
<TextView
android:id="#+id/episode_row_item_date"
android:layout_width="0dp"
android:layout_height="match_parent"
android:textSize="13sp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/episode_row_item_title"
app:layout_constraintEnd_toStartOf="#+id/episode_row_item_duration"
android:layout_marginTop="4dp"
/>
<TextView
android:id="#+id/episode_row_item_duration"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="13sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/episode_row_item_title"
android:layout_marginTop="4dp"
/>
</androidx.constraintlayout.widget.ConstraintLayout>
I've tried setting the width to wrap_content and changing the padding and margins but nothing works.
I should mention this layout is a row in a RecyclerView if that makes a difference.


<?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/episode_row_item_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="5dp"
android:foreground="?android:attr/selectableItemBackground">
<ImageView
android:id="#+id/episode_row_item_title_thumbnail"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:scaleType="fitCenter"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:visibility="visible"
/>
<!-- This is the problematic textview-->
<TextView
android:id="#+id/episode_row_item_title"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:lineSpacingExtra="2dp"
android:layout_marginEnd="8dp"
android:textStyle="bold"
android:text="Episode 1010 Christina Hendericks"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/episode_row_item_title_thumbnail"
app:layout_constraintEnd_toStartOf="#+id/episode_row_item_download"
android:foreground="?android:attr/selectableItemBackground"
android:layout_marginRight="8dp"/>
<ImageView
android:id="#+id/episode_row_item_download"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingTop="2dp"
app:layout_constraintTop_toTopOf="#+id/episode_row_item_title"
app:layout_constraintEnd_toEndOf="parent"
android:foreground="?android:attr/selectableItemBackground"
/>
<TextView
android:id="#+id/episode_row_item_date"
android:layout_width="0dp"
android:layout_height="match_parent"
android:textSize="13sp"
app:layout_constraintStart_toStartOf="parent"
android:text="Yesterday"
app:layout_constraintTop_toBottomOf="#+id/episode_row_item_title"
app:layout_constraintEnd_toStartOf="#+id/episode_row_item_duration"
android:layout_marginTop="4dp"/>
<TextView
android:id="#+id/episode_row_item_duration"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="13sp"
android:text="01:02:24"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/episode_row_item_download"
android:layout_marginTop="4dp"/>
</androidx.constraintlayout.widget.ConstraintLayout>
Try using the above layout with correct drawables

Related

How to set Textview height between two imageview

I have a TextView to display order items and quantity. But it overlaps with the divider lines above and below. How to fix this?
<?xml version="1.0" encoding="utf-8"?><!--https://www.youtube.com/watch?v=18VcnYN5_LM !-->
<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"
android:animateLayoutChanges="true"
android:animationCache="true"
android:gravity="center|start"
android:orientation="vertical"
android:padding="0dp">
<com.google.android.material.card.MaterialCardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="5dp"
android:layout_marginEnd="5dp"
android:layout_marginBottom="15dp"
android:layout_marginTop="10dp"
android:elevation="50dp"
app:strokeColor="#color/grey600"
app:strokeWidth="1dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.skydoves.androidribbon.RibbonView
android:id="#+id/order_status_ribbon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="#font/poppins_bold"
android:letterSpacing=".10"
android:text="#string/order_status"
android:textColor="#FFFFFF"
android:textSize="12sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0"
app:ribbon_background_color="#color/primaryYellow"
app:ribbon_padding_top="4dp"
app:ribbon_ribbonRadius="4dp"
app:textAllCaps="true" />
<TextView
android:id="#+id/order_id"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:fontFamily="#font/poppins_semibold"
android:text="#string/sample_order_id"
android:textColor="#000000"
android:textSize="14sp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/order_status_ribbon" />
<TextView
android:id="#+id/order_date_time"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="4dp"
android:fontFamily="#font/poppins"
android:text="#string/date_amp_time"
android:textColor="#color/grey600"
android:textSize="11sp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/order_id" />
<ImageView
android:id="#+id/dotted_line_order_after_date_time"
android:layout_width="match_parent"
android:layout_height="5dp"
android:layout_marginTop="8dp"
android:layerType="software"
android:src="#drawable/dotted"
app:layout_constraintTop_toBottomOf="#+id/order_date_time"
tools:layout_editor_absoluteX="0dp" />
<TextView
android:id="#+id/order_items"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:fontFamily="#font/poppins"
android:text="#string/order_items_and_quantity"
android:textColor="#color/black"
app:layout_constraintBottom_toTopOf="#+id/dotted_line_order"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/dotted_line_order_after_date_time"
app:layout_constraintVertical_bias="0.418" />
<ImageView
android:id="#+id/dotted_line_order"
android:layout_width="match_parent"
android:layout_height="5dp"
android:layout_marginTop="80dp"
android:layerType="software"
android:src="#drawable/dotted"
app:layout_constraintTop_toBottomOf="#+id/order_date_time"
tools:layout_editor_absoluteX="0dp" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:fontFamily="#font/poppins_medium"
android:gravity="center"
android:paddingBottom="10dp"
android:text="#string/view_details"
android:textColor="#color/black"
app:layout_constraintTop_toBottomOf="#+id/dotted_line_order"
tools:layout_editor_absoluteX="0dp" />
</androidx.constraintlayout.widget.ConstraintLayout>
</com.google.android.material.card.MaterialCardView>
</androidx.constraintlayout.widget.ConstraintLayout>
Sample image is found in https://imgur.com/a/EPsUeI3
As you can see in the image the order items and quantity TextView is overlapping with ImageView. The text for TextView comes from a StringBuffer
sb.append(n.getInt("quantiy"));
sb.append(" X ");
sb.append(n.getString("name"));
sb.append("\n");
holder.orderItems.setText(sb);

The dotted_line_order ImageView constrained to order_date_time TextView Using app:layout_constraintTop_toBottomOf="#+id/order_date_time".
While the overlapped order_items TextView constrained to dotted_line_order ImageView with app:layout_constraintBottom_toTopOf="#+id/dotted_line_order".
Both constraints will make the order_items overlaps with the dotted_line_order.
You need to replace the 1st constraint to be constrained to the order_items instead of the order_date_time, so it should be app:layout_constraintTop_toBottomOf="#+id/order_items"
<ImageView
android:id="#+id/dotted_line_order"
android:layout_width="match_parent"
android:layout_height="5dp"
android:layout_marginTop="80dp"
android:layerType="software"
app:layout_constraintTop_toBottomOf="#+id/order_items"
android:src="#drawable/dotted" />
Also, check if 80dp margin as it seems some how big.

Align textviews in left and right side of a linear layout?

I currently doing one of the project from "Google Android Dev". I am facing a problem in my layout design. Kindly help me how to align one textview in left side and right side of a linear layout.
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="194dp"
android:layout_marginBottom="8dp"
android:scaleType="centerCrop"
app:layout_constraintBottom_toTopOf="#+id/textAppearanceHeadline6"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:srcCompat="#drawable/faye" />
<TextView
android:id="#+id/textAppearanceHeadline6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:text="Faye"
android:textColor="#android:color/black"
android:textSize="16sp"
android:textStyle="bold"
app:layout_constraintStart_toStartOf="#+id/imageView"
app:layout_constraintTop_toBottomOf="#+id/imageView" />
<LinearLayout
android:id="#+id/textAppearanceBody1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="#+id/textAppearanceHeadline6"
app:layout_constraintTop_toBottomOf="#+id/textAppearanceHeadline6">
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:layout_marginBottom="8dp"
android:text="Age : 7"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="start|right"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:text="Hobbies: Sunbathing"
android:textColor="#5A5656" />
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
I am new to android so you are most welcome for code review.

Try to change your layout like this:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="194dp"
android:layout_marginBottom="8dp"
android:scaleType="centerCrop"
app:layout_constraintBottom_toTopOf="#+id/textAppearanceHeadline6"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:srcCompat="#drawable/faye" />
<TextView
android:id="#+id/textAppearanceHeadline6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:text="Faye"
android:textColor="#android:color/black"
android:textSize="16sp"
android:textStyle="bold"
app:layout_constraintStart_toStartOf="#+id/imageView"
app:layout_constraintTop_toBottomOf="#+id/imageView" />
<LinearLayout
android:id="#+id/textAppearanceBody1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:orientation="horizontal"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="#+id/textAppearanceHeadline6"
app:layout_constraintTop_toBottomOf="#+id/textAppearanceHeadline6">
<TextView
android:id="#+id/textView2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center|start"
android:text="Age : 7"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hobbies: Sunbathing"
android:gravity="center"
android:textColor="#5A5656" />
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

Use it like this
<TextView
android:id="#+id/textView2"
android:layout_width="0dp"
android:layout_gravity="center_vertical"
android:weight="1"
android:layout_height="wrap_content"
android:text="Age : 7"/>
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:text="Hobbies: Sunbathing"
android:textColor="#5A5656" />
weight here will allow the first textview to take all the space and will leave the required space for the hobby textview.
Use it as per your requirement.

Android Studio xml object over object

how can a put a TextView befor a Button in xml file? My textview always behind the button. I am in a constraintlayout. I want to make a little number in the top right corner of the button. I made a drawable for that, hat it looks nice.
It would be nice if someone could help! Thanks!!!
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/MainLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="at.kessapps.cookieclicker.MainActivity">
<TextView
android:id="#+id/clicker_discount"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/sale_corner"
android:text="20%"
android:textStyle="bold"
app:layout_constraintBottom_toTopOf="#+id/shopbutton"
app:layout_constraintRight_toRightOf="#id/shopbutton"
app:layout_constraintTop_toTopOf="#id/shopbutton" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="350dp"
android:layout_height="80dp"
android:layout_marginTop="16dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.508"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/cooltext348859404219232" />
<Button
android:id="#+id/shopbutton"
style="#style/Widget.AppCompat.Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="16dp"
android:layout_marginBottom="16dp"
android:hapticFeedbackEnabled="false"
android:onClick="toShop"
android:text="Shop"
android:drawableLeft="#drawable/ic_store"
android:textColor="#color/colorWhite"
android:paddingLeft="5dp"
android:background="#drawable/button_neutral_background"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent" />
<ImageView
android:id="#+id/onOption"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginStart="16dp"
android:layout_marginBottom="16dp"
android:onClick="toOption"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:srcCompat="#drawable/optionen" />
</androidx.constraintlayout.widget.ConstraintLayout>
here a picture

Please use this layout to put the TextView on top of Button view:
You need to add android:translationZ="10dp" in TextView
<?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/MainLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="at.kessapps.cookieclicker.MainActivity">
<TextView
android:id="#+id/clicker_discount"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:translationZ="10dp"
android:background="#drawable/sale_corner"
android:text="20%"
android:textStyle="bold"
app:layout_constraintBottom_toTopOf="#+id/shopbutton"
app:layout_constraintRight_toRightOf="#id/shopbutton"
app:layout_constraintTop_toTopOf="#id/shopbutton" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="350dp"
android:layout_height="80dp"
android:layout_marginTop="16dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.508"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/cooltext348859404219232" />
<Button
android:id="#+id/shopbutton"
style="#style/Widget.AppCompat.Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="16dp"
android:layout_marginBottom="16dp"
android:hapticFeedbackEnabled="false"
android:onClick="toShop"
android:text="Shop"
android:drawableLeft="#drawable/ic_store"
android:textColor="#color/colorWhite"
android:paddingLeft="5dp"
android:background="#drawable/button_neutral_background"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent" />
<ImageView
android:id="#+id/onOption"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginStart="16dp"
android:layout_marginBottom="16dp"
android:onClick="toOption"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:srcCompat="#drawable/optionen" />
</androidx.constraintlayout.widget.ConstraintLayout>

Take all free space between elements in ConstraintLayout

I need layout with three elements:
TextView1 with fixed width
TextView2 with dynamic width
One more TextView3 with fixed width
All elements must be visible on the screen at the same time.
If TextView2 contains a lot of text, the layout should be like this:
If TextView2 contains contains little text, the layout should be like this:
How can I create it using ConstraintLayout ?

Put your TextViews in a horitzontal packed chain with a bias of 1 to align them to parent's end. To make sure that the middle TextView doesn't overlap other Views and satisfies its constraints you need to set app:layout_constrainedWidth="true" attribute for it.
<?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="match_parent">
<TextView
android:id="#+id/view1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintHorizontal_bias="1"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#id/view2"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:text="view1"/>
<TextView
android:id="#+id/view2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constrainedWidth="true"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#id/view3"
app:layout_constraintStart_toEndOf="#id/view1"
app:layout_constraintTop_toTopOf="parent"
android:text="view2"/>
<TextView
android:id="#+id/view3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/view2"
app:layout_constraintTop_toTopOf="parent"
android:text="view3"/>
</androidx.constraintlayout.widget.ConstraintLayout>

Here is the sample code:
Take a look:
Design.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/textView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#ff0000"
android:gravity="center"
android:text="TextView"
app:layout_constraintBottom_toBottomOf="#+id/textView3"
app:layout_constraintEnd_toStartOf="#+id/textView3"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/textView3" />
<TextView
android:id="#+id/textView3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#63f542"
android:gravity="center"
android:text="TextView"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/textView4"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/textView"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/textView4"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#ff00ff"
android:gravity="center"
android:text="TextView"
app:layout_constraintBottom_toBottomOf="#+id/textView3"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/textView3"
app:layout_constraintTop_toTopOf="#+id/textView3" />
</androidx.constraintlayout.widget.ConstraintLayout>
</LinearLayout>
Output:

You can create the view with the code below, but the only constraint is you have to give max width to centered text view
<?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/linearLayout17"
android:layout_width="match_parent"
android:layout_height="200dp"
android:background="#color/hint_color">
<TextView
android:id="#+id/txt1"
android:layout_width="60dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:gravity="center"
android:padding="5dp"
android:text="text1"
android:textColor="#color/txt_color"
android:textSize="#dimen/labels_size"
app:layout_constraintBottom_toBottomOf="#+id/txt2"
app:layout_constraintEnd_toStartOf="#+id/txt2"
app:layout_constraintHorizontal_bias="1"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/txt2" />
<TextView
android:id="#+id/txt2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:gravity="center"
android:padding="5dp"
android:maxWidth="200dp"
android:text="text2asdadadasdaasdasdddadadadaddadadasdasdasdasdasdasddadasdasdadasdasdasdasdasdasdasdasdasddadadadadadada"
android:textColor="#color/txt_color"
android:textSize="#dimen/labels_size"
app:layout_constraintBottom_toBottomOf="#+id/txt3"
app:layout_constraintEnd_toStartOf="#+id/txt3"
app:layout_constraintTop_toTopOf="#+id/txt3" />
<TextView
android:id="#+id/txt3"
android:layout_width="60dp"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:gravity="center"
android:padding="5dp"
android:text="text3"
android:textColor="#color/txt_color"
android:textSize="#dimen/labels_size"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

-Layout breaks when TextView is too long

I'm using RecyclerView with ConstrainLayout to list all files like this
But somehow the space between the first line and the second line is increased when the text is long (the above picture). I don't know exactly what is the problem. Here is my code:
item.xml:
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/layoutItem"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:foreground="?android:attr/selectableItemBackground">
<ImageView
android:id="#+id/imgFile"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="4dp"
android:layout_marginTop="4dp"
android:layout_marginBottom="4dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/ic_folder" />
<TextView
android:id="#+id/txtFileName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="4dp"
android:layout_marginBottom="4dp
app:layout_constraintBottom_toTopOf="#+id/txtLastModified"
app:layout_constraintStart_toEndOf="#+id/imgFile"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/txtLastModified"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginBottom="4dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toEndOf="#+id/imgFile"
app:layout_constraintTop_toBottomOf="#+id/txtFileName" />
<TextView
android:id="#+id/txtAdditionalInfo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="12dp"
app:layout_constraintBottom_toBottomOf="#+id/txtLastModified"
app:layout_constraintStart_toEndOf="#+id/txtLastModified"
app:layout_constraintTop_toTopOf="#+id/txtLastModified" />
</android.support.constraint.ConstraintLayout>
Bonus:

Add android:maxLines="1" for the textview 'txtFileName'

Categories

Resources