This is the chat bot. Some messages are left aligned and some are right aligned. Left aligned messages are working fine but right aligned messages also get left aligned. This is the required listitem. layout_gravity to be on the right. But when added to the recycledview, the list item moves to the left as depicted in another photo. I don't know what could be the culprit. Is it constraint_layout or linearlayoutmanager or something else.
`<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="300dp"
android:layout_height="wrap_content"
android:padding="#dimen/paddingBig"
android:background="#drawable/balloon_outgoing_normal"
android:layout_gravity="right"
app:layout_constraintRight_toRightOf="parent"
android:layout_margin="8dp">
<TextView
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:id="#+id/text"
android:layout_width="0dp"
android:paddingRight="#dimen/paddingSmall"
android:layout_height="wrap_content"
tools:text="Hello hello Hellomnhbhvbhbvhbhvbhvbhbvhbvhbvhbvhbhvbhvbhvbhvbhbvhbvhbv hello Hello hello Hello hello Hello hello"/>
<TextView
android:id="#+id/time"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintRight_toLeftOf="#id/status"
app:layout_constraintBottom_toBottomOf="parent"
android:layout_marginTop="8dp"
app:layout_constraintTop_toBottomOf="#id/text"
tools:text="21/04/2016, 2:30 P.M."/>
<ImageView
android:id="#+id/status"
tools:visibility="visible"
android:src="#drawable/baseline_schedule_black_18"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toBottomOf="#id/time"
android:layout_width="wrap_content"
android:layout_height="wrap_content" tools:ignore="ContentDescription"/>
</androidx.constraintlayout.widget.ConstraintLayout>`
`<?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:id="#+id/chat_fragment_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:animateLayoutChanges="true">
<ImageView
android:id="#+id/sendMessage"
android:layout_width="52dp"
android:layout_height="52dp"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:background="?android:attr/selectableItemBackground"
android:padding="#dimen/paddingMedium"
android:src="#drawable/send_disable" tools:ignore="ContentDescription"/>
<EditText
android:id="#+id/input"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:hint="#string/type_message"
app:layout_constraintRight_toLeftOf="#id/sendMessage"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:inputType="textCapSentences|textMultiLine"
android:maxLines="2"
android:padding="#dimen/paddingMedium" tools:ignore="Autofill"/>
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="0dp"
android:layout_height="0dp"
android:paddingBottom="20dp"
app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toTopOf="#id/input"
tools:listitem="#layout/me_message"
app:layout_constraintTop_toTopOf="parent">
</androidx.recyclerview.widget.RecyclerView>
<ProgressBar
android:id="#+id/progressBar"
style="?android:attr/progressBarStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
tools:visibility="visible"
android:visibility="gone"/>
</androidx.constraintlayout.widget.ConstraintLayout>`
I have tried many things. Actually earlier I have used relativelayout for the same and using alignParentBottom that is working but I am amazed why constraintlayout is not working.
You need to use a nested constraintlayout to achieve that view. Also in in your recyclerview set the width to match_parent
android:layout_width="match_parent"
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<androidx.constraintlayout.widget.ConstraintLayout
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintRight_toRightOf="parent"
android:layout_width="300dp"
android:layout_height="wrap_content"
android:padding="#dimen/paddingBig"
android:background="#drawable/balloon_outgoing_normal"
android:layout_margin="8dp">
<TextView
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:id="#+id/text"
android:layout_width="0dp"
android:paddingRight="#dimen/paddingSmall"
android:layout_height="wrap_content"
tools:text="Hello hello Hellomnhbhvbhbvhbhvbhvbhbvhbvhbvhbvhbhvbhvbhvbhvbhbvhbvhbv hello Hello hello Hello hello Hello hello"/>
<TextView
android:id="#+id/time"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintRight_toLeftOf="#id/status"
app:layout_constraintBottom_toBottomOf="parent"
android:layout_marginTop="8dp"
app:layout_constraintTop_toBottomOf="#id/text"
tools:text="21/04/2016, 2:30 P.M."/>
<ImageView
android:id="#+id/status"
tools:visibility="visible"
android:src="#drawable/baseline_schedule_black_18"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toBottomOf="#id/time"
android:layout_width="wrap_content"
android:layout_height="wrap_content" tools:ignore="ContentDescription"/>
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
Set your RecyclerView's layout_width to match_parent and set right gravity for it. That should work.
Try this
<TextView
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:id="#+id/text"
android:layout_width="match_parent"
android:paddingRight="#dimen/paddingSmall"
android:layout_height="wrap_content"
tools:text="Hello hello Hellomnhbhvbhbvhbhvbhvbhbvhbvhbvhbvhbhvbhvbhvbhvbhbvhbvhbv hello Hello hello Hello hello Hello hello"/>
Related
<?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:padding="30dp">
<TextView
android:id="#+id/callInfo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:textSize="22sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.3"
tools:text="••••••••••" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.3"
tools:text="••••••••••"
android:layout_marginTop="60dp"
android:textSize="42sp"
android:background="#eeeeee"/>
<Button
android:id="#+id/answer"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Answer"
android:background="#color/colorPrimary"
android:textColor="#ffffff"
app:layout_constraintBaseline_toBaselineOf="#+id/hangup"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/hangup" />
<Button
android:id="#+id/hangup"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hang up"
android:background="#color/colorAccent"
android:textColor="#ffffff"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/answer"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/callInfo" />
</android.support.constraint.ConstraintLayout>
I'm creating a simple calling application, where item layout are image and textview inside a constraint layout. However, when I run app in android deveice, the text view is not shown on the screen. Can someone please help me out. Thanks in advance.
Just replace tools:text="••••••••••" with android:text="••••••••••" or set a text programmatically :-)
I was following the Android CodeLab tutorials and working on the AboutMe project. But when I went to the part of making a scrollable textview, it somehow isn't working. Here is the xml:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity" android:layout_margin="8dp">
<TextView
android:text="#string/avra_neel"
android:layout_width="148dp"
android:layout_height="56dp" android:id="#+id/name_text"
android:textAppearance="#style/TextAppearance.AppCompat.Large"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintVertical_bias="0.0"
style="#style/NameStyle"/>
<ImageView
android:layout_width="39dp"
android:layout_height="44dp"
app:srcCompat="#android:drawable/btn_star_big_on"
android:id="#+id/star_image"
app:layout_constraintEnd_toEndOf="parent"
android:layout_marginEnd="8dp"
app:layout_constraintStart_toStartOf="parent"
android:layout_marginStart="8dp"
android:layout_marginBottom="552dp"
app:layout_constraintBottom_toBottomOf="parent"
android:contentDescription="#string/yellow_star"
android:layout_marginTop="19dp"
app:layout_constraintTop_toBottomOf="#+id/name_text"
app:layout_constraintVertical_bias="0.0"/>
<ScrollView
android:layout_width="378dp"
android:layout_height="473dp"
android:scrollbars="vertical" android:layout_marginBottom="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:layout_marginEnd="8dp"
app:layout_constraintStart_toStartOf="parent"
android:layout_marginStart="8dp" android:layout_marginTop="8dp"
app:layout_constraintTop_toBottomOf="#+id/star_image"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintVertical_bias="0.666"
android:fillViewport="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:text="#string/bio"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:id="#+id/bio_text"
style="#style/NameStyle"
android:textSize="28sp"
android:paddingStart="8dp"
android:paddingEnd="8dp"/>
</LinearLayout>
</ScrollView>
When I try to run the app, the textview sticks to the bottom or the top, and when I try to scroll it down it jumps to the top. I guess I have done something wrong somewhere.
What do I do to make it work ? Please help.
Get rid of the LinearLayout inside the ScrollView.
The ScrollView should only contain a TextView
The layout below gets cropped on a round chin Wear device. The round chin Wear device only displays the first TextView.
<?xml version="1.0" encoding="utf-8"?>
<android.support.wear.widget.BoxInsetLayout xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/lytLoginMain"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:boxedEdges="all">
<TextView
android:id="#+id/lblDlgLogoutTitle"
style="#style/Title"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginEnd="16dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:text="Hi Employee #1" />
<TextView
android:id="#+id/lblDlgLogoutMessage"
style="#style/Details"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="16dp"
android:background="#color/colorAccent"
android:gravity="center_horizontal"
android:text="#string/logout_msg"
android:textColor="#color/black"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/lblDlgLogoutTitle" />
</android.support.constraint.ConstraintLayout>
</android.support.wear.widget.BoxInsetLayout>
But my layout which got a ScrollView that contains a ConstraintLayout that contains 3 TextView and 2 EditText is displayed properly.
Both layouts are used for an AlertDialog and I don't know what is wrong with my layout.
UPDATE:
I tried to insert a new TextView under the second TextView and the second TextView got displayed now but the new TextView is not visible though.
<?xml version="1.0" encoding="utf-8"?>
<android.support.wear.widget.BoxInsetLayout xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/lytLogoutMain"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:boxedEdges="all">
<TextView
android:id="#+id/lblDlgLogoutTitle"
style="#style/Title"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="16dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:text="Hi Ricky Manalo" />
<TextView
android:id="#+id/lblDlgLogoutMessage"
style="#style/Details"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="16dp"
android:gravity="center_horizontal"
android:text="#string/logout_msg"
android:textColor="#color/black"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/lblDlgLogoutTitle" />
<TextView
android:id="#+id/textView4"
android:layout_width="wrap_content"
android:layout_height="50dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:text="TextView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/lblDlgLogoutMessage" />
</android.support.constraint.ConstraintLayout>
</android.support.wear.widget.BoxInsetLayout>
Have you tried android:fitsSystemWindows="true" ?
More here:
https://developer.android.com/training/wearables/ui/layouts
Using #promanowicz's answer and increasing the marginTop and marginBottom of the message's TextView, I was able to display the full message TextView.
This is my final code.
<TextView
android:id="#+id/lblDlgLogoutMessage"
style="#style/Details"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="32dp"
android:layout_marginEnd="16dp"
android:layout_marginBottom="32dp"
android:fitsSystemWindows="true"
android:gravity="center_horizontal"
android:text="#string/logout_msg"
android:textColor="#color/black"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/lblDlgLogoutTitle" />
I'm a bit new to Android development, so I apologize if this question is simple. I have two textviews stacked vertically that I would like to get flush with each other. There's too much whitespace between the two elements:
I have the following activity layout in which I've tried to make the TextViews flush by using a constraint view and setting the margin between the bottom and top to 0dp:
<?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:id="#+id/linearLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".PackageService">
<android.support.v7.widget.CardView
android:id="#+id/card_inventory"
android:layout_width="match_parent"
android:layout_height="101dp"
android:layout_marginBottom="1dp"
android:layout_marginTop="1dp">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/image_inventory"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:src="#android:drawable/btn_star"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.048"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.49" />
<TextView
android:id="#+id/text_inventory"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="0dp"
android:layout_marginStart="32dp"
android:text="Button Title"
android:textAppearance="#android:style/TextAppearance.Material.Large"
app:layout_constraintBottom_toTopOf="#id/text_last_scan"
app:layout_constraintStart_toEndOf="#+id/image_inventory"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/text_last_scan"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button Subtitle"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="#+id/text_inventory"
app:layout_constraintTop_toBottomOf="#+id/text_inventory" />
</android.support.constraint.ConstraintLayout>
</android.support.v7.widget.CardView>
</LinearLayout>
Any help would be appreciated.
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>