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"
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,
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>
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
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.