CODEWITHSUNDEEP
androidandroid-layoutandroid-gridlayout
Benjamin
Benjamin

Reputation: 105

Is it possible to set different number of row cells in different column in the same GridLayout, Android?

UPDATE: Problem solved! detail at the end of the explanation

The question straightforward:

As said in the title, is it possible to use a different number of row cells based on the specific column? For example, I got a 3X3 size GridLayout, I want to keep the first and second column in 3 row cells respectively, but the third column use 4 row cells. I know it disobeys the whole "rule of Grid", maybe, but is it possible if I use a vertical LinearLayout to act as the third column? Actually, I have done this, but it didn't work, so do you have any other idea?

The more detailed explanation:(might cost you a little while..)

I have always wanted to make something gorgeous and stunning, and I have studied Android development intermittently, due to the environment, for a long time. Now I want to start with building something simple to reinforce my knowledge, in UI building currently. So I tried to implement the Android default calculator, as showed below, which is so beautiful, isn't it, well, personally thinking. Android 5.0 default calculator

And I tried to take the whole layout into three part according to that bound line showed by the system, actually, it's two part, I wrapped two pane together.

1.input_pane (Using TextView)

2.result_pane (Using TextView)

3.keypad_pane (Using GridLayout)

And I used LinearLayout to group this three part together, meanwhile, I also used another LinearLayout to wrap that two TextView together since I considered they are the same thing, working the similar result.

the hierarchy can be illustrated as this:

Here's the code:

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

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="2"
            android:orientation="vertical">

            <TextView
                android:id="@+id/input_pane"
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="3"/>

            <TextView
                android:id="@+id/result_pane"
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1"/>

        </LinearLayout>

        <android.support.v7.widget.GridLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:columnCount="4"
            app:columnOrderPreserved="true"
            android:layout_weight="3"
            app:rowCount="4">

            <Button
                android:layout_width="0dp"
                android:layout_height="0dp"
                app:layout_columnWeight="1"
                app:layout_rowWeight="1"
                app:layout_column="0"
                android:text="9"
                />

            <Button
                android:layout_width="0dp"
                android:layout_height="0dp"
                app:layout_columnWeight="1"
                app:layout_rowWeight="1"
                app:layout_column="1"
                android:text="8"
                />

            <Button
                android:layout_width="0dp"
                android:layout_height="0dp"
                app:layout_columnWeight="1"
                app:layout_rowWeight="1"
                app:layout_column="2"
                android:text="7"
                />

            <Button
                app:layout_column="3"
                android:text="+"/>

            <Button
                android:layout_width="0dp"
                android:layout_height="0dp"
                app:layout_columnWeight="1"
                app:layout_rowWeight="1"
                app:layout_column="0"
                android:text="6"
                />

            <Button
                android:layout_width="0dp"
                android:layout_height="0dp"
                app:layout_columnWeight="1"
                app:layout_rowWeight="1"
                app:layout_column="1"
                android:text="5"
                />

            <Button
                android:layout_width="0dp"
                android:layout_height="0dp"
                app:layout_columnWeight="1"
                app:layout_rowWeight="1"
                app:layout_column="2"
                android:text="4"
                />

            <Button
                app:layout_column="3"
                android:text="-"/>

            <Button
                android:layout_width="0dp"
                android:layout_height="0dp"
                app:layout_columnWeight="1"
                app:layout_rowWeight="1"
                app:layout_column="0"
                android:text="3"
                />

            <Button
                android:layout_width="0dp"
                android:layout_height="0dp"
                app:layout_columnWeight="1"
                app:layout_rowWeight="1"
                app:layout_column="1"
                android:text="2"
                />

            <Button
                android:layout_width="0dp"
                android:layout_height="0dp"
                app:layout_columnWeight="1"
                app:layout_rowWeight="1"
                app:layout_column="2"
                android:text="1"
                />

            <Button
                app:layout_column="3"
                android:text="*"/>

            <Button
                android:layout_width="0dp"
                android:layout_height="0dp"
                app:layout_columnWeight="1"
                app:layout_rowWeight="1"
                app:layout_column="0"
                android:text="."
                />

            <Button
                android:layout_width="0dp"
                android:layout_height="0dp"
                app:layout_columnWeight="1"
                app:layout_rowWeight="1"
                app:layout_column="1"
                android:text="0"
                />

            <Button
                android:layout_width="0dp"
                android:layout_height="0dp"
                app:layout_columnWeight="1"
                app:layout_rowWeight="1"
                app:layout_column="2"
                android:text="="
                />

            <Button
                app:layout_column="3"
                android:text="/"/>

            <Button
                app:layout_column="3"
                android:text="C"/>
        </android.support.v7.widget.GridLayout>
    </LinearLayout>

Here's what I got in the preview, which makes me sooo discouraged(because I have gone through the material about GridLayout from the Android developer website, also find some similar(almost) answer in here, but it's hard for me to get what I need from what I found. I have done all of these started from this morning 8:00 am and now it's 18:22, well, I did had a break to have lunch) I even tried to just use GridLayout to build the whole layout, by specifying the row and column, but the outcome looks worse than I did first.

So, I am here to ask for help. I wonder, if there's a way to make Gridlayout can contain different rows in a different column? Then the problem should be solved. But if you have some other better solution to realize that beautiful(in my opinion) layout, I'd love to hear from you:)

(By the way, a trivial but upsetting question, why there's so little material about how to build a beautiful layout, in detailed? Well, seems I still put more time on it.)

Thanks in advance!

UPDATE

So, with the continuous attempt on trying the GridLayout, I finally came up with the solution. That is, by explicitly sigh the position of the cell, I can realize a different number of row cells in the different column, but this time it won't be the "same" GridLayout. My poor English might cause the difficulty of comprehension, so no more talking, watch the code instead. (I only paste the keypad part code, since this is where the problem is)

<android.support.v7.widget.GridLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_weight="2"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    app:orientation="vertical">

    <Button
        app:layout_row="0"
        app:layout_column="0"
        app:layout_columnWeight="1"
        app:layout_rowWeight="1"/>
    <Button
        app:layout_column="1"
        app:layout_row="0"
        app:layout_columnWeight="1"
        app:layout_rowWeight="1"/>
    <Button
        app:layout_column="2"
        app:layout_row="0"
        app:layout_columnWeight="1"
        app:layout_rowWeight="1"/>

    <Button
        app:layout_row="1"
        app:layout_column="0"
        app:layout_rowWeight="1"
        app:layout_columnWeight="1"/>
    <Button
        app:layout_row="1"
        app:layout_column="1"
        app:layout_rowWeight="1"
        app:layout_columnWeight="1"/>
    <Button
        app:layout_row="1"
        app:layout_column="2"
        app:layout_rowWeight="1"
        app:layout_columnWeight="1"/>


    <Button
        app:layout_row="2"
        app:layout_column="0"
        app:layout_rowWeight="1"
        app:layout_columnWeight="1"/>
    <Button
        app:layout_row="2"
        app:layout_column="1"
        app:layout_rowWeight="1"
        app:layout_columnWeight="1"/>
    <Button
        app:layout_row="2"
        app:layout_column="2"
        app:layout_rowWeight="1"
        app:layout_columnWeight="1"/>

    <Button
        app:layout_row="3"
        app:layout_column="0"
        app:layout_rowWeight="1"
        app:layout_columnWeight="1"/>
    <Button
        app:layout_row="3"
        app:layout_column="1"
        app:layout_rowWeight="1"
        app:layout_columnWeight="1"/>
    <Button
        app:layout_row="3"
        app:layout_column="2"
        app:layout_rowWeight="1"
        app:layout_columnWeight="1"/>

    <android.support.v7.widget.GridLayout
        app:layout_row="0"
        app:layout_column="3"
        app:layout_rowSpan="4"
        app:layout_rowWeight="1"
        app:orientation="vertical"
        app:layout_columnWeight="1">

        <Button
            app:layout_rowWeight="1"
            app:layout_columnWeight="1"/>
        <Button
            app:layout_rowWeight="1"
            app:layout_columnWeight="1"/>
        <Button
            app:layout_rowWeight="1"
            app:layout_columnWeight="1"/>
        <Button
            app:layout_rowWeight="1"
            app:layout_columnWeight="1"/>
        <Button
            app:layout_rowWeight="1"
            app:layout_columnWeight="1"/>
    </android.support.v7.widget.GridLayout>

</android.support.v7.widget.GridLayout>

And that's it, since my first attempt at building a simple and complete APP still on the road, now I will go back to the process, so for more information, welcome to comment or send me email :D

Upvotes: 0

Views: 254

Answers (1)

Sanket Kachhela
Sanket Kachhela

Reputation: 10856

you can use FlexboxLayout for custom no. of columns on particular row. which will depend on size of child.

you can take a look more on that from below docs.

Developer docs

Medium article

Upvotes: 1

Related Questions