CODEWITHSUNDEEP
android
Gratzi
Gratzi

Reputation: 4693

RelativeLayout wrap_content problem

I want to display 3 images on a background image. First I thought of using a relative layout and setting the background to be my background image. Then I placed the images in the layout: left, center and right. The problem is that the relative layout fills the whole screen and the background image is scaled. Using the background image as an image view in the layout is not an option, because I want my 3 images to have a maximum height determined by the background height. What is the best way to achieve this? here is my code too: 

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content" 
android:background="@drawable/instruction_background">
<ImageView android:id="@+id/background"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:layout_alignParentBottom="true"/>   
<ImageView 
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:layout_alignBottom="@+id/background"
    android:src="@drawable/apple_sauce"/>
<ImageView 
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentRight="true"
    android:layout_alignParentBottom="true"
    android:src="@drawable/white_wine"/>
<ImageView 
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerHorizontal="true"
    android:layout_alignParentBottom="true"
    android:src="@drawable/tuna_fish"/>

Best Regards

Upvotes: 1

Views: 5604

Answers (1)

Reuben Scratton
Reuben Scratton

Reputation: 38707

First of all, your 3 foreground images are arranged linearly, so put them in a horizontal LinearLayout. Then let the ImageView hold the background image, and set your LinearLayout to align with the ImageView's edges. The size of the ImageView will be determined by the image content.

i.e.:

<RelativeLayout>

  <ImageView android:id="@+id/background"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/instruction_background"
   /> 

  <LinearLayout 
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:alignLeft="@id/background"
    android:alignTop="@id/background"
    android:alignRight="@id/background"
    android:alignBottom="@id/background"
  >

    <ImageView ... />
    <ImageView ... />
    <ImageView ... />
  </LinearLayout>
</RelativeLayout>

Upvotes: 2

Related Questions