CODEWITHSUNDEEP
androidandroid-layout
lewiada
lewiada

Reputation: 1497

create a grid with cell heights and widths relative to screen size

I am new to Android programming and I would like to make a table/grid (generically speaking, not sure the best layout to use just yet). I want the table to fill the entire screen, but I want to have variable sized height and width for cells. For example I would like column one to be 1/3 of the display width, and column 2 to be 2/3 of the display width. Similarly, I would like some cells to be 1/4 of the screen height, and others to be 1/2 of the screen height, etc. What is the best layout to use for this? I am looking at GridLayout, LinearLayout, and TableLayout.

Tx!

Upvotes: 0

Views: 333

Answers (2)

wblaschko
wblaschko

Reputation: 3262

There are two approaches to this:

1) If you know what all your items will be and can pre-define them.

I would use LinearLayouts inside LinearLayouts (parent orientation set to vertical, children set to horizontal). Then use weight_sum on the parent (e.g. 3) and layout_weight on the children (e.g. 2, 1). Set the children layout_width to 0dp.

2) If you are trying to represent a variable list of data

This is a little more complicated, but you might be best off using a RecyclerView with a GridLayoutManager which will allow you to programmatically set the span of the items based on type.

Edit:

Example of #1:

<?xml version="1.0" encoding="utf-8"?>
<ScrollView 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"
    tools:context=".MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="4">
            <TextView
                android:layout_width="0dp"
                android:layout_weight="3"
                android:layout_height="wrap_content" 
                android:background="#abc"/>
            <TextView
                android:layout_width="0dp"
                android:layout_weight="1"
                android:layout_height="wrap_content"
                android:background="#cda"/>
        </LinearLayout>
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="4">
            <TextView
                android:layout_width="0dp"
                android:layout_weight="2"
                android:layout_height="wrap_content"
                android:background="#af0"/>
            <TextView
                android:layout_width="0dp"
                android:layout_weight="2"
                android:layout_height="wrap_content"
                android:background="#ffa"/>
        </LinearLayout>
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="4">
            <TextView
                android:layout_width="0dp"
                android:layout_weight="4"
                android:layout_height="wrap_content"
                android:background="#f00"/>
        </LinearLayout>
    </LinearLayout>
</ScrollView>

Upvotes: 0

Virthuss
Virthuss

Reputation: 3213

You can do it easily using LinearLayout.

Set its layout_weight at 1. Then, set the layout_weight of your first element at 0.3 and the layout_weight of your second at 0.66. Then it will give to your first element 1/3 or the screen and the rest to your second one.

Put for each element a width of 0dp. Then according to the weight your gave to your elements, your elements will spread on the screen.

Hope it helps.

Upvotes: 1

Related Questions