Align 2 images so the first one serves as a border

Question

I'm trying to find out a way to align 2 images. The first image the border image (like a polaroid) and the second a picture. The picture should start in the corner of the border (around 20dp from left and top of the real border image) but that distance varies on what screen you have...

            <RelativeLayout
                android:layout_width="fill_parent"
                android:layout_height="wrap_content" >

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

                <ImageView
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    android:adjustViewBounds="true"
                    android:src="@drawable/border" />
            </RelativeLayout>

This is what I get now:

The hardest thing is that the image shouldn't pop out the border image and the background behind the whole view (border + image) is variable!

Answer 1

I had to deal with a similar issue, back_img, img, text. I could deal with it in a really crappy way through styles (for every different screen size), but is the only thing i found that worked...

I set a LinearLayout and put the 3 imgs inside another LinearLayout

LinearLayoutLine  //wrap content\\
   LinearLayoutImg1 //wrap content + marginRight\\
      Img11
      Img12
      Text13
   /LinearLayoutImg1

   LinearLayoutImg2
      Img21
      Img22
      Text23
   /LinearLayoutImg2
/LinearLayoutLine

In the Styles, something like this:

    <style name="img1">
        <item name="android:layout_width">85dp</item>
        <item name="android:layout_height">85dp</item>
        <item name="android:layout_marginLeft">1dp</item>
        <item name="android:layout_marginRight">2dp</item>
        <item name="android:layout_marginTop">1dp</item>
        <item name="android:layout_marginBottom">1dp</item>
        <item name="android:gravity">center</item>
        <item name="android:scaleType">fitXY</item>
    </style>

    <!--  imatge del tema -->
    <style name="img2">
        <item name="android:layout_width">82.6dp</item>
        <item name="android:layout_height">82.6dp</item>
        <item name="android:layout_marginLeft">-87dp</item>
        <item name="android:layout_marginRight">0dp</item>
        <item name="android:layout_marginTop">0dp</item>
        <item name="android:layout_marginBottom">0dp</item>
        <item name="android:gravity">center</item>
    </style>

    <style name="text" parent="@android:style/TextAppearance.Small">
        <item name="android:layout_width">66dp</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:lines">1</item>
        <item name="android:gravity">center</item>
        <item name="android:layout_marginBottom">-25.3dp</item>
        <item name="android:layout_marginLeft">-75dp</item>
        <item name="android:textStyle">normal</item>
        <item name="android:textSize">10.5sp</item>
        <item name="android:textColor">@color/blanc</item>
    </style>

So, you set Img1 size with a little margin (i found out that sometimes you need that margin in Imgs), and the second one with negative IMG1 width+rightMargin and in case of need, the text.

Answer 2

I think you should make your border image a 9-patch: http://developer.android.com/guide/developing/tools/draw9patch.html

Answer 3

Your best bet is to use the "border" image as the background drawable of the layout and then position your image on that layout:

<RelativeLayout
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@drawable/polaroid_background"
    android:padding="20dp">

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

</RelativeLayout>

I haven't tested this just now, but it's approximately what you would do.