Search code examples
androidtextviewandroid-imageview

Placing a textview on top of imageview in android


  • I have a listview, that has a single imageview which is scrollable vertically
  • I am trying to place a textview on top of Imageview
  • Both the views must be visible

  1. Is it possible ?
  2. If yes, How to do it programmatically ?
  3. What changes should i need to make ?

list_view_item_for_images.xml

<?xml version="1.0" encoding="utf-8"?>
<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="fill_parent" >

    <ImageView
        android:id="@+id/flag"
        android:layout_width="fill_parent"
        android:layout_height="250dp"
        android:layout_alignParentLeft="true"
        android:layout_alignParentRight="true"
        android:scaleType="fitXY"
        android:src="@drawable/ic_launcher" />

</RelativeLayout>

It gives a output like below

enter image description here

How to do something like below

enter image description here

note :: Dish 1 & 2 are textviews


Solution

  • This should give you the required layout:

    <?xml version="1.0" encoding="utf-8"?>
    <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="fill_parent" >
    
        <ImageView
            android:id="@+id/flag"
            android:layout_width="fill_parent"
            android:layout_height="250dp"
            android:layout_alignParentLeft="true"
            android:layout_alignParentRight="true"
            android:scaleType="fitXY"
            android:src="@drawable/ic_launcher" />
    
        <TextView
            android:id="@+id/textview"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentTop="true"
            android:layout_marginTop="20dp"
            android:layout_centerHorizontal="true" />
    
    </RelativeLayout>
    

    Play with the android:layout_marginTop="20dp" to see which one suits you better. Use the id textview to dynamically set the android:text value.

    Since a RelativeLayout stacks its children, defining the TextView after ImageView puts it 'over' the ImageView.

    NOTE: Similar results can be obtained using a FrameLayout as the parent, along with the efficiency gain over using any other android container. Thanks to Igor Ganapolsky(see comment below) for pointing out that this answer needs an update.