Android layout issues

I can't for the life of me figure this out. I am attempting to have the following layout (vertically):

ImageView (filling all available space) TextView (taking vertical space as needed) EditText (taking vertical space as needed) Button Button Button (spaced equally)

I have the following layout setup. The image view is currently set at 200dip. What should this value be to fill all available space? The other components should come first and the image view should get what's left over. I have searched for an example on this and have not found anything yet.

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

   <ImageView android:id="@+id/imgView"
              android:layout_width="fill_parent" 
              android:layout_height="200dip"              
              android:layout_alignParentTop="true" />

   <TextView android:id="@+id/lblDesc"
             android:layout_width="fill_parent"
             android:layout_height="wrap_content"
             android:text="@string/PhotoDesc"             
             android:layout_below="@id/imgView" />

   <EditText android:id="@+id/edtDesc"
             android:layout_width="fill_parent" 
             android:layout_height="wrap_content"                         
             android:layout_below="@id/lblDesc" />

   <!-- Bottom layout contains the three buttons - Take Photos, Transmit, and Setup. -->
   <LinearLayout android:layout_width="fill_parent" 
                 android:layout_height="wrap_content"
                 android:layout_alignParentBottom="true"
                 android:orientation="horizontal"
                 android:weightSum="3">

      <!-- Take photos button -->
      <Button android:id="@+id/btnCamera"
              android:gravity="center_vertical|center_horizontal"
              android:layout_width="fill_parent"              
              android:layout_height="wrap_content"
              android:layout_weight="1"              
              android:text="@string/TakePhotos" />

      <!-- Transmit button -->
      <Button android:id="@+id/btnUpload" 
              android:gravity="center_vertical|center_horizontal"
              android:layout_width="fill_parent"              
              android:layout_height="wrap_content"
              android:layout_weight="1"              
              android:text="@string/Upload" />              

      <!-- Setup button -->
      <Button android:id="@+id/btnSetup"
              android:gravity="center_vertical|center_horizontal"              
              android:layout_width="fill_parent"
              android:layout_height="wrap_content"
              android:text="@string/Setup"              
              android:layout_weight="1" />
   </LinearLayout>                    

</RelativeLayout>

Upvotes: 2

Answers (2)

adamp

Reputation: 28932

Looks like all you need is a LinearLayout with appropriate weight on the ImageView to take the leftover space.

layout_weight with LinearLayout is often misunderstood. LinearLayout measures its children in two passes. First, children are measured based on the given layout_width or layout_height, then after all children have been measured any extra space left over is divided according to their weights.

This means two important things:

You never want to say match_parent (or fill_parent on older versions) with a weight in the direction of the layout. (i.e. layout_width="match_parent" for a LinearLayout with orientation="horizontal" or layout_height="match_parent" for orientation="vertical".) match_parent will take effect first, consuming all currently available space and leaving none left over for the remaining children.
When you want to divide space equally between several views with weight or have one view consume whatever space is left without regard to the actual content size, use 0dip as the layout_width or layout_height value.

Try this layout:

<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/imgView"
          android:layout_width="match_parent" 
          android:layout_height="0dip"              
          android:layout_weight="1" />

   <TextView android:id="@+id/lblDesc"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:text="@string/PhotoDesc"             
         android:layout_below="@id/imgView" />

   <EditText android:id="@+id/edtDesc"
         android:layout_width="match_parent" 
         android:layout_height="wrap_content"                         
         android:layout_below="@id/lblDesc" />

   <!-- Bottom layout contains the three buttons - Take Photos, Transmit, and Setup. -->
   <LinearLayout android:layout_width="match_parent" 
             android:layout_height="wrap_content"
             android:orientation="horizontal"
             android:weightSum="3">

      <!-- Take photos button -->
      <Button android:id="@+id/btnCamera"
          android:gravity="center_vertical|center_horizontal"
          android:layout_width="0dip"              
          android:layout_height="wrap_content"
          android:layout_weight="1"              
          android:text="@string/TakePhotos" />

      <!-- Transmit button -->
      <Button android:id="@+id/btnUpload" 
          android:gravity="center_vertical|center_horizontal"
          android:layout_width="0dip"              
          android:layout_height="wrap_content"
          android:layout_weight="1"              
          android:text="@string/Upload" />              

      <!-- Setup button -->
      <Button android:id="@+id/btnSetup"
          android:gravity="center_vertical|center_horizontal"              
          android:layout_width="0dip"
          android:layout_height="wrap_content"
          android:text="@string/Setup"              
          android:layout_weight="1" />
   </LinearLayout>                    

</LinearLayout>

Upvotes: 3

Anton Hansson

Reputation: 2171

Change your RelativeLayout to a LinearLayout with android:orientation="vertical", then add android:layout_weight="1" to your ImageView.

Example code below. I set the background of the ImageView to the color red to see the effect.

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

   <ImageView android:id="@+id/imgView"
              android:layout_width="fill_parent" 
              android:layout_height="0dp"              
              android:layout_alignParentTop="true" 
              android:layout_weight="1"
              android:background="#FF0000" />

   <TextView android:id="@+id/lblDesc"
             android:layout_width="fill_parent"
             android:layout_height="wrap_content"
             android:text="test" />

   <EditText android:id="@+id/edtDesc"
             android:layout_width="fill_parent" 
             android:layout_height="wrap_content" />

   <!-- Bottom layout contains the three buttons - Take Photos, Transmit, and Setup. -->
   <LinearLayout android:layout_width="fill_parent" 
                 android:layout_height="wrap_content"
                 android:layout_alignParentBottom="true"
                 android:orientation="horizontal"
                 android:weightSum="3">

      <!-- Take photos button -->
      <Button android:id="@+id/btnCamera"
              android:gravity="center_vertical|center_horizontal"
              android:layout_width="fill_parent"              
              android:layout_height="wrap_content"
              android:layout_weight="1"              
              android:text="btn1" />

      <!-- Transmit button -->
      <Button android:id="@+id/btnUpload" 
              android:gravity="center_vertical|center_horizontal"
              android:layout_width="fill_parent"              
              android:layout_height="wrap_content"
              android:layout_weight="1"              
              android:text="btn2" />              

      <!-- Setup button -->
      <Button android:id="@+id/btnSetup"
              android:gravity="center_vertical|center_horizontal"              
              android:layout_width="fill_parent"
              android:layout_height="wrap_content"
              android:text="btn3"              
              android:layout_weight="1" />
   </LinearLayout>                    

</LinearLayout>

Upvotes: 3

Android layout issues

Answers (2)

Related Questions