Android Studio gridlayout. Preview and emulator show different outcomes - android

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"
/>

Related

Android xml design slowing down my application

I have a layout design in my app.
It works smooth on emulator but when I open the App on a real device and scroll it, it scrolls rough I mean not smooth, too slow.
(I used android:largeHeap="true" otherwise it didn't work on my device but only on emulator.)
Can you help me to make it move smoothly?
Picture of xml design
<?xml version="1.0" encoding="utf-8"?>
<ScrollView android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:android="http://schemas.android.com/apk/res/android">
<GridLayout
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
xmlns:app="http://schemas.android.com/apk/res-auto"
tools:context=".FirstFragment"
android:columnOrderPreserved="false"
android:alignmentMode="alignMargins"
android:rowCount="6"
android:columnCount="2">
<androidx.cardview.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
app:cardElevation="6dp"
app:cardCornerRadius="12dp"
android:layout_margin="12dp"
>
<LinearLayout
android:id="#+id/animal_layout"
android:orientation="vertical"
android:gravity="center"
android:padding="16dp"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:src="#drawable/elephant"
android:layout_width="80dp"
android:layout_height="80dp"/>
<TextView
android:layout_marginTop="12dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Animals"
android:textSize="18sp"
android:textColor="#6f6f6f"/>
</LinearLayout>
</androidx.cardview.widget.CardView>
<androidx.cardview.widget.CardView
android:layout_width="130dp"
android:layout_height="wrap_content"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
app:cardElevation="6dp"
app:cardCornerRadius="12dp"
android:layout_margin="12dp"
>
<LinearLayout
android:id="#+id/art_layout"
android:orientation="vertical"
android:gravity="center"
android:padding="16dp"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:src="#drawable/art"
android:layout_width="80dp"
android:layout_height="80dp"/>
<TextView
android:layout_marginTop="12dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Art"
android:textSize="18sp"
android:textColor="#6f6f6f"/>
</LinearLayout>
</androidx.cardview.widget.CardView>
<androidx.cardview.widget.CardView
android:layout_width="130dp"
android:layout_height="wrap_content"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
app:cardElevation="6dp"
app:cardCornerRadius="12dp"
android:layout_margin="12dp"
>
<LinearLayout
android:id="#+id/biography_layout"
android:orientation="vertical"
android:gravity="center"
android:padding="16dp"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:src="#drawable/biography"
android:layout_width="80dp"
android:layout_height="80dp"/>
<TextView
android:layout_marginTop="12dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Biography"
android:textSize="18sp"
android:textColor="#6f6f6f"/>
</LinearLayout>
</androidx.cardview.widget.CardView>
<androidx.cardview.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
app:cardElevation="6dp"
app:cardCornerRadius="12dp"
android:layout_margin="12dp"
>
<LinearLayout
android:id="#+id/countries_layout"
android:orientation="vertical"
android:gravity="center"
android:padding="16dp"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:src="#drawable/countries"
android:layout_width="80dp"
android:layout_height="80dp"/>
<TextView
android:layout_marginTop="12dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Countries"
android:textSize="18sp"
android:textColor="#6f6f6f"/>
</LinearLayout>
</androidx.cardview.widget.CardView>
<androidx.cardview.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
app:cardElevation="6dp"
app:cardCornerRadius="12dp"
android:layout_margin="12dp"
>
<LinearLayout
android:id="#+id/culture_layout"
android:orientation="vertical"
android:gravity="center"
android:padding="16dp"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:src="#drawable/culture"
android:layout_width="80dp"
android:layout_height="80dp"/>
<TextView
android:layout_marginTop="12dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Culture"
android:textSize="18sp"
android:textColor="#6f6f6f"/>
</LinearLayout>
</androidx.cardview.widget.CardView>
<androidx.cardview.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
app:cardElevation="6dp"
app:cardCornerRadius="12dp"
android:layout_margin="12dp"
>
<LinearLayout
android:id="#+id/environment_layout"
android:orientation="vertical"
android:gravity="center"
android:padding="16dp"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:src="#drawable/environment"
android:layout_width="80dp"
android:layout_height="80dp"/>
<TextView
android:layout_marginTop="12dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Environment"
android:textSize="18sp"
android:textColor="#6f6f6f"/>
</LinearLayout>
</androidx.cardview.widget.CardView>
<androidx.cardview.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
app:cardElevation="6dp"
app:cardCornerRadius="12dp"
android:layout_margin="12dp"
>
<LinearLayout
android:id="#+id/health_layout"
android:orientation="vertical"
android:gravity="center"
android:padding="16dp"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:src="#drawable/health"
android:layout_width="80dp"
android:layout_height="80dp"/>
<TextView
android:layout_marginTop="12dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Health"
android:textSize="18sp"
android:textColor="#6f6f6f"/>
</LinearLayout>
</androidx.cardview.widget.CardView>
<androidx.cardview.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
app:cardElevation="6dp"
app:cardCornerRadius="12dp"
android:layout_margin="12dp"
>
<LinearLayout
android:id="#+id/holidays_layout"
android:orientation="vertical"
android:gravity="center"
android:padding="16dp"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:src="#drawable/holidays"
android:layout_width="80dp"
android:layout_height="80dp"/>
<TextView
android:layout_marginTop="12dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Holidays"
android:textSize="18sp"
android:textColor="#6f6f6f"/>
</LinearLayout>
</androidx.cardview.widget.CardView>
<androidx.cardview.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
app:cardElevation="6dp"
app:cardCornerRadius="12dp"
android:layout_margin="12dp"
>
<LinearLayout
android:id="#+id/literature_layout"
android:orientation="vertical"
android:gravity="center"
android:padding="16dp"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:src="#drawable/literature"
android:layout_width="80dp"
android:layout_height="80dp"/>
<TextView
android:layout_marginTop="12dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Literature"
android:textSize="18sp"
android:textColor="#6f6f6f"/>
</LinearLayout>
</androidx.cardview.widget.CardView>
<androidx.cardview.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
app:cardElevation="6dp"
app:cardCornerRadius="12dp"
android:layout_margin="12dp"
>
<LinearLayout
android:id="#+id/politics_layout"
android:orientation="vertical"
android:gravity="center"
android:padding="16dp"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:src="#drawable/politics"
android:layout_width="80dp"
android:layout_height="80dp"/>
<TextView
android:layout_marginTop="12dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Politics"
android:textSize="18sp"
android:textColor="#6f6f6f"/>
</LinearLayout>
</androidx.cardview.widget.CardView>
<androidx.cardview.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
app:cardElevation="6dp"
app:cardCornerRadius="12dp"
android:layout_margin="12dp"
>
<LinearLayout
android:id="#+id/science_layout"
android:orientation="vertical"
android:gravity="center"
android:padding="16dp"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:src="#drawable/science"
android:layout_width="80dp"
android:layout_height="80dp"/>
<TextView
android:layout_marginTop="12dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Science"
android:textSize="18sp"
android:textColor="#6f6f6f"/>
</LinearLayout>
</androidx.cardview.widget.CardView>
<androidx.cardview.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
app:cardElevation="6dp"
app:cardCornerRadius="12dp"
android:layout_margin="12dp"
>
<LinearLayout
android:id="#+id/sports_layout"
android:orientation="vertical"
android:gravity="center"
android:padding="16dp"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:src="#drawable/sport"
android:layout_width="80dp"
android:layout_height="80dp"/>
<TextView
android:layout_marginTop="12dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Sports"
android:textSize="18sp"
android:textColor="#6f6f6f"/>
</LinearLayout>
</androidx.cardview.widget.CardView>
</GridLayout>
</ScrollView>

I solved the problem by decreasing sizes of pictures in imageView.

Each widget and layout you add to your application requires initialization, layout, and drawing. For example, using nested instances of LinearLayout can lead to an excessively deep view hierarchy. Furthermore, nesting several instances of LinearLayout that use the layout_weight parameter can be especially expensive as each child needs to be measured twice. This is particularly important when the layout is inflated repeatedly, such as when used in a ListView or GridView.
Read here for Optimizing layout - https://developer.android.com/training/improving-layouts/optimizing-layout
Solution -
ConstraintLayout is the new way to achieve the same flat xml structure. It will surely improve your response time
You can read more about how Constraint Layout improve performance at
https://android-developers.googleblog.com/2017/08/understanding-performance-benefits-of.html

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>

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:

Grid layout display is not correct

I am trying to build a simple Android app.
on emulator the grid displays the buttons perfectly , but when installing the app to my mobile the grid looks horrible.
Below is the XML file:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/activity_main"
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.modysoft.gridlayoutdemo.MainActivity">
<GridLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:text="Good Morning"
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:onClick="Buttontapped"
android:layout_rowWeight="1"
android:id="#+id/goodmorning" />
<Button
android:text="Good Evening"
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:onClick="Buttontapped"
android:id="#+id/goodevening" />
<Button
android:text="HI / Bye"
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:onClick="Buttontapped"
android:id="#+id/hibye" />
<Button
android:text="Good Bye"
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:onClick="Buttontapped"
android:id="#+id/goodbye" />
<Button
android:text="Please"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="0"
android:layout_row="2"
android:layout_gravity="fill"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:onClick="Buttontapped"
android:id="#+id/please" />
<Button
android:text="Thank You
Very Much"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="1"
android:layout_row="2"
android:layout_gravity="fill"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:onClick="Buttontapped"
android:id="#+id/thankyou" />
<Button
android:text="Welcome"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="0"
android:layout_row="3"
android:layout_gravity="fill"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:onClick="Buttontapped"
android:id="#+id/welcome" />
<Button
android:text="How are you?"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="1"
android:layout_row="3"
android:layout_gravity="fill"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:onClick="Buttontapped"
android:id="#+id/howareyou" />
</GridLayout>
this how shown in mobile
this how shown in emulator

You can achieve the same what you expect without using <GridLayout>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/activity_main"
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">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_weight="1"
android:layout_height="0dp">
<Button
android:text="Good Morning"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="match_parent"
android:onClick="Buttontapped"
android:id="#+id/goodmorning" />
<Button
android:text="Good Evening"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="match_parent"
android:onClick="Buttontapped"
android:id="#+id/goodevening" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_weight="1"
android:layout_height="0dp">
<Button
android:text="Good Bye"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="match_parent"
android:onClick="Buttontapped"
android:id="#+id/goodbye" />
<Button
android:text="HI / Bye"
android:id="#+id/hibye"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="match_parent"
android:onClick="Buttontapped"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_weight="1"
android:layout_height="0dp">
<Button
android:text="Please"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="match_parent"
android:onClick="Buttontapped"
android:id="#+id/please" />
<Button
android:text="Thank You
Very Much"
android:id="#+id/thankyou"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="match_parent"
android:onClick="Buttontapped"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_weight="1"
android:layout_height="0dp">
<Button
android:text="Welcome"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="match_parent"
android:onClick="Buttontapped"
android:id="#+id/welcome" />
<Button
android:text="How are you?"
android:id="#+id/howareyou"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="match_parent"
android:onClick="Buttontapped"/>
</LinearLayout>
</LinearLayout>

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

Categories

Resources