How to resize an ImageView in Android?

Question

I am trying to do something similar to the image below in Android. The problem is, whenever the screen size changes (when the user rotates the device), the checkboxes and the button disappear from the screen. This is my layout

<?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" >

<ImageView
android:id="@+id/preview"
android:layout_width="fill_parent"
android:contentDescription="@string/content_description"
android:layout_height= "1.5in" />

<CheckBox
android:id="@+id/location"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/preview"
android:text="@string/location_text" />

<CheckBox
android:id="@+id/timestamp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/location"
android:text="@string/timestamp_text" />

<Button
android:id="@+id/buttonUpload"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_below="@+id/timestamp"
android:layout_marginRight="19dp"
android:gravity="center_vertical"
android:onClick="uploadClicked"
android:text="@string/upload_button_text" />

</RelativeLayout>

I need to display the image and all controls and support all screen sizes. How do I make the size of the ImageView dynamic?

Answer 1

Based on all the feedback. This is what I used:

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/scroller"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:fillViewport="true" >
    <RelativeLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" >

<ImageView
android:id="@+id/preview"
android:layout_width="fill_parent"
android:contentDescription="@string/content_description"
android:layout_height= "1.5in" />

<CheckBox
android:id="@+id/location"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/preview"
android:text="@string/location_text" />

<CheckBox
android:id="@+id/timestamp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/location"
android:text="@string/timestamp_text" />

<Button
android:id="@+id/buttonUpload"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_below="@+id/timestamp"
android:layout_marginRight="19dp"
android:gravity="center_vertical"
android:onClick="uploadClicked"
android:text="@string/upload_button_text" />

</RelativeLayout>
</ScrollView>

Answer 2

If you used a LinearLayout instead of a RelativeLayout, you could make the ImageView expand to take all the empty space in the screen. The scaleType attribute will let you specify how to stretch the image.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >

<ImageView
android:id="@+id/preview"
android:layout_width="fill_parent"
android:contentDescription="@string/content_description"
android:layout_height="0dp"
android:layout_weight="1"
android:scaleType="fitCenter" />

<CheckBox
android:id="@+id/location"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/location_text" />

<CheckBox
android:id="@+id/timestamp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/timestamp_text" />

<Button
android:id="@+id/buttonUpload"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="19dp"
android:layout_gravity="right"
android:onClick="uploadClicked"
android:text="@string/upload_button_text" />

</LinearLayout>

Answer 3

I never got the scaleType thing to work for me.

I subclassed ImageView:

package your.pkg;

import android.content.Context;
import android.util.AttributeSet;
import android.widget.ImageView;

public class AspectRatioImageView extends ImageView {

  public AspectRatioImageView(Context context) {
    super(context);
  }

  public AspectRatioImageView(Context context, AttributeSet attrs) {
    super(context, attrs);
  }

  public AspectRatioImageView(Context context, AttributeSet attrs, int defStyle) {
    super(context, attrs, defStyle);
  }

  @Override
  protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    int width = MeasureSpec.getSize(widthMeasureSpec);
  if (getDrawable() != null && getDrawable().getIntrinsicWidth() != 0) {
    int height = width * getDrawable().getIntrinsicHeight() / getDrawable().getIntrinsicWidth();
    setMeasuredDimension(width, height);
  } else {
    setMeasuredDimension(0, 0);
  }

 }
}

And used that instead of the regular ImageView:

<your.pkg.AspectRatioImageView
            android:id="@+id/photo"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:layout_alignParentTop="true"
            android:adjustViewBounds="true"
/>

This scales to the full width of the parent View and maintains the aspect ratio while doing so.