Creating flexible buttons with weight (chaining + spread)

Creating flexible buttons with weight (chaining + spread) - android

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>

Related

Make ConstraintLayout responsive in Android

I am working on a UI, in which I have to take email and number from user, buttons should must be at bottom, after button, there is a footer too on bottom. I have to make it responsive. I am using scroll view for this purpose. I am stuck on a point.
I am using wrap_content as height for a view, and giving its top to bottom of upper view, and its bottom to top of lower view's top. On small screens, it is working fine, but due to these constraints, on large screens, it is in the centre of screen.
Please have a look on it:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/white"
android:orientation="vertical">
<ScrollView
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toTopOf="#id/footer"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginBottom="6dp"
android:scrollbars="none"
android:fillViewport="true"
android:layout_width="match_parent"
android:layout_height="0dp">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/icon_img"
android:layout_width="wrap_content"
android:layout_height="230dp"
android:layout_marginHorizontal="10dp"
android:layout_marginTop="18dp"
android:src="#drawable/ic_sample"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/loginTxt"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/icon_img"
android:layout_marginStart="20dp"
android:layout_marginTop="20dp"
android:layout_marginEnd="20dp"
android:layout_marginBottom="20dp"
android:fontFamily="#font/exo_light"
android:gravity="start"
android:text="Login"
android:textColor="#color/charcol_blue"
android:textSize="22sp"
app:layout_constraintTop_toBottomOf="#id/icon_img" />
<TextView
android:id="#+id/login_Desc"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/loginTxt"
android:layout_marginHorizontal="20dp"
android:layout_marginTop="20dp"
android:fontFamily="#font/exo_regular"
android:gravity="start"
android:text="Enter your credentials"
android:textColor="#color/charcol_blue"
android:textSize="14sp"
app:layout_constraintTop_toBottomOf="#id/loginTxt" />
<EditText
android:id="#+id/loginEditTextEmail"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_below="#+id/login_Desc"
android:layout_marginStart="20dp"
android:layout_marginTop="20dp"
android:layout_marginEnd="20dp"
android:layout_marginBottom="20dp"
android:background="#drawable/rounded_input_shape"
android:fontFamily="#font/exo_regular"
android:hint="Email"
android:inputType="textEmailAddress"
android:paddingStart="25dp"
android:paddingEnd="25dp"
android:textSize="17sp"
app:layout_constraintTop_toBottomOf="#id/login_Desc" />
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/phone_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:visibility="visible"
app:layout_constraintBottom_toTopOf="#+id/btnLayout"
app:layout_constraintTop_toBottomOf="#id/loginEditTextEmail">
<androidx.constraintlayout.widget.ConstraintLayout
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginHorizontal="20dp"
android:background="#drawable/rounded_input_shape"
android:layout_marginTop="20dp"
android:layout_width="match_parent"
android:layout_height="50dp">
<com.hbb20.CountryCodePicker
android:id="#+id/ccp"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:background="#F5F5F5"
android:gravity="center"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:ccp_autoDetectCountry="true"
app:ccp_defaultPhoneCode="41" />
<EditText
android:id="#+id/editText_carrierNumber"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#android:color/transparent"
android:hint=" Ph Number"
app:layout_constraintLeft_toRightOf="#+id/ccp"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="#+id/ccp"
app:layout_constraintBottom_toBottomOf="#+id/ccp"
android:fontFamily="#font/exo_regular"
android:inputType="phone"
android:paddingStart="10dp"
android:paddingEnd="10dp"
android:textSize="15sp" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/btnLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="20dp"
app:layout_constraintBottom_toBottomOf="parent">
<Button
android:id="#+id/loginBtnSubmit"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="20dp"
android:layout_marginTop="15dp"
android:layout_marginEnd="20dp"
android:background="#drawable/blue_round_button"
android:fontFamily="#font/exo_regular"
android:padding="10dp"
android:text="#string/login"
android:textAllCaps="false"
android:textColor="#color/white"
android:textSize="16sp"
android:textStyle="bold"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<View
android:id="#+id/imageView1"
android:layout_width="0sp"
android:layout_height="0dp"
android:background="#drawable/divider"
app:layout_constraintBottom_toBottomOf="#id/orText"
app:layout_constraintLeft_toLeftOf="#id/loginBtnSubmit"
app:layout_constraintRight_toLeftOf="#id/orText"
app:layout_constraintTop_toTopOf="#+id/orText" />
<TextView
android:id="#+id/orText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="15dp"
android:fontFamily="#font/exo_regular"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:text="OR"
android:textColor="#color/black"
android:textSize="16dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#id/loginBtnSubmit" />
<View
android:id="#+id/imageView2"
android:layout_width="0sp"
android:layout_height="0dp"
android:background="#drawable/divider"
app:layout_constraintBottom_toBottomOf="#id/orText"
app:layout_constraintLeft_toRightOf="#id/orText"
app:layout_constraintRight_toRightOf="#id/loginBtnSubmit"
app:layout_constraintTop_toTopOf="#+id/orText" />
<Button
android:id="#+id/guestContinue"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="20dp"
android:layout_marginTop="15dp"
android:layout_marginEnd="20dp"
android:background="#drawable/white_round_button"
android:fontFamily="#font/exo_regular"
android:padding="10dp"
android:text="Sign Up"
android:textAllCaps="false"
android:textColor="#color/instruction_black_color"
android:textSize="16sp"
app:layout_constraintTop_toBottomOf="#+id/orText" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
</ScrollView>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/footer"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="7dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toBottomOf="parent">
<TextView
android:id="#+id/txt1"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="center_vertical"
android:gravity="center_vertical"
android:fontFamily="#font/exo_regular"
android:text="App "
app:layout_constraintTop_toTopOf="#+id/txt2"
app:layout_constraintBottom_toBottomOf="#+id/txt2"
app:layout_constraintRight_toLeftOf="#+id/txt2"
android:textColor="#color/charcol_blue"
android:textSize="14sp" />
<TextView
android:id="#+id/txt2"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="center_vertical"
android:layout_marginLeft="2dp"
android:fontFamily="#font/exo_regular"
android:gravity="center_vertical"
android:text="Footer"
app:layout_constraintTop_toTopOf="#+id/footerImg"
app:layout_constraintBottom_toBottomOf="#+id/footerImg"
app:layout_constraintRight_toLeftOf="#+id/footerImg"
android:textColor="#color/charcol_blue"
android:textSize="14sp" />
<ImageView
android:id="#+id/footerImg"
android:layout_width="30dp"
android:layout_height="22dp"
android:layout_marginLeft="2dp"
android:scaleType="fitCenter"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:src="#drawable/logout" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
I am facing issue agains a constraint layout whose id is: "phone_layout"
If I will use its height as 0dp, it will works fine on large screens, but on small screens (when scroll view will be used to scroll screen), this layout will not be shown because of 0dp height.
I want this phone_layout to be below of email layout on every screen(small/large).

I resolved it by using
app:layout_constraintVertical_bias="0"

How to place four boxes inside a layout?

I want to create this type of layout where in the boxes are of equal shape and are arranged like this:
I have think of creating two Linear Layout with horizontal orientation where in I can fit the two boxes. Any help would be much appreciated.
Here is the code, I have written:
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
....
<LinearLayout
android:id="#+id/share_app_row_one_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="32dp"
android:layout_marginTop="32dp"
android:layout_marginEnd="32dp"
android:orientation="horizontal"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<Button
android:id="#+id/box_1"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_marginEnd="46dp"
android:layout_height="wrap_content"
android:background="#color/blue"
android:text="Box #1"
android:textAllCaps="false"
android:textColor="#color/white"
/>
<Button
android:id="#+id/box_2"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:background="#color/blue"
android:text="Box #2"
android:textAllCaps="false"
android:textColor="#color/white"/>
</LinearLayout>
<LinearLayout
android:id="#+id/share_app_row_two_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="32dp"
android:layout_marginTop="32dp"
android:layout_marginEnd="32dp"
android:orientation="horizontal"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/share_app_row_one_container">
<Button
android:id="#+id/box_3"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_marginEnd="46dp"
android:layout_height="wrap_content"
android:background="#color/blue"
android:text="Box #3"
android:textAllCaps="false"
android:textColor="#color/white"
/>
<Button
android:id="#+id/box_4"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:background="#color/blue"
android:text="Box #4"
android:drawableTint="#color/white"
android:textAllCaps="false"
android:textColor="#color/white"/>
</LinearLayout>
...
</androidx.constraintlayout.widget.ConstraintLayout>
But the boxes are not uniform.

You can use the constraints to reach the goal:
And the code:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="16dp">
<TextView
android:id="#+id/boxOneTextView"
android:layout_width="0dp"
android:layout_height="96dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="16dp"
android:background="#color/colorPrimary"
android:gravity="center"
android:textColor="#android:color/white"
app:layout_constraintBottom_toTopOf="#id/boxThreeTextView"
app:layout_constraintEnd_toStartOf="#id/boxTwoTextView"
app:layout_constraintStart_toStartOf="parent"
tools:text="Box 1" />
<TextView
android:id="#+id/boxTwoTextView"
android:layout_width="0dp"
android:layout_height="96dp"
android:layout_marginStart="8dp"
android:layout_marginBottom="16dp"
android:background="#color/colorPrimary"
android:gravity="center"
android:textColor="#android:color/white"
app:layout_constraintBottom_toTopOf="#id/boxFourTextView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/boxOneTextView"
tools:text="Box 4" />
<TextView
android:id="#+id/boxThreeTextView"
android:layout_width="0dp"
android:layout_height="96dp"
android:layout_marginEnd="8dp"
android:background="#color/colorPrimary"
android:gravity="center"
android:textColor="#android:color/white"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#id/boxFourTextView"
app:layout_constraintStart_toStartOf="parent"
tools:text="Box 3" />
<TextView
android:id="#+id/boxFourTextView"
android:layout_width="0dp"
android:layout_height="96dp"
android:layout_marginStart="8dp"
android:background="#color/colorPrimary"
android:gravity="center"
android:textColor="#android:color/white"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/boxThreeTextView"
tools:text="Box 4" />
</androidx.constraintlayout.widget.ConstraintLayout>

You can also set a drawable like this:
<TextView
android:id="#+id/box_1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center_horizontal"
android:drawableLeft="#drawable/box_ic"
android:text="Item 0"/>

How can I align the textview in cardview for recyclerview

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

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>

Develop Reference

The Android operating system is a mobile operating system that was developed by Google (GOOGL?) to be primarily used for touchscreen devices, cell phones, and tablets.

Creating flexible buttons with weight (chaining + spread) - android

Related

Make ConstraintLayout responsive in Android

How to place four boxes inside a layout?

How can I align the textview in cardview for recyclerview

how to adjust textview with screen limits?

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

Categories

Resources