I have a cardview in which I am displaying ingredient list but the problem i am facing is sometimes the ingredient name becomes so lengthy that it kicks out the textviews and button next to it out of screen. How can I adjust the entire cardview within screen even if ingredient name becomes lengthy ?
That is the code of my ingredient_list.xml:
<?xml version="1.0" encoding="utf-8"?>
<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="65dp"
app:cardCornerRadius="12dp"
app:cardElevation="5dp"
android:backgroundTint="#333333"
android:layout_margin="10dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#333333"
android:layout_margin="4dp"
android:padding="5dp"
android:orientation="horizontal">
<TextView
android:id="#+id/ith_ingredient_inventory"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="ingredient i"
android:gravity="center"
android:textColor="#color/colorAccent"
android:textSize="20dp"
android:textStyle="bold"
android:padding="10dp"
/>
<TextView
android:id="#+id/ith_ingredient_quantity_inventory"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:background="#drawable/round_corners"
android:backgroundTint="#color/colorAccent"
android:text="100"
android:textSize="20dp"
android:textAlignment="center"
android:textColor="#android:color/black"
android:textStyle="bold"
android:padding="5dp"
android:layout_margin="5dp">
</TextView>
<TextView
android:id="#+id/ith_ingredient_quantity_unit_inventory"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="unit"
android:textColor="#color/colorAccent"
android:textSize="16dp"
android:padding="10dp"
/>
<Button
android:id="#+id/add_quantity_inventory"
android:layout_width="35dp"
android:layout_height="35dp"
android:background="#drawable/plus"
android:foreground="?attr/selectableItemBackgroundBorderless"
android:padding="10dp"
android:layout_marginLeft="10dp">
</Button>
</LinearLayout>
</androidx.cardview.widget.CardView>
I changed your LinearLayout to ConstraintLayout and made some other changes:
<?xml version="1.0" encoding="utf-8"?>
<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="65dp"
android:layout_margin="10dp"
android:backgroundTint="#333333"
app:cardCornerRadius="12dp"
app:cardElevation="5dp">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="4dp"
android:background="#333333"
android:padding="5dp">
<TextView
android:id="#+id/ith_ingredient_inventory"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:ellipsize="end"
android:gravity="center"
android:maxLines="1"
android:text="ingredient i ingredient i ingredient i ingredient i ingredient i"
android:textColor="#color/colorAccent"
android:textSize="20dp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#+id/ith_ingredient_quantity_inventory"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/ith_ingredient_quantity_inventory"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_margin="5dp"
android:backgroundTint="#color/colorAccent"
android:text="100"
android:textAlignment="center"
android:textColor="#android:color/black"
android:textSize="20dp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintRight_toLeftOf="#+id/ith_ingredient_quantity_unit_inventory"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/ith_ingredient_quantity_unit_inventory"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="unit"
android:textColor="#color/colorAccent"
android:textSize="16dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintRight_toLeftOf="#+id/add_quantity_inventory"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/add_quantity_inventory"
android:layout_width="35dp"
android:layout_height="35dp"
android:layout_margin="10dp"
android:foreground="?attr/selectableItemBackgroundBorderless"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"></Button>
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>
and this is the result:
So, you can use ConstraintLayout with my properties and that TextView you want to not cover the other views, must have a maxLine value and ellipsize to show three dots at the end, when it is long.
Related
I have a TextView inside a LinearLayout and I want the background of my TextView to always display blue, filling the space horizontally, esto es lo que necesito:
But I don't know how to get it, the contained text can change, if I set android:layout_width="match_parent" it won't show all the text when there are long texts. And if I use android:layout_width="wrap_content" it will look like this:
This is what I have:
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="20dp"
android:background="#drawable/rp"
android:gravity="center"
android:orientation="vertical">
<androidx.constraintlayout.widget.ConstraintLayout...>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/week"
android:gravity="center"
android:text="Text"
android:textColor="#color/white" />
<TextView...>
</LinearLayout>
I fixed it now, I changed my LinearLayout to a ConstraintLayout and put a view of the same color as my textview, just behind:
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="20dp"
android:background="#drawable/rp"
android:gravity="center"
android:orientation="vertical">
<androidx.constraintlayout.widget.ConstraintLayout...>
<View
android:id="#+id/view6"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#color/week"
app:layout_constraintBottom_toBottomOf="#+id/textView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/textView" />
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/week"
android:gravity="center"
android:text="Text"
android:textColor="#color/white"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/constraintLayout"/>
<TextView...>
</androidx.constraintlayout.widget.ConstraintLayout>
If you can set a fixed width for your outer LinearLayout, then your requirement can be achieved by wrapping the TextView in another layout.
Please find sample code below:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:orientation="vertical"
android:padding="5dp">
<LinearLayout
android:layout_width="200dp"
android:layout_height="wrap_content"
android:background="#drawable/blue_border_bg"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_gravity="center_horizontal"
android:layout_margin="20dp"
android:src="#android:color/background_dark" />
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/green_text_highlight">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="Text"
android:textColor="#color/white"
android:textSize="22dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentBottom="true"
android:padding="10dp"
android:text="2000"
android:textColor="#cc000000" />
</LinearLayout>
<LinearLayout
android:layout_width="200dp"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:background="#drawable/blue_border_bg"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_gravity="center_horizontal"
android:layout_margin="20dp"
android:src="#android:color/background_dark" />
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/green_text_highlight">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="Text. Large text"
android:textColor="#color/white"
android:textSize="22dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentBottom="true"
android:padding="10dp"
android:text="2000"
android:textColor="#cc000000" />
</LinearLayout>
<LinearLayout
android:layout_width="200dp"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:background="#drawable/blue_border_bg"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_gravity="center_horizontal"
android:layout_margin="20dp"
android:src="#android:color/background_dark" />
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/green_text_highlight">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="Text. Very Large text"
android:textColor="#color/white"
android:textSize="22dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentBottom="true"
android:padding="10dp"
android:text="2000"
android:textColor="#cc000000" />
</LinearLayout>
</LinearLayout>
The code will generate the following output
I have 2 text view and i want them to align horizontally at the same column. I tried to android:layout_toRightOf="#id/textName" but it seem like it goes to the bottom instead beside the textName
enter image description here
Expected output:
The MovieDate should align beside the MovieName
enter image description here
XML:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_height="wrap_content">
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginStart="5dp"
android:layout_marginTop="5dp"
android:layout_marginEnd="5dp"
android:layout_marginBottom="5dp"
app:cardBackgroundColor="#FFFFFF"
app:cardCornerRadius="10dp"
app:cardElevation="10dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView
android:id="#+id/imageview"
android:layout_width="50dp"
android:layout_height="60dp"
android:layout_margin="10dp"
android:src="#drawable/candy" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="2"
android:gravity="center"
android:orientation="vertical">
<TextView
android:id="#+id/textName"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:text="Movie Name"
android:textColor="#000"
android:layout_marginRight="100dp"
android:textSize="15sp"
android:textStyle="bold" />
<TextView
android:id="#+id/textdate"
android:layout_width="50dp"
android:layout_height="wrap_content"
android:text="Movie Date"
android:textSize="15sp"
android:layout_toRightOf="#id/textName"/>
</LinearLayout>
</LinearLayout>
</androidx.cardview.widget.CardView>
</LinearLayout>
layout_toRightOf is an RelativeLayout param, it is no-op set for child of LinearLayout, so you can safely remove tihs line, it does nothing...
LinearLayout which is a parent of both TextViews should have set android:orientation="horizontal", thats for shure... but I see a lot of problems and potential improvements in your code, so maybe you should also set android:layout_height="wrap_content" for this LinearLayout and android:gravity="center_vertical" for outer one (first child of CardView), also remove android:layout_weight="2", its unnecessary as this layout have match_parent width
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="center_vertical">
<ImageView
android:id="#+id/imageview"
android:layout_width="50dp"
android:layout_height="60dp"
android:layout_margin="10dp"
android:src="#drawable/candy" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:orientation="horizontal">
<TextView
android:id="#+id/textName"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:text="Movie Name"
android:textColor="#000"
android:layout_marginRight="100dp"
android:textSize="15sp"
android:textStyle="bold" />
<TextView
android:id="#+id/textdate"
android:layout_width="50dp"
android:layout_height="wrap_content"
android:text="Movie Date"
android:textSize="15sp"/>
</LinearLayout>
</LinearLayout>
Use LinearLayout and set orientation to horizontal instead . See this 👇👇
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android: orientation="horizontal"
tools:context=".MainActivity">
<TextView android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="50"
android:gravity="center"
android:layout_gravity="center_vertical"
android:text="Movie Name"/>
<TextView android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="50"
android:gravity="center"
android:layout_gravity="center_vertical"
android:text="Movie Date"/>
</LinearLayout>
The layout_weight attribute with value of 50 gives equal portions to each children i.e 50% each
LinearLayout is the easiest solution in my opinion, but you could also try ConstraintLayout.
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="5dp"
app:cardBackgroundColor="#FFFFFF"
app:cardCornerRadius="10dp"
app:cardElevation="10dp">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp">
<ImageView
android:id="#+id/imageview"
android:layout_width="50dp"
android:layout_height="60dp"
android:layout_marginEnd="10dp"
android:src="#drawable/candy"
app:layout_constraintEnd_toStartOf="#id/textName"
app:layout_constraintHorizontal_chainStyle="spread"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/textName"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:text="Movie Name"
android:textColor="#000"
android:textSize="15sp"
android:textStyle="bold"
app:layout_constraintEnd_toStartOf="#id/textdate"
app:layout_constraintStart_toEndOf="#id/imageview"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/textdate"
android:layout_width="50dp"
android:layout_height="wrap_content"
android:layout_marginStart="100dp"
android:text="Movie Date"
android:textSize="15sp"
app:layout_constraintStart_toEndOf="#+id/textName"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>
Instead of using multiple LinearLayout you can use single ConstraintLayout and achieve same goal. Here is the modified code:
<?xml version="1.0" encoding="utf-8"?>
<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="match_parent"
android:layout_marginStart="5dp"
android:layout_marginTop="5dp"
android:layout_marginEnd="5dp"
android:layout_marginBottom="5dp"
app:cardBackgroundColor="#FFFFFF"
app:cardCornerRadius="10dp"
app:cardElevation="10dp">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView
android:id="#+id/imageview"
android:layout_width="50dp"
android:layout_height="60dp"
android:layout_margin="10dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:src="#drawable/candy" />
<TextView
android:id="#+id/textName"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:text="Movie Name"
android:textColor="#000"
android:layout_marginRight="100dp"
android:textSize="15sp"
android:textStyle="bold"
app:layout_constraintTop_toTopOf="#id/imageview"
app:layout_constraintStart_toEndOf="#id/imageview"/>
<TextView
android:id="#+id/textdate"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Movie Date"
android:textSize="15sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="#id/textName"
app:layout_constraintStart_toEndOf="#id/textName"/>
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>
// instead of Linearlayout use RelativeLayout and remove layout gravity.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginStart="5dp"
android:layout_marginTop="5dp"
android:layout_marginEnd="5dp"
android:layout_marginBottom="5dp"
app:cardBackgroundColor="#FFFFFF"
app:cardCornerRadius="10dp"
app:cardElevation="10dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView
android:id="#+id/imageview"
android:layout_width="50dp"
android:layout_height="60dp"
android:layout_margin="10dp"
android:src="#drawable/googleg_disabled_color_18" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="2"
android:orientation="vertical">
<TextView
android:id="#+id/textName"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:text="Movie Name"
android:textColor="#000"
android:textSize="15sp"
android:textStyle="bold" />
<TextView
android:id="#+id/textdate"
android:layout_width="50dp"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/textName"
android:text="Movie Date"
android:layout_marginStart="15dp"
android:textSize="15sp" />
</RelativeLayout>
</LinearLayout>
</androidx.cardview.widget.CardView>
I am creating a RecyclerView with the data from the database. And for making a row I created a resource file as row_layout.xml and it has two TextView. I want it in a CardView but while creating the TextView created cant be aligned.
<?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">
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="12dp"
android:layout_gravity="center">
<TextView
android:id="#+id/sl"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="1"
android:textColor="#000"
android:textSize="40sp"
android:textStyle="bold"
tools:ignore="MissingConstraints"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Name"
android:textColor="#000"
android:textSize="40sp"
android:textStyle="bold"
app:layout_constraintLeft_toLeftOf="#id/sl"
tools:ignore="MissingConstraints"
tools:layout_editor_absoluteY="9dp" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>
</LinearLayout>
You just have to use the Constraints the right way instead of suppressing the warning by adding tools:ignore="MissingConstraints".
When aligned to Left:
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="12dp">
<TextView
android:id="#+id/sl"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="1"
android:textColor="#000"
android:textSize="40sp"
android:textStyle="bold"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#+id/nameTV"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/nameTV"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Name"
android:textColor="#000"
android:textSize="40sp"
android:textStyle="bold"
app:layout_constraintLeft_toRightOf="#id/sl"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>
When aligned to both Left and Right of the parent which makes them equally distanced:
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="12dp">
<TextView
android:id="#+id/sl"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="1"
android:textColor="#000"
android:textSize="40sp"
android:textStyle="bold"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#+id/nameTV"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/nameTV"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Name"
android:textColor="#000"
android:textSize="40sp"
android:textStyle="bold"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toRightOf="#id/sl"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>
When aligned to both Left and Right of the parent but with horizontal chain style packed, just like this spread inside will spread them at each ends :
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="12dp">
<TextView
android:id="#+id/sl"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="1"
android:textColor="#000"
android:textSize="40sp"
android:textStyle="bold"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#+id/nameTV"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/nameTV"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Name"
android:textColor="#000"
android:textSize="40sp"
android:textStyle="bold"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toRightOf="#id/sl"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>
When aligned to Right of the parent:
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="12dp">
<TextView
android:id="#+id/sl"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="1"
android:textColor="#000"
android:textSize="40sp"
android:textStyle="bold"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#+id/nameTV"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/nameTV"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Name"
android:textColor="#000"
android:textSize="40sp"
android:textStyle="bold"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toRightOf="#id/sl"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>
Just like these, play with Start/Left and End/Right Margins and layout width and height and create custom layouts as you want. I've used Left and Right instead of Start and End, but if you want to make your application support RTL(Right to Left) layouts, use only Start/End constraints and margins.
Also, if you set both left and right constraints of a view and then set the width as 0dp, it will the available space completely. ConstraintLayout is very advanced, have a look in the official docs.
Try using this
<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="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
app:cardUseCompatPadding="true">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/s1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:text="1"
android:textColor="#000"
android:textSize="40sp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#id/s2"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/s2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:text="Name"
android:textColor="#000"
android:textSize="40sp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/s1"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>
Hope this helps... Feel free to ask for clarifications...
I created simple layout with 5 expandable textviews inside ConstraintLayout. All it must be scrollable (because there will be a lot of content) so all this is inside ScrollView. All this textViews i want center vertically (should look like on first picture) so I used android:layout_gravity="center" to my Constrait. First of all I noticed that when I use android:fillViewport="true" on ScrollView then center doesn't work. Otherwise when I use android:fillViewport="false" center work but when TextView contains a lot of content it doesn't scroll properly. On second picture you can see that my 1-3 textview just hide (screen is scrolled max to top), on next picture we can see that scrollView doesn't fit properly to content and there is a lot of empty space (that space should be on top where are my missing 1-3 textViews). Why's that ? How to work this out ?
Here some code
<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="#color/colorPrimary"
android:orientation="vertical">
<RelativeLayout
android:id="#+id/NavigateTopInfo"
android:layout_marginTop="#dimen/_5sdp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageButton
android:id="#+id/MapButton"
android:layout_width="#dimen/_30sdp"
android:layout_height="#dimen/_30sdp"
android:layout_alignParentEnd="true"
android:layout_marginEnd="#dimen/_5sdp"
android:background="#drawable/ic_map"
android:backgroundTint="#ffffff"
android:onClick="buttonClicked" />
<ImageButton
android:id="#+id/ExitButton"
android:layout_width="#dimen/_30sdp"
android:layout_height="#dimen/_30sdp"
android:layout_alignParentStart="true"
android:layout_marginStart="#dimen/_5sdp"
android:background="#drawable/ic_exit_to_app"
android:backgroundTint="#ffffff"
android:onClick="buttonClicked" />
</RelativeLayout>
<ScrollView
android:id="#+id/ScrollTextView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="false"
android:layout_marginTop="#dimen/_8sdp">
<android.support.constraint.ConstraintLayout
android:id="#+id/myLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
tools:context=".InfoActivity">
<TextView
android:id="#+id/textview1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="#dimen/_15sdp"
android:layout_marginStart="#dimen/_15sdp"
android:layout_marginTop="#dimen/_15sdp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
android:background="#drawable/squaretextview"
android:clickable="true"
android:elevation="5dp"
android:focusable="true"
android:foreground="?attr/selectableItemBackground"
android:gravity="center"
android:onClick="toggleView"
android:paddingBottom="#dimen/_10sdp"
android:paddingTop="#dimen/_10sdp"
android:text="TextView1"
android:textColor="#color/textColor"
android:textSize="18sp" />
<TextView
android:id="#+id/textview1_idcontent"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:text="#string/lorepipsum"
android:textSize="15sp"
app:layout_constraintTop_toBottomOf="#+id/textview1" />
<TextView
android:id="#+id/textview2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="#dimen/_15sdp"
android:layout_marginStart="#dimen/_15sdp"
android:layout_marginTop="#dimen/_15sdp"
android:background="#drawable/squaretextview"
android:clickable="true"
android:elevation="5dp"
android:focusable="true"
android:foreground="?attr/selectableItemBackground"
android:gravity="center"
android:onClick="toggleView"
android:paddingBottom="#dimen/_10sdp"
android:paddingTop="#dimen/_10sdp"
android:text="TextView2"
android:textColor="#color/textColor"
android:textSize="18sp"
app:layout_constraintTop_toBottomOf="#+id/textview1_idcontent" />
<TextView
android:id="#+id/textview2_idcontent"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:text="#string/lorepipsum"
android:textSize="15sp"
app:layout_constraintTop_toBottomOf="#+id/textview2" />
<TextView
android:id="#+id/textview3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="#dimen/_15sdp"
android:layout_marginStart="#dimen/_15sdp"
android:layout_marginTop="#dimen/_15sdp"
android:background="#drawable/squaretextview"
android:clickable="true"
android:elevation="5dp"
android:focusable="true"
android:foreground="?attr/selectableItemBackground"
android:gravity="center"
android:onClick="toggleView"
android:paddingBottom="#dimen/_10sdp"
android:paddingTop="#dimen/_10sdp"
android:text="TextView3"
android:textColor="#color/textColor"
android:textSize="18sp"
app:layout_constraintTop_toBottomOf="#+id/textview2_idcontent" />
<TextView
android:id="#+id/textview3_idcontent"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:text="#string/lorepipsum"
android:textSize="15sp"
app:layout_constraintTop_toBottomOf="#+id/textview3_id" />
<TextView
android:id="#+id/textview4"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="#dimen/_15sdp"
android:layout_marginStart="#dimen/_15sdp"
android:layout_marginTop="#dimen/_15sdp"
android:background="#drawable/squaretextview"
android:clickable="true"
android:elevation="5dp"
android:focusable="true"
android:foreground="?attr/selectableItemBackground"
android:gravity="center"
android:onClick="toggleView"
android:paddingBottom="#dimen/_10sdp"
android:paddingTop="#dimen/_10sdp"
android:text="TextView 4"
android:textColor="#color/textColor"
android:textSize="18sp"
app:layout_constraintTop_toBottomOf="#+id/textview3_idcontent" />
<TextView
android:id="#+id/textview4_idcontent"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:text="#string/lorepipsum"
android:textSize="15sp"
app:layout_constraintTop_toBottomOf="#+id/textview4" />
<TextView
android:id="#+id/textview5"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="#dimen/_15sdp"
android:layout_marginStart="#dimen/_15sdp"
android:layout_marginTop="#dimen/_15sdp"
android:background="#drawable/squaretextview"
android:clickable="true"
android:elevation="5dp"
android:focusable="true"
android:foreground="?attr/selectableItemBackground"
android:gravity="center"
android:onClick="toggleView"
android:paddingBottom="#dimen/_10sdp"
android:paddingTop="#dimen/_10sdp"
android:text="TextView5"
android:textColor="#color/textColor"
android:textSize="18sp"
app:layout_constraintTop_toBottomOf="#+id/textview4_idcontent" />
<TextView
android:id="#+id/textview5_idcontent"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:text="#string/lorepipsum"
android:textSize="15sp"
app:layout_constraintTop_toBottomOf="#+id/textView" />
</android.support.constraint.ConstraintLayout>
</ScrollView>
</LinearLayout>
Don't use android:layout_gravity="center" to ConstraintLayout. It is responsible for 2nd and 3rd problem. To make the view vertically centered place your ScrollView inside RelativeLayout and set centerInParent to true. Besides this to make the view horizontally centered inside ConstraintLayout use left and right Constraint to parent and keeps width as wrap_content.
<?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:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<RelativeLayout
android:id="#+id/NavigateTopInfo"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<!--Header content -->
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerInParent="true">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/textview1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
android:text="TextView1" />
<TextView
android:id="#+id/textview1_idcontent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView1 Content"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textview1" />
<TextView
android:id="#+id/textview2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
android:text="TextView2"
app:layout_constraintTop_toBottomOf="#+id/textview1_idcontent" />
<TextView
android:id="#+id/textview2_idcontent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView1 Content"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textview2" />
<!--Other content -->
</androidx.constraintlayout.widget.ConstraintLayout>
</ScrollView>
</RelativeLayout>
</LinearLayout>
<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">
<android.support.v7.widget.AppCompatTextView
android:id="#+id/phone_number"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fontFamily="sans-serif"
android:letterSpacing="0.01"
android:lineSpacingExtra="32sp"
android:text="+44 2079460860"
android:textColor="#color/colorDusk"
android:textSize="16sp"
android:textStyle="normal"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<android.support.v7.widget.AppCompatTextView
android:id="#+id/name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fontFamily="sans-serif"
android:lineSpacingExtra="32sp"
android:text="Mobile UK"
android:textColor="#color/secondryColor"
android:textSize="14sp"
android:textStyle="normal"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/phone_number" />
<android.support.v7.widget.AppCompatRadioButton
android:id="#+id/radio_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/radio_button_background"
android:button="#null"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.864"
app:layout_constraintStart_toEndOf="#+id/phone_number"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
This is my RecyclerView:
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerview"
android:layout_width="match_parent"
android:layout_height="100dp"
android:paddingTop="25dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/title" />
This is my layout i am unable to set left or start both text view and right or end side radio button inside constraint layout my current screen is below :
Here is the screen shot:
while i want check box full right side or end of constraint layout please suggest me ho to achieve this
Updated
<?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">
<android.support.v7.widget.AppCompatTextView
android:id="#+id/phone_number"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:fontFamily="sans-serif"
android:letterSpacing="0.01"
android:lineSpacingExtra="32sp"
android:text="+44 2079460860"
android:textColor="#color/colorPrimaryDark"
android:textSize="16sp"
android:textStyle="normal"
app:layout_constraintEnd_toStartOf="#id/radio_button"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<android.support.v7.widget.AppCompatTextView
android:id="#+id/name"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:fontFamily="sans-serif"
android:text="Mobile UK"
android:textColor="#color/colorPrimary"
android:textSize="14sp"
android:textStyle="normal"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#id/radio_button"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/phone_number" />
<android.support.v7.widget.AppCompatRadioButton
android:id="#+id/radio_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
Try below code, change android.support.constraint.ConstraintLayout to LinearLayout and set layout weight.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_weight="1"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.AppCompatTextView
android:id="#+id/phone_number"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="sans-serif"
android:letterSpacing="0.01"
android:lineSpacingExtra="32sp"
android:text="+44 2079460860"
android:textColor="#color/colorPrimary"
android:textSize="16sp"
android:textStyle="normal"
/>
<android.support.v7.widget.AppCompatTextView
android:id="#+id/name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="sans-serif"
android:lineSpacingExtra="32sp"
android:text="Mobile UK"
android:textColor="#color/colorAccent"
android:textSize="14sp"
android:textStyle="normal"
/>
</LinearLayout>
<LinearLayout
android:gravity="right"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<android.support.v7.widget.AppCompatRadioButton
android:id="#+id/radio_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#mipmap/ic_launcher"
android:button="#null"
/>
</LinearLayout>
</LinearLayout>
or, you can use below sample code :
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_weight="1"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Mobile UK"
android:textColor="#color/colorAccent"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="+44 2079460860"
android:textColor="#color/colorPrimary"
/>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<RadioButton
android:id="#+id/radio_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
</LinearLayout>