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?

Answer 1

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.