CODEWITHSUNDEEP
androidandroid-linearlayout
daroo
daroo

Reputation: 2016

Android LinearLayout and Images

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!

Upvotes: 2

Views: 15409

Answers (1)

aromero
aromero

Reputation: 25761

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>

Upvotes: 6

Related Questions