How can I align the textview in cardview for recyclerview - android

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...

Related

How to make the child of a view fill the space (match_parent) but keep growing if necessary?

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

how to adjust textview with screen limits?

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.

Center vertically ConstraintLayout with expandable textViews inside ScrollView (scroll/center problem)

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>

how to set left and right textview and radio button in constraint layout?

<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>

Creating flexible buttons with weight (chaining + spread)

I am trying to make my buttons fill the space evenly, basically having each button fill one-third of the remaining space (there are three buttons).
According to here, I should chain the views (buttons) then spread them and at weights if necessary to fill the spaces. Then I should change the buttons vertical constraints to "Match Constraints". This however, causes the buttons to be uneven. I finally added layout_constraintVertical_weight="" to each button in the text of the XML file but to no avail. Using android:layout_height also does not work.
The 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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#CCFFE5"
android:weightSum="1"
tools:context="com.example.shaynimex.boomnumber.HomeScreen">
<TextView
android:layout_width="0dp"
android:layout_height="52dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginTop="16dp"
android:fontFamily="cursive"
android:text="Boom Number"
android:textAlignment="center"
android:textSize="50sp"
android:textStyle="bold"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:id="#+id/textView"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp" />
<Button
android:id="#+id/button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="1 PLAYER"
android:textSize="30sp"
android:textStyle="bold"
app:layout_constraintBottom_toTopOf="#+id/button3"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintVertical_chainStyle="packed"
android:layout_marginTop="8dp"
app:layout_constraintTop_toBottomOf="#+id/textView" />
<Button
android:id="#+id/button3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="2 PLAYER"
android:textAlignment="center"
android:textSize="30sp"
android:textStyle="bold"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintHorizontal_bias="1.0"
android:layout_marginTop="8dp"
app:layout_constraintTop_toBottomOf="#+id/button"
app:layout_constraintBottom_toTopOf="#+id/button4" />
<Button
android:id="#+id/button4"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="How to Play"
android:textAlignment="center"
android:textSize="30sp"
android:textStyle="bold"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintTop_toBottomOf="#+id/button3"
app:layout_constraintBottom_toBottomOf="parent" />
It also currently looks like this (for the Pixel XL):
So how would I go about applying the weights to the buttons and making them fill the remaining space evenly?

I did not use ConstraintLayout because of the difficulty of weights.
if this what you want I just did this kind of code.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#CCFFE5">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fontFamily="cursive"
android:text="Boom Number"
android:textAlignment="center"
android:textSize="50sp"
android:textStyle="bold"
android:id="#+id/textView"/>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1">
<Button
android:id="#+id/button"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="1 PLAYER"
android:textSize="30sp"
android:textStyle="bold"/>
</FrameLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1">
<Button
android:id="#+id/button3"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="2 PLAYER"
android:textAlignment="center"
android:textSize="30sp"
android:textStyle="bold"
android:layout_marginTop="8dp" />
</FrameLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1">
<Button
android:id="#+id/button4"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="How to Play"
android:textAlignment="center"
android:textSize="30sp"
android:textStyle="bold"/>
</FrameLayout>
</LinearLayout>

Categories

Resources