Display TextView over ImageView in android
I want to display text over an image view. I do it as Alleski suggested here: Android Text Over Image
Android studio preview looks great:
But my actual result looks like this with the undesirable text above:
I have to add dynamic dynamic LinearLayout file at runtime:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/relativelayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<ImageView
android:id="@+id/myImageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/myImageSouce" />
<TextView
android:id="@+id/myImageViewText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="@+id/myImageView"
android:layout_alignTop="@+id/myImageView"
android:layout_alignRight="@+id/myImageView"
android:layout_alignBottom="@+id/myImageView"
android:layout_margin="1dp"
android:gravity="center"
android:text="Hello"
android:textColor="#000000" />
</RelativeLayout>
I add it like this:
LinearLayout ll = (LinearLayout) findViewById(R.id.layout_story_covers);
LayoutInflater inflater = (LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE);
for (int i = 0; i < stories.size(); i++)
{
// add imageView
RelativeLayout coverLayout = (RelativeLayout) inflater.inflate(R.layout.fragment_cover, null);
ImageView imageView =(ImageView) coverLayout.findViewById(R.id.imageViewCover);
TextView textView = (TextView) coverLayout.findViewById(R.id.textViewCover);
textView.setText(stories.get(i).title);
imageLoader.displayImage(stories.get(i).cover.fileUrl, imageView);
ll.addView(coverLayout);
}
It must have something to do with this parent LinearLayout. What is the correct way to get the result?
source to share
Try this instead:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/relativelayout"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ImageView
android:id="@+id/myImageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/myImageSouce" />
<TextView
android:id="@+id/myImageViewText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_margin="1dp"
android:gravity="center"
android:text="Hello"
android:textColor="#000000" />
</RelativeLayout>
source to share
Tips:
-
Romain guy said, "I didn't say I don't use RelativeLayout, you just need to be aware of its (potential) performance impact if used at the top of the tree." It's much better to use a simple FrameLayout if you can.
-
Know the scaleType property in ImageView's
-
If you want the ImageView to be the same size as the parent, you need to set it as the height_parent height and width. If you use a wrapper, it will depend on the bitmap size and resolution.
-
Consider using match_parent instead of the deprecated fill_parent
-
I would prefer Picasso for managing bitmaps.
-
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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">
<ImageView
android:id="@+id/myImageView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="@drawable/myImageSouce"
android:scaleType="centerCrop"/>
<TextView
android:id="@+id/myImageViewText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="@dimen/spacing_medium"
android:layout_gravity="center"
tools:text="Test"/>
</FrameLayout>
source to share