Question

Hello helpful stackoverflow members,

I’m trying to accomplish what seems to be a simple layout in an android activity, but I can’t seem to get it working using just wrap_content and fill_parent/match_parent.

Picture to give a basic idea of the problem:
http://i89.photobucket.com/albums/k207/cephron/Layout_quandary.png

In a vertical LinearLayout, I have an ImageView of top of a child layout containing buttons and stuff.
I’d like to get the ImageView to be expanded to make the image as large as possible (ie. fill the screen width) without taking any more vertical space than necessary to achieve this (ie. I want the ImageView to be touching the top of the screen, with the buttons and stuff touching the bottom of the image).
I can’t get this to happen using wrap_content and fill_parent, and all my messing around with gravity didn’t seem to change anything. I had to include weights just to ensure that the image didn’t crowd everything else entirely off the screen.

I would love to post proper code, but – noob that I am – I’ve wasted about 20 minutes trying to get it to work with Stackoverflow’s code formatter, and parts of it wouldn’t show up.

So, here’s my code, sufficiently mangled that it doesn’t get recognized by whatever was selectively removing parts of it:

[LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center_horizontal"]

    [ImageView android:id="@+id/door_detail_video_frame"
    android:src="@drawable/door_closed_256"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:layout_weight="1"/]

    [LinearLayout android:id="@+id/door_detail_control_area"
    android:orientation="horizontal"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_weight="0"]

        [ImageView android:id="@+id/door_detail_status_frame"
        android:src="@drawable/door_closed_locked_67"
        android:layout_width="wrap_content"
        android:layout_height="fill_parent"/]

        [LinearLayout android:layout_height="wrap_content"
        android:orientation="vertical"
        android:layout_width="fill_parent"]

            [Button android:id="@+id/door_detail_override_button"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="@string/door_detail_override_button_text"/]

            [Button android:id="@+id/door_detail_camera_button"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="@string/door_detail_camera_button_text"/]

        [/LinearLayout]

    [/LinearLayout]

[/LinearLayout]

I believe the only relevant parts are the first LinearLayout and ImageView, but the stuff in the nested layouts (corresponding to the “buttons and stuff”) is included for completeness.

Is there a way to achieve the desired layout formatting?

Thanks in advance for any help!

Answer 1

Untested, this might help. I’ve tried this sort of thing before, seems more difficult than it should be:

ImageView iv = (ImageView)findViewById(R.id.door_detail_video_frame);
ViewTreeObserver vto = iv.getViewTreeObserver();

//gets screen dimensions
DisplayMetrics metrics = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(metrics);

//this happens before the layout is visible
vto.addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
    @Override
    public void onGlobalLayout() {
        int newWidth, newHeight, oldHeight, oldWidth;

        //the new width will fit the screen
        newWidth = metrics.widthPixels;

        //so we can scale proportionally
        oldHeight = iv.getDrawable().getIntrinsicHeight();
        oldWidth = iv.getDrawable().getIntrinsicWidth();
        newHeight = Math.floor((oldHeight * newWidth) / oldWidth);
        iv.setLayoutParams(new LinearLayout.LayoutParams(newWidth, newHeight));
        iv.setScaleType(ImageView.ScaleType.CENTER_CROP);

        //so this only happens once
        iv.getViewTreeObserver().removeGlobalOnLayoutListener(this);
    }
});

Tip on SO’s code formatter: Just copy and paste your code into the window, select it all, and hit Ctrl+K.