Placing a textview on top of imageview in android
AndroidTextviewAndroid ImageviewAndroid Problem Overview
- I have a
listview
, that has a singleimageview
which is scrollable vertically - I am trying to place a
textview
on top ofImageview
- Both the views must be visible
- Is it possible ?
- If yes, How to do it programmatically ?
- 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
How to do something like below
note :: Dish 1 & 2 are textviews
Android Solutions
Solution 1 - Android
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.
Solution 2 - Android
Try this:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/rel_layout"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ImageView
android:id="@+id/ImageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src=//source of image />
<TextView
android:id="@+id/ImageViewText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="@id/ImageView"
android:layout_alignTop="@id/ImageView"
android:layout_alignRight="@id/ImageView"
android:layout_alignBottom="@id/ImageView"
android:text=//u r text here
android:gravity="center"
/>
Hope this could help you.
Solution 3 - Android
you can use framelayout to achieve this.
how to use framelayout
<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="250px"
android:layout_width="250px"/>
<TextView
android:text="Frame Demo"
android:textSize="30px"
android:textStyle="bold"
android:layout_height="fill_parent"
android:layout_width="fill_parent"
android:gravity="center"/>
</FrameLayout>
ref: tutorialspoint
Solution 4 - Android
As you mentioned in OP, you need to overlay Text
on ImageView
programmatically way. You can get ImageView
drawable and write on it with the help of putting it on Canvas
and Paint
.
private BitmapDrawable writeTextOnDrawable(int drawableId, String text)
{
Bitmap bm = BitmapFactory.decodeResource(getResources(), drawableId).copy(Bitmap.Config.ARGB_8888, true);
Typeface tf = Typeface.create("Helvetica", Typeface.BOLD);
Paint paint = new Paint();
paint.setStyle(Style.FILL);
paint.setColor(Color.WHITE);
paint.setTypeface(tf);
paint.setTextAlign(Align.CENTER);
paint.setTextSize(11);
Rect textRect = new Rect();
paint.getTextBounds(text, 0, text.length(), textRect);
Canvas canvas = new Canvas(bm);
canvas.drawText(text, xPos, yPos, paint);
return new BitmapDrawable(getResources(), bm);
}
Solution 5 - Android
just drag and drop the TextView over ImageView in eclipse
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
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=".MainActivity" >
<ImageView
android:id="@+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginLeft="48dp"
android:layout_marginTop="114dp"
android:src="@drawable/bluehills" />
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="@+id/imageView1"
android:layout_centerVertical="true"
android:layout_marginLeft="85dp"
android:text="TextView" />
</RelativeLayout>
And this the output the above xml
Solution 6 - Android
you can try this too. I use just framelayout.
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/cover"
android:gravity="bottom">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="Hello !"
android:id="@+id/welcomeTV"
android:textColor="@color/textColor"
android:layout_gravity="left|bottom" />
</FrameLayout>
Solution 7 - Android
You must make sure to put the ImageView
over the TextView
in the FrameLayout
. That's simple but I hope it helps somebody. :)