Android: How do I align textview on a image background that dos not strech in xml

Question

Ok here is the problem... I have a image background that need some text and additional graphics on it. The background image needs to be in the center of the screen and may not stretch. Here is what i need to do:

enter image description here

The problem is that i need to align the text to the background image. I've tried to wrap it all into a relative layout - something like this:

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >
<ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/bg_image"
        android:layout_centerInParent="true"
        android:src="@drawable/member_card"/>

<TextView
        android:layout_height="wrap_content"
        android:layout_alignLeft="@id/bg_image"
        android:text="@string/membercard_info"
        android:layout_marginTop="40dp"
        />

<TextView
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:layout_alignLeft="@id/bg_image"
        android:layout_marginTop="200dp"
        />
</RelativeLayout>

This will not work since android adds additional padding to the image to avoid it from stretching. Here is what happens in two different cases: enter image description here

So how do I align the text to the background image?

I've solved this problem in the past in code by baking it all into one image,- but would like to do this in xml.

make your relativelayout wrap_content – njzk2 Aug 05 '13 at 15:41 — njzk2, Aug 05 '13 at 15:41
I've tried that, but it dos not solve the problem. – Kong Far Aug 05 '13 at 16:17 — Kong Far, Aug 05 '13 at 16:17

score 0 · Answer 1 · answered Aug 05 '13 at 08:33

If you want to remove padding, you can use manually set it. However, if you want overlapping elements, you generally want to use FrameLayout. Look here: http://mobile.tutsplus.com/tutorials/android/android-sdk_frame-layout/

Set a gravity inside the frame layout to align it.

Guian · Answer 2 · 2013-08-05T09:45:18.630

0

There a padding around the image because you set the imageView size to fill its parent ( using match_parent )

You should try to set it to wrap its content :

<ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        .../>

EDIT : If your picture is bigger that the screen size, you need to have it scaled keeping the aspect ratio.

To do this, use match_parent in vertical with a scaleType to FIT_CENTER and keep the wrap_content setting for the width ( since we want the image view left/right bounds stuck to the image content )

<ImageView
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:scaleType="fitCenter"
        .../>

Is this better ?

edited Aug 05 '13 at 09:45

answered Aug 05 '13 at 08:36

Guian

4,563
4
34
54

That only seems to make a difference when the image is smaller then the screen - so this won't solve it for me.... but it helps. – Kong Far Aug 05 '13 at 08:44
Edit : I've added a setting to set the image fit its parent vertical size. – Guian Aug 05 '13 at 09:46
I'm afraid not. I've added some pictures to explain what happens. – Kong Far Aug 05 '13 at 16:24
My solution should solve the second case (your second picture). Does it ? ( so I can be sure I did understand what the problem is) – Guian Aug 06 '13 at 09:18

score 0 · Answer 3 · edited May 23 '17 at 12:20

0

if you want an ImageView with additional layers drawn on top of that, see this thread: How to maintain multi layers of ImageViews and keep their aspect ratio based on the largest one?

edited May 23 '17 at 12:20

Community

1
1

answered Aug 05 '13 at 08:44

pskink

23,874
6
66
77

Android: How do I align textview on a image background that dos not strech in xml

3 Answers3