Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

TextView going out of screen with constraintLayout

I am using ConstraintLayout to create below xml in my application. As you can see my first item is fine, But in the second one, some parts of my textView are not on the screen!

This is my XML code:

<android.support.constraint.ConstraintLayout
        xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/ly_user"
        android:padding="8dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

    <ImageView
            app:layout_constraintRight_toRightOf="parent"
            android:id="@+id/im_user_icon"
            android:layout_width="@dimen/default_message_icon_size"
            android:layout_height="@dimen/default_message_icon_size"
            android:src="@drawable/user_pacific"/>

    <ImageView
            app:layout_constraintTop_toBottomOf="@+id/im_user_icon"
            app:layout_constraintRight_toLeftOf="@+id/im_user_icon"
            android:id="@+id/im_user_arrow"
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:src="@drawable/arrow_bg1"/>

    <View
            android:id="@+id/view_user_guidLine"
            android:layout_width="1dp"
            android:layout_height="0dp"
            app:layout_constraintLeft_toLeftOf="@id/im_user_arrow"
            app:layout_constraintRight_toRightOf="@id/im_user_arrow"/>

    <TextView
            app:layout_constraintTop_toBottomOf="@+id/im_user_icon"
            app:layout_constraintRight_toLeftOf="@+id/view_user_guidLine"
            android:id="@+id/tv_user_message"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:gravity="right"
            android:padding="8dp"
            android:minWidth="@dimen/default_message_textarea_width"
            android:minHeight="@dimen/default_message_textarea_height"
            android:background="@drawable/bg_right_text"
            android:textColor="@android:color/white"/>


</android.support.constraint.ConstraintLayout>

I Know I can fix this problem to adding below line to the textView, But I need my textView be wrapContent.

 app:layout_constraintLeft_toLeftOf="parent"

enter image description here

like image 838
Ehsan Avatar asked Jan 01 '19 09:01

Ehsan


People also ask

Which is better RelativeLayout or ConstraintLayout?

If you have the choice start with ConstraintLayout, but if you already have your app in RelativeLayout, stay with it. That's all I have been following. RelativeLayout is very limited in functionality and many complex layouts can't be made using it, especially when ratios are involved.

Is ConstraintLayout a ViewGroup?

A ConstraintLayout is a ViewGroup which allows you to position and size widgets in a flexible way. Note: ConstraintLayout is available as a support library that you can use on Android systems starting with API level 9 (Gingerbread).

How do I set TextView in bottom of ConstraintLayout?

You should add layout_constraintBottom_toTopOf & layout_constraintTop_toBottomOf . layout_constraintBottom_toTopOf —> Align the bottom of the desired view to the top of another. layout_constraintTop_toBottomOf —> Align the top of the desired view to the bottom of another.


2 Answers

You can set your TextView's width to wrap_content, but to prevent it from expanding outside of screen you need to add the left constraint as well and use app:layout_constrainedWidth="true" to enforce constraints.

Now, to make the TextView stick to the right, you need to add app:layout_constraintHorizontal_bias="1", which will align it to its right constraint.

So all in all, these are the changes needed for the TextView:

app:layout_constraintLeft_toLeftOf="parent"
app:layout_constrainedWidth="true"
app:layout_constraintHorizontal_bias="1"
android:layout_width="wrap_content"
like image 173
Pawel Laskowski Avatar answered Sep 30 '22 17:09

Pawel Laskowski


Add these following line in your code in your TextView

app:layout_constraintWidth_percent="0.6"

first line layout_constraintWidth_percent is 60 percent of your phone screen width you can change it according to your need.

like image 38
Saurabh Bhandari Avatar answered Sep 30 '22 16:09

Saurabh Bhandari