0

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:

enter image description here

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!

Ferdau
  • 1,524
  • 1
  • 12
  • 21

3 Answers3

1

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

Daniele
  • 1,005
  • 9
  • 26
  • Wouldn't my paperclip being stretched out then? – Ferdau Apr 24 '12 at 09:59
  • I think it could be take out of the border, placed top-left and stacked on top? – Daniele Apr 24 '12 at 10:05
  • 2
    @Ferdau: No, you can easily create a 9-patch image that includes the paperclip in a non-stretchable area. Personally I would try this approach first, before going into the direction of stacking multiple views on top of each other. – MH. Apr 24 '12 at 11:06
0

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.

Aleks G
  • 56,435
  • 29
  • 168
  • 265
  • Well that wouldn't work for all screen sizes... Since the padding of 20dp will sometimes be to big... – Ferdau Apr 24 '12 at 09:36
  • 1
    @Ferdau: 20dp will be scaled up/down based on pixel density, but you would have the same problem with any other way. You need to determine how many pixels you need your border to be. – Aleks G Apr 24 '12 at 09:37
  • @Ferdau I think you don't fully understand how "dp" units work. Try my code and see what you get. – Aleks G Apr 24 '12 at 09:49
  • I understand, already tried it, just wanted to ask if there wasn't a better solution because doing it that way I don't always get the result I wanted... – Ferdau Apr 24 '12 at 09:56
  • @Ferdau In that case, you may be better off explaining the result you want and the result you get - maybe then we'd be able to help you better. I have used the approach I described myself - and it looked fine on devices from ldpi to xhdpi. – Aleks G Apr 24 '12 at 10:04
0

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.

Jordi
  • 616
  • 2
  • 9
  • 16
  • Well my image should be filling the screen... So a hardcoded width isn't an option... Thanks for the post though! – Ferdau Apr 24 '12 at 09:47
  • You didn't have the image then :P What about.. creating 2 more images with the frame width/height (depending if they're top/left), setting them as invisible and putting your new image rightTo and Under those images? If they've the same size of your frame, it should do the trick.. – Jordi Apr 24 '12 at 09:53
  • Sorry i didn't explained well enought (or i missunderstood you). You can create 2 extra images, one for top-left corner and another under-top-left corner (without the paperclip, only with needed frame width), then you set them invisible (not gone). And put your photo next those 2 elements. So you'll have it well placed and papercliped – Jordi Apr 24 '12 at 10:03