Hi I have made a custom listview where each row in the row item layout has three textviews. I am fetching data from the server and displaying in the listview. When there is a large chunk of text in the first textview, the first textview starts overlapping the other two textviews. I want all the textviews in one line. How do I do this?
This is my listview row item layout:
<?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:padding="8dp">
<TextView
android:id="#+id/ingredientName"
style="#style/MyTextFont"
android:lines="3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="28dp"
android:layout_marginTop="16dp"
android:text="TextView"
android:ellipsize="none"
android:scrollHorizontally="false"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/quantity"
style="#style/MyTextFont"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="2dp"
android:layout_marginStart="8dp"
android:layout_marginTop="16dp"
android:text="TextView"
app:layout_constraintEnd_toStartOf="#+id/measureTv"
app:layout_constraintHorizontal_bias="0.94"
app:layout_constraintStart_toEndOf="#+id/ingredientName"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/measureTv"
style="#style/MyTextFont"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="16dp"
android:layout_marginTop="16dp"
android:text="TextView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
You can use LinearLayout in place of ConstraintLayout with layout_weight.
<?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:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="8dp">
<TextView
android:id="#+id/ingredientName"
style="#style/MyTextFont"
android:lines="3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="28dp"
android:layout_marginTop="16dp"
android:text="TextView"
android:ellipsize="none"
android:scrollHorizontally="false"
android:layout_weight:"1"
/>
<TextView
android:id="#+id/quantity"
style="#style/MyTextFont"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="2dp"
android:layout_marginStart="8dp"
android:layout_marginTop="16dp"
android:text="TextView"
android:layout_weight:"1" />
<TextView
android:id="#+id/measureTv"
style="#style/MyTextFont"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="16dp"
android:layout_marginTop="16dp"
android:text="TextView"
android:layout_weight:"1"/>
</LinearLayout>
You should use these below attributes in your TextView tag.
android:maxLines="1"
android:ellipsize="end"
Or
In Case you want to scroll the Text from right to left in the same
TextView (to see complete Text), try using this below code :-
android:ellipsize="marquee"
When using constrainLayouts, make sure you give width or height as 0dp if you are making constraints on both the sides.
In your case the textview is wrap content and it will overlap other textviews no matter what, simply change it to 0dp and it will work perfectly.
Making constraint will lead to multiple lines text, if you dont want that define the maxLines in the textview and use ellipse end as well
<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:padding="8dp">
<TextView
android:id="#+id/ingredientName"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="28dp"
android:layout_marginTop="16dp"
android:lines="3"
android:scrollHorizontally="false"
android:text="TextVidasdsdadadsadadasdaew"
app:layout_constraintEnd_toStartOf="#+id/quantity"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/quantity"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="2dp"
android:layout_marginStart="8dp"
android:layout_marginTop="16dp"
android:text="TextView"
app:layout_constraintEnd_toStartOf="#+id/measureTv"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/ingredientName"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/measureTv"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="16dp"
android:layout_marginTop="16dp"
android:text="TextViedssadadasdasdasdasdasdw"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/quantity"
app:layout_constraintTop_toTopOf="parent" />
Related
I want to use a constraint layout that will be able to satisfy
(1) wrap the content of 2nd TextView
(2) extend the width of the 2nd TextView until it shows ellipses when there are no more spaces.
All these 3 TextViews are on the same line and the background colours are much needed.
<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:background="#android:color/white"
tools:context=".MainActivity">
<TextView
android:id="#+id/text1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:background="#android:color/darker_gray"
android:padding="4dp"
android:text="Text View 1"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/text2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:background="#android:color/holo_green_light"
android:ellipsize="end"
android:gravity="fill"
android:maxLines="1"
android:padding="4dp"
android:text="Short Text "
app:layout_constraintBottom_toBottomOf="#+id/text1"
app:layout_constraintStart_toEndOf="#+id/text1"
app:layout_constraintTop_toTopOf="#+id/text1" />
<TextView
android:id="#+id/text3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginEnd="16dp"
android:background="#android:color/holo_orange_dark"
android:padding="4dp"
android:text="Text View 3"
android:textAlignment="center"
app:layout_constraintBottom_toBottomOf="#+id/text1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="#+id/text1" />
</androidx.constraintlayout.widget.ConstraintLayout>
Constrain the middle text view to the last and use layout_constrainedWidth="true" with the width set to wrap_content instead of 0dp, as well as setting layout_constraintHorizontal_bias="0.0" so it aligns to the first view.
Short text, Long text
<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:background="#android:color/white">
<TextView
android:id="#+id/text1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:background="#android:color/darker_gray"
android:padding="4dp"
android:text="Text View 1"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/text2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:background="#android:color/holo_green_light"
android:ellipsize="end"
android:maxLines="1"
android:padding="4dp"
android:text="Short text"
app:layout_constrainedWidth="true"
app:layout_constraintBottom_toBottomOf="#+id/text1"
app:layout_constraintEnd_toStartOf="#+id/text3"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toEndOf="#+id/text1"
app:layout_constraintTop_toTopOf="#+id/text1" />
<TextView
android:id="#+id/text3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginEnd="16dp"
android:background="#android:color/holo_orange_dark"
android:padding="4dp"
android:text="Text View 3"
android:textAlignment="center"
app:layout_constraintBottom_toBottomOf="#+id/text1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="#+id/text1" />
</androidx.constraintlayout.widget.ConstraintLayout>
I'm trying to make a master-detail view and I have a ListView with items of following 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">
<TextView
android:id="#+id/tv_from"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:text="#string/start_point"
app:layout_constraintStart_toStartOf="#+id/tv_date"
app:layout_constraintTop_toBottomOf="#+id/tv_date_val" />
<TextView
android:id="#+id/tv_to_vall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="#string/end_point"
android:textSize="18sp"
android:baselineAligned="false"
app:layout_constraintBaseline_toBaselineOf="#+id/tv_to"
app:layout_constraintStart_toStartOf="#+id/tv_from_vall" />
<TextView
android:id="#+id/tv_to"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:text="#string/end_point"
app:layout_constraintStart_toStartOf="#+id/tv_from"
app:layout_constraintTop_toBottomOf="#+id/tv_from_vall" />
<TextView
android:id="#+id/tv_from_vall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginLeft="16dp"
android:gravity="center"
android:text="#string/start_point"
android:textSize="18sp"
app:layout_constraintBottom_toBottomOf="#+id/tv_from"
app:layout_constraintStart_toEndOf="#+id/tv_from"
app:layout_constraintTop_toTopOf="#+id/tv_from" />
<TextView
android:id="#+id/tv_date"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginLeft="16dp"
android:text="#string/date"
app:layout_constraintBaseline_toBaselineOf="#+id/tv_date_val"
app:layout_constraintStart_toStartOf="parent" />
<TextView
android:id="#+id/tv_date_val"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:gravity="center"
android:text="#string/date"
android:textSize="18sp"
app:layout_constraintStart_toStartOf="#+id/tv_from_vall"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
which produces:
and the text of two last lines of list item on right side is cut off. I would like line break if text is too long.
I tried android:lines="4", android:singleLine = "false"
Is there a way to fix it in TextView without changing the whole layout?
you need to change
Change right text view width with 0dp. You are using wrap_content and because of that this issue generate.
Change top to bottom constraint to all right textview, because when text increase it will overlap in your constraint.
<?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/tv_date"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginLeft="16dp"
android:text="date"
app:layout_constraintBaseline_toBaselineOf="#+id/tv_date_val"
app:layout_constraintStart_toStartOf="parent" />
<TextView
android:id="#+id/tv_date_val"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:gravity="start"
android:text="date text date text date text date text date text date text date text date text"
android:textSize="18sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="#+id/tv_from_vall"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/tv_from"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:text="start_point"
app:layout_constraintStart_toStartOf="#+id/tv_date"
app:layout_constraintTop_toTopOf="#+id/tv_from_vall" />
<TextView
android:id="#+id/tv_from_vall"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginLeft="16dp"
android:layout_marginTop="8dp"
android:gravity="start"
android:text="start_point start_point start_point start_point start_point start_point start_point"
android:textSize="18sp"
app:layout_constraintEnd_toEndOf="#+id/tv_date_val"
app:layout_constraintStart_toEndOf="#+id/tv_from"
app:layout_constraintTop_toBottomOf="#+id/tv_date_val" />
<TextView
android:id="#+id/tv_to"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:text="end_point"
app:layout_constraintStart_toStartOf="#+id/tv_from"
app:layout_constraintTop_toBottomOf="#+id/tv_from_vall" />
<TextView
android:id="#+id/tv_to_vall"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:baselineAligned="false"
android:gravity="start"
android:text="end_point end_point end_point end_point end_point end_point end_point"
android:textSize="18sp"
app:layout_constraintBaseline_toBaselineOf="#+id/tv_to"
app:layout_constraintEnd_toEndOf="#+id/tv_date_val"
app:layout_constraintStart_toStartOf="#+id/tv_from_vall" />
</androidx.constraintlayout.widget.ConstraintLayout>
You can solve this by:
Using a match constraints width of each TextView which is (0dp) instead of
wrap_content
Add end constraint to the end of the parent
app:layout_constraintEnd_toEndOf="parent"
So your layout would be:
<?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">
<TextView
android:id="#+id/tv_from"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:text="#string/start_point"
app:layout_constraintStart_toStartOf="#+id/tv_date"
app:layout_constraintTop_toBottomOf="#+id/tv_date_val" />
<TextView
android:id="#+id/tv_to_vall"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="center"
android:text="#string/end_point"
android:textSize="18sp"
android:baselineAligned="false"
app:layout_constraintBaseline_toBaselineOf="#+id/tv_to"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="#+id/tv_from_vall" />
<TextView
android:id="#+id/tv_to"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:text="#string/end_point"
app:layout_constraintStart_toStartOf="#+id/tv_from"
app:layout_constraintTop_toBottomOf="#+id/tv_from_vall" />
<TextView
android:id="#+id/tv_from_vall"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginLeft="16dp"
android:gravity="center"
android:text="#string/start_point"
android:textSize="18sp"
app:layout_constraintBottom_toBottomOf="#+id/tv_from"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/tv_from"
app:layout_constraintTop_toTopOf="#+id/tv_from" />
<TextView
android:id="#+id/tv_date"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginLeft="16dp"
android:text="#string/date"
app:layout_constraintBaseline_toBaselineOf="#+id/tv_date_val"
app:layout_constraintStart_toStartOf="parent" />
<TextView
android:id="#+id/tv_date_val"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:gravity="center"
android:text="#string/date"
android:textSize="18sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="#+id/tv_from_vall"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
I'm trying to create a two-row ConstraintLayout, each row has two views. The problem with what I have now is the left views is overlapping the right views, as you can see in the screenshot:
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:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:padding="5dp"
android:orientation="horizontal">
<TextView
android:id="#+id/title"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_constraintTop_toTopOf="parent"
/>
<ImageView
android:id="#+id/download"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:paddingStart="5dp"
android:paddingTop="5dp"
android:paddingBottom="5dp"
/>
<TextView
android:id="#+id/date"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:textSize="13sp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/title"
android:layout_marginTop="4dp"
/>
<TextView
android:id="#+id/duration"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="13sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/title"
android:layout_marginTop="4dp"
/>
</androidx.constraintlayout.widget.ConstraintLayout>
I would like the left views (title, date) to stop where the download image and duration start. I haven't worked with ConstraintLayouts much so it might be something easy.
There are a lot of different ways to achieve this, one way would be to constraint your text into the image and give them the same height.
They won't overlap each other if you will do something like this :
In your example, you used android:layout_width="match_parent" on the text so it was expanded throw all of the row and overlapped your other view.You should use android:layout_width="0dp" (it is match_constraint) so your views won't overlap each other.
Here is an example of a layout that looks like the row you want to achieve:
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/textView4"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:text="loot at this text that wont everlap the image"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/imageView"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/imageView"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_marginEnd="8dp"
app:layout_constraintBottom_toBottomOf="#+id/textView4"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="#+id/textView4"
tools:src="#tools:sample/avatars[1]" />
</androidx.constraintlayout.widget.ConstraintLayout>
I'm trying to align three TextViews horizontally (as the title may suggest), but even after chaining they together and using app:layout_constrainedWidth="true" they're still being pushed out of the screen, strangely only by the left side when the middle or the last one grows large. Notice that I'm setting the android:maxLines="1" and android:ellipsize="end" and aligning they at the start of the screen, not sure if it matters though.
I also tried to limit their sizes, but on the case where there are two small texts and a very large one the large one will be ellipsized even when the layout still have some space left.
Sample layout:
<?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:background="#android:color/white"
android:padding="22dp">
<TextView
android:id="#+id/greenTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:ellipsize="end"
android:maxLines="1"
android:textColor="#android:color/holo_green_dark"
app:layout_constrainedWidth="true"
app:layout_constraintEnd_toStartOf="#id/blueTextView"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:text="TextView" />
<TextView
android:id="#+id/blueTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:ellipsize="end"
android:maxLines="1"
android:textColor="#android:color/holo_blue_dark"
app:layout_constrainedWidth="true"
app:layout_constraintBaseline_toBaselineOf="#id/greenTextView"
app:layout_constraintEnd_toStartOf="#id/orangetextView"
app:layout_constraintStart_toEndOf="#id/greenTextView"
tools:text="Another TextView " />
<TextView
android:id="#+id/orangetextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:ellipsize="end"
android:maxLines="1"
android:textColor="#android:color/holo_orange_dark"
app:layout_constrainedWidth="true"
app:layout_constraintBaseline_toBaselineOf="#id/blueTextView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/blueTextView"
tools:text="Another TextView" />
</android.support.constraint.ConstraintLayout>
These are some cases using the sample layout
None of the TextViews are ellipsizing:
The first TextView is ellipsizing:
The last TextView don't ellipsize and pushes the other ones out of the screen:
These are some possible solutions that aren't covering all of the cases
Using android:maxWidth="90dp" to prevent the TextView to grow, but also limiting the text unnecessarily:
Using android:layout_width="0dp" to enable "match_constraint" is not a optimal solution as well, since the layout will reserve a third of the display width for each TextView, even if the text is smaller than that:
Use a Flexbox
<com.google.android.flexbox.FlexboxLayout
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"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:alignContent="flex_start"
app:alignItems="flex_start"
app:flexWrap="nowrap"
app:dividerDrawable="#drawable/ic_divider"
app:showDivider="middle">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:maxLines="1"
android:textSize="18sp"
app:layout_minWidth="50dp"
android:textColor="#android:color/holo_green_dark"
android:ellipsize="end"
android:text="Text View"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:maxLines="1"
android:ellipsize="end"
android:textColor="#android:color/holo_blue_dark"
android:textSize="18sp"
app:layout_minWidth="50dp"
android:text="Another TextView"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:maxLines="1"
android:textColor="#android:color/holo_orange_dark"
android:textSize="18sp"
app:layout_minWidth="50dp"
android:ellipsize="end"
android:text="Another TextView"/>
</com.google.android.flexbox.FlexboxLayout>
Output of this layout:
You can use linear layout instead. When the text grows it will ellipsized end with ...
<?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:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/white"
android:padding="22dp">
<TextView
android:id="#+id/greenTextView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_marginEnd="8dp"
android:ellipsize="end"
android:maxLines="1"
android:textColor="#android:color/holo_green_dark"
tools:text="TextView" />
<TextView
android:id="#+id/blueTextView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_marginEnd="8dp"
android:ellipsize="end"
android:maxLines="1"
android:textColor="#android:color/holo_blue_dark"
tools:text="Another TextView " />
<TextView
android:id="#+id/orangetextView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_marginEnd="8dp"
android:ellipsize="end"
android:maxLines="1"
android:textColor="#android:color/holo_orange_dark"
tools:text="Another TextView" />
</LinearLayout>
OUTPUT:
Can you try this one (just make sure to replace androidx.constraintlayout.widget.ConstraintLayout with android.support.constraint.ConstraintLayout) :
<?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:background="#android:color/white"
android:padding="22dp">
<TextView
android:id="#+id/greenTextView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:ellipsize="end"
android:maxLines="1"
android:textColor="#android:color/holo_green_dark"
app:layout_constraintEnd_toStartOf="#id/blueTextView"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:text="First Very Long Text 123456789" />
<TextView
android:id="#+id/blueTextView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:ellipsize="end"
android:maxLines="1"
android:textColor="#android:color/holo_blue_dark"
app:layout_constraintBaseline_toBaselineOf="#id/greenTextView"
app:layout_constraintEnd_toStartOf="#id/orangetextView"
app:layout_constraintStart_toEndOf="#id/greenTextView"
app:layout_constraintTop_toTopOf="parent"
tools:text="Second Very Long Text 123456789" />
<TextView
android:id="#+id/orangetextView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:ellipsize="end"
android:maxLines="1"
android:textColor="#android:color/holo_orange_dark"
app:layout_constraintBaseline_toBaselineOf="#id/blueTextView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/blueTextView"
tools:text="Third Very Long Text 123456789" />
</androidx.constraintlayout.widget.ConstraintLayout>
Ellipsize will work as expected.
I'm completely new to Android development, and so I'm still a little confused as to which layouts to use in certain situations.
I need to recreate this:
Where you have 2 lines of text (one above, one below) aligned next to an image. This is all within a card.
Bold Text and Text should be centered with each other vertically. Subtext should be 10dp below the first line. The space between the lines of text and the image is 16dp.
First I used only a RelativeLayout with an ImageView and 3 TextView in it, but that felt wrong and unorganized.
So then I tried this:
http://i.imgur.com/eph6Em8.png
But I'm still not sure if this is the most correct way to do this.
What should I change?
Try this:
Set your "Parent Layout" as "RelativeLayout".
Inside this relative layout, take an ImageView and set "alignParentLeft" property to true and also "centreInparent" to true.
Now, inside this RelativeLayout, take a LinearLayout with orientation set to Veritical and "toRightOf=#id/ImageView". Inside this LinearLayout, take RelativeLayout (RelativeLayout2) as first child and inside it Take two "TextViews".
One with "alignParentLeft=true" and "width = matchparent". While the second one "alignParenRight=true" and "width = wrap_content". Now, what you need to is, in the first "TextView" set "toLeftOf=#id/secondTextView".
Now about the last "TextView". Just create a "TextView" inside the LinearLayout (that you created above with vertical orientation) and place it as second child.
This will create a perfect layout. It is also an easy way to create one.
You can use Constraint Layout to achieve your desired UI. Below is the xml code to implement your UI.
<?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">
<ImageView
android:layout_width="80dp"
android:layout_height="80dp"
app:src="#drawable/def_doc"
android:id="#+id/rvMsg_img"
android:maxHeight="80dp"
android:maxWidth="80dp"
android:minHeight="80dp"
android:minWidth="80dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:layout_marginEnd="16dp"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginRight="16dp"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginStart="16dp"
android:layout_marginLeft="16dp"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintBottom_toTopOf="#+id/viewLine" />
<TextView
android:text="Kevin De Bruyne"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/rvMsg_name"
android:textColor="#color/textBlack"
app:layout_constraintTop_toTopOf="#+id/rvMsg_img"
app:layout_constraintBottom_toBottomOf="#+id/rvMsg_img"
android:layout_marginStart="16dp"
app:layout_constraintLeft_toRightOf="#+id/rvMsg_img"
android:layout_marginLeft="16dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
app:layout_constraintVertical_bias="0.2"
app:layout_constraintHorizontal_bias="0.0"
android:textSize="16sp"
app:layout_constraintRight_toLeftOf="#+id/rvMsg_time" />
<TextView
android:text="Hello developer. please check this message for long length. max length to 50 characters."
android:layout_width="0dp"
android:layout_height="wrap_content"
android:id="#+id/rvMsg_last"
android:maxLines="2"
android:ellipsize="end"
android:layout_marginTop="8dp"
app:layout_constraintTop_toBottomOf="#+id/rvMsg_name"
android:layout_marginStart="16dp"
app:layout_constraintLeft_toRightOf="#+id/rvMsg_img"
android:layout_marginLeft="16dp"
app:layout_constraintBottom_toBottomOf="#+id/rvMsg_img"
app:layout_constraintVertical_bias="0.0"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintRight_toLeftOf="#+id/rvMsg_time"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp" />
<TextView
android:text="09:50 AM"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/rvMsg_time"
app:layout_constraintTop_toTopOf="#+id/rvMsg_img"
app:layout_constraintBottom_toBottomOf="#+id/rvMsg_img"
android:layout_marginStart="8dp"
app:layout_constraintLeft_toRightOf="#+id/rvMsg_img"
android:layout_marginLeft="8dp"
android:layout_marginEnd="16dp"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginRight="16dp"
app:layout_constraintVertical_bias="0.2"
app:layout_constraintHorizontal_bias="1.0" />
<View
android:id="#+id/viewLine"
android:layout_height="2dp"
android:layout_width="0dp"
android:background="#EAEAEA"
android:layout_marginStart="16dp"
app:layout_constraintLeft_toLeftOf="parent"
android:layout_marginLeft="16dp"
android:layout_marginEnd="16dp"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginRight="16dp"
app:layout_constraintBottom_toBottomOf="parent" />
</android.support.constraint.ConstraintLayout>
Hope it will help you.
Try this layout structure
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<ImageView
android:layout_weight="1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<LinearLayout
android:layout_weight="1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
<TextView
android:layout_weight="1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="centar"
android:gravity="center"
android:orientation="horizontal"
android:weightSum="4">
<ImageView
android:layout_width="0dp"
android:layout_height="100dp"
android:layout_weight="1"
android:src="#mipmap/ic_launcher" />
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="2"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="BOLD TEXT"
android:textStyle="bold" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Sub Text" />
</LinearLayout>
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Text" />
tru this code to achive gole.