Android LinearLayout and Images

Question

Ok, I know this can't be hard, but I'm having a heck of a time with it.. I'm a seasoned Java programmer, but very new to Android (ok, so I'm working on my first test app still...)

I'd like to have 3 images on the screen, one "main" image that takes up, say, the top 75% of the screen, then two smaller images laid out horizontally underneath it. (Think of a gallery, with the main (current) image displayed, a "previous" image icon below it on the left, and a "next" image icon below the main on the right).

I don't have big and small images, they're just all big and I want them to be displayed in a scaled fashion. The problem is no matter what I do, the "main" image takes up way too much space, such that most often, the images on the bottom aren't visible at all.

I realize that I can set the main image's height to a specified number of dip and that has worked, but then if my app goes to a device with a different density, it will look goofy. I've tried playing with android:layout_weight, but with no luck. I thought if I set the layout_weights equal, it would make the views take up the same proportion, but the "main" image just always dominates and results in the small images being clipped at the bottom or pushed fully off screen.

I also realize I could probably use other layouts, but it seems so simple to just have the root layout be a vertical LinearLayout that consists of an image and a horizontal LinearLayout that consists of 2 images. Something like this:

<?xml version="1.0" encoding="utf-8"?>
<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/cbPicView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center_horizontal"
    android:src="@drawable/cb1"
    android:layout_weight="1"
  />

  <LinearLayout
    android:orientation="horizontal"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    >

    <ImageView
      android:id="@+id/cbPrevPicView"
      android:layout_width="50dip"
      android:layout_height="50dip"
      android:src="@drawable/cb4"
      android:layout_weight="1"
    />

    <ImageView
      android:id="@+id/cbNextPicView"
      android:layout_width="50dip"
      android:layout_height="50dip"
      android:src="@drawable/cb2"
      android:layout_weight="1"
    />
  </LinearLayout>
</LinearLayout>

Sorry for the length - trying to provide as much detail as I can. Thanks!

Solution

This will make something like:

-------

   1

-------
 2 | 3
-------

Layout:

<?xml version="1.0" encoding="utf-8"?>
<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/cbPicView"
    android:layout_width="wrap_content"
    android:layout_height="0dp"
    android:layout_gravity="center_horizontal"
    android:src="@drawable/cb1"
    android:layout_weight="3"
  />

  <LinearLayout
    android:orientation="horizontal"
    android:layout_width="fill_parent"
    android:layout_height="0dp"
    android:layout_weight="1"
    >

    <ImageView
      android:id="@+id/cbPrevPicView"
      android:layout_width="0dp"
      android:layout_height="fill_parent"
      android:src="@drawable/cb4"
      android:layout_weight="1"
    />

    <ImageView
      android:id="@+id/cbNextPicView"
      android:layout_width="0dp"
      android:layout_height="fill_parent"
      android:src="@drawable/cb2"
      android:layout_weight="1"
    />
  </LinearLayout>
</LinearLayout>

Comments

[Kevin Qiu]

try setting the heights to 0dip but keep the layout_weight parameter

[daroo]

Tried setting first ImageView (main one) to 0dip with weight 1, and second LinearLayout to 0dip with weight 1. Now all I get is a blank screen when I run it?

[daroo]

Whoops - my fault - I set both width and height to 0dip, no wonder they weren't there.. Your suggestion works! Thank you so much - can you explain why that works?

[daroo]

Excellent - now if I set the main ImageView layout_weight to 3 and the inner LinearLayout to 1, I get the 75/25 effect I wanted too! Thanks Kevin!

[Kevin Qiu]

i think its because setting weight or height to 0 allows weight to override