TextView Overlapping ImageView

Hello Friends, 

Welcome Back to "Android Super Nerds". I really appreciate that and if you guys are new to my Site please do check my previous articles as well.

For displaying any kind of image we add some text information for better understanding in a detail screen or in a listview row is seen in most of the apps. And it is kind of an easy task. 

But when asked for displaying a text on an image, it became's pain. 

TextView on ImageView

So as the title says "Text on Image" i.e TextView Overlapping ImageView, I had a couple of tricks and cure for this pain.

Before I begin, if you guys want to know How to create a Circular ImageView with TextView on it, please do check my this articles.


For now, I had used four different existing layouts to make this happen. Those Parent Layouts are:-

1. Use Frame Layout
2. Use Relative Layout
3. Use Linear Layout
4. Use CardView Layout

FrameLayout:

Creating an overlapping view via using FrameView as a Parent Layout is really a simple way of doing it. We can also use multiple Overlapping Views on each other. 

Code:

	<FrameLayout
	android:id="@+id/framelayout1"
	android:layout_width="150dp"
	android:layout_height="150dp"
	android:layout_gravity="center">
	<ImageView
	android:layout_height="fill_parent"
	android:layout_width="fill_parent"
	android:background="@drawable/ironman"
	android:scaleType="matrix"></ImageView>
	<TextView
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:layout_alignParentBottom="true"
	android:layout_gravity="bottom|center"
	android:paddingBottom="10dp"
	android:text="IronMan"
	android:textColor="@android:color/white"
	android:textSize="18sp"
	android:textStyle="bold" />
	</FrameLayout>

view raw FrameLayout_TextView_Overlapping.xml hosted with ❤ by GitHub

RelativeLayout:

Just add ImageView with TextView and give width and height for the TextView as "MatchParent" or same as the ImageView.

For adjusting the TextView, use gravity and Layout_gravity attribute.

Code:

	<RelativeLayout
	android:id="@+id/Relativelayout1"
	android:layout_width="150dp"
	android:layout_height="150dp"
	android:layout_gravity="center">
	<ImageView
	android:layout_width="match_parent"
	android:layout_height="match_parent"
	android:background="@drawable/wonderwoman"/>
	<TextView
	android:layout_width="match_parent"
	android:layout_height="wrap_content"
	android:layout_alignParentBottom="true"
	android:gravity="center"
	android:paddingBottom="10dp"
	android:text="Wonder Woman"
	android:textColor="@android:color/white"
	android:textSize="18sp"
	android:textStyle="bold" />
	</RelativeLayout>

view raw RelativeLayout_TextView_Overlapping.xml hosted with ❤ by GitHub

Linear Layout:

In place of using ImageView for displaying the image, just add the image path/ image drawable to the background for the LinearLayout. 

And for display TextView, follow the same attribute pattern which we did for Relative Layout above.

Code:

	<LinearLayout
	android:id="@+id/linearlayout1"
	android:layout_width="150dp"
	android:layout_height="150dp"
	android:layout_gravity="center"
	android:background="@drawable/spiderman"
	android:orientation="vertical">
	<TextView
	android:layout_width="match_parent"
	android:layout_height="match_parent"
	android:gravity="bottom|center_horizontal"
	android:paddingBottom="10dp"
	android:text="SpiderMan"
	android:textColor="@android:color/white"
	android:textSize="18sp"
	android:textStyle="bold" />
	</LinearLayout>

view raw LinearLayout_TextView_Overlapping.xml hosted with ❤ by GitHub

CardView:

Creating an overlapping view via using CardView as a Parent Layout is as same as FrameLayout. We can also use multiple Overlapping Views on each other. 
Code:

	<app:android.support.v7.widget.CardView
	android:id="@+id/cardview1"
	android:layout_width="150dp"
	android:layout_height="148dp"
	android:layout_centerHorizontal="true"
	android:layout_gravity="center_horizontal"
	android:innerRadius="10dp"
	android:shape="ring"
	android:thicknessRatio="4"
	app:cardCornerRadius="10dp">
	<ImageView
	android:layout_width="match_parent"
	android:layout_height="match_parent"
	android:contentDescription="I am Batman"
	android:src="@drawable/batman"></ImageView>
	<TextView
	android:layout_width="match_parent"
	android:layout_height="match_parent"
	android:gravity="bottom|center_horizontal"
	android:paddingBottom="10dp"
	android:text="Batman"
	android:textColor="@android:color/white"
	android:textSize="18sp"
	android:textStyle="bold" />
	</app:android.support.v7.widget.CardView>

view raw CardViewLayout_TextView_Overlapping.xml hosted with ❤ by GitHub

Output for TextView over ImageView:

So displaying TextView over an ImageView in multiple ways is accomplished.

That's All Guys.

If you guys have any questions about any of the UI components, Please do Leave a comment below..!!

&&

If you like this article don’t forget to share it.

Till then "Happy Coding".