Creating a grid like layout in Android
-
06-06-2021 - |
Question
Basically, I have a view that needs to be split up into a 2x4 grid, with each section equal in size (i.e. each row would be 25% of the screen height, and each column would be 50% of the screen width).
My approach was to use a horizontal LinearLayout with two inner LinearLayouts with a weight of 0.5 and then in each of those LinearLayouts set the weight of the children to 0.25 so that each one takes up 25% of the screen.
Although this seems to work, this is apparently very bad for performance (see this thread for a reason why Why are nested weights bad for performance? Alternatives?)
Are there any alternatives to achieve this? I have had a look around but I can't find a pure XML solution to this.
See below a code example of how I have the LinearLayouts and their children setup
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:baselineAligned="false"
android:weightSum="1.0"
>
<LinearLayout
android:orientation="vertical"
android:layout_width="0dip"
android:layout_height="fill_parent"
android:layout_weight="0.5"
android:weightSum="1.0">
<ImageView
android:layout_width="wrap_content"
android:layout_height="0dip"
android:src="@drawable/example"
android:layout_gravity="center_horizontal"
android:layout_weight="0.25"
/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="0dip"
android:src="@drawable/example"
android:layout_gravity="center_horizontal"
android:layout_weight="0.25"
/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="0dip"
android:src="@drawable/example"
android:layout_gravity="center_horizontal"
android:layout_weight="0.25"
/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="0dip"
android:src="@drawable/example"
android:layout_gravity="center_horizontal"
android:layout_weight="0.25"
/>
</LinearLayout>
<LinearLayout
android:orientation="vertical"
android:layout_width="0dip"
android:layout_height="fill_parent"
android:layout_weight="0.5"
android:weightSum="1.0">
<ImageView
android:layout_width="wrap_content"
android:layout_height="0dip"
android:src="@drawable/example"
android:layout_gravity="center_horizontal"
android:layout_weight="0.25"
/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="0dip"
android:src="@drawable/example"
android:layout_gravity="center_horizontal"
android:layout_weight="0.25"
/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="0dip"
android:src="@drawable/example"
android:layout_gravity="center_horizontal"
android:layout_weight="0.25"
/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="0dip"
android:src="@drawable/example"
android:layout_gravity="center_horizontal"
android:layout_weight="0.25"
/>
</LinearLayout>
</LinearLayout>
Solution
You might want to give the GridLayout a spin.
There's also a library that makes it available to 1.6+ devices.
OTHER TIPS
Use GridView inside LinearLayout. Check http://developer.android.com/resources/tutorials/views/hello-gridview.html