6

I have to implement a layout like shown in the diagram, and I do not know the best combination to achieve the required design. I'm designing for the 7" tablet and want the design to stretch well on the 10" enter image description here

I assume layouts like 1, 2, 3, 4, 5 are LinearLayouts, correct?

*What is the activity layout? I tried the RelativeLayout but I could NOT distribute the width between layouts 1 & 2 & 3 (using android:layout_weight)

*I tried the Horzontal LinearLayout for the whole activity, but I could not add the header and footer layouts correctly to the main horzontal linear layout

I read the documentation and tutorials but could not find a clue to this complex design, please help.

Also what is the performance hit of the nested layouts?

Thanks,

Montaro
  • 9,240
  • 6
  • 29
  • 30
  • 1
    the performance hit of nested layouts is negligible, in my experience. plus you really don't have a *ton* of views here, so i wouldn't worry about it unless you have some complex animations going on in a lot of those views. – invertigo Oct 01 '13 at 19:26

3 Answers3

14

You could try something like this, and, as someone else said,at this level you will not have performance issues

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:weightSum="1" >

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="0.2"
    android:background="@android:color/holo_orange_light"
    android:orientation="horizontal"
    android:weightSum="1" >

    <View
        android:id="@+id/view1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:layout_weight="0.2"
        android:background="@android:color/black" />

    <View
        android:id="@+id/view2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:layout_weight="0.8"
        android:background="@android:color/black" />
</LinearLayout>

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="0.6"
    android:background="@android:color/holo_blue_light"
    android:orientation="horizontal"
    android:weightSum="1" >

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_margin="10dp"
        android:layout_weight="0.2"
        android:background="@android:color/holo_purple"
        android:orientation="vertical"
        android:weightSum="1" >

        <View
            android:id="@+id/view1"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_margin="10dp"
            android:layout_weight="0.2"
            android:background="@android:color/black" />

        <View
            android:id="@+id/view1"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_margin="10dp"
            android:layout_weight="0.3"
            android:background="@android:color/black" />

        <View
            android:id="@+id/view2"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_margin="10dp"
            android:layout_weight="0.5"
            android:background="@android:color/black" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_margin="10dp"
        android:layout_weight="0.4"
        android:background="@android:color/holo_red_dark"
        android:orientation="vertical"
        android:weightSum="1" >

        <View
            android:id="@+id/view1"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_margin="10dp"
            android:layout_weight="0.33"
            android:background="@android:color/black" />

        <View
            android:id="@+id/view1"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_margin="10dp"
            android:layout_weight="0.33"
            android:background="@android:color/black" />

        <View
            android:id="@+id/view2"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_margin="10dp"
            android:layout_weight="0.33"
            android:background="@android:color/black" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_margin="10dp"
        android:layout_weight="0.4"
        android:background="@android:color/darker_gray"
        android:orientation="vertical"
        android:weightSum="1" >

        <View
            android:id="@+id/view1"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_margin="10dp"
            android:layout_weight="0.5"
            android:background="@android:color/black" />

        <View
            android:id="@+id/view2"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_margin="10dp"
            android:layout_weight="0.5"
            android:background="@android:color/black" />
    </LinearLayout>
</LinearLayout>

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="0.2"
    android:background="@android:color/holo_green_light"
    android:orientation="horizontal"
    android:weightSum="1" >

    <View
        android:id="@+id/view1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:layout_weight="0.2"
        android:background="@android:color/black" />

    <View
        android:id="@+id/view1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:layout_weight="0.3"
        android:background="@android:color/black" />

    <View
        android:id="@+id/view2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:layout_weight="0.5"
        android:background="@android:color/black" />
</LinearLayout>

</LinearLayout>

enter image description here

Lisa Anne
  • 4,482
  • 17
  • 83
  • 157
  • Tested on my tablet and it worked fine, I will replace the views with my required widgets and feedback, I guess your way will stretch nicely on larger screen tablets. Many thanks for the effort done. – Montaro Oct 02 '13 at 12:47
  • 1
    @Montaro de nada Montaro :-))) – Lisa Anne Oct 02 '13 at 15:13
  • Why the whole layout is cropped in the ADT designer not like http://img32.imageshack.us/img32/5154/h4gu.jpg However it is shown well on the physical tablet I use eclipse/ubuntu – Montaro Oct 02 '13 at 16:22
1

This is what GridLayout was made for. :-) Check out this article: http://android-developers.blogspot.com/2011/11/new-layout-widgets-space-and-gridlayout.html

Paul Burke
  • 25,496
  • 9
  • 66
  • 62
  • You are correct Paul, the blog post shows it is the right way to take. I will test it and feedback, however I'm in a hurry now to experiment. THANKS! – Montaro Oct 02 '13 at 12:46
1

You will nee a combination of Linear and relative layouts. To group the blocks in horizontal and vertical you can use LinearLayout and to put those groups you can either use linear layout and adjust the weight accordingly or use relative and set them in respect to each other.

Rishabh Srivastava
  • 3,683
  • 2
  • 30
  • 58