equal width for overlaying TextView and ImageView

Question

I've got a TextView (text) overlaying my ImageView (image). My Problem ist that they do not have the same width. In other words - I want the red areas to appear white:

Here is my layout file so far:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:background="#FFFFFF" >

    <ImageView
        android:id="@+id/image"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

     <TextView
        android:id="@+id/text"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Title"
        android:padding="10dp" 
        android:textSize="25sp"
        android:gravity="center"
        android:background="#9988FF88"
        android:textColor="#000000"/>

</RelativeLayout>

I am quite new to android and tried to add different tags to the textview like android:layout_alignLeft="@id/image" which couldn't fix it and also tried to configure the layout_width settings, but this didn't help me either. Also this solution couldn't solve it (I guess that is because of my android:layout_width="match_parent" in my ImageView). The solution was about adding these lines to the TextView:

android:layout_alignLeft="@+id/image"
android:layout_toRightOf="@+id/image"

I was also looking for programmatical solution, which also couldn't fix it:

image = (ImageView) findViewById(R.id.image);
text = (TextView) findViewById(R.id.text);
text.setWidth(image.getWidth());

Any ideas how to get rid of my red areas? Every idea will be appreciated and I would be happy about either an xml solution or a programmatical solution ! Thanks in advance :)

EDIT

I should specify that the image inside the ImageView does get replaced alot so that some images do fill the full horizontal screen in their width. So at some images there shall be a margin on the left and the right, but on others there shall not (in other words - the title shall always be as big as the image). (Btw: Thank you for your fast responses!)

UPDATE

I worked around this issue simply giving the header a white background color.

Answer 1

Try this

  <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:layout_margin="26dp"
    android:background="#FFFFFF" >

   <ImageView
    android:id="@+id/image"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:scaleType="fitXY" />

   <TextView
    android:id="@+id/text"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="Title"
    android:padding="10dp" 
    android:textSize="25sp"
    android:gravity="center"
    android:background="#9988FF88"
    android:textColor="#000000"/>

  </RelativeLayout>

Answer 2

The best solution I can think of is:

• Cut the white bourders out of your image (You will then set some Margins in yout ImageView, to simulate the borders)

Then, change your layout so:

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ffffff"
    >
    <ImageView
        android:id="@+id/image"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginLeft="16dp"
        android:layout_marginRight="16dp"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
    />
     <TextView
        android:id="@+id/text"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Title"
        android:padding="10dp"
        android:textSize="25sp"
        android:gravity="center"
        android:background="#9988FF88"
        android:textColor="#000000"
        android:layout_marginLeft="16dp"
        android:layout_marginRight="16dp"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
    />
</RelativeLayout>

Answer 3

Your imageview is set to match_parent but there are still white areas around imageview. Are you sure your image doesn't have white areas around it?

Also, try using fill_parent instead of match_parent.

Answer 4

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#FFFFFF"
        android:orientation="horizontal">

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"/>



            <RelativeLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="8">
            <ImageView
                android:id="@+id/image"
                android:layout_width="match_parent"
                android:layout_height="match_parent" />
            <TextView
                android:id="@+id/text"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Title"
                <!--android:padding="10dp" -->
                android:textSize="25sp"
                android:gravity="center"
                android:background="#9988FF88"
                android:textColor="#000000"/>
            </RelativeLayout>



            <LinearLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"/>
</LinearLayout>