TextView isn't wraping on small screen Samsung Devices

Question

I have problem with text wrapping on small screen Samsung devices. On other phones like S4 everything is ok.

Let's look on the screens:

Correct one (HTC Desire Z):

Incorrect (Samsung S4 Mini):

My xml file:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<include
    android:id="@+id/tool_bar"
    layout="@layout/tool_bar"
    android:layout_height="wrap_content"
    android:layout_width="match_parent" />
<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/imageView"
    android:layout_gravity="center_vertical"
    android:src="@drawable/ic_launcher_web"
    android:layout_marginRight="334dp"
    android:layout_marginEnd="334dp"
    android:layout_alignParentRight="true"
    android:layout_alignParentEnd="true"
    android:layout_below="@+id/tool_bar" />

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:id="@+id/Rel1"
    android:layout_alignBottom="@+id/imageView"
    android:layout_alignParentRight="true"
    android:layout_alignParentEnd="true">

    <TextView
        android:maxLines="100"
        android:scrollHorizontally="false"
        android:singleLine="true"
        android:ellipsize="end"
        android:textSize="22sp"
        android:textStyle="bold"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/app_name"
        android:id="@+id/AppName"
        android:layout_marginTop="130dp"
        android:layout_marginRight="16dp" />

    <TextView
        android:textSize="18sp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/created"
        android:id="@+id/Created"
        android:layout_gravity="center_horizontal"
        android:layout_below="@+id/AppName"
        android:layout_centerHorizontal="true" />

    <TextView
        android:textSize="22sp"
        android:textStyle="bold"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/ms"
        android:id="@+id/MS"
        android:layout_gravity="center_horizontal"
        android:layout_below="@id/Created"
        android:layout_centerHorizontal="true" />

    <TextView
        android:textSize="20sp"
        android:autoLink="web"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/home_page"
        android:id="@+id/textView"
        android:layout_gravity="center_horizontal"
        android:layout_below="@+id/MS"
        android:layout_centerHorizontal="true" />

</RelativeLayout>

Could You tell me why it's rendering like that?

I suggest you start by cleaning up your inner `RelativeLayout`. You have **nine** attributes trying to set the positioning of this `RelativeLayout`, and many of them are in conflict. Then, view your activity in Hierarchy View or **`uiautomatorviewer`** and see whether the positioning rules that you wind up using are giving you the correct position. — CommonsWare, Aug 15 '15 at 15:38
That many attributes were added when I was trying to fix this issue. Before that there were few of them. — Maciej Socha, Aug 15 '15 at 15:39
I changed xml to before version. It's strange, because on other devices everything is ok. — Maciej Socha, Aug 15 '15 at 15:43

score 1 · Accepted Answer · answered Aug 15 '15 at 16:06

Ditch the Relative Layout. It's not a good fit for this type of layout.

Use the horizontal LinearLayout instead for your main container. Divide the screen into 2 parts, the imageView with set width and height, and another LinearLayout (vertical) with width set to 0dp and layout_weight to 1. Fill the vertical one with your 4 TextViews and center them. To make sure text will be visible call

.setEllipsize(TextUtils.TruncateAt.MARQUEE);
.setSingleLine(true);
.setMarqueeRepeatLimit(2);
.setSelected(true);

on your TextViews to make them scroll.

This should work on all devices with all types of screens, but you should be able to also just design special type of xml for small screens if you want to go that way.

Thank You ;) Now everything is okej. – Maciej Socha Aug 15 '15 at 18:45 — Maciej Socha, Aug 15 '15 at 18:45

score 0 · Answer 2 · answered Aug 15 '15 at 15:50

0

For starters, you have this attribute, and 334dp is probably wider then the entire display:

android:layout_marginRight="334dp"

Did you mean something more reasonable like "34dp"?

answered Aug 15 '15 at 15:50

Booger

18,579
7
55
72

It's correct, because I have `android:layout_alignParentRight="true"` to position this image in correct place. – Maciej Socha Aug 15 '15 at 15:56

TextView isn't wraping on small screen Samsung Devices

2 Answers2