OzMa13
OzMa13

Reputation: 55

TextView background won't wrap properly

Making an app looking like messaging with prefix texts of Frequently Asked Questions. The TextViews of on user's side (right/ purple) are not getting wrapped correctly, leaving a considerably big purple area on the right of the message.

Seems it calculates the width with different way of breaking lines as it finally does. Perhaps a problem with Greek fonts? In the 1st purple message, it's clear that small words should have stayed on the previous line.

Text

The activity_main.xml looks like

<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/purple_500"
    tools:context=".MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        tools:ignore="MissingConstraints">

    <include layout="@layout/toolbar" />

    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal">

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:padding="30dp">

            <include layout="@layout/page1"/>

            <include layout="@layout/page2"/>

        </LinearLayout>

    </ScrollView>

    </LinearLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

Which includes the page_1.xml

<merge xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/page1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">

    <TextView
        android:id="@+id/h1"
        android:text="@string/p1h1"

        style="@style/head"/>

    <ProgressBar
        android:id="@+id/pb1"
        android:progress="1"
        style="@style/ProgressBar"/>

    <TextView
        android:id="@+id/s1"
        android:text="@string/p1s1"
        style="@style/AppText"/>

    <TextView
        android:id="@+id/s2"
        android:text="@string/p1s2"
        style="@style/UserText"/>

    <TextView
        android:id="@+id/s3"
        android:text="@string/p1s3"
        style="@style/AppText"/>

    <TextView
        android:id="@+id/s4"
        android:text="@string/p1s4"
        style="@style/UserText"/>

</merge>

Text p1s2 & p1s4 are the ones i'm trying to fix, and their style is

<style name="UserText">
    <item name="android:layout_width">wrap_content</item>
    <item name="android:layout_height">wrap_content</item>
    <item name="android:padding">15dp</item>
    <item name="android:background">@drawable/rounded_user</item>
    <item name="android:layout_marginTop">10dp</item>
    <item name="android:layout_marginBottom">10dp</item>
    <item name="android:layout_marginLeft">50dp</item>
    <item name="android:textSize">20sp</item>
</style>

I have tried to put TextViews inside ConstraintLayout, RelativeLayout and LinearLayout without success. Also, attributes that didn't help are:

android:singleLine="false"
android:width="0dip"
android:layout_weight="1"
android:singleLine="false"
android:ellipsize="end"
android:breakStrategy="simple"

Upvotes: 1

Views: 115

Answers (1)

user14678216
user14678216

Reputation: 3393

In your LinearLayout you have set padding. You will need to remove or reduce it and the purple area will get reduced, and change your layout_width to match_constraint.

<LinearLayout
            android:layout_width="wrap_content" <!-- change this to match_constraint --> 
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:padding="30dp"> <!-- Remove or reduce this padding -->

Upvotes: 1

Related Questions