Android layout: Use margin/padding or nested layouts?

Question

I'm trying to accomplish a layout in Android but cannot figure out how to do it. Basically I'm trying to get it to look like this:

+-----------------------------------------+
|           Text #1                       |
| img1 img2 Text #2                  img3 |
+-----------------------------------------+

Text #1 and Text #2 should be aligned as I have tried to illustrate. I'm considering two different approaches:

+-----------------------------------------+
|<- margin->Text #1                       |
+-----------------------------------------+
| img1 img2 Text #2                  img3 |
+-----------------------------------------+

Or

+----------+-------+----------------------+
|          |Text #1|                      |
|          +-------+
| img1 img2|Text #2|                 img3 |
+----------+-------+----------------------+

I would prefere the latter but the LinearLayout with Text #1/#2 sort of collapses so that Text #2 is not visible.

Both solutions are nested inside a RelativeLayout. I have tried setting gravity on the LinearLayout containing the left part to "left" and the one with img3 to "right" but apparently it's only possible to assign gravity to the surrounding RelativeLayout right? At least I'm not able to right align using gravity.

If my feeble drawings makes sense can anyone guide me as to selecting the right approach?

score 2 · Answer 1 · answered Mar 19 '13 at 07:27

You can further divide these 3 linear layouts equally using WEIGHTSUM property

<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="80dip"
    android:orientation="horizontal">

    <ImageView            
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:scaleType="fitXY"
        android:src="@drawable/img2"/>

    <ImageView            
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:scaleType="fitXY"
        android:src="@drawable/img2"/>
</LinearLayout>



    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="80dip"
        android:orientation="vertical" 
        android:weightSum="1">

        <TextView
            android:id="@+id/direzione"
            android:layout_width="wrap_content"
            android:layout_height="0dip"
            android:layout_weight="0.5"                
            android:text="Text View 1"
            android:textColor="#000000"/>

        <TextView
            android:id="@+id/direzione_value"
            android:layout_width="wrap_content"
            android:layout_height="0dip"
            android:layout_weight="0.5" 
            android:text="Text View 2"
            android:textColor="#000000" />
    </LinearLayout>

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

       <ImageView            
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:scaleType="fitXY"
        android:src="@drawable/img2"/>
    </LinearLayout>

enter image description here

score 2 · Accepted Answer · answered Mar 19 '13 at 08:52

2

I would use a relative layout with that inside:

linearLayout : parentBottom + vertical orientation
  tv1
  tv2
img2: parentBottom + leftOf layout
img1: parentBottom + leftOf img2
img3 : parentBottom + rightOf layout

answered Mar 19 '13 at 08:52

Vincent Mimoun-Prat

28,208
16
81
124

KDeogharkar · Answer 3 · 2013-03-19T07:26:39.397

I use weightSum and orientation to create the layout as per your need

try this:

<?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/homeTableLayout"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:orientation="horizontal"
        android:weightSum="10"
         >

        <LinearLayout
             android:layout_width="0dip"
        android:layout_height="fill_parent"
        android:orientation="horizontal"
        android:weightSum="10"
        android:layout_weight="2"
            >
     <ImageView
         android:layout_height="50dip" 
         android:layout_width="0dip"
         android:background="@android:color/holo_blue_dark"
         android:layout_weight="5"
         />
     <ImageView
         android:layout_height="50dip" 
         android:layout_width="0dip"
         android:background="@android:color/holo_green_dark"
         android:layout_weight="5"
         />
     </LinearLayout>
     <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/homeTableLayout"
        android:layout_width="0dip"
        android:layout_height="fill_parent"
        android:orientation="vertical"
        android:layout_weight="3"
         >
         <TextView
              android:layout_width="fill_parent"
              android:layout_height="25dip"
              android:text="testing"
              android:background="@android:color/holo_orange_dark"
             />
         <TextView
              android:layout_width="fill_parent"
              android:layout_height="25dip"
              android:text="testing"
              android:background="@android:color/holo_purple"
             />

     </LinearLayout>

     <LinearLayout
             android:layout_width="0dip"
        android:layout_height="fill_parent"
        android:orientation="horizontal"
       android:layout_weight="5"
            >
     <ImageView
         android:layout_height="50dip" 
         android:layout_width="fill_parent"
         android:background="@android:color/holo_blue_dark"

         />

     </LinearLayout>
    </LinearLayout>

The below is the WireFrame. Change it as per your need:

enter image description here

Thanks! Will give it a try when I get home to my code :-) weightSum... never heard of that... — CJe, Mar 19 '13 at 07:21
weightsum define how many area will control occupy in height or in Width. — KDeogharkar, Mar 19 '13 at 07:23
http://stackoverflow.com/questions/7452741/what-is-androidweightsum-in-android-and-how-does-it-work — KDeogharkar, Mar 19 '13 at 07:25

score 0 · Answer 4 · answered Mar 19 '13 at 07:20

try this

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/RelativeLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >

<ImageView
    android:id="@+id/imageView1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:layout_alignParentTop="true"
    android:layout_marginTop="68dp"
    android:src="@drawable/ic_launcher" />

<ImageView
    android:id="@+id/imageView2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignTop="@+id/imageView1"
    android:layout_marginLeft="19dp"
    android:layout_toRightOf="@+id/imageView1"
    android:src="@drawable/ic_launcher" />


<TextView
    android:id="@+id/textView1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignBottom="@+id/imageView2"
    android:layout_alignTop="@+id/imageView2"
    android:layout_marginLeft="34dp"
    android:layout_toRightOf="@+id/imageView2"
    android:text="Large Text"
    android:gravity="center"
    android:textAppearance="?android:attr/textAppearanceLarge" />


<TextView
    android:id="@+id/textView2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_above="@+id/textView1"
    android:layout_alignRight="@+id/textView1"
    android:layout_marginBottom="16dp"
    android:text="Large Text"
    android:textAppearance="?android:attr/textAppearanceLarge" />

<ImageView
    android:id="@+id/imageView3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentRight="true"
    android:layout_alignTop="@+id/textView1"
    android:src="@drawable/ic_launcher" />

if not work pls intimate

Android layout: Use margin/padding or nested layouts?

4 Answers4