3

I am trying to design a layout which basically consists of the following

  • Linear Layout (Horizontal)

    • Linear Layout (Vertical)

      • textview
      • textview
      • imageview

      (end of vertical)

    • Linear Layout (Vertical)

      • textview
      • textview
      • imageview

    (end of vertical)

(end of horizontal)

Now I have 2 more Linear Layouts (Horizontal orientation) of the similar kind as stated above. A total of 3 in the layout file.

I was able to construct the above requirement. But when I run the application, the views aren't getting distributed evenly. There is a lot of white space at the bottom and the sides of the device screen.

How to do that?

Any corrections/suggestions can be of great help. Thanks.

Below is my xml file

<LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_margin="20dp"
        android:baselineAligned="false"
        android:orientation="horizontal" >

        <LinearLayout
            android:id="@+id/ll1"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:orientation="vertical" >

            <TextView
                android:id="@+id/textView13"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="center_horizontal|center_vertical"
                android:text="@string/Connected"
                android:textSize="12sp" />

            <TextView
                android:id="@+id/textView14"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="center_horizontal|center_vertical"
                android:text="@string/time"
                android:textSize="12sp" />

            <ImageView
                android:id="@+id/lte3G"
                android:layout_width="64dp"
                android:layout_height="64dp"
                android:gravity="center_horizontal|center_vertical"
                android:src="@drawable/lte" />
        </LinearLayout>

        <LinearLayout
            android:id="@+id/ll2"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:orientation="vertical" >

            <TextView
                android:id="@+id/textView22"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="center_horizontal|center_vertical"
                android:text="@string/Operator"
                android:textSize="12sp" />

            <TextView
                android:id="@+id/textView23"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="center_horizontal|center_vertical"
                android:text="@string/Docomo"
                android:textSize="12sp" />

            <ImageView
                android:id="@+id/operator"
                android:layout_width="64dp"
                android:layout_height="64dp"
                android:gravity="center_horizontal|center_vertical"
                android:src="@drawable/network" />
        </LinearLayout>
    </LinearLayout>

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_margin="20dp"
        android:baselineAligned="false"
        android:orientation="horizontal" >

        <LinearLayout
            android:id="@+id/ll3"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:orientation="vertical" >

            <TextView
                android:id="@+id/textView16"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="center_horizontal|center_vertical"
                android:text="@string/Short"
                android:textSize="12sp" />

            <TextView
                android:id="@+id/textView17"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="center_horizontal|center_vertical"
                android:text="@string/Messages"
                android:textSize="12sp" />

            <ImageView
                android:id="@+id/SMS"
                android:layout_width="64dp"
                android:layout_height="64dp"
                android:gravity="center_horizontal|center_vertical"
                android:src="@drawable/sms" />
        </LinearLayout>

        <LinearLayout
            android:id="@+id/ll4"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:orientation="vertical" >

            <TextView
                android:id="@+id/textView25"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="center_horizontal|center_vertical"
                android:text="@string/Connected1"
                android:textSize="12sp" />

            <TextView
                android:id="@+id/textView26"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="center_horizontal|center_vertical"
                android:text="@string/Clients"
                android:textSize="12sp" />

            <ImageView
                android:id="@+id/clients"
                android:layout_width="64dp"
                android:layout_height="64dp"
                android:gravity="center_horizontal|center_vertical"
                android:src="@drawable/clients" />
        </LinearLayout>
    </LinearLayout>

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_margin="20dp"
        android:baselineAligned="false"
        android:orientation="horizontal" >

        <LinearLayout
            android:id="@+id/ll5"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:orientation="vertical" >

            <TextView
                android:id="@+id/textView19"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="center_horizontal|center_vertical"
                android:text="@string/Traffic"
                android:textSize="12sp" />

            <TextView
                android:id="@+id/textView20"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="center_horizontal|center_vertical"
                android:text="@string/Usage"
                android:textSize="12sp" />

            <ImageView
                android:id="@+id/traffic"
                android:layout_width="64dp"
                android:layout_height="64dp"
                android:gravity="center_horizontal|center_vertical"
                android:src="@drawable/traffic" />
        </LinearLayout>

        <LinearLayout
            android:id="@+id/ll6"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:orientation="vertical" >

            <TextView
                android:id="@+id/textView28"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="center_horizontal|center_vertical"
                android:text="@string/Battery"
                android:textSize="12sp" />

            <TextView
                android:id="@+id/textView29"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="center_horizontal|center_vertical"
                android:text="@string/Status"
                android:textSize="12sp" />

            <ImageView
                android:id="@+id/imageView7"
                android:layout_width="64dp"
                android:layout_height="64dp"
                android:gravity="center_horizontal|center_vertical"
                android:src="@drawable/battery" />
        </LinearLayout>
    </LinearLayout>

Below is the screenshot.

enter image description here

4
  • 2
    You can try giving match_parent in parent linear layout's height and use weight and weightSum correctly Oct 22, 2014 at 9:04
  • Consider using a GridView, instead of nested layouts. Oct 22, 2014 at 9:04
  • use layout_weight and weightSum
    – Meenal
    Oct 22, 2014 at 9:07
  • @MeenalSharma:Where should I include layout_weight ? for individual views or for the parent layout. Oct 22, 2014 at 9:28

4 Answers 4

5

The following xml solves your problem

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical"
    tools:context="com.example.stackoverflow_2.MainActivity" >

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_margin="20dp"
        android:baselineAligned="false"
        android:orientation="horizontal"
        android:weightSum="2" >

        <LinearLayout
            android:id="@+id/ll1"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:orientation="vertical" >

            <TextView
                android:id="@+id/textView13"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="center_horizontal|center_vertical"
                android:text="@string/Connected"
                android:textSize="12sp" />

            <TextView
                android:id="@+id/textView14"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="center_horizontal|center_vertical"
                android:text="@string/time"
                android:textSize="12sp" />

            <ImageView
                android:id="@+id/lte3G"
                android:layout_width="64dp"
                android:layout_height="64dp"
                android:gravity="center_horizontal|center_vertical"
                android:src="@drawable/lte" />
        </LinearLayout>

        <LinearLayout
            android:id="@+id/ll2"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:orientation="vertical" >

            <TextView
                android:id="@+id/textView22"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="center_horizontal|center_vertical"
                android:text="@string/Operator"
                android:textSize="12sp" />

            <TextView
                android:id="@+id/textView23"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="center_horizontal|center_vertical"
                android:text="@string/Docomo"
                android:textSize="12sp" />

            <ImageView
                android:id="@+id/operator"
                android:layout_width="64dp"
                android:layout_height="64dp"
                android:gravity="center_horizontal|center_vertical"
                android:src="@drawable/network" />
        </LinearLayout>
    </LinearLayout>

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_margin="20dp"
        android:baselineAligned="false"
        android:orientation="horizontal" >

        <LinearLayout
            android:id="@+id/ll3"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:orientation="vertical" >

            <TextView
                android:id="@+id/textView16"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="center_horizontal|center_vertical"
                android:text="@string/Short"
                android:textSize="12sp" />

            <TextView
                android:id="@+id/textView17"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="center_horizontal|center_vertical"
                android:text="@string/Messages"
                android:textSize="12sp" />

            <ImageView
                android:id="@+id/SMS"
                android:layout_width="64dp"
                android:layout_height="64dp"
                android:gravity="center_horizontal|center_vertical"
                android:src="@drawable/sms" />
        </LinearLayout>

        <LinearLayout
            android:id="@+id/ll4"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:orientation="vertical" >

            <TextView
                android:id="@+id/textView25"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="center_horizontal|center_vertical"
                android:text="@string/Connected1"
                android:textSize="12sp" />

            <TextView
                android:id="@+id/textView26"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="center_horizontal|center_vertical"
                android:text="Clients"
                android:textSize="12sp" />

            <ImageView
                android:id="@+id/clients"
                android:layout_width="64dp"
                android:layout_height="64dp"
                android:gravity="center_horizontal|center_vertical"
                android:src="@drawable/clients" />
        </LinearLayout>
    </LinearLayout>

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_margin="20dp"
        android:baselineAligned="false"
        android:orientation="horizontal" >

        <LinearLayout
            android:id="@+id/ll5"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:orientation="vertical" >

            <TextView
                android:id="@+id/textView19"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="center_horizontal|center_vertical"
                android:text="Traffic"
                android:textSize="12sp" />

            <TextView
                android:id="@+id/textView20"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="center_horizontal|center_vertical"
                android:text="Usage"
                android:textSize="12sp" />

            <ImageView
                android:id="@+id/traffic"
                android:layout_width="64dp"
                android:layout_height="64dp"
                android:gravity="center_horizontal|center_vertical"
                android:src="@drawable/traffic" />
        </LinearLayout>

        <LinearLayout
            android:id="@+id/ll6"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:orientation="vertical" >

            <TextView
                android:id="@+id/textView28"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="center_horizontal|center_vertical"
                android:text="Battery"
                android:textSize="12sp" />

            <TextView
                android:id="@+id/textView29"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="center_horizontal|center_vertical"
                android:text="Status"
                android:textSize="12sp" />

            <ImageView
                android:id="@+id/imageView7"
                android:layout_width="64dp"
                android:layout_height="64dp"
                android:gravity="center_horizontal|center_vertical"
                android:src="@drawable/battery" />
        </LinearLayout>
    </LinearLayout>

</LinearLayout>

This produces following layout

enter image description here

0
2

try this code

    <LinearLayout
        android:id="@+id/ll1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:orientation="vertical" >

        <TextView
            android:id="@+id/textView13"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
           android:layout_gravity="center"
            android:gravity="center"
            android:text="@string/Connected"
            android:textSize="12sp" />

        <TextView
            android:id="@+id/textView14"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:gravity="center"
            android:text="@string/time"
            android:textSize="12sp" />

        <ImageView
            android:id="@+id/lte3G"
            android:layout_width="64dp"
            android:layout_height="64dp"
            android:layout_gravity="center"
            android:gravity="center"
            android:src="@drawable/lte" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/ll2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:orientation="vertical" >

        <TextView
            android:id="@+id/textView22"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:gravity="center"
            android:text="@string/Operator"
            android:textSize="12sp" />

        <TextView
            android:id="@+id/textView23"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
           android:layout_gravity="center"
            android:gravity="center"
            android:text="@string/Docomo"
            android:textSize="12sp" />

        <ImageView
            android:id="@+id/operator"
            android:layout_width="64dp"
            android:layout_height="64dp"
            android:layout_gravity="center"
            android:gravity="center"
            android:src="@drawable/network" />
    </LinearLayout>
</LinearLayout>

<LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_margin="20dp"
    android:baselineAligned="false"
    android:orientation="horizontal" >

    <LinearLayout
        android:id="@+id/ll3"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:orientation="vertical" >

        <TextView
            android:id="@+id/textView16"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:gravity="center"
            android:text="@string/Short"
            android:textSize="12sp" />

        <TextView
            android:id="@+id/textView17"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:gravity="center"
            android:text="@string/Messages"
            android:textSize="12sp" />

        <ImageView
            android:id="@+id/SMS"
            android:layout_width="64dp"
            android:layout_height="64dp"
            android:layout_gravity="center"
            android:gravity="center"
            android:src="@drawable/sms" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/ll4"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:orientation="vertical" >

        <TextView
            android:id="@+id/textView25"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:gravity="center"
            android:text="@string/Connected1"
            android:textSize="12sp" />

        <TextView
            android:id="@+id/textView26"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:gravity="center"
            android:text="@string/Clients"
            android:textSize="12sp" />

        <ImageView
            android:id="@+id/clients"
            android:layout_width="64dp"
            android:layout_height="64dp"
            android:layout_gravity="center"
            android:gravity="center"
            android:src="@drawable/clients" />
    </LinearLayout>
</LinearLayout>

<LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_margin="20dp"
    android:baselineAligned="false"
    android:orientation="horizontal" >

    <LinearLayout
        android:id="@+id/ll5"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:orientation="vertical" >

        <TextView
            android:id="@+id/textView19"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:gravity="center"
            android:text="@string/Traffic"
            android:textSize="12sp" />

        <TextView
            android:id="@+id/textView20"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:gravity="center"
            android:text="@string/Usage"
            android:textSize="12sp" />

        <ImageView
            android:id="@+id/traffic"
            android:layout_width="64dp"
            android:layout_height="64dp"
            android:layout_gravity="center"
            android:gravity="center"
            android:src="@drawable/traffic" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/ll6"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:orientation="vertical" >

        <TextView
            android:id="@+id/textView28"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:gravity="center"
            android:text="@string/Battery"
            android:textSize="12sp" />

        <TextView
            android:id="@+id/textView29"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
           android:layout_gravity="center"
            android:gravity="center"
            android:text="@string/Status"
            android:textSize="12sp" />

        <ImageView
            android:id="@+id/imageView7"
            android:layout_width="64dp"
            android:layout_height="64dp"
           android:layout_gravity="center"
            android:gravity="center"
            android:src="@drawable/battery" />
    </LinearLayout>
</LinearLayout>
2
  • Thanks for the response. It fits the screen nicely now. But the white space at the bottom still remains Oct 22, 2014 at 9:47
  • 1
    add margin from top..and space depends on the screen size..and items height
    – Meenal
    Oct 22, 2014 at 9:50
1

This type of Layout may slow down your UI, you can use GridView to generate such types of list. Remember that nested views can slow down your application, and it is more visible when you insert that type of UI into ScrollView (Scroll will be very slow).

4
  • I completely agree with you. But I have been instructed to do it using nested linear layouts Oct 22, 2014 at 9:16
  • 1
    You can still use nested Views to implement such type of Menu. In your code you have level 2 nested Views, which will not affect your performance that much (Especially if that View is not inside ScrollView). In your code I recommend use android:layout_gravity and android:gravity attributes to try to center your views. BTW use match_parent, not fill_parent attribute.
    – Arshak92
    Oct 22, 2014 at 9:26
  • I just recommend you to use GridView and ListView if you will have to generate bigger lists than this.
    – Arshak92
    Oct 22, 2014 at 9:28
  • Thanks I will try that and let you know if the problem persists Oct 22, 2014 at 9:38
1

Nested Layouts cause bad performance. You can use a GridView instead. And in a seperate XML file create a grid item's layout. Using an adapter(ViewHolder style), set it to GridView. Check out this for more info.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.