I layout the cell of RecyclerView with ConstraintLayout, and the element TextView (id:cell_summary) cut off its long text;
here is the cell layout xml code:
<?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"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/cell_title"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:layout_marginTop="16dp"
android:maxLines="2"
android:text="And we find ourselves cruelly cut off from the wireless world"
android:textColor="#android:color/black"
android:textSize="16sp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/cell_thumb"
android:layout_width="120dp"
android:layout_height="88dp"
android:layout_marginLeft="16dp"
android:layout_marginTop="8dp"
android:background="#cccccc"
android:scaleType="centerCrop"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toBottomOf="#id/cell_title" />
<TextView
android:id="#+id/cell_datetime"
android:layout_width="0dp"
android:layout_height="15dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="16dp"
android:text="2Hours"
android:textColor="#999999"
android:textSize="12sp"
app:layout_constraintBottom_toBottomOf="#id/cell_thumb"
app:layout_constraintLeft_toRightOf="#id/cell_thumb"
app:layout_constraintRight_toRightOf="parent" />
<TextView
android:id="#+id/cell_summary"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="12dp"
android:text="But then we were not being singled out, the entire country lives in a bubble of unreality, cut off from the outside world and watched by an army of informers."
android:ellipsize="end"
app:layout_constraintBottom_toTopOf="#id/cell_datetime"
app:layout_constraintLeft_toLeftOf="#id/cell_datetime"
app:layout_constraintRight_toRightOf="#id/cell_datetime"
app:layout_constraintTop_toTopOf="#id/cell_thumb" />
<View
android:layout_width="0dp"
android:layout_height="0.5dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginTop="16dp"
android:background="#dddddd"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#id/cell_thumb" />
</android.support.constraint.ConstraintLayout>
If I add android:maxLines="3", the TextView will work correctly. But here I need an unbounded TextView.
remove android:layout_marginBottom="12dp" from cell_summary
Try below code this will help you out :-
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:layout_marginTop="16dp"
android:orientation="vertical">
<TextView
android:id="#+id/cell_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:maxLines="2"
android:text="And we find ourselves cruelly cut off from the wireless world"
android:textColor="#android:color/black"
android:textSize="16sp" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="horizontal">
<ImageView
android:id="#+id/cell_thumb"
android:layout_width="120dp"
android:layout_height="88dp"
android:layout_gravity="center_vertical"
android:background="#cccccc"
android:scaleType="centerCrop" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_weight="1"
android:orientation="vertical">
<TextView
android:id="#+id/cell_summary"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ellipsize="end"
android:text="But then we were not being singled out, the entire country lives in a bubble of unreality, cut off from the outside world and watched by an army of informers." />
<TextView
android:id="#+id/cell_datetime"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="2Hours"
android:textColor="#999999"
android:textSize="12sp" />
</LinearLayout>
</LinearLayout>
<View
android:layout_width="match_parent"
android:layout_height="0.5dp"
android:background="#dddddd" />
Related
I have such XML file for custom Dialog:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:paddingHorizontal="15dp"
android:paddingVertical="10dp">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/cl_header"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent"
android:paddingBottom="15dp">
<TextView
style="#style/tv_big"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="#id/cl_header"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textStyle="bold"
android:text="Filter"/>
<com.google.android.material.button.MaterialButton
android:id="#+id/bt_reset"
android:textColor="#color/black"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="#style/Widget.MaterialComponents.Button.OutlinedButton"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintEnd_toEndOf="#id/cl_header"
android:text="RESET FILTERS"/>
</androidx.constraintlayout.widget.ConstraintLayout>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/cl_distance"
app:layout_constraintTop_toBottomOf="#id/cl_header"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/tv_distance_title"
style="#style/tv_medium"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Distance range"/>
<TextView
android:id="#+id/tv_distance_result"
android:layout_width="120dp"
android:layout_height="wrap_content"
android:textAlignment="center"
app:layout_constraintBottom_toBottomOf="#id/tv_distance_title"
app:layout_constraintLeft_toRightOf="#id/tv_distance_title"
app:layout_constraintRight_toRightOf="parent"
android:background="#ddd"
android:padding="3dp"
android:textColor="#333"
android:text="0 km - 500km"/>
<com.google.android.material.slider.RangeSlider
android:id="#+id/slider_distance"
app:layout_constraintTop_toBottomOf="#id/tv_distance_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:labelBehavior="gone"
android:stepSize="1.0" />
</androidx.constraintlayout.widget.ConstraintLayout>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/cl_location"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#id/cl_distance"
app:layout_constraintStart_toStartOf="parent">
<TextView
android:id="#+id/tv_location_title"
style="#style/tv_medium"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Location"/>
<EditText
android:id="#+id/et_location"
android:layout_height="wrap_content"
android:layout_width="match_parent"
app:layout_constraintTop_toBottomOf="#id/tv_location_title"
android:hint="#string/filter_location_et_hint" />
</androidx.constraintlayout.widget.ConstraintLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#id/cl_location"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginTop="10dp"
android:orientation="horizontal">
<Button
android:id="#+id/bt_cancel"
android:backgroundTint="#ccc"
android:textColor="#color/black"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="20dp"
android:text="CANCEL"/>
<Button
android:id="#+id/bt_save"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="save"
android:layout_marginHorizontal="20dp"/>
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
Android Studio renders it in this way:
And this is what I want to have in my Dialog.
BUT:
On physical device and on emulator it looks different than in Android Studio:
My question is: how to place "Filter" title on the left, and make the location EditText matching the parent (in the working app)?
What everybody else said is correct, keeping your layout flat is good for both performance and for these situations where you want to quickly figure out why isn't the layout being laid out the way you wanted it ;)
Try this :
<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"
android:paddingHorizontal="15dp"
android:paddingVertical="10dp">
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="start"
android:text="Filter"
app:layout_constraintBottom_toBottomOf="#id/bt_reset"
app:layout_constraintEnd_toStartOf="#id/bt_reset"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#id/bt_reset" />
<com.google.android.material.button.MaterialButton
android:id="#+id/bt_reset"
style="#style/Widget.MaterialComponents.Button.OutlinedButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="RESET FILTERS"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/tv_distance_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Distance range"
app:layout_constraintBottom_toBottomOf="#id/tv_distance_result"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#id/tv_distance_result" />
<TextView
android:id="#+id/tv_distance_result"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="15dp"
android:background="#ddd"
android:gravity="center"
android:paddingHorizontal="18dp"
android:paddingVertical="3dp"
android:text="0 km - 500km"
android:textColor="#333"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#id/bt_reset" />
<com.google.android.material.slider.RangeSlider
android:id="#+id/slider_distance"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:stepSize="1.0"
app:labelBehavior="gone"
app:layout_constraintTop_toBottomOf="#id/tv_distance_result" />
<TextView
android:id="#+id/tv_location_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Location"
app:layout_constraintTop_toBottomOf="#id/slider_distance" />
<EditText
android:id="#+id/et_location"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="test"
app:layout_constraintTop_toBottomOf="#id/tv_location_title" />
<Button
android:id="#+id/bt_cancel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:layout_marginEnd="20dp"
android:backgroundTint="#ccc"
android:text="CANCEL"
android:textColor="#color/colorBlack"
app:layout_constraintEnd_toStartOf="#id/bt_save"
app:layout_constraintTop_toBottomOf="#id/et_location" />
<Button
android:id="#+id/bt_save"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:layout_marginEnd="20dp"
android:text="save"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#id/et_location" />
</androidx.constraintlayout.widget.ConstraintLayout>
I changed inner ConstraintLayouts into LinearLayouts and used weights. I also used this trick to fill space between e.g. "Filter" title and "reset filters" button.
There was also an issue with ll_location LinearLayout - it didn't match the parent.
I replaced:
<LinearLayout
android:id="#+id/ll_location"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#id/ll_distance_ext"
android:orientation="vertical">
<!-- content -->
</LinearLayout>
into:
<LinearLayout
android:id="#+id/ll_location"
android:layout_width="0dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#id/ll_distance_ext"
android:orientation="vertical">
<!-- content -->
</LinearLayout>
And then it worked.
The reason why I don't want to use flat layout (why I use nested layouts) is that IMHO the flat layout makes the code more difficult to maintain.
When you have Views splited into groups you can easily replace them, no matter how many View there are in a group.
My solution:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:paddingHorizontal="15dp"
android:paddingVertical="10dp">
<LinearLayout
android:id="#+id/ll_header"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent"
android:paddingBottom="15dp">
<TextView
style="#style/tv_big"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textStyle="bold"
android:text="Filter"/>
<View
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_weight="1" />
<com.google.android.material.button.MaterialButton
android:id="#+id/bt_reset"
android:textColor="#color/black"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="#style/Widget.MaterialComponents.Button.OutlinedButton"
android:text="reset filters"/>
</LinearLayout>
<LinearLayout
android:id="#+id/ll_distance_ext"
app:layout_constraintTop_toBottomOf="#id/ll_header"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:id="#+id/tv_distance_title"
style="#style/tv_medium"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Distance range"/>
<View
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_weight="1" />
<TextView
android:id="#+id/tv_distance_result"
android:layout_width="120dp"
android:layout_height="wrap_content"
android:textAlignment="center"
android:background="#ddd"
android:padding="3dp"
android:textColor="#333"
android:text="0 km - 500km"/>
</LinearLayout>
<com.google.android.material.slider.RangeSlider
android:id="#+id/slider_distance"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:labelBehavior="gone"
android:stepSize="1.0" />
</LinearLayout>
<LinearLayout
android:id="#+id/ll_location"
android:layout_width="0dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#id/ll_distance_ext"
android:orientation="vertical">
<TextView
android:id="#+id/tv_location_title"
style="#style/tv_medium"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Location"/>
<EditText
android:id="#+id/et_location"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:hint="#string/filter_location_et_hint" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#id/ll_location"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginTop="10dp"
android:orientation="horizontal">
<Button
android:id="#+id/bt_cancel"
android:backgroundTint="#ccc"
android:textColor="#color/black"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="20dp"
android:text="cancel"/>
<Button
android:id="#+id/bt_save"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="save"
android:layout_marginHorizontal="20dp"/>
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
Here Is my
and XML code first i use a Linear Layout then card View and other views so why my view overwrite where is the problem please watch the AVD picture and tell me where is the error.Sorry for bad english.
<?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"
android:id="#+id/item_linerLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="5dp">
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:cardElevation="10dp">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="10dp">
<TextView
android:id="#+id/item_id"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="1"
android:textSize="36sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/item_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Title"
app:layout_constraintStart_toEndOf="#+id/item_id"
app:layout_constraintTop_toTopOf="#+id/item_id" />
<TextView
android:id="#+id/item_AuthorName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Author"
app:layout_constraintStart_toStartOf="#+id/item_title"
app:layout_constraintTop_toBottomOf="#+id/item_title" />
<TextView
android:id="#+id/item_pages"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="3dp"
android:text="100"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>
</LinearLayout>
Try to use android:fitsSystemWindows="true" in your root layout(In your case LinearLayout). I recommend you to read this article to understand system overlapping. I hope it helps)
I have removed redundant LinearLayout parent and made CardView parent. Also your TextView with id item_pages is not overlapping.
<androidx.cardview.widget.CardView
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_margin="5dp"
app:cardElevation="10dp">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="10dp">
<TextView
android:id="#+id/item_id"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="1"
android:textSize="36sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/item_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:text="Title"
app:layout_constraintBottom_toTopOf="#id/item_AuthorName"
app:layout_constraintStart_toEndOf="#+id/item_id" />
<TextView
android:id="#+id/item_AuthorName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="4dp"
android:text="Author"
app:layout_constraintBottom_toBottomOf="#id/item_id"
app:layout_constraintStart_toStartOf="#+id/item_title" />
<TextView
android:id="#+id/item_pages"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="3dp"
android:text="100"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>
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 have a CardView that I put inside a recycler view. The card view that I make doesn't have any gap between each other even though I already add margin and padding. also the text is out of the card view.
This is the result of my code, the text is out of the screen and there is no gap between the card view:
This is the list xml :
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView 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="120dp"
android:layout_margin="5dp">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/tv_sales_invoice"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="invoice"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/tv_sales_date"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="date"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tv_sales_invoice" />
<View
android:id="#+id/top_line"
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_marginTop="5dp"
android:background="#color/colorBlack"
app:layout_constraintTop_toBottomOf="#+id/tv_sales_date" />
<TextView
android:id="#+id/sales_itemname_header"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:text="#string/item_name"
android:textSize="16sp"
android:textStyle="bold"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toBottomOf="#+id/top_line" />
<TextView
android:id="#+id/sales_itemqty_header"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/item_qty"
android:textSize="16sp"
android:textStyle="bold"
app:layout_constraintLeft_toRightOf="#+id/sales_itemname_header"
app:layout_constraintRight_toRightOf="#+id/sales_itemprice_header"
app:layout_constraintTop_toTopOf="#+id/sales_itemname_header" />
<TextView
android:id="#+id/sales_itemprice_header"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/item_price"
android:textSize="16sp"
android:textStyle="bold"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="#+id/sales_itemname_header" />
<View
android:id="#+id/mid_line"
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#color/colorBlack"
app:layout_constraintTop_toBottomOf="#+id/sales_itemname_header" />
<TextView
android:textAlignment="textStart"
android:id="#+id/tv_sales_type"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="item"
android:textSize="18sp"
app:layout_constraintLeft_toLeftOf="#+id/sales_itemname_header"
app:layout_constraintRight_toRightOf="#+id/sales_itemname_header"
app:layout_constraintTop_toBottomOf="#+id/sales_itemname_header" />
<TextView
android:id="#+id/tv_sales_qty"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="qty"
android:textSize="18sp"
app:layout_constraintLeft_toLeftOf="#+id/sales_itemqty_header"
app:layout_constraintRight_toRightOf="#+id/sales_itemqty_header"
app:layout_constraintTop_toBottomOf="#+id/sales_itemqty_header" />
<TextView
android:textAlignment="viewEnd"
android:id="#+id/tv_sales_price"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/price"
android:textSize="18sp"
app:layout_constraintLeft_toLeftOf="#+id/sales_itemprice_header"
app:layout_constraintRight_toRightOf="#+id/sales_itemprice_header"
app:layout_constraintTop_toBottomOf="#+id/sales_itemprice_header" />
</android.support.constraint.ConstraintLayout>
</android.support.v7.widget.CardView>
this is the recycler view layout:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView 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"
tools:context=".SalesHistoryActivity">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/tv_sales_history"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/sales_history"
android:textSize="25dp"
android:textStyle="bold"
app:layout_constraintTop_toTopOf="parent" />
<android.support.v7.widget.RecyclerView
android:id="#+id/sales_recycler"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:padding="10dp"
android:nestedScrollingEnabled="true"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tv_sales_history"></android.support.v7.widget.RecyclerView>
</android.support.constraint.ConstraintLayout>
</ScrollView>
Below attached code will solve your issue. Hope it will help you. Please try to approve it, if it is useful.
If you have any other question fill free to ask in below comment section. I will try my best to solve that too.
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/cardView"
android:layout_width="match_parent"
android:layout_height="120dp"
android:layout_margin="5dp">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/tv_sales_invoice"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="invoice"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/tv_sales_date"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="date"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tv_sales_invoice" />
<View
android:id="#+id/top_line"
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_marginTop="5dp"
android:background="#color/colorBlack"
app:layout_constraintTop_toBottomOf="#+id/tv_sales_date" />
<TextView
android:id="#+id/sales_itemname_header"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:text="item_name"
android:textSize="16sp"
android:textStyle="bold"
app:layout_constraintEnd_toStartOf="#+id/sales_itemqty_header"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toBottomOf="#+id/top_line" />
<TextView
android:id="#+id/sales_itemqty_header"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:text="item_qty"
android:textSize="16sp"
android:textStyle="bold"
app:layout_constraintEnd_toStartOf="#+id/sales_itemprice_header"
app:layout_constraintLeft_toRightOf="#+id/sales_itemname_header"
app:layout_constraintTop_toTopOf="#+id/sales_itemname_header" />
<TextView
android:id="#+id/sales_itemprice_header"
android:layout_width="90dp"
android:layout_height="wrap_content"
android:gravity="center"
android:text="Item price"
android:textSize="16sp"
android:textStyle="bold"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintStart_toEndOf="#id/sales_itemqty_header"
app:layout_constraintTop_toTopOf="#+id/sales_itemname_header" />
<View
android:id="#+id/mid_line"
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#color/colorBlack"
app:layout_constraintTop_toBottomOf="#+id/sales_itemname_header" />
<TextView
android:id="#+id/tv_sales_type"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Lorem Ipsum is simply dummy text"
android:textAlignment="textStart"
android:textSize="18sp"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toLeftOf="#+id/sales_itemname_header"
app:layout_constraintRight_toRightOf="#+id/sales_itemname_header"
app:layout_constraintTop_toBottomOf="#+id/mid_line" />
<TextView
android:id="#+id/tv_sales_qty"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="center"
android:text="qty"
android:textSize="18sp"
app:layout_constraintLeft_toLeftOf="#+id/sales_itemqty_header"
app:layout_constraintRight_toRightOf="#+id/sales_itemqty_header"
app:layout_constraintTop_toBottomOf="#+id/sales_itemqty_header" />
<TextView
android:id="#+id/tv_sales_price"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="end"
android:text="Rp 13000.00"
android:textSize="18sp"
app:layout_constraintLeft_toLeftOf="#+id/sales_itemprice_header"
app:layout_constraintRight_toRightOf="#+id/sales_itemprice_header"
app:layout_constraintTop_toBottomOf="#+id/sales_itemprice_header" />
</android.support.constraint.ConstraintLayout>
</android.support.v7.widget.CardView>
You should use wrap_content in your card.
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView 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_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp">
....
Recently I've bumped into a strange ConstraintLayout behavior. What I tried to do was a simple layout with ImageView, Button and a TextView. Here's the code:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<ImageView
android:id="#+id/image"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:contentDescription="#null"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:paddingBottom="10dp"
android:paddingEnd="20dp"
android:paddingStart="20dp"
android:text="TEST TEXT"
android:paddingTop="20dp"
app:layout_constraintStart_toStartOf="#id/image"
app:layout_constraintTop_toBottomOf="#+id/button" />
<android.support.v4.widget.Space
android:id="#+id/marginSpacer"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="10dp"
app:layout_constraintBottom_toBottomOf="#id/image" />
<Button
android:id="#id/button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="20dp"
android:layout_marginStart="20dp"
android:background="#drawable/button_bg"
android:text="BUTTON"
app:layout_constraintTop_toBottomOf="#id/marginSpacer" />
</android.support.constraint.ConstraintLayout>
The ImageView content is loaded using Glide like this:
Glide.with(this).load("https://homepages.cae.wisc.edu/~ece533/images/monarch.png").into(imageView);
Here is how I wanted it to look like:
And here's what I actually got:
My intent was to make the text align relative to the button, not the image, how do I make this happen? Why did the ConstraintLayout clip itself to the ImageView? On the other hand, if I align the text relative to the image everything works great and nothing is clipped.
The full source is available here:
https://github.com/satorikomeiji/ConstraintLayoutBug
Use this for your Button:
#+id/button
instead of
android:id="#id/button"
You'll be able to design urself.
I would suggest you to add loading image:
.placeholder(R.drawable.ic_error_black_48px)
My 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:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:layout_editor_absoluteY="81dp">
<ImageView
android:id="#+id/image"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:contentDescription="#null" />
<TextView
android:id="#+id/text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="20dp"
android:layout_marginTop="8dp"
android:paddingBottom="10dp"
android:paddingEnd="20dp"
android:paddingStart="20dp"
android:paddingTop="20dp"
android:text="TEST TEXT"
app:layout_constraintStart_toStartOf="#+id/ButtonLayout"
app:layout_constraintTop_toBottomOf="#+id/ButtonLayout" />
<android.support.constraint.ConstraintLayout
android:id="#+id/ButtonLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
app:layout_constraintBottom_toBottomOf="#+id/image"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/image">
<View
android:id="#+id/dummyView"
android:layout_width="match_parent"
android:layout_height="15dp" />
<Button
android:id="#+id/button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="20dp"
android:layout_marginStart="20dp"
android:background="#drawable/button_bg"
android:text="BUTTON"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/dummyView" />
</android.support.constraint.ConstraintLayout>
</android.support.constraint.ConstraintLayout>
Preview:
You need to align something to the bottom of the parent
Align TEST TEXT TextView bottom to the bottom of parent like this:
<TextView
android:id="#+id/text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:paddingBottom="10dp"
android:paddingEnd="20dp"
android:paddingStart="20dp"
android:text="TEST TEXT"
android:paddingTop="20dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="#id/image"
app:layout_constraintTop_toBottomOf="#+id/button" />
And add plus sign in button id
<Button
android:id="#+id/button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="20dp"
android:layout_marginStart="20dp"
android:background="#drawable/button_bg"
android:text="BUTTON"
app:layout_constraintTop_toBottomOf="#id/marginSpacer" />
Try this :
<?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:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:layout_editor_absoluteY="81dp">
<ImageView
android:id="#+id/image"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scaleType="fitXY"
android:src="#drawable/ic_launcher_background"
android:adjustViewBounds="true"
android:contentDescription="#null" />
<TextView
android:id="#+id/text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="20dp"
android:layout_marginTop="8dp"
android:paddingBottom="10dp"
android:paddingEnd="20dp"
android:paddingStart="20dp"
android:paddingTop="20dp"
android:text="TEST TEXT"
app:layout_constraintStart_toStartOf="#+id/ButtonLayout"
app:layout_constraintTop_toBottomOf="#+id/ButtonLayout" />
<android.support.constraint.ConstraintLayout
android:id="#+id/ButtonLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
app:layout_constraintBottom_toBottomOf="#+id/image"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/image">
<View
android:id="#+id/dummyView"
android:layout_width="match_parent"
android:layout_height="15dp" />
<Button
android:id="#+id/button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="20dp"
android:layout_marginStart="20dp"
android:text="BUTTON"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/dummyView" />
</android.support.constraint.ConstraintLayout>