i have managed to make a RecyclerView list but am unable to center the text inside. Below are the codes:
RecyclerView:
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/list2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="50dp"
android:layout_marginEnd="200dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
Item:
<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="wrap_content"
android:layout_height="wrap_content"
>
<TextView
android:id="#+id/listItem"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="#font/caviar_dreams"
android:textSize="24sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:paddingBottom="15dp"/>
</androidx.constraintlayout.widget.ConstraintLayout>
I have tried all properties i could find,alignText, gravity, alignLayout etc
Just change Item layout root element width property from wrap_content to match_parent, so each row item takes full RecyclerView's width and child text would be able to be centered on that width:
<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" // this is the change you have to make
android:layout_height="wrap_content">
<TextView
android:id="#+id/listItem"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="#font/caviar_dreams"
android:textSize="24sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:paddingBottom="15dp"/>
</androidx.constraintlayout.widget.ConstraintLayout>
In the item layout just use:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:layout_gravity="center"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
.../>
</LinearLayout>
Related
How do I align different Text Views that are held in different Layouts in the Recycler View?
The ViewHolder is a constraint layout and I think constraining every View to their corresponding below View would work, but I'm not sure on how to do it.
Also check the picture to have more context.
Item Layout XML code:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:padding="6dp"
android:layout_gravity="center">
<TextView
android:id="#+id/dayTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="40dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#id/weatherDescriptionItemImageView"
app:layout_constraintTop_toTopOf="parent">
</TextView>
<ImageView
android:id="#+id/weatherDescriptionItemImageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintLeft_toRightOf="#id/dayTextView"
app:layout_constraintRight_toLeftOf="#id/weatherDescriptionItemTextView"
app:layout_constraintTop_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent">
</ImageView>
<TextView
android:id="#+id/weatherDescriptionItemTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="30dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toRightOf="#id/weatherDescriptionItemImageView"
app:layout_constraintRight_toLeftOf="#id/minMaxTempItemTextView"
app:layout_constraintTop_toTopOf="parent">
</TextView>
<TextView
android:id="#+id/minMaxTempItemTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="5dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toRightOf="#id/weatherDescriptionItemTextView"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent">
</TextView>
</androidx.constraintlayout.widget.ConstraintLayout>
You could use constraint layouts horizontal chains to align all three in to equal size textviews and drawableStart for the Image.
Here is how to achieve this in 3 textviews and horizontal chains.
<?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:padding="8dp"
android:layout_height="wrap_content">
<TextView
android:id="#+id/dayTextView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:maxLines="2"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/weatherDescriptionItemTextView"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:text="#tools:sample/lorem/random">
</TextView>
<TextView
android:maxLines="2"
android:drawablePadding="8dp"
android:drawableStart="#drawable/ic_outline_wb_sunny_24"
android:id="#+id/weatherDescriptionItemTextView"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/minMaxTempItemTextView"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/dayTextView"
app:layout_constraintTop_toTopOf="parent"
tools:text="#tools:sample/lorem/random"
>
</TextView>
<TextView
android:id="#+id/minMaxTempItemTextView"
android:layout_width="0dp"
android:maxLines="2"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/weatherDescriptionItemTextView"
app:layout_constraintTop_toTopOf="parent"
tools:text="#tools:sample/lorem/random"
>
</TextView>
</androidx.constraintlayout.widget.ConstraintLayout>
use of linear layouts weight is discouraged by google due to performance and high cost of nested layouts maintainability.
I have simple recycler view here, what I want is:
when list is short: stick the button below the recycler view
when list is long: stick the button bottom of screen yet recycler view is wrapping properly and able to scroll till bottom
<?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">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/rv_user_address"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="20dp"
android:layout_marginTop="15dp"
android:layout_marginEnd="20dp"
app:layout_constraintBottom_toTopOf="#id/btn"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_chainStyle="packed"
app:layout_constraintVertical_bias="0.0"
tools:itemCount="50"/>
<Button
android:id="#+id/btn"
android:layout_width="match_parent"
android:layout_height="40dp"
android:layout_marginStart="20dp"
android:layout_marginTop="20dp"
android:layout_marginEnd="20dp"
android:layout_marginBottom="20dp"
android:text="example"
android:background="#00ffff"
android:gravity="center"
android:orientation="horizontal"
app:layout_constraintTop_toBottomOf="#id/rv_user_address"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintBottom_toBottomOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>
When is wrap_content:
<androidx.recyclerview.widget.RecyclerView
android:layout_height="wrap_content"
...
short-list can stick button below properly but button is off screen when list is long
When is constraint:0dp:
<androidx.recyclerview.widget.RecyclerView
android:layout_height="0dp"
...
long list is correct behavior but short-list not stick button below list
I am out of idea. Thanks for helping.
Just add this line:
app:layout_constrainedHeight="true"
to your Recyclerview as:
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/rv_user_address"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="20dp"
android:layout_marginTop="15dp"
android:layout_marginEnd="20dp"
app:layout_constrainedHeight="true" <-- Add this line
app:layout_constraintBottom_toTopOf="#id/btn"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_chainStyle="packed"
app:layout_constraintVertical_bias="0.0"
tools:itemCount="50"/>
Try this out. First align button at the end of the layout then add app:layout_constrainedHeight="true" app:layout_constraintStart_toStartOf="parent" app:layout_constraintBottom_toTopOf="#id/btn" in our recycler view. This will make your recycler view to cover all the layout except the button which is at the bottom of the layout. Still if you don't anything you can ask me.
<?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"
xmlns:tools="http://schemas.android.com/tools">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/rv_user_address"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="20dp"
android:layout_marginTop="15dp"
android:layout_marginEnd="20dp"
android:layout_marginBottom="10dp"
app:layout_constrainedHeight="true"
app:layout_constraintBottom_toTopOf="#id/btn"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0"
app:layout_constraintVertical_chainStyle="packed"
tools:itemCount="100" />
<Button
android:id="#+id/btn"
android:layout_width="match_parent"
android:layout_height="40dp"
android:layout_marginStart="20dp"
android:layout_marginTop="20dp"
android:layout_marginEnd="20dp"
android:layout_marginBottom="20dp"
android:background="#00ffff"
android:gravity="center"
android:orientation="horizontal"
android:text="example"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
Change your constraint layout to linear layout.
Add weight-sum to linear layout.
give the desired weights to your recycler view and button.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:weightSum="10">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/rv_user_address"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="9"
...
/>
<Button
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
...
/>
</LinearLayout>
Just make sure the sum of all weights does not exceed your weight-sum.
In the current case. Recycler view will have 90% of parent, while 10% is used by button. Feel free to play around with these number to achieve the desired results.
I am having an issue with the following XML:
<?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"
tools:context=".MainActivity">
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="0dp">
<View
android:id="#+id/block"
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_marginTop="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<LinearLayout
android:id="#+id/linearLayout"
android:layout_width="match_parent"
android:layout_height="250dp"
android:background="#419E9E9E"
android:orientation="horizontal"
android:paddingTop="8dp"
android:paddingBottom="8dp"
app:layout_constraintTop_toBottomOf="#id/block"></LinearLayout>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/holder"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toBottomOf="#+id/linearLayout">
<TextView
android:id="#+id/holderText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="50dp"
android:layout_marginLeft="50dp"
android:layout_marginTop="12sp"
android:gravity="center_vertical"
android:maxLines="4"
android:text="Hello World"
android:textColor="#color/colorPrimaryDark"
android:textSize="24sp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/holder" />
<Button
android:id="#+id/Button"
android:layout_width="wrap_content"
android:layout_height="40dp"
android:layout_marginTop="20dp"
android:layout_marginEnd="20dp"
android:layout_marginBottom="20dp"
android:text="Button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
</ScrollView>
</androidx.constraintlayout.widget.ConstraintLayout>
Vertically, the layout does what I want: it puts the last layout and fills the screen.
However, when the device is flipped horizontally, the bottom portion (the nested constraintlayout) disappears due to the constraint on itself of app:layout_constraintBottom_toBottomOf="parent"
"How do I fill the screen with a second layout while still having it scroll horizontally ?"
I have attached pics and a demo repository to isolate the problem.
Link: https://github.com/taesookim0412/StackOverflow_Question_Android_NestedConstraintLayouts_ScrollView
I've found a solution. Instead of minHeight, you can use
app:layout_constraintHeight_min="100dp"
My XML code looks like this:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/constraintLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".BottomNavActivity">
<TextView
android:id="#+id/message"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingLeft="10dp"
android:paddingTop="10dp"
android:paddingBottom="10dp"
android:background="#CCB0F0"
android:text="Map"
android:textSize="20sp"
android:textStyle="bold"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toTopOf="#id/idCardView" app:layout_constraintEnd_toEndOf="parent"/>
<android.support.v7.widget.CardView
android:id="#+id/idCardView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:layout_marginTop="5dp"
app:cardCornerRadius="4dp" app:layout_constraintTop_toTopOf="parent"
tools:layout_editor_absoluteX="5dp" android:layout_marginBottom="332dp"
app:layout_constraintTop_toBottomOf="#+id/message"
app:layout_constraintBottom_toTopOf="#+id/container">
<fragment android:id="#+id/autocomplete_fragment"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:name="com.google.android.libraries.places.widget.AutocompleteSupportFragment"
/>
</android.support.v7.widget.CardView>
<android.support.constraint.ConstraintLayout
android:layout_width="0dp"
android:layout_height="0dp"
android:id="#+id/container"
app:layout_constraintTop_toBottomOf="#+id/idCardView"
app:layout_constraintBottom_toTopOf="#+id/navigation" app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintHorizontal_bias="0.0" app:layout_constraintVertical_bias="1.0">
</android.support.constraint.ConstraintLayout>
<android.support.design.widget.BottomNavigationView
android:id="#+id/navigation"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="0dp"
android:layout_marginStart="0dp"
android:background="?android:attr/windowBackground"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:menu="#menu/navigation_menu"/>
</android.support.constraint.ConstraintLayout>
I want the TextView on top, followed by the CardView, followed by a ConstraintLayout, followed by the bottomNavigationView. Somehow the elements are stacked on top of each other like this:
I made sure that every element are constrained to the top or bottom of the next element respectively. Still they end up on top of each other. Is there a better way or a fix to this problem?
In card view you added two constraint on top: remove app:layout_constraintTop_toTopOf="parent" and will work.
You don't need to constraint TextView to Carview, only CardView to TextView.
If TextView width is match_parent, you don't need to set right constraint. Only top and left.
remove CarView to parent top constraint
you don't need to constraint CardView to Container, only container to CardView
<TextView
android:id="#+id/message"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingLeft="10dp"
android:paddingTop="10dp"
android:paddingBottom="10dp"
android:background="#CCB0F0"
android:text="Map"
android:textSize="20sp"
android:textStyle="bold"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
/>
<android.support.v7.widget.CardView
android:id="#+id/idCardView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:layout_marginTop="5dp"
app:cardCornerRadius="4dp"
tools:layout_editor_absoluteX="5dp"
android:layout_marginBottom="332dp"
app:layout_constraintTop_toBottomOf="#+id/message"
app:layout_constraintLeft_toLeftOf="parent"
>
<fragment android:id="#+id/autocomplete_fragment"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:name="com.google.android.libraries.places.widget.AutocompleteSupportFragment"
/>
I'm trying to make a ConstraintLayout to replace a regular layout with Relative and Linear layout but I'm having some troubles to center vertically two views inside a cardview.
The below layout file is my current layout that I want to replace.
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="#dimen/main_button_side_margin"
android:layout_marginStart="#dimen/main_button_side_margin"
android:layout_marginTop="#dimen/main_button_top_margin"
android:paddingBottom="2dp"
android:paddingLeft="1dp"
android:paddingRight="1dp"
android:paddingTop="2dp">
<android.support.v7.widget.CardView xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:id="#+id/select_language_button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:foreground="?android:attr/selectableItemBackground"
card_view:cardBackgroundColor="#android:color/transparent"
card_view:cardCornerRadius="0dp"
card_view:cardElevation="0dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/language_stroke"
android:minHeight="80dp">
<ImageView
android:id="#+id/img_language"
android:layout_width="#dimen/main_button_size"
android:layout_height="#dimen/main_button_size"
android:layout_centerVertical="true"
android:layout_marginLeft="#dimen/main_button_icon_margin"
android:layout_marginStart="#dimen/main_button_icon_margin"
android:src="#drawable/ic_language_white_48dp"
android:tint="#color/language_color" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="#dimen/menu_text_margin"
android:layout_marginLeft="#dimen/menu_text_margin"
android:layout_marginRight="#dimen/menu_text_margin"
android:layout_marginStart="#dimen/menu_text_margin"
android:layout_toEndOf="#id/img_language"
android:layout_centerVertical="true"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="#dimen/main_button_text_title_margin"
android:text="Text" />
<TextView
android:fontFamily="sec-roboto-light"
android:gravity="start"
android:id="#+id/language_desc"
android:text="description"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
</RelativeLayout>
</android.support.v7.widget.CardView>
</FrameLayout>
My current result is below:
<?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="match_parent">
<android.support.v7.widget.CardView
android:id="#+id/select_language_button"
android:layout_width="0dp"
android:layout_height="80dp"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:foreground="?android:attr/selectableItemBackground"
app:cardBackgroundColor="#android:color/transparent"
app:cardCornerRadius="0dp"
app:cardElevation="0dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/language_stroke">
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="0dp"
android:text="desc"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="#+id/textView1"
app:layout_constraintTop_toBottomOf="#+id/textView1" />
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:text="Text"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toRightOf="#+id/img_language"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/img_language"
android:layout_width="32dp"
android:layout_height="32dp"
android:layout_marginBottom="8dp"
android:layout_marginLeft="12dp"
android:layout_marginStart="12dp"
android:layout_marginTop="8dp"
android:src="#drawable/ic_language_white_48dp"
android:tint="#color/language_color"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
</android.support.v7.widget.CardView>
</android.support.constraint.ConstraintLayout>
The problem is to center textView + textView1 inside cardview. I'm only getting textView centered and textView1 below.
I already tried to "pack vertically" and then "center vertically" both but I'm not getting the result that a LinearLayout (holding the two textsview) achieve when it's android:layout_centerVertical="true" inside the cardview.
I would like to do it with the visual editor instead changing the xml.
I know that the way to achive it is using Chains but I'm not able to do it inside cardview, using layout edit.
Can someone help with some screenshots/screen recorder ?
Yep, you have to use vertical packed chain for your textView and textView1 to center them within your CardView.
To add chain in Layout Editor you should select both textView and textView1, right-click on them and select "Center Vertically"
To change chain style to packed, you should tap on "chain" icon until packed style selected
Build a Responsive UI with ConstraintLayout - Control linear groups with a chain contains a video showing how to add chain in Layout Editor and change its style.
XML layout for your particular case:
<?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="match_parent">
<android.support.v7.widget.CardView
android:id="#+id/select_language_button"
android:layout_width="0dp"
android:layout_height="80dp"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:foreground="?android:attr/selectableItemBackground"
app:cardBackgroundColor="#android:color/transparent"
app:cardCornerRadius="0dp"
app:cardElevation="0dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/language_stroke">
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="0dp"
android:text="desc"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="#+id/textView1"
app:layout_constraintTop_toBottomOf="#+id/textView1" />
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:text="Text"
app:layout_constraintBottom_toTopOf="#+id/textView"
app:layout_constraintLeft_toRightOf="#+id/img_language"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_chainStyle="packed" />
<ImageView
android:id="#+id/img_language"
android:layout_width="32dp"
android:layout_height="32dp"
android:layout_marginBottom="8dp"
android:layout_marginLeft="12dp"
android:layout_marginStart="12dp"
android:layout_marginTop="8dp"
android:src="#drawable/ic_language_white_48dp"
android:tint="#color/language_color"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
</android.support.v7.widget.CardView>
</android.support.constraint.ConstraintLayout>