Fill whole screen with four buttons by two rows in Android

Fill whole screen with four buttons by two rows in Android - android

I want to fill the whole screen with four buttons that has the same width and height so I thought a grid layout would be a great idea:
<GridLayout
android:id="#+id/grid"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:columnCount="2"
android:rowCount="2"
>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button"
android:layout_columnWeight="1"
android:layout_rowWeight="0"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button"
android:layout_columnWeight="1"
android:layout_rowWeight="0"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button"
android:layout_rowWeight="1"
android:layout_columnWeight="1"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button"
android:layout_rowWeight="1"
android:layout_columnWeight="1"
/>
</GridLayout>
Unfortunatly my result looks like this:
I don't understand why the height of the second row is so big?
I thought every cell in a grid layout got the same width and height!

This can also be done with ConstraintLayout, which will give you a flat hierarchy and more flexibility for future changes.
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:id="#+id/button"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="Button"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toStartOf="#+id/button2"
app:layout_constraintBottom_toTopOf="#id/button3"/>
<Button
android:id="#+id/button2"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="Button"
app:layout_constraintStart_toEndOf="#+id/button"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toTopOf="#+id/button4" />
<Button
android:id="#+id/button3"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="Button"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/button4"
app:layout_constraintTop_toBottomOf="#+id/button" />
<Button
android:id="#+id/button4"
android:layout_width="0dp"
android:layout_height="0dp"
android:text="Button"
app:layout_constraintTop_toBottomOf="#id/button2"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/button3"/>
</android.support.constraint.ConstraintLayout>

if you want to do that with Gridlayout :
<GridLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:columnCount="2"
android:orientation="vertical"
android:rowCount="2">
<Button
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_column="1"
android:layout_columnWeight="1"
android:layout_row="0"
android:layout_rowWeight="1" />
<Button
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_column="1"
android:layout_columnWeight="1"
android:layout_row="1"
android:layout_rowWeight="1" />
<Button
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_column="0"
android:layout_columnWeight="1"
android:layout_row="1"
android:layout_rowWeight="1" />
<Button
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_column="0"
android:layout_columnWeight="1"
android:layout_row="0"
android:layout_rowWeight="1" />
</GridLayout>
you can do this with linearlayout like this:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal">
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"/>
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal">
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"/>
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"/>
</LinearLayout>

Related

Strange layout bug

I have the following in for my layout.xml. The e_btn_fretboard does not register clicks at all. Even when I press on it it does not change to pressed state color. All the other buttons do work. I moved the button to another grid cell and left that one empty. And here is the thing when I moved the button it now registers click and changes to pressed state color.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/board_img"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/fretboard_12" />
<ImageView
android:id="#+id/fretmarker"
android:layout_width="14dp"
android:layout_height="14dp"
android:src="#drawable/fretmarker" />
<ScrollView
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="30dp"
android:clipToPadding="false"
android:fillViewport="false"
android:scrollbars="vertical"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/board_img"
app:layout_constraintVertical_bias="0.0">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<GridLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:columnCount="3"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/noteImage"
>
<Button
android:id="#+id/c_btn_fretboard"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_columnWeight="1"
android:layout_column="0"
android:layout_row="0"
android:text="C"
/>
<Button
android:id="#+id/csharp_btn_fretboard"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="1"
android:layout_columnWeight="1"
android:layout_row="0"
android:text="C#/Db"
android:textAllCaps="false"
/>
<Button
android:id="#+id/d_btn_fretboard"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="2"
android:layout_columnWeight="1"
android:layout_row="0"
android:text="D"
/>
<Button
android:id="#+id/dsharp_btn_fretboard"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="0"
android:layout_columnWeight="1"
android:layout_row="1"
android:text="D#/Eb"
android:textAllCaps="false" />
<Button
android:id="#+id/e_btn_fretboard"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="1"
android:layout_columnWeight="1"
android:layout_row="1"
android:text="E" />
<Button
android:id="#+id/f_btn_fretboard"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="2"
android:layout_columnWeight="1"
android:layout_row="1"
android:text="F" />
<Button
android:id="#+id/fsharp_btn_fretboard"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="0"
android:layout_columnWeight="1"
android:layout_row="2"
android:text="F#/Gb"
android:textAllCaps="false" />
<Button
android:id="#+id/g_btn_fretboard"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="1"
android:layout_columnWeight="1"
android:layout_row="2"
android:text="G" />
<Button
android:id="#+id/gsharp_btn_fretboard"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="2"
android:layout_columnWeight="1"
android:layout_row="2"
android:text="G#/Ab"
android:textAllCaps="false" />
<Button
android:id="#+id/a_btn_fretboard"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="0"
android:layout_columnWeight="1"
android:layout_row="3"
android:text="A"
android:textAllCaps="false" />
<Button
android:id="#+id/asharp_btn_fretboard"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="1"
android:layout_columnWeight="1"
android:layout_row="3"
android:text="A#/Bb"
android:textAllCaps="false"/>
<Button
android:id="#+id/b_btn_fretboard"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="2"
android:layout_columnWeight="1"
android:layout_row="3"
android:text="B" />
</GridLayout>
</LinearLayout>
</ScrollView>
</android.support.constraint.ConstraintLayout>
</RelativeLayout>

Try to simplify your layout first. There are not required containers like main RelativeLayout and LinearLayout inside ScrollView. Simplifying that things will improve performance, readability and can reduce a possibility to make a mistake.

Android Studio gridlayout. Preview and emulator show different outcomes

I am trying to create a simple grid layout buttons of 2 columns and 4 rows. I want those button to fill their space like it shows in the preview. But the emulator shows different output.
The Preview shows exactly 8 filled buttons saying hello but emulator output shows the buttons on the left size of each box.
Preview
Emulator Results
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<GridLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:columnOrderPreserved="false"
android:alignmentMode="alignMargins"
android:columnCount="2"
android:rowCount="4">
<android.support.v7.widget.CardView
android:layout_columnWeight="1"
android:layout_rowWeight="1"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="fill"
android:orientation="horizontal"
>
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="fill"
android:text="hello"
/>
</LinearLayout>
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:layout_columnWeight="1"
android:layout_rowWeight="1"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="fill"
android:orientation="horizontal"
>
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="fill"
android:text="hello"
/>
</LinearLayout>
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:layout_columnWeight="1"
android:layout_rowWeight="1"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="fill"
android:orientation="horizontal"
>
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="fill"
android:text="hello"
/>
</LinearLayout>
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:layout_columnWeight="1"
android:layout_rowWeight="1"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="fill"
android:orientation="horizontal"
>
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="fill"
android:text="hello"
/>
</LinearLayout>
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:layout_columnWeight="1"
android:layout_rowWeight="1"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="fill"
android:orientation="horizontal"
>
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="fill"
android:text="hello"
/>
</LinearLayout>
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:layout_columnWeight="1"
android:layout_rowWeight="1"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="fill"
android:orientation="horizontal"
>
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="fill"
android:text="hello"
/>
</LinearLayout>
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:layout_columnWeight="1"
android:layout_rowWeight="1"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="fill"
android:orientation="horizontal"
>
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="fill"
android:text="hello"
/>
</LinearLayout>
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:layout_columnWeight="1"
android:layout_rowWeight="1"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="fill"
android:orientation="horizontal"
>
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="fill"
android:text="hello"
/>
</LinearLayout>
</android.support.v7.widget.CardView>
</GridLayout>

I couldn't figure the issue in that case but i just used the regular grid layout with column and row indication for each button. That did the trick.
Notice that I have layout_column and layout_row to specify where they should stand.
[Solution][1]: https://i.stack.imgur.com/K5MAx.png
<?xml version="1.0" encoding="utf-8" ?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<GridLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:columnOrderPreserved="false">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="0"
android:layout_row="0"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:layout_gravity="fill"
android:text="hello"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="1"
android:layout_row="0"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:layout_gravity="fill"
android:text="hello"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="0"
android:layout_row="1"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:layout_gravity="fill"
android:text="hello"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="1"
android:layout_row="1"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:layout_gravity="fill"
android:text="hello"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="0"
android:layout_row="2"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:layout_gravity="fill"
android:text="hello"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="1"
android:layout_row="2"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:layout_gravity="fill"
android:text="hello"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="0"
android:layout_row="3"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:layout_gravity="fill"
android:text="hello"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="1"
android:layout_row="3"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:layout_gravity="fill"
android:text="hello"
/>

GridLayout columns do not appear right

I tried to configure a grid layout with 2 rows and 2 columns. But each element here occupies the entire width of the screen, while the second column is outside the screen. Please suggest what am I doing wrong here.
<?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:background="#color/colorTheme"
android:orientation="vertical">
<GridLayout
android:id="#+id/moodsGridLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/textView2"
android:columnCount="2"
android:orientation="vertical"
android:rowCount="2">
<ImageButton
android:id="#+id/imageButton"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_column="0"
android:layout_row="0"
app:srcCompat="#mipmap/brewtv_logos" />
<ImageButton
android:id="#+id/imageButton2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_column="1"
android:layout_row="0"
app:srcCompat="#mipmap/brewtv_logos" />
<ImageButton
android:id="#+id/imageButton3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_column="0"
android:layout_row="1"
app:srcCompat="#mipmap/brewtv_logos" />
<ImageButton
android:id="#+id/imageButton4"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_column="1"
android:layout_row="1"
app:srcCompat="#mipmap/brewtv_logos" />
</GridLayout>
</LinearLayout>

Try this:
for Uniform width column and row in Gridlayout use:
android:layout_columnWeight="1"
android:layout_rowWeight="1"
use this layout:
<?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:background="#color/color_white"
android:orientation="vertical">
<GridLayout
android:id="#+id/moodsGridLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/textView2"
android:columnCount="2"
android:orientation="vertical"
android:rowCount="2">
<ImageButton
android:id="#+id/imageButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="0"
android:layout_columnWeight="1"
android:layout_row="0"
android:layout_rowWeight="1"
android:src="#mipmap/ic_launcher" />
<ImageButton
android:id="#+id/imageButton2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="1"
android:layout_columnWeight="1"
android:layout_row="0"
android:layout_rowWeight="1"
android:src="#mipmap/ic_launcher" />
<ImageButton
android:id="#+id/imageButton3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="0"
android:layout_columnWeight="1"
android:layout_row="1"
android:layout_rowWeight="1"
android:src="#mipmap/ic_launcher" />
<ImageButton
android:id="#+id/imageButton4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="1"
android:layout_columnWeight="1"
android:layout_row="1"
android:layout_rowWeight="1"
android:src="#mipmap/ic_launcher" />
</GridLayout>
</LinearLayout>
Output:

Unable to fix 4 buttons in Grid Layout

I tried to add 4 buttons in Grid Layout. Equally Spaced, I used colum and row Weight, but still I am not able to align all equally spaced, I am getting the output like this. Mentioned below in the image.
<RelativeLayout 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"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context="com.rahulcomp24.gridlayoutdemo.MainActivity">
<GridLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="0"
android:layout_row="0"
android:layout_gravity="fill"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:text="New Button"
android:id="#+id/button" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="1"
android:layout_row="0"
android:layout_gravity="fill"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:text="New Button"
android:id="#+id/button2" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="0"
android:layout_row="1"
android:layout_gravity="fill"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:text="New Button"
android:id="#+id/button3" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="1"
android:layout_row="1"
android:layout_gravity="fill"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:text="New Button"
android:id="#+id/button4" />
</GridLayout>
I am using MinSdk version 19.

Copy the below xml as it is and run it you would see same equally space button.
Note: You have to run it on your device to see them filling all screen space equally
<RelativeLayout 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"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin">
<GridLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="0"
android:layout_columnWeight="1"
android:layout_gravity="fill"
android:layout_row="0"
android:layout_rowWeight="1"
android:text="New Button" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="1"
android:layout_columnWeight="1"
android:layout_gravity="fill"
android:layout_row="0"
android:layout_rowWeight="1"
android:text="New Button" />
<Button
android:id="#+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="0"
android:layout_columnWeight="1"
android:layout_gravity="fill"
android:layout_row="1"
android:layout_rowWeight="1"
android:text="New Button" />
<Button
android:id="#+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="1"
android:layout_columnWeight="1"
android:layout_gravity="fill"
android:layout_row="1"
android:layout_rowWeight="1"
android:text="New Button" />
</GridLayout>
</RelativeLayout>

You can use two LinearLayouts instead, one for each row, and also replace the parent RelativeLayout with another LinearLayout.
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:weightSum="2">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:weightSum="2"
android:orientation="horizontal">
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"/>
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:weightSum="2"
android:orientation="horizontal">
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"/>
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"/>
</LinearLayout>
</LinearLayout>

You are facing this error because of your property
( android:layout_gravity = "fill" )
actually this is used to fill the container
check out this link
http://developer.android.com/reference/android/widget/LinearLayout.LayoutParams.html

Your code snippet working fine.You might be facing issues due to some other layout parameters changes in your project.
I will recommend try to create new project and check your layout again

GridLayout doesn't fill the screen

I'm trying to use Gridlayout. I want my grid's buttons to fill the screen but I have a problem doing that. I notice that the layout itself fill the screen but his children are not filling the layout. This is the output:
http://i.imgur.com/TWNuTaj.png
I searched a lot on the internet but most of the answers are offering to replace the GridLayout to LinearLayout or RelativeLayout But I have to stay with GridLayout.
Also I dont want to give the buttons specific size but rather stay with the structure in the linked picture.
Here is my code:
<GridLayout 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"
android:layout_margin="0.5dp"
android:columnCount="4"
android:orientation="horizontal"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:rowCount="5"
tools:context=".Level1" >
<Button
android:layout_width="0dp"
android:layout_column="0"
android:layout_row="0"
android:text="0" />
<Button
android:id="#+id/b_1"
android:layout_column="1"
android:layout_gravity="fill_horizontal"
android:layout_row="0"
android:text="1" />
<Button
android:id="#+id/b_2"
android:layout_column="2"
android:layout_gravity="fill"
android:layout_row="0"
android:layout_rowSpan="3"
android:text="2" />
<Button
android:id="#+id/b_3"
android:layout_column="3"
android:layout_row="0"
android:text="3" />
<Button
android:layout_width="0dp"
android:layout_column="0"
android:layout_row="1"
android:text="0" />
<Button
android:id="#+id/b_4"
android:layout_column="1"
android:layout_gravity="fill_vertical"
android:layout_row="1"
android:layout_rowSpan="3"
android:text="4" />
<Button
android:id="#+id/b_6"
android:layout_column="3"
android:layout_gravity="fill_vertical"
android:layout_row="1"
android:layout_rowSpan="3"
android:text="6" />
<Button
android:layout_width="0dp"
android:layout_column="0"
android:layout_row="2"
android:text="0" />
<Button
android:id="#+id/b_5"
android:layout_column="2"
android:layout_row="3"
android:text="5" />
<Button
android:layout_width="0dp"
android:layout_column="0"
android:layout_row="3"
android:text="0" />
<Button
android:layout_height="0dp"
android:layout_column="0"
android:layout_columnSpan="4"
android:layout_row="4"
android:text="0" />
</GridLayout>

Try this way,hope this will help you to solve your problem.
GridLayout : "GridLayout does not provide support for the principle of weight, as defined in weight. In general, it is not therefore possible to configure a GridLayout to distribute excess space in non-trivial proportions between multiple rows or columns ... For complete control over excess space distribution in a row or column; use a LinearLayout subview to hold the components in the associated cell group."
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical">
<Button
android:layout_width="match_parent"
android:layout_weight="0.20"
android:layout_height="0dp"
android:text="1" />
<Button
android:layout_width="match_parent"
android:layout_weight="0.80"
android:layout_height="0dp"
android:text="4" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical">
<Button
android:layout_width="match_parent"
android:layout_weight="0.80"
android:layout_height="0dp"
android:text="2" />
<Button
android:layout_width="match_parent"
android:layout_weight="0.20"
android:layout_height="0dp"
android:text="5" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical">
<Button
android:layout_width="match_parent"
android:layout_weight="0.20"
android:layout_height="0dp"
android:text="3" />
<Button
android:layout_width="match_parent"
android:layout_weight="0.80"
android:layout_height="0dp"
android:text="6" />
</LinearLayout>
</LinearLayout>

Based on previous answer by #Haresh Chhelana, it worked like so just sharing my solution:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/bg_1">
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical">
<!-- position 1 -->
<ImageView
android:layout_width="match_parent"
android:layout_weight="0.50"
android:layout_height="0dp"
android:src="#drawable/bt_elsa" />
<!-- position 3 -->
<ImageView
android:layout_width="match_parent"
android:layout_weight="0.50"
android:layout_height="0dp"
android:src="#drawable/bt_daniel" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical">
<!-- position 2 -->
<ImageView
android:layout_width="match_parent"
android:layout_weight="0.50"
android:layout_height="0dp"
android:src="#drawable/bt_anna" />
<!-- position 4 -->
<ImageView
android:layout_width="match_parent"
android:layout_weight="0.50"
android:layout_height="0dp"
android:src="#drawable/bt_elmo" />
</LinearLayout>
</LinearLayout>
sample
source: https://github.com/eduardocerqueira/sing

Develop Reference

The Android operating system is a mobile operating system that was developed by Google (GOOGL?) to be primarily used for touchscreen devices, cell phones, and tablets.

Fill whole screen with four buttons by two rows in Android - android

Related

Strange layout bug

Android Studio gridlayout. Preview and emulator show different outcomes

GridLayout columns do not appear right

Unable to fix 4 buttons in Grid Layout

GridLayout doesn't fill the screen

Categories

Resources