Wrapping image properly in Android

Question

I would like to create a layout that looks like this:

-----------------
|               |
|               |
|               |
|               |
|   ImageView   |
|               |
|               |
|               |
|               |
-----------------
|Button |Button |

The size of the image itself can be different, but I would like the entire screen to be filled with the imageview and the two buttons below it regardless of the size of the image, on all devices.

How can I do that?

Answer 1

try this,

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <ImageView
        android:id="@+id/imageview"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="90"
        android:background="@android:color/darker_gray"
        android:scaleType="fitXY" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="10"
        android:orientation="horizontal" >

        <Button
            android:id="@+id/button1"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="Ok" />

        <Button
            android:id="@+id/button2"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="Cancel" />
    </LinearLayout>

</LinearLayout>

Answer 2

In a RelativeLayout:

Put the two Buttons in a LinearLayout.

Each of the Buttons wiil have a android:layout_weight="1" and a android:layout_width="0dp"

The LinearLayout has to be aligned to the Parent's bottom: android:layout_alignParentBottom="true"

Then add the ImageView with the attributes: android:layout_alignParentTop="true", android:layout_width="match_parent" and android:layout_height="match_parent"

Note that match_parent fills the remaining space.

Like this:

<?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"
    >
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:orientation="horizontal"
        >
        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
        />
        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
        />
    </LinearLayout>
    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_alignParentTop="true"
    />
</RelativeLayout>

Note: This layout is light and avoids nested weights.

[EDIT]

This is an alternative design, that seems to best match your newly expressed needs

To set the image in the center and the buttons just below it:

<?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"
    >
    <ImageView
        android:id="@+id/image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
    />
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/image"
        android:orientation="horizontal"
        >
        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
        />
        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
        />
    </LinearLayout>
</RelativeLayout>

Answer 3

Just use ,

android:scaleType="fitXY" 

attribute for ImageView.

For Buttons use,

android:layout_weight="1" for both.

Answer 4

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:orientation="vertical" >

  <ImageView
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1" />

  <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal" >

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1" />


    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1" />
  </LinearLayout>

</LinearLayout>

This will keep the Button at the bottom of the screen and give the remaining space to the ImageView