Add TextView over ImageView (Android)

Question

i am displaying full screen image in ImageView and i am trying to add TextView in center of screen over ImageView but TextView is not showing.

i tried:

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

    <ImageView
        android:id="@+id/splash_imageview"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:scaleType="centerCrop" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:layout_marginBottom="20dip"
        android:background="#AA000000"
        android:padding="12dip"
        android:text="SomeText"
        android:textColor="#ffffffff" />

</LinearLayout>

Solution 1

You may use FrameLayout, AbsoluteLayout (deprecated) or RelativeLayout (most common of these). An example of RelativeLayout, for centering is used android:layout_centerInParent="true", set for both childs

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

    <ImageView
        android:id="@+id/splash_imageview"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_centerInParent="true"
        android:scaleType="centerCrop" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:layout_marginBottom="20dip"
        android:layout_centerInParent="true"
        android:background="#AA000000"
        android:padding="12dip"
        android:text="SomeText"
        android:textColor="#ffffffff" />

</RelativeLayout>

Drawing Views is in the same order as in XML, so ImageView will be drawn first and then TextView over it

Another approach would be to use FrameLayout with android:gravity="center" attr (nothing needed for childs)

Also remeber and read about android:elevation and android:translationZ XML attributes, which may reorder drawing, and also view.bringToFront() method

Solution 2

Try This

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

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/myImage" />

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="I am TextView"
        android:layout_gravity="center"
        android:textAppearance="?android:attr/textAppearanceLarge" />

</FrameLayout>

Solution 3

Try this

<?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="match_parent"
    android:orientation="vertical" >

    <ImageView
        android:id="@+id/splash_imageview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="centerCrop" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:layout_marginBottom="20dip"
        android:background="#AA000000"
        android:layout_centerInParent="true"
        android:padding="12dip"
        android:text="SomeText"
        android:textColor="#ffffffff" />

</RelativeLayout>

Solution 4

<FrameLayout ...> draws its children one on top of another.

Note that you can specify background as fully transparent.

Solution 5

There is a new attribute android:elevation you can use for this problem. but note that is used in API 21 or higher.

 <TextView
    android:id="@+id/welcome_tv"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" 
    android:elevation="100dp"
    />

View more solutions

Comments

[Harry .Naeem]

Exactly the thing i wanted, much better than FrameLayout