Image with border, not displayed correctly

Question

I am trying to give a border to an image view using a layout to wrap it and set the border as background to that particular layout. However the image view appears small and in the top left corner of the frame background.

Here is my code:

<RelativeLayout
    android:id="@+id/Relative1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:layout_alignParentTop="true"
    android:layout_marginLeft="25dp"
    android:layout_marginTop="40dp"
    android:background="@drawable/pic_frame_big_01" >

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true" />
</RelativeLayout>

How can I modify this code so that image fits into the relative layout and occupies it.

EDIT Changed the code of ImageView the image is centered now, but it appears as a very small image centered in the parent.

<ImageView
                android:id="@+id/imageView1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerHorizontal="true"
                android:layout_centerVertical="true" />

Set some image as `src` to the image view. Right now it is empty! — Amulya Khare, Dec 13 '13 at 08:10

Timuçin · Answer 1 · 2013-12-13T08:14:58.427

Because you set it to align top left. Remove them and change width and height to match. Try this:

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

edit: Your relative layout is also aligned top left. Try to remove alignment attributes.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/Relative1"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_marginTop="40dp"
    android:background="@drawable/border_red" >

    <ImageView
        android:src="@drawable/holotaglogo"
        android:id="@+id/imageView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"/>
</RelativeLayout>

Err, that makes my relative layout occupy all space. the whole page — User3, Dec 13 '13 at 08:04

Amulya Khare · Answer 2 · 2013-12-13T08:12:27.223

Try adding: android:padding="10dp" to the RelativeLayout:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/Relative1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:layout_alignParentTop="true"
    android:layout_marginLeft="25dp"
    android:layout_marginTop="40dp"
    android:background="@drawable/pic_frame_big_01"
    android:padding="10dp">

<ImageView
    android:id="@+id/imageView1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:layout_alignParentTop="true"
    android:src="@drawable/image1" />
</RelativeLayout>

android:src="@drawable/image1 is important too.. where you replace image1 with some image in your project.

Updated the Question, now I set it at the center but only a small pic is displayed — User3, Dec 13 '13 at 08:09
See my comment.. I put this in my answer too.. set `android:src=""` to some image.. — Amulya Khare, Dec 13 '13 at 08:10

Image with border, not displayed correctly

2 Answers2