How write text on image in RelativeLayout while it always keeps the same position (even if image is resized)?

Question

As the title says. I need to write some text at ImageView. For that I was advised to use RelativeLayout. BUT there is not possible to use alignParentBottom (or maybe it is but I cant use margin then).

Problem is: I need to keep text at exactly some part of image even though it is resized or it is shown on different screen resolution etc. Is that possible?

CODE:

<RelativeLayout
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:background="#FFFFFF"
                android:gravity="center" >

                <!-- Speaker image -->

                <ImageView
                    android:id="@+id/image"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerHorizontal="true"
                    android:adjustViewBounds="true"
                    android:background="#ffffff"
                    android:src="@drawable/authorimg" />

                <!-- Time -->

                <TextView
                    android:id="@+id/timeTVid"
                    style="@style/TextWithShadow"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="50dp"
                    android:text="2:59" />
</RelativeLayout>

I want the TextView to be somewhere in the middle but not exactly there.

EDIT: After first response tried (not working):

Horizontal position http://i59.tinypic.com/o76omg.png

Vertical position http://i59.tinypic.com/20tf7ky.png

I want to have "Your text" to be at the same position at the picture.

score 1 · Accepted Answer · answered Apr 20 '14 at 13:21

I found out that this is the solution. It's a shame that XML in android does not support percentage padding/margin so you have to do it programmatically as shown below. I just got the image width, width of frame and calculated it so the text is always on the same place on the image.

@Override
        public void onWindowFocusChanged(boolean hasFocus) {
            super.onWindowFocusChanged(hasFocus);
            int paddingLeft;
            frameHeight = imgFrameLayout.getHeight();
            frameWidth = imgFrameLayout.getWidth();
            imgWidth = image.getWidth();
            imgHeight = image.getHeight();
            // getting the difference of img width and frame width
            int diff = frameWidth - imgWidth;
            // if frame is bigger than image then set additional value to padding
            // 20% image width + (diff/2)
            if (diff > 0) {
                paddingLeft = imgWidth / 100 * 20 + diff / 2;
            }
            // else set padding 20% of the image
            else {
                paddingLeft = imgWidth / 100 * 20;
            }
            timeTV.setPadding(paddingLeft, 0, 0, 0);
        }

score 0 · Answer 2 · answered Apr 19 '14 at 20:51

Use this example but it will only work for the Relativelayout:

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

<ImageView android:id="@+id/full_image_view"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"/>

<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="Your Text"
android:textColor="#000000" />

please try this link: http://stackoverflow.com/questions/17809801/how-to-write-text-on-imageview-in-android-coding — EDECoder, Apr 19 '14 at 21:17
Thank you, unfortunately i need to add more than one text view into pic. — , Apr 19 '14 at 23:52

score 0 · Answer 3 · answered Apr 19 '14 at 21:33

0

Might want to try using a FrameLayout. In any event, set textview to match_parent (both ways) use android:gravity="center" (not layout_gravity). now if you want to adjust the centered position to make it offset a bit, you can use paddingLeft, paddingTop, etc to adjust your center.

answered Apr 19 '14 at 21:33

dangVarmit

5,641
2
22
24

This might be the answer, let me try it. Thx – Apr 19 '14 at 23:52

score 0 · Answer 4 · answered Apr 20 '14 at 04:44

I think you should create two separate xml files. the first one for the image and 2nd one for the overlayed text. then in your activity class you should use LayoutInflater. I created an example and I hope it is what you are looking for.

JavaCode:

private ImageView imgView;
private TextView tv00, tv01, tv02, tv03;
private LayoutInflater mInflater = null;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_image_overlayed_with_text00);

    imgView = (ImageView) findViewById(R.id.imgview);
    tv00 = (TextView) findViewById(R.id.tv00);
    tv01 = (TextView) findViewById(R.id.tv01);
    tv02 = (TextView) findViewById(R.id.tv02);
    tv03 = (TextView) findViewById(R.id.tv03);

    //imgView.setImageBitmap(BitmapFactory.decodeFile("c:\\pic.jpg"));
    imgView.setImageResource(R.drawable.pic);

     mInflater = LayoutInflater.from(getApplicationContext());
     View overView = mInflater.inflate(R.layout.textoverlay, null);
     addContentView(overView, new LayoutParams(LayoutParams.MATCH_PARENT, 
            LayoutParams.MATCH_PARENT));

ImageviewXML:

<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="com.example.imageoverlayedwithtext00.ImageOverlayedWithText00$PlaceholderFragment" >

<ImageView
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:id="@+id/imgview" />

TextOverlayXML:

<LinearLayout 
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:gravity="center_horizontal">

<TextView 
    android:id="@+id/tv00"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textSize="50sp"
    android:text="text0"/>

<TextView 
    android:id="@+id/tv01"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textSize="50sp"
    android:text="text1"/>

<TextView 
    android:id="@+id/tv02"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textSize="50sp"
    android:text="text2"/>

<TextView 
    android:id="@+id/tv03"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textSize="50sp"
    android:text="text3"/>

</LinearLayout>

How write text on image in RelativeLayout while it always keeps the same position (even if image is resized)?

4 Answers4