How to constraint a relative layout to take maximum of specified width on screen-CodePudding

In my layout file, I have a relative layout and in that layout , I have a textView. If the text is very large, I want it to take only 60% of the screen and rest of the text will go to new line.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_marginTop="5dp"
        android:layout_marginEnd="5dp"
        android:layout_marginRight="5dp"
        android:background="@drawable/rounded_corner"
        android:layout_alignParentEnd="true">

        <TextView
            android:id="@ id/txtSentMsg"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="10dp"
            android:text="This is sent message"
            android:textColor="@color/white"
            android:textSize="18sp"

            />
    </RelativeLayout>
</RelativeLayout>

This is my layout file and the pictures attached will clarify my doubt.

as you can see my sent message takes up the whole screen. I want the layout to be aligned to the right and also take up maximum of 60% of the screen.

UPDATE :

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:animateLayoutChanges="true"
    android:layout_marginTop="4dp"
    android:padding="4dp"
    android:layout_height="wrap_content">


    <TextView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="@drawable/rounded_corner"
        android:paddingStart="12dp"
        android:paddingEnd="12dp"
        android:paddingTop="8dp"
        android:paddingBottom="8dp"
        app:layout_constraintWidth_max="wrap"
        android:textColor="@color/white"
        android:textSize="16sp"
        app:layout_constraintEnd_toEndOf="parent"
        android:id="@ id/txtSentMsg"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintWidth_percent="0.7"
        tools:text="Hello, this is a long message and will use other lines as i grows. The default width is 80% of any screen."
        />


</androidx.constraintlayout.widget.ConstraintLayout>

Now i have used this and it works. I gives me maximum of 60% screen area But now i can see sometimes, the text view takes up whole of 60 % when contents in it are less.

As you can see the text how are you is taking up whole 60%. This space goes out when i close the activity and start it again and appears randomly in any message.

CodePudding user response：

If you are bound to use a Relative Layout, then put the chat rectangles in a relative layout as the below:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <RelativeLayout
        android:id="@ id/chats"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <TextView
            android:id="@ id/textView3"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentEnd="true"
            android:text="TextView"
            android:layout_marginLeft="16dp"
            android:background="@android:color/holo_green_dark"
            />
    </RelativeLayout>


    <RelativeLayout
        android:id="@ id/chatInp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true">

        <EditText
            android:id="@ id/editTextTextPersonName"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:ems="10"
            android:inputType="textPersonName"
            android:text="Name" />
    </RelativeLayout>
</RelativeLayout>

But I will recommend you to use Constraint layout as the below:

<?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">

    <TextView
        android:id="@ id/textView4"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="32dp"
        android:background="@android:color/holo_green_dark"
        android:text="TextView"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="@ id/guideline2"
        app:layout_constraintTop_toTopOf="parent" />

    <androidx.constraintlayout.widget.Guideline
        android:id="@ id/guideline2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.4" />

    <EditText
        android:id="@ id/editTextTextPersonName2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:ems="10"
        android:inputType="textPersonName"
        android:text="Name"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent" />


</androidx.constraintlayout.widget.ConstraintLayout>

CodePudding user response：

I would suggest usage of linear layout. It is the fastest one, and you could achieve what you want in, on my opinion, easy way:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="end"
    android:weightSum="1">

    <LinearLayout
        android:layout_weight="0.6"
        android:layout_width="0dp"
        android:gravity="end"
        android:layout_height="wrap_content">

        <TextView
            android:id="@ id/txtSentMsg"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="10dp"
            android:text="This is a very long message that will go in two lines"
            android:background="@color/colorAccent"
            android:textSize="18sp" />
    </LinearLayout>
</LinearLayout>

CodePudding user response：

Using constraint layout, you can simply tell any view explicitly that how much percentage width or height it should cover with the help of app:layout_constraintWidth_percent and app:layout_constraintHeight_percent.

Here i will use app:layout_constraintWidth_percent = 0.8 where 0.8 means 80%.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:animateLayoutChanges="true"
    android:layout_marginTop="8dp"
    android:padding="4dp"
    android:layout_height="wrap_content">


    <TextView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="@color/design_default_color_primary"
        android:paddingStart="12dp"
        android:paddingEnd="12dp"
        android:paddingTop="8dp"
        android:paddingBottom="8dp"
        app:layout_constraintWidth_max="wrap"
        android:textColor="@color/white"
        android:textSize="16sp"
        app:layout_constraintEnd_toEndOf="parent"
        android:id="@ id/textMessage"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintWidth_percent="0.8"
        tools:text="Hello, this is a long message and will use other lines as i grows. The default width is 80% of any screen."
        />


</androidx.constraintlayout.widget.ConstraintLayout>

CodePudding user response：

You can use ConstraintLayout instead of RelativeLayout and add app:layout_constraintWidth_percent="0.6" to the child TextView

<?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:background="@color/white"
    android:layout_height="match_parent">
    <TextView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintWidth_max="wrap"
        app:layout_constraintWidth_percent="0.7"
        android:background="#637796"
        android:padding="10dp"
        android:textSize="25sp"
        tools:text="this is my chat message taking 70% of the screen with"/>

</androidx.constraintlayout.widget.ConstraintLayout>

CodePudding user response：

There is no need to say only LinearLayouts or RelativeLayouts. You can combine both and create sectors with specific logics. In my example your parent is LinearLayout combined with a RelativeLayout and a LinearLayout as child Views. As you can see, I simulated a conversation with 2 TextViews, one is multilined to expand to exact 60% of the screen and the lower one is only as long as the content provides. To show that both work. I think this is exactly what you wanted. For more clarity I made the left whitespace a greyish solid to see the percentage 40/60 in a better way. Also the TextViews are not reaching the bounds because I gave a 10dp margin for better looking. The technic we are using is called layout_weight and weightSum provided by the LinearLayout.:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:weightSum="10">

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:background="#647678"
        android:layout_weight="4">
        <!-- 40% White Space of Screen to left of your RelativeLayout -->
    </LinearLayout>

    <RelativeLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="6"
        android:background="@color/white"
        android:orientation="vertical">
        <!-- 60% TextView of Screen to right of your LinearLayout -->

        <TextView
            android:id="@ id/tv1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentEnd="true"
            android:layout_margin="10dp"
            android:background="#304FFE"
            android:padding="5dp"
            android:text="How are you my love? Are you okey, did you have a great day?"
            android:textColor="#ffffff" />

        <TextView
            android:id="@ id/tv2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@id/tv1"
            android:layout_alignParentEnd="true"
            android:layout_margin="10dp"
            android:background="#304FFE"
            android:padding="5dp"
            android:text="Why aren't you responding?"
            android:textColor="#ffffff" />

    </RelativeLayout>
</LinearLayout>

Result:

This is the result I came up with:

CodePudding user response：

You can just use ConstraintLayout with a constraint width and constraint the widht percentage to 0.6:

app:layout_constrainedWidth="true"
app:layout_constraintWidth_percent="0.6"
app:layout_constraintWidth_max="wrap"

<?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="wrap_content">

    <TextView
        android:id="@ id/txtSentMsg"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="5dp"
        android:layout_marginEnd="5dp"
        android:layout_marginRight="5dp"
        android:background="@color/black"
        android:padding="10dp"
        android:text="This is sent message that can go to up to 60% of the screen width and continue to next lines"
        android:textColor="@color/white"
        android:textSize="18sp"
        app:layout_constrainedWidth="true"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintWidth_max="wrap"
        app:layout_constraintWidth_percent="0.6" />

</androidx.constraintlayout.widget.ConstraintLayout>