Issues trying to create GridLayout with elements of different size - android

I'm trying to create a static grid-like layout in Android so I'm using GridLayout instead of GridView.
This is the layout I'm trying to achieve
Using the code from here as a base. I'm also a little confused about specifying layout_{weight, margin} on every element inside the grid, since it's my understanding that the rowSpan and colSpan parameters should take care of that. Is this not incorrect?
Any pointers?
<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/GridLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:columnCount="2"
android:rowCount="2"
tools:context=".MainActivity" >
<android.support.v7.widget.CardView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:id="#+id/card_view"
android:layout_column="0"
android:layout_gravity="fill"
android:layout_row="0"
android:layout_columnSpan="1">
<Button
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:id="#+id/button3"
android:text="Button" />
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:id="#+id/card_view1"
android:layout_column="0"
android:layout_gravity="fill"
android:layout_row="1"
android:layout_columnSpan="1">
<Button
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:id="#+id/button1"
android:text="Button" />
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:id="#+id/card_view3"
android:layout_column="1"
android:layout_gravity="fill"
android:layout_row="1">
<Button
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:id="#+id/button2"
android:text="Button" />
</android.support.v7.widget.CardView>
</GridLayout>


You were so close, try this instead:
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/GridLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:columnCount="2"
android:rowCount="2"
tools:context=".MainActivity" >
<android.support.v7.widget.CardView
android:id="#+id/card_view"
android:layout_column="0"
android:layout_gravity="fill_horizontal"
android:layout_row="0"
android:layout_columnSpan="2">
<Button
android:layout_height="match_parent"
android:layout_width="match_parent"
android:id="#+id/button3"
android:text="Button" />
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:id="#+id/card_view1"
android:layout_column="0"
android:layout_row="1"
android:layout_columnSpan="1"
android:layout_columnWeight="1">
<Button
android:layout_height="match_parent"
android:layout_width="match_parent"
android:id="#+id/button1"
android:text="Button" />
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:id="#+id/card_view3"
android:layout_column="1"
android:layout_row="1"
android:layout_columnWeight="1">
<Button
android:layout_height="match_parent"
android:layout_width="match_parent"
android:id="#+id/button2"
android:text="Button" />
</android.support.v7.widget.CardView>
</GridLayout>
You need to use layout_gravity="fill_horizontal" for the first item, to stretch the whole row. And play with layout_columnWeight for the 2nd and 3rd item.

Related

(Android) Make a layout scroll-able?

I have a layout like this
<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:padding="16dp"
android:isScrollContainer="true">
<Button
android:layout_width="180dp"
android:layout_height="300dp"
android:text="Button1"
android:layout_gravity="left"
android:layout_row="0"
android:layout_column="0"></Button>
<Button
android:layout_width="180dp"
android:layout_height="300dp"
android:text="Button2"
android:layout_gravity="right"
android:layout_row="0"
android:layout_column="1"></Button>
<Button
android:layout_width="180dp"
android:layout_height="300dp"
android:text="Button3"
android:layout_gravity="left"
android:layout_row="1"
android:layout_column="0"></Button>
<Button
android:layout_width="180dp"
android:layout_height="300dp"
android:text="Button4"
android:layout_gravity="right"
android:layout_row="1"
android:layout_column="1"></Button>
<Button
android:layout_width="180dp"
android:layout_height="300dp"
android:text="Button5"
android:layout_gravity="left"
android:layout_row="2"
android:layout_column="0"></Button>
<Button
android:layout_width="180dp"
android:layout_height="300dp"
android:text="Button6"
android:layout_gravity="right"
android:layout_row="2"
android:layout_column="1"></Button>
</GridLayout>
Normally I will fit everything into a Relative or Constraint layout. But this time I intentionally made it big so that Button5 and Button6 can't be seen. And what I want is to make the layout scrollable so that the user can scroll up to see the Button5 and Button6?
How can I do it? What layout is to be used? Is there a way to make other layouts scrollale?

You have to do this if you want to scroll your view
<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:isScrollContainer="true"
android:padding="16dp">
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">
<GridLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<Button
android:layout_width="180dp"
android:layout_height="300dp"
android:layout_row="0"
android:layout_column="0"
android:layout_gravity="left"
android:text="Button1"></Button>
<Button
android:layout_width="180dp"
android:layout_height="300dp"
android:layout_row="0"
android:layout_column="1"
android:layout_gravity="right"
android:text="Button2"></Button>
<Button
android:layout_width="180dp"
android:layout_height="300dp"
android:layout_row="1"
android:layout_column="0"
android:layout_gravity="left"
android:text="Button3"></Button>
<Button
android:layout_width="180dp"
android:layout_height="300dp"
android:layout_row="1"
android:layout_column="1"
android:layout_gravity="right"
android:text="Button4"></Button>
<Button
android:layout_width="180dp"
android:layout_height="300dp"
android:layout_row="2"
android:layout_column="0"
android:layout_gravity="left"
android:text="Button5"></Button>
<Button
android:layout_width="180dp"
android:layout_height="300dp"
android:layout_row="2"
android:layout_column="1"
android:layout_gravity="right"
android:text="Button6"></Button>
</GridLayout>
</ScrollView>
</GridLayout>

Not showing components following format LinearLayout inside GridLayout contains CardView in LinearLayout

I am implementing card view through GridLayout in android but my card view is not showing up. I want to display main layout is Liner Layout inside Grid Layout its contain Card View . I have tried all things but the card view is not showing up.
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<ScrollView 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:background="#drawable/bgapps"
tools:context=".MainActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<GridLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:alignmentMode="alignMargins"
android:columnCount="2"
android:columnOrderPreserved="false"
android:rowCount="3">
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_rowWeight="1"
android:layout_columnWeight="1"
android:layout_margin="12dp"
app:cardCornerRadius="12dp"
app:cardElevation="6dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical"
android:padding="16dp">
<ImageView
android:layout_width="80dp"
android:layout_height="80dp"
android:src="#drawable/bookmark" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="12dp"
android:text="Calendar"
android:textColor="#6f6f6f"
android:textSize="14dp" />
</LinearLayout>
</androidx.cardview.widget.CardView>
</GridLayout>
</LinearLayout>
</ScrollView>
รท hope any one fix this problem.

Make the height of the ScrollView as wrap_content as its height is determined at runtime. and also the same for its nested LinearLayout
To make the ImageView & TextView visible use android:gravity="center_vertical" for their surrounding LinearLayout
so change your layout to be:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView 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="wrap_content"
android:background="#drawable/bgapps"
tools:context=".MainActivity">
<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:alignmentMode="alignMargins"
android:columnCount="2"
android:columnOrderPreserved="false"
android:rowCount="3">
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_rowWeight="1"
android:layout_columnWeight="1"
android:layout_margin="12dp"
app:cardCornerRadius="12dp"
app:cardElevation="6dp">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="center_vertical"
android:orientation="vertical"
android:padding="16dp">
<ImageView
android:layout_width="80dp"
android:layout_height="80dp"
android:src="#drawable/bookmark" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="12dp"
android:text="Calendar"
android:textColor="#6f6f6f"
android:textSize="14dp" />
</LinearLayout>
</androidx.cardview.widget.CardView>
</GridLayout>
</LinearLayout>
</ScrollView>
Edit:
Anyone explain why its not showing my GridLayout width as match_parent
I want this :
Solution:
Changes:
Making Gridlayout width to match_parent
Adding android:layout_gravity="center" to the Gridlayout
Making the width & height of all CardViews and underlying
LinearLayouts to "wrap_content" >>>>>> This is the real cause to
the problem.
Making android:gravity="center" to the CardViews underlying
LinearLayout for symmetric purpose >> you can leave it as center_vertical if you wish.
<?xml version="1.0" encoding="utf-8"?>
<ScrollView 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="wrap_content"
android:background="#drawable/bgapps"
tools:context=".MainActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="15dp">
<GridLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:alignmentMode="alignMargins"
android:columnCount="2"
android:columnOrderPreserved="false"
android:padding="50dp"
android:rowCount="2">
<!-- First Row , First Column -->
<androidx.cardview.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_rowWeight="1"
android:layout_columnWeight="1"
android:layout_margin="12dp"
app:cardCornerRadius="12dp"
app:cardElevation="6dp">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center"
android:orientation="vertical"
android:padding="16dp">
<ImageView
android:layout_width="80dp"
android:layout_height="80dp"
android:src="#drawable/bookmark" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="12dp"
android:text="Calendar"
android:textColor="#6f6f6f"
android:textSize="14dp" />
</LinearLayout>
</androidx.cardview.widget.CardView>
<!-- First Row , Second Column-->
<androidx.cardview.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_rowWeight="1"
android:layout_columnWeight="1"
android:layout_margin="12dp"
app:cardCornerRadius="12dp"
app:cardElevation="6dp">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center"
android:orientation="vertical"
android:padding="16dp">
<ImageView
android:layout_width="80dp"
android:layout_height="80dp"
android:src="#drawable/bookmark" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="12dp"
android:text="Calendar"
android:textColor="#6f6f6f"
android:textSize="14dp" />
</LinearLayout>
</androidx.cardview.widget.CardView>
<!-- Second Row , First Column-->
<androidx.cardview.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_rowWeight="1"
android:layout_columnWeight="1"
android:layout_margin="12dp"
app:cardCornerRadius="12dp"
app:cardElevation="6dp">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center"
android:orientation="vertical"
android:padding="16dp">
<ImageView
android:layout_width="80dp"
android:layout_height="80dp"
android:src="#drawable/bookmark" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="12dp"
android:text="Calendar"
android:textColor="#6f6f6f"
android:textSize="14dp" />
</LinearLayout>
</androidx.cardview.widget.CardView>
<!-- Second Row , Second Column-->
<androidx.cardview.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_rowWeight="1"
android:layout_columnWeight="1"
android:layout_margin="12dp"
app:cardCornerRadius="12dp"
app:cardElevation="6dp">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center"
android:orientation="vertical"
android:padding="16dp">
<ImageView
android:layout_width="80dp"
android:layout_height="80dp"
android:src="#drawable/bookmark" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="12dp"
android:text="Calendar"
android:textColor="#6f6f6f"
android:textSize="14dp" />
</LinearLayout>
</androidx.cardview.widget.CardView>
</GridLayout>
</LinearLayout>
</ScrollView>

you can ConstrainLayout
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent"
android:layout_height="match_parent">
</androidx.constraintlayout.widget.ConstraintLayout>

Thanks #Zain your answer is work well , but i have a one more mistake in GridLayout when i try to make GridLayout width as match_parent its not showing anything so i change as Layout_Width ,
<?xml version="1.0" encoding="utf-8"?>
<ScrollView 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="wrap_content"
android:background="#drawable/bgapps"
tools:context=".MainActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="15dp">
<GridLayout
android:layout_width="wrap_content" // here i want to match_parent
android:layout_height="wrap_content"
android:alignmentMode="alignMargins"
android:columnCount="2"
android:columnOrderPreserved="false"
android:padding="50dp"
android:rowCount="2">
<!-- First Row , First Column -->
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_rowWeight="1"
android:layout_columnWeight="1"
android:layout_margin="12dp"
app:cardCornerRadius="12dp"
app:cardElevation="6dp">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="center_vertical"
android:orientation="vertical"
android:padding="16dp">
<ImageView
android:layout_width="80dp"
android:layout_height="80dp"
android:src="#drawable/bookmark" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="12dp"
android:text="Calendar"
android:textColor="#6f6f6f"
android:textSize="14dp" />
</LinearLayout>
</androidx.cardview.widget.CardView>
<!-- First Row , Second Column-->
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_rowWeight="1"
android:layout_columnWeight="1"
android:layout_margin="12dp"
app:cardCornerRadius="12dp"
app:cardElevation="6dp">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="center_vertical"
android:orientation="vertical"
android:padding="16dp">
<ImageView
android:layout_width="80dp"
android:layout_height="80dp"
android:src="#drawable/bookmark" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="12dp"
android:text="Calendar"
android:textColor="#6f6f6f"
android:textSize="14dp" />
</LinearLayout>
</androidx.cardview.widget.CardView>
<!-- Second Row , First Column-->
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_rowWeight="1"
android:layout_columnWeight="1"
android:layout_margin="12dp"
app:cardCornerRadius="12dp"
app:cardElevation="6dp">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="center_vertical"
android:orientation="vertical"
android:padding="16dp">
<ImageView
android:layout_width="80dp"
android:layout_height="80dp"
android:src="#drawable/bookmark" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="12dp"
android:text="Calendar"
android:textColor="#6f6f6f"
android:textSize="14dp" />
</LinearLayout>
</androidx.cardview.widget.CardView>
<!-- Second Row , Second Column-->
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_rowWeight="1"
android:layout_columnWeight="1"
android:layout_margin="12dp"
app:cardCornerRadius="12dp"
app:cardElevation="6dp">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="center_vertical"
android:orientation="vertical"
android:padding="16dp">
<ImageView
android:layout_width="80dp"
android:layout_height="80dp"
android:src="#drawable/bookmark" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="12dp"
android:text="Calendar"
android:textColor="#6f6f6f"
android:textSize="14dp" />
</LinearLayout>
</androidx.cardview.widget.CardView>
</GridLayout>
</LinearLayout>
</ScrollView>
Anyone explain why its not showing my GridLayout width as match_parent
I want this :

Cannot display two buttons with one button as twice the width of other in GridLayout

I need to use GridLayout to display two buttons. One and second one with twice the width of other button. I want the NEXT button be twice the width of BACK button and I need a GridLayout.
My source code is as below:
<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
style="#style/Calculator.Grid"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:columnCount="3"
app:rowCount="1">
<Button
android:id="#+id/button_back"
android:layout_column="0"
android:layout_columnSpan="1"
android:layout_columnWeight="1"
android:layout_gravity="left|top"
android:background="#drawable/bg_back_button"
android:text="#string/back"
android:textColor="?attr/colorTextSecondary"
android:textSize="16sp" />
<Button
android:id="#+id/button_next"
android:layout_column="1"
android:layout_columnSpan="2"
android:layout_columnWeight="2"
android:layout_gravity="fill"
android:background="#drawable/bg_next_button"
android:text="#string/next"
android:textColor="?attr/colorTextPrimary"
android:textSize="16sp" />
</GridLayout>
Desired display (NEXT Button should be double the width of BACK button) :
But the result is (Problem) :

If you don't have any problem with Linear Layout as inner container then use this
<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
style="#style/Calculator.Grid"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:columnCount="3"
app:rowCount="1">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="3">
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/button_back"
android:layout_column="0"
android:layout_columnSpan="1"
android:layout_columnWeight="1"
android:layout_gravity="left|top"
android:background="#drawable/bg_back_button"
android:text="#string/back"
android:textColor="?attr/colorTextSecondary"
android:textSize="16sp"
android:layout_weight="2"/>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/button_next"
android:layout_column="1"
android:layout_columnSpan="2"
android:layout_columnWeight="2"
android:layout_gravity="fill"
android:background="#drawable/bg_next_button"
android:text="#string/next"
android:textColor="?attr/colorTextPrimary"
android:textSize="16sp"
android:layout_weight="1"/>
</LinearLayout>
</GridLayout>

This is work my bro try this
<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:columnCount="3"
android:rowCount="3">
<Button
android:id="#+id/textViewNW"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_columnSpan="1"
android:layout_columnWeight="1"
android:layout_gravity="center|fill"
android:layout_rowSpan="1"
android:layout_rowWeight="1"
android:background="#fe4141"
android:text="#string/app_name"
android:textAppearance="?android:attr/textAppearanceLarge" />
<Button
android:id="#+id/textViewNE"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_columnSpan="2"
android:layout_columnWeight="2"
android:layout_gravity="center|fill"
android:layout_rowSpan="2"
android:layout_rowWeight="2"
android:background="#51f328"
android:text="#string/app_name"
android:textAppearance="?android:attr/textAppearanceLarge" />
</GridLayout>

<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
style="#style/Calculator.Grid"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:columnCount="3"
app:rowCount="1">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="3">
<Button
android:id="#+id/button_back"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_column="0"
android:layout_columnSpan="1"
android:layout_columnWeight="1"
android:layout_gravity="left|top"
android:layout_weight="2"
android:background="#drawable/bg_back_button"
android:text="#string/back"
android:textColor="?attr/colorTextSecondary"
android:textSize="16sp" />
<Button
android:id="#+id/button_next"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_column="1"
android:layout_columnSpan="2"
android:layout_columnWeight="2"
android:layout_gravity="fill"
android:layout_weight="1"
android:background="#drawable/bg_next_button"
android:text="#string/next"
android:textColor="?attr/colorTextPrimary"
android:textSize="16sp" />
</LinearLayout>
</GridLayout>

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

GridView equal space distribution

I am trying to use GridView to show 4 pieces of content. In the code bellow this content is only an ImageView, but a textView will later be added.
I created a 2x2 GridView, and I expected the screen space to be divided equally by all 4 grid cells, but that is not happening. If set to fill_parent the cell takes the whole screen (like image bellow), if set to wrap_content the cells get pilled up near one of the corners. How can I get the cell to distribute equally using only the XML layout file?
<?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:rowCount="2"
android:orientation="horizontal"
android:columnCount="2">
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_rowSpan="1"
android:layout_columnSpan="1"
android:layout_column="0"
android:layout_row="0">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/imageView2"
android:src="#drawable/placeholder" />
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_columnSpan="1"
android:layout_rowSpan="1"
android:layout_column="1"
android:layout_row="0">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/imageView"
android:src="#drawable/placeholder" />
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_rowSpan="1"
android:layout_columnSpan="1"
android:layout_column="1"
android:layout_row="1">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/imageView3"
android:src="#drawable/placeholder" />
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_rowSpan="1"
android:layout_columnSpan="1"
android:layout_column="0"
android:layout_row="1">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/imageView4"
android:src="#drawable/placeholder" />
</LinearLayout>
</GridLayout>
</LinearLayout>

This should work:
<?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:rowCount="2"
android:orientation="horizontal"
android:columnCount="2">
<LinearLayout
android:orientation="horizontal"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:layout_gravity="fill">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/imageView2"
android:src="#drawable/placeholder" />
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_rowWeight="1"
android:layout_columnWeight="1"
android:layout_gravity="fill">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/imageView"
android:src="#drawable/placeholder" />
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:layout_gravity="fill">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/imageView3"
android:src="#drawable/placeholder" />
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_rowWeight="1"
android:layout_columnWeight="1"
android:layout_gravity="fill">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/imageView4"
android:src="#drawable/placeholder" />
</LinearLayout>
</GridLayout>
</LinearLayout>
I've removed layout_height, layout_width, layout_rowSpan and layout_columnSpan and used the weight with layout_gravity="fill" instead.

Categories

Resources