How to make imageview properly center inside another view to make a border?

Question

What I'm trying to accomplish is simply to create a small 2-4dp padding border around my imageview. The result (looks correct in ADT but this is what it looks like on a device):

enter image description here

Notice that there is 5 px in top and 7 px space left/right/bottom (this is for hdpi device)

This is my xml for the row:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingLeft="5dp"
    android:paddingRight="5dp"
    android:paddingTop="2dp">
    <RelativeLayout
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:background="@android:color/white"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true">
        <ImageView
            android:src="@android:color/black"
            android:id="@+id/row_image"
            android:scaleType="centerCrop"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_margin="4dp"
            android:layout_centerInParent="true"/>  
    </RelativeLayout>
</RelativeLayout>

I've tryed everything: Adjustviewbounds, centerCrop, wrap_content, match_parent, center, centerInside, height=46/width=46, . Any new suggestions will be greatly appreciated, layout_gravity=center.

Edit new info: So I tryed removing android:layout_alignParentRight="true" and android:layout_centerVertical="true" and now the padding/margin looks correct BUT its not placed to the right side.

remove **android:scaleType="centerCrop"** and **android:layout_centerInParent="true"** i don't think they are required when you have **match_parent** — ngesh, Apr 13 '12 at 08:32
Yes but gives the same problem with top padding/margin being incorrect. — Warpzit, Apr 13 '12 at 08:52
see this http://stackoverflow.com/questions/1521640/standard-android-button-with-a-different-color — ngesh, Apr 13 '12 at 08:57

score 1 · Answer 1 · answered Apr 13 '12 at 08:32

1

Try this:

Make a drawable xml (bg.xml) with a ShapeDrawable. Solid color white and border black. Then add it as a background of your ImageView and set the padding of the ImageView to 2dp. This should be ok. No need of ReletiveLayouts..

Hope this helps!

answered Apr 13 '12 at 08:32

Dimitris Makris

5,183
2
34
54

1

With an image this gives the same result as above, with a solid color the solid color fills out everything ignoring the padding. So still no solution. – Warpzit Apr 13 '12 at 08:48
Thanks for suggestions to simplification of the layout hierachy :) – Warpzit Apr 13 '12 at 09:06

score 0 · Accepted Answer · answered Apr 13 '12 at 09:05

0

So the culprint was android:layout_centerVertical="true" . Somehow it moves the layout so it centers incorrect.

answered Apr 13 '12 at 09:05

Warpzit

27,966
19
103
155

score 0 · Answer 3 · edited Apr 23 '12 at 08:26

Please check this:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:gravity="right|center_vertical" >

    <RelativeLayout
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:background="@android:color/white"
        android:layout_margin="5sp"
        android:padding="5sp" >

        <ImageView
            android:id="@+id/row_image"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:src="@android:color/black" />
    </RelativeLayout>

</RelativeLayout>

Hope you are looks for this if not then tell exactly what do you want. Thanks.

Thanks for the suggestion, would probarbly work as well since android:layout_centerVertical="true" has been removed (see my own answer). — Warpzit, Apr 13 '12 at 12:41

score 0 · Answer 4 · answered Feb 24 '15 at 08:00

You should try this code :

<ImageView
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:layout_weight="1"
    android:contentDescription="@string/test"
    android:padding="1dp"
    android:src="@drawable/some_photo"
    android:cropToPadding="true"
    android:scaleType="centerCrop" 
    android:background="@color/grey_border"/>

How to make imageview properly center inside another view to make a border?

4 Answers4