Proportional area use with Gridlayout

Asked

Viewed 313 times

1

I’m having the following difficulty, after searching exhaustively on Google and not finding an answer to this my doubt, I decided to ask here, I would like to place a Textview next to a Button, so that Textview uses 2/3 of the useful area and Button the other third remaining.

Currently the code is like this:

<GridLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="center_horizontal"
        android:orientation="horizontal"
        android:columnCount="3"
        >

        <TextView
            android:textAppearance="?android:attr/textAppearanceSmall"
            android:text="Não possui uma conta?"
            android:background="#000"
            android:layout_height="40dp"
            android:id="@+id/textView5"
            android:layout_columnSpan="2"
            android:layout_column="0"
            android:gravity="start|center" />

        <Button
            style="?android:attr/buttonStyleSmall"
            android:layout_height="40dp"
            android:text="CADASTRE-SE"
            android:id="@+id/button"
            android:layout_column="2"
            android:textStyle="bold"
            android:background="#d69312"
            android:gravity="center" />

</GridLayout>

1 answer

1

Use a Linearlayout and use the attribute android:layout_weight to define, proportionally, the space that each View occupies, then assigns that layout to the zero column of its grid indicating a span of 3

<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="center_horizontal"
        android:orientation="horizontal"
        android:columnCount="3"
        >
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_columnSpan="3"
        android:layout_column="0">

            <TextView
                android:id="@+id/textView5"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:text="Não possui uma conta?"
                android:textAppearance="?android:attr/textAppearanceSmall" 
                android:layout_weight="2"/>

            <Button
                android:id="@+id/button"
                style="?android:attr/buttonStyleSmall"
                android:layout_width="0dp"
                android:layout_height="40dp"
                android:background="#d69312"
                android:text="CADASTRE-SE"
                android:textStyle="bold" 
                android:layout_weight="1"/>

    </LinearLayout>
</GridLayout>

The sum of the values given in the attribute android:layout_weight corresponds to 100% of the total space. In this case 100% corresponds to 3.

Thus, when indicating android:layout_weight="2" in the Textview, we are saying that it should occupy 2/3 of space.

Similarly, when indicating android:layout_weight="1" in the Button, we say that the space to occupy by it must be 1/3 of the total space.

Note: The use of the attribute android:layout_weight requires that, according to the guidance of the Linearlayout, the android:layout_width or android:layout_height be defined with "0dp".

EDIT

From API 21 to Gridlayout takes on the concept of Weight, thus, with the xml below, you can obtain a result equal to the xml previous.

<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="center_horizontal"
        android:orientation="horizontal"
        android:columnCount="2">

        <TextView
            android:id="@+id/textView5"
            android:layout_gravity="fill_horizontal"
            android:text="Não possui uma conta?"
            android:textAppearance="?android:attr/textAppearanceSmall" 
            android:layout_column="0"
            android:layout_columnWeight="2"/>

        <Button
            android:id="@+id/button"
            style="?android:attr/buttonStyleSmall"
            android:layout_gravity="fill_horizontal"
            android:background="#d69312"
            android:text="CADASTRE-SE"
            android:textStyle="bold" 
            android:layout_column="1"
            android:layout_columnWeight="1"/>

</GridLayout>

Browser other questions tagged

You are not signed in. Login or sign up in order to post.