Develop Reference

increasing font size in mobile settings make recyclerview items overlapping

Recyclerview items are overlapping when I increase font size in settings.
in the first image recycler view items are normal but in the second image items are overlapping after increasing font size in settings.
this is code
<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:clickable="true"
android:foreground="?android:attr/selectableItemBackground">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_margin="5dp"
android:padding="10dp">
<com.makeramen.roundedimageview.RoundedImageView
android:id="#+id/itemImage"
style="#style/RecyclerviewArrowcolor"
android:layout_width="40dp"
android:layout_height="40dp"
android:scaleType="centerCrop"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:riv_oval="true"
/>
<View
android:id="#+id/viewSupporter2"
android:layout_width="1dp"
android:layout_height="1dp"
app:layout_constraintBottom_toBottomOf="#id/itemImage"
app:layout_constraintEnd_toEndOf="#id/itemImage"
app:layout_constraintStart_toStartOf="#id/itemImage"
app:layout_constraintTop_toTopOf="#id/itemImage" />
<TextView
android:id="#+id/diseasename"
style="#style/Recyclerviewdiseasecolor"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="10dp"
android:text="disease name"
android:textAppearance="?android:attr/textAppearanceMedium"
app:layout_constraintBottom_toTopOf="#id/viewSupporter2"
app:layout_constraintStart_toEndOf="#id/itemImage"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/diseasenickname"
style="#style/Recyclerviewnicknamecolor"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="10dp"
android:text="disease nickname"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/itemImage"
app:layout_constraintTop_toBottomOf="#id/viewSupporter2"
tools:ignore="NotSibling" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>

Because your itemImage is only vertically constrained to the top and has a fixed height of 40 dp, the top TextView only has 20 dp of height to fit within (the space between the top of the card and your "view supporter"). When it wraps to two lines, it stays centered in that 20 dp space and spills out to cover things above/below it.
You should rethink how you are setting up these constraints so they will be flexible with respect to font size changes causing more lines of text. For example, you could make the image be centered vertically in the row by constraining it to both the top and bottom like this, and get rid of the "ViewSupporter" entirely
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:clickable="true"
android:foreground="?android:attr/selectableItemBackground">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_margin="5dp"
android:padding="10dp">
<com.makeramen.roundedimageview.RoundedImageView
android:id="#+id/itemImage"
style="#style/RecyclerviewArrowcolor"
android:layout_width="40dp"
android:layout_height="40dp"
android:scaleType="centerCrop"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:riv_oval="true"/>
<TextView
android:id="#+id/diseasename"
style="#style/Recyclerviewdiseasecolor"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="10dp"
android:text="disease name"
android:textAppearance="?android:attr/textAppearanceMedium"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/itemImage"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/diseasenickname"
style="#style/Recyclerviewnicknamecolor"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="10dp"
android:text="disease nickname"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/itemImage"
app:layout_constraintTop_toBottomOf="#id/diseasename"
tools:ignore="NotSibling" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>
If you wanted to keep the image centered on the line between the two TextViews, you could do that too by adjusting the image top and bottom constraints
<com.makeramen.roundedimageview.RoundedImageView
android:id="#+id/itemImage"
style="#style/RecyclerviewArrowcolor"
android:layout_width="40dp"
android:layout_height="40dp"
android:scaleType="centerCrop"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/diseasename"
app:layout_constraintBottom_toTopOf="#id/diseasenickname"
app:riv_oval="true"/>

constraint layout, centre when width is more than the max width

i have two text views. It has fixed margin on both sides. The text should be left aligned but on large devices with width > max width mentioned, the textview should be centered than left aligned. I am not able to get this centering on large devices.
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal">
<android.support.v7.widget.AppCompatTextView
android:id="#+id/title"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="start"
android:text="#{title}"
android:textColor="?colorShade1"
android:textSize="60dp"
android:layout_marginTop="20dp"
app:layout_constraintBottom_toTopOf="#id/subTitle"
app:layout_constraintEnd_toEndOf="#+id/guidelineEnd"
app:layout_constraintStart_toStartOf="#+id/guidelineStart"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintWidth_max="1280dp"
app:layout_constraintHorizontal_bias="0.0"
tools:text="Title" />
<android.support.v7.widget.AppCompatTextView
android:id="#+id/subTitle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="3dp"
android:layout_marginBottom="8dp"
android:text="#{subTitle}"
android:textColor="?colorShade1"
android:textSize="32dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/guidelineEnd"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="#+id/title"
app:layout_constraintTop_toBottomOf="#+id/title"
app:layout_constraintWidth_max="640dp"
tools:text="SubTitleView" />
<android.support.constraint.Guideline
android:id="#+id/guidelineStart"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_begin="64dp" />
<android.support.constraint.Guideline
android:id="#+id/guidelineEnd"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_end="64dp" />
</android.support.constraint.ConstraintLayout>

Use app:layout_constraintWidth_max
This will center the LinearLayout in the constraint layout, keeping a 40dp horizontal margin until it hits 414dp 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"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="40dp"
android:layout_marginEnd="40dp"
app:layout_constraintWidth_max="414dp"
android:orientation="vertical"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toBottomOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

You need a copy of your layout in the res/layout-large folder with the second layout that will be specific for large screens.
See more in: https://developer.android.com/training/multiscreen/screensizes.html
In Aliases

How to fill the screen with two view in ConstraintLayout?

I'm trying to put a Button at the top of the screen and under it an ImageView which need to fill the screen (all screen sizes).
In RelativeLayout it's seems to be easy to do, but in the ConstraintLayout I don't succeed to get it done.
Here is an example of what it's look like in RelativeLayout:
and the XML Code:
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Download Image"
android:id="#+id/button"
android:layout_alignParentTop="true"
android:layout_alignParentStart="true"
android:onClick="downloadImage" />
<ImageView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/imageView"
android:layout_below="#+id/button"
android:layout_alignParentStart="true" />
Thanks for your help,
Shay.

Maybe I've not understod your question completely but this is what I did to recreate the image you gave as example:
<?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">
<Button
android:id="#+id/button2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginTop="8dp"
android:text="Button"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/imageView27"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginTop="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="0.59"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/button2"
app:srcCompat="#drawable/common_google_signin_btn_icon_dark" />
</android.support.constraint.ConstraintLayout>
and the result:

Actually fill_parent property is deprecated. so use 0dp to fill available space of the ConstraintLayout
For your question use following code to show Button at the top of the screen and under it an ImageView which will definitely fill the screen (for all screen sizes).
<?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">
<Button
android:id="#+id/button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:onClick="downloadImage"
android:text="Download Image"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/imageView"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/button" />
</android.support.constraint.ConstraintLayout>
Note: If you want to add margin/padding then apply to the layout or any view as per your requirement. but when you are adding any margin to the view inside to the ConstraintLayout, that view need to have Constraint for that particulate side.

<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Download Image"
android:id="#+id/button"
android:layout_alignParentTop="true"
android:layout_alignParentStart="true"
android:onClick="downloadImage"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<ImageView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/imageView"
android:layout_below="#+id/button"
android:layout_alignParentStart="true"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/button"
app:layout_constraintBottom_toBottomOf="parent"/>
Button needs to have left, right and top constraints with parent.
And ImageView needs to have left, right , bottom constraints with parent and top constraint with button's bottom.

Margin under ConstraintLayout guideline not appearing properly

I am trying to add some space underneath the Guideline for my constraint layout, but for some reason it doesn't appear to be applied. Does anyone know what is going on and how to apply 5dp of margin underneath the Guideline (for both portrait and landscape orientations)?
XML layout
<?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:background="#color/lightgrey">
<com.google.android.gms.maps.MapView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/map_townmap"
android:name="com.google.android.gms.maps.SupportMapFragment"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#09c"
app:layout_constraintBottom_toBottomOf="#+id/guideline"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<android.support.constraint.Guideline
android:id="#+id/guideline"
android:layout_width="match_parent"
android:layout_height="0dp"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.9"/>
<ImageView
android:id="#+id/imageViewSun"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="5dp"
android:src="#drawable/ic_sun_black"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#+id/switch"
app:layout_constraintTop_toBottomOf="#+id/guideline"
/>
<Switch
android:id="#+id/switch"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginBottom="5dp"
android:background="#android:color/transparent"
android:theme="#android:style/Theme.Material.Light"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toRightOf="#+id/imageViewSun"
app:layout_constraintRight_toLeftOf="#+id/imageViewMoon"
app:layout_constraintTop_toBottomOf="#+id/guideline"/>
<ImageView
android:id="#+id/imageViewMoon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_moon_black"
android:layout_marginBottom="5dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toRightOf="#+id/switch"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/guideline"/>
</android.support.constraint.ConstraintLayout>
Portrait orientation
Portrait orientation (close-up)
Landscape orientation
Landscape orientation (close-up)

You can apply margins to Guidelines:
<android.support.constraint.Guideline
android:id="#+id/guideline"
android:layout_width="1dp"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_begin="5dp" />
Although you might need to adjust the margin layout_constraintGuide_begin and the android:orientation accordingly. Probably you should do that though a portrait layout xml file and a landscape layout xml file in their correct res folder locations.

Actually, the thing is you have added Guideline and you are using app:layout_constraintGuide_percent="0.9". This means that Guideline will be set according to the parent layout, so when you change orientation it will look weird.
Use following code to solve your problem:
<?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:background="#color/lightgrey">
<com.google.android.gms.maps.MapView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/map_townmap"
android:name="com.google.android.gms.maps.SupportMapFragment"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#09c"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toTopOf="#+id/imageViewSun"
app:layout_constraintTop_toTopOf="parent"/>
<ImageView
android:id="#+id/imageViewSun"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="5dp"
android:layout_marginTop="5dp"
android:src="#drawable/ic_sun_black"
app:layout_constraintTop_toBottomOf="#+id/map_stationmap_lighttheme"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#+id/switch" />
<Switch
android:id="#+id/switch"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginBottom="5dp"
android:layout_marginTop="5dp"
app:layout_constraintTop_toBottomOf="#+id/map_stationmap_lighttheme"
android:background="#android:color/transparent"
android:theme="#android:style/Theme.Material.Light"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toRightOf="#+id/imageViewSun"
app:layout_constraintRight_toLeftOf="#+id/imageViewMoon"/>
<ImageView
android:id="#+id/imageViewMoon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_moon_black"
android:layout_marginBottom="5dp"
android:layout_marginTop="5dp"
app:layout_constraintTop_toBottomOf="#+id/map_stationmap_lighttheme"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toRightOf="#+id/switch"
app:layout_constraintRight_toRightOf="parent"/>
</android.support.constraint.ConstraintLayout>

Content of View not shown completely when using a ConstraintLayout - Android

I am using this color picker above a guideline and want to align a Text View (and other views) below the guideline and bind them to the width of the color picker by using a ConstraintLayout with these options:
app:layout_constraintRight_toRightOf="#+id/colorPicker"
app:layout_constraintLeft_toLeftOf="#+id/colorPicker"
(The width of the color picker depends on the available height.)
The problem I am facing is that the view seems to be placed exactly below the color picker, however, the content of the view is not adjusted and therefore not shown completely as shown in this picture.
Similar behavior can be reproduced with an ImageView instead of TextView.
A RecyclerView seems to be working, however, the 'list end animation' when reaching the start or end of the list is misplaced.
When using other views instead of this color picker I do not face this issue.
Can anyone explain this behavior and how to fix it?
The complete xml code I am using for this:
<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"
tools:context="xxx.xxx.xxx.MainActivity">
<com.rarepebble.colorpicker.ColorPickerView
android:id="#+id/colorPicker"
android:layout_width="wrap_content"
android:layout_height="0dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toTopOf="#+id/guideline"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
/>
<android.support.constraint.Guideline
android:id="#+id/guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintGuide_percent="0.60"
android:orientation="horizontal"
/>
<TextView
android:id="#+id/textView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Hello World! Some chars in this TextView are cut on the right side."
app:layout_constraintTop_toTopOf="#+id/guideline"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintRight_toRightOf="#+id/colorPicker"
app:layout_constraintLeft_toLeftOf="#+id/colorPicker"
/>
</android.support.constraint.ConstraintLayout>

Did you try using LinearLayout? With problems like these, where one view needs to occupy a percentage of the screen, using layout_weight
Solution using LinearLayout
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="center"
android:orientation="vertical">
<com.rarepebble.colorpicker.ColorPickerView
android:id="#+id/colorPicker"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_gravity="center"
android:layout_weight="6"
/>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="4">
<TextView
android:id="#+id/textView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Hello World! Some chars in this TextView are cut on the right side." />
</FrameLayout>
</LinearLayout>
Edit based on comments
Something like this should work. You can change the View's visibility to GONE or VISIBLE depending on whether the FloatingActionButton has been tapped or not.
<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.support.design.widget.FloatingActionButton
android:id="#+id/floatingActionButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:fabSize="normal"
android:layout_marginStart="16dp"
app:layout_constraintLeft_toLeftOf="#+id/linearContainer"
app:layout_constraintTop_toTopOf="#+id/linearContainer"
android:layout_marginTop="16dp" />
<View
android:id="#+id/view"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="0dp"
android:layout_marginLeft="0dp"
android:layout_marginRight="0dp"
android:layout_marginTop="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0" />
<LinearLayout
android:id="#+id/linearContainer"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="center"
android:layout_marginBottom="0dp"
android:layout_marginRight="8dp"
android:layout_marginTop="8dp"
android:orientation="vertical"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginLeft="8dp"
app:layout_constraintVertical_bias="0.0"
app:layout_constraintLeft_toLeftOf="parent">
<com.rarepebble.colorpicker.ColorPickerView
android:id="#+id/colorPicker"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_gravity="center"
android:layout_weight="6" />
<FrameLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="4">
<TextView
android:id="#+id/textView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Hello World! Some chars in this TextView are cut on the right side." />
</FrameLayout>
</LinearLayout>
</android.support.constraint.ConstraintLayout>