RelativeLayout中的TextView对齐不正确

Question

I need to implement the following UI:

For this, I am using the following layout:

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@android:color/white">
    <ImageView
        android:id="@+id/news_image0"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:minHeight="@dimen/news_cell0_imageview_min_height"
        android:adjustViewBounds="true"
        android:scaleType="fitXY" />
    <RelativeLayout
        android:id="@+id/news0_cell_image_overlay_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_alignBottom="@+id/news_image0"
        android:layout_alignTop="@+id/news_image0"
        android:layout_alignLeft="@+id/news_image0"
        android:layout_alignStart="@+id/news_image0"
        android:layout_alignEnd="@+id/news_image0"
        android:layout_alignRight="@+id/news_image0"
        android:background="@drawable/news_cell0_overlay_gradient">
        <TextView
            android:id="@+id/news_title0"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:gravity="center_vertical|start"
            android:layout_alignParentBottom="true"
            android:maxLines="3"
            android:ellipsize="end"
            android:textColor="@color/colorNewsCellType0TitleText"
            android:layout_margin="@dimen/news_cell0_textview_margin"
            android:textSize="@dimen/news_cell0_title_text_size"
            android:typeface="monospace" />
    </RelativeLayout>
</RelativeLayout>

Into the ImageView I am loading image using Picasso from a URL. I am getting output correctly in most of the devices, but in some of the devices running android less than Lollipop, this shows up like the screenshot below. The text shows up at the top, instead of bottom. But I have set android:layout_alignParentBottom="true" for the TextView. The RelativeLayout is rendered correctly, and it fits the image(it has a background gradient, which can clearly be seen at the bottom of the image).

What is causing this problem and how can I solve this?

Answer 1

You can try with FRAMELAYOUT

FrameLayout is designed to block out an area on the screen to display a single item. Generally, FrameLayout should be used to hold a single child view, because it can be difficult to organize child views in a way that's scalable to different screen sizes without the children overlapping each other.

 <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="fill_parent"
   android:layout_height="fill_parent">

   <ImageView 
      android:src="@drawable/ic_launcher"
      android:scaleType="fitCenter"
      android:layout_height="fill_parent"
      android:layout_width="fill_parent"/>

   <TextView
      android:text="Hi.."
      android:textSize="17sp"
      android:textStyle="bold"
      android:layout_height="fill_parent"
      android:layout_width="fill_parent"
      android:gravity="center|bottom"/>
</FrameLayout>

Answer 2

You can try this 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"
                android:background="@android:color/white">

    <ImageView
        android:id="@+id/news_image0"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:adjustViewBounds="true"
        android:minHeight="100dp"
        android:scaleType="fitXY"/>

    <TextView
        android:id="@+id/news_title0"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@+id/news_image0"
        android:layout_centerHorizontal="true"
        android:ellipsize="end"
        android:maxLines="3"
        android:padding="12dp"
        android:text="fsdsdfdsdsfsdfsdf"
        android:textColor="#f00"
        android:typeface="monospace"/>
</RelativeLayout>