Content goes off screen in Android 4.1.1

Question

i noticed recently when i checked my app in android 4.1.1 that my content goes off the screen but works very well in 4.2.2 above. Please check the screenshot.

and yes, its a bilingual app (English/Tamil). After few research i found out that English ListItem works well but Tamil causes problem

Layout Code :

activity_latest_news.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".LatestNews" >

<ListView
    android:id="@+id/LatestNewsView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:layout_alignParentRight="true"
    android:layout_alignParentTop="true" >

</ListView> </RelativeLayout>

latest_news_single_view.xml

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

    <TextView
        android:id="@+id/LatestNews_title"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:text="@string/latest_news_dummy_title"
        android:textSize="15sp" />

    <TextView
        android:id="@+id/LatestNews_description"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentRight="true"
        android:layout_below="@id/LatestNews_title"
        android:text="@string/latest_news_dummy_desc"
        android:textColor="@color/getCCC"
        android:textSize="14sp" />

    <TextView
        android:id="@+id/LatestNews_posted_on"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentRight="true"
        android:layout_below="@+id/LatestNews_description"
        android:paddingLeft="3dp"
        android:paddingTop="2dp"
        android:text="@string/latest_news_posted"
        android:textAppearance="?android:attr/textAppearanceSmall"
        android:textColor="#911991" />

    <ImageView
        android:id="@+id/latest_news_addfav"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@+id/LatestNews_posted_on"
        android:src="@drawable/star"
        android:layout_alignParentRight="true" />

</RelativeLayout>

Is this Unicode issue? or layout problem?

And also please take a look at both emulator. if u notice, in 4.1.1 the theme is like greyish white while in 4.2.2 is complete white.. and even the drawable (refresh image) is looking weird (Yea, i know i haven't setup separate drawable for mdpi,hdpi etc) But what causes the difference? Is this App Theme issue?

Any help will be much appreciated. Thank you!

Answer 1

Try changing your layouts as below and check what happens.

your listview layout :

<ListView xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/LatestNewsView"
        android:layout_width="match_parent"
        android:layout_height="match_parent">        
</ListView>

Row Layout :

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

    <TextView
        android:id="@+id/LatestNews_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"            
        android:text="@string/latest_news_dummy_title"
        android:textSize="15sp" />

    <TextView
        android:id="@+id/LatestNews_description"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"            
        android:layout_below="@id/LatestNews_title"
        android:text="@string/latest_news_dummy_desc"
        android:textColor="@color/getCCC"
        android:textSize="14sp" />

    <TextView
        android:id="@+id/LatestNews_posted_on"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"            
        android:layout_below="@+id/LatestNews_description"
        android:paddingLeft="3dp"
        android:paddingTop="2dp"
        android:text="@string/latest_news_posted"
        android:textAppearance="?android:attr/textAppearanceSmall"
        android:textColor="#911991" />

    <ImageView
        android:id="@+id/latest_news_addfav"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@+id/LatestNews_posted_on"
        android:src="@drawable/star"
        android:layout_alignParentRight="true" />

</RelativeLayout>

Image problem:

as you can see one emulator is Nexus S and one is Nexus One so there is a difference in their ppi values which is causing the problem. you need to set appropriate image for corresponding density.

Update : check this it may help

Answer 2

Try and manually specify the number of lines for each text view. For instance, change the first TextView to look like this:

<TextView
        android:id="@+id/LatestNews_title"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:singleLine="false"
        android:maxLines="3"
        android:ellipsize="end"
        android:text="@string/latest_news_dummy_title"
        android:textSize="15sp" />

Note that I added:

android:singleLine="false" <!-- Allows content to wrap into other lines -->
android:maxLines="3"       <!-- Makes maximum no. of line wraps = 3 -->
android:ellipsize="end"    <!-- Adds an ellipsis (...) to the end of line-->

Side note: you're mixing fill_parent and match_parent. They do the same thing. For more consistency, stick to match_parent.

EDIT: Also, get rid of layout_alignParentRight="true". I don't think you need it because the width is already going to fill the parent view. Using layout_alignParentLeft="true" is sufficient since both English and Tamil are written left-to-right.