i want that the image fits in the imageview at the gridlayout. When i dont give a source to the imageview the layout is correct. But when i put the source there the width and height of the imageview is wrong. Can somebody help me to solve the problem? I this for a game.
Correct Layout without src
XML without src
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.ktappworks.test.MainActivity">
<GridLayout
android:id="#+id/ph0"
android:layout_width="300dp"
android:layout_height="300dp"
android:layout_columnWeight="1"
android:layout_gravity="fill"
android:layout_marginTop="0dp"
android:clipChildren="false"
android:columnCount="5"
android:rowCount="2"
android:src="#mipmap/ic_launcher"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginRight="8dp"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:layout_marginBottom="8dp"
android:layout_marginLeft="8dp"
app:layout_constraintLeft_toLeftOf="parent">
<ImageView
android:id="#+id/ph00"
android:layout_columnWeight="1"
android:layout_margin="2dp"
android:layout_rowWeight="1"
/>
<ImageView
android:id="#+id/ph01"
android:layout_columnWeight="1"
android:layout_margin="2dp"
android:layout_rowWeight="1"
/>
<ImageView
android:id="#+id/ph02"
android:layout_columnWeight="1"
android:layout_margin="2dp"
android:layout_rowWeight="1"
/>
<ImageView
android:id="#+id/ph03"
android:layout_columnWeight="1"
android:layout_margin="2dp"
android:layout_rowWeight="1"
/>
<ImageView
android:id="#+id/ph04"
android:layout_columnWeight="1"
android:layout_margin="2dp"
android:layout_rowWeight="1"
/>
<ImageView
android:id="#+id/ph05"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_columnWeight="1"
android:layout_margin="2dp"
android:layout_rowWeight="1"
/>
<ImageView
android:id="#+id/ph06"
android:layout_columnWeight="1"
android:layout_margin="2dp"
android:layout_rowWeight="1"
/>
<ImageView
android:id="#+id/ph07"
android:layout_columnWeight="1"
android:layout_margin="2dp"
android:layout_rowWeight="1"
/>
<ImageView
android:id="#+id/ph08"
android:layout_columnWeight="1"
android:layout_margin="2dp"
android:layout_rowWeight="1"
/>
<ImageView
android:id="#+id/ph09"
android:layout_columnWeight="1"
android:layout_margin="2dp"
android:layout_rowWeight="1"
/>
</GridLayout>
</android.support.constraint.ConstraintLayout>
Incorrect layout with src
XML with src
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.ktappworks.test.MainActivity">
<GridLayout
android:id="#+id/ph0"
android:layout_width="300dp"
android:layout_height="300dp"
android:layout_columnWeight="1"
android:layout_gravity="fill"
android:layout_marginTop="0dp"
android:clipChildren="false"
android:columnCount="5"
android:rowCount="2"
android:src="#mipmap/ic_launcher"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginRight="8dp"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:layout_marginBottom="8dp"
android:layout_marginLeft="8dp"
app:layout_constraintLeft_toLeftOf="parent">
<ImageView
android:id="#+id/ph00"
android:layout_columnWeight="1"
android:layout_margin="2dp"
android:layout_rowWeight="1"
android:scaleType="fitXY"
android:src="#drawable/owl" />
<ImageView
android:id="#+id/ph01"
android:layout_columnWeight="1"
android:layout_margin="2dp"
android:layout_rowWeight="1"
android:scaleType="fitXY"
android:src="#drawable/owl" />
<ImageView
android:id="#+id/ph02"
android:layout_columnWeight="1"
android:layout_margin="2dp"
android:layout_rowWeight="1"
android:scaleType="fitXY"
android:src="#drawable/owl" />
<ImageView
android:id="#+id/ph03"
android:layout_columnWeight="1"
android:layout_margin="2dp"
android:layout_rowWeight="1"
android:scaleType="fitXY"
android:src="#drawable/owl" />
<ImageView
android:id="#+id/ph04"
android:layout_columnWeight="1"
android:layout_margin="2dp"
android:layout_rowWeight="1"
android:scaleType="fitXY"
android:src="#drawable/owl" />
<ImageView
android:id="#+id/ph05"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_columnWeight="1"
android:layout_margin="2dp"
android:layout_rowWeight="1"
android:scaleType="fitXY"
android:src="#drawable/owl" />
<ImageView
android:id="#+id/ph06"
android:layout_columnWeight="1"
android:layout_margin="2dp"
android:layout_rowWeight="1"
android:scaleType="fitXY"
android:src="#drawable/owl" />
<ImageView
android:id="#+id/ph07"
android:layout_columnWeight="1"
android:layout_margin="2dp"
android:layout_rowWeight="1"
android:scaleType="fitXY"
android:src="#drawable/owl" />
<ImageView
android:id="#+id/ph08"
android:layout_columnWeight="1"
android:layout_margin="2dp"
android:layout_rowWeight="1"
android:scaleType="fitXY"
android:src="#drawable/owl" />
<ImageView
android:id="#+id/ph09"
android:layout_columnWeight="1"
android:layout_margin="2dp"
android:layout_rowWeight="1"
android:scaleType="fitXY"
android:src="#drawable/owl" />
</GridLayout>
</android.support.constraint.ConstraintLayout>
Owl Image
You need to define the width and height of each ImageView as 0dp for the column/row weights to take effect. I think the default is wrap_content. You may also want to change the scaleType to something other than fitXY since fitXY will distort the images.
I have also run into an issue with the native implementation of GridLayout when using the weights for certain API levels. (I answered such a question recently and I will post a reference to it here if I can find it.) You may want to think about using the support library version of GridLayout since it seems to have a working implementation of weights. Add the following to your gradle file for this version of GridLayout:
compile 'com.android.support:gridlayout-v7:26.1.0'
Here is a screen shot after making these changes:
Related
I am trying to create a Grid Layout with 2 Columns and 3 Rows. I will use ImageButtons for the grid, so that there's 6 images on the screen, each with the same size. When I add the background to the ImageButton, the button fills the whole screen. Should I add Width and Height properties to fix this? Can anyone help me?
<GridLayout
android:id="#+id/team_grid"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:columnCount="2"
android:rowCount="3"
>
<ImageButton
android:id="#+id/alexandre"
android:layout_rowWeight="1"
android:layout_columnWeight="1"
android:layout_gravity="fill"
android:background=""
android:textSize="18sp"
android:src="#drawable/alexandre"/>
<ImageButton
android:id="#+id/barbara"
android:layout_rowWeight="1"
android:layout_columnWeight="1"
android:layout_gravity="fill"
android:background="#ffffff"
android:textSize="18sp"
android:src="#drawable/barbara"/>
<ImageButton
android:id="#+id/pedro"
android:layout_rowWeight="1"
android:layout_columnWeight="1"
android:layout_gravity="fill"
android:background="#ffffff"
android:textSize="18sp"
android:src="#drawable/goncalo"/>
<ImageButton
android:id="#+id/ImageButton4"
android:layout_rowWeight="1"
android:layout_columnWeight="1"
android:layout_gravity="fill"
android:background="#ffffff"
android:textSize="18sp"
android:src="#drawable/pedro">
<ImageButton
android:id="#+id/ImageButton5"
android:layout_rowWeight="1"
android:layout_columnWeight="1"
android:layout_gravity="fill"
android:background="#ffffff"
android:textSize="18sp"
android:src="#drawable/rafael"/>
<ImageButton
android:id="#+id/ImageButton6"
android:layout_rowWeight="1"
android:layout_columnWeight="1"
android:layout_gravity="fill"
android:background="#ffffff"
android:textSize="18sp"
android:src="#drawable/ricardo"/>
</GridLayout>
So, Your question is a bit confusing because in your XML you have set the background of each ImageButton to white color which seems to have no effect but if you try setting different color for each one then it will set a different color accordingly. And, you can't have an empty value for background like in your first ImageButton. And, try to add some padding and margin for the ImageButton.I tried your code and it work's fine. Here's what I did.
<GridLayout android:id="#+id/team_grid"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:columnCount="2"
android:rowCount="3"
xmlns:android="http://schemas.android.com/apk/res/android">
<ImageButton
android:id="#+id/alexandre"
android:layout_rowWeight="1"
android:layout_columnWeight="1"
android:layout_gravity="fill"
android:textSize="18sp"
android:background="#color/black"
android:padding="5dp"
android:layout_margin="5dp"
android:src="#drawable/ic_launcher_background"/>
<ImageButton
android:id="#+id/barbara"
android:layout_rowWeight="1"
android:layout_columnWeight="1"
android:layout_gravity="fill"
android:background="#android:color/holo_blue_bright"
android:textSize="18sp"
android:layout_margin="5dp"
android:src="#drawable/ic_launcher_foreground"/>
<ImageButton
android:id="#+id/pedro"
android:layout_rowWeight="1"
android:layout_columnWeight="1"
android:layout_gravity="fill"
android:background="#color/black"
android:textSize="18sp"
android:padding="5dp"
android:layout_margin="5dp"
android:src="#drawable/ic_launcher_background"/>
<ImageButton
android:id="#+id/ImageButton4"
android:layout_rowWeight="1"
android:layout_columnWeight="1"
android:layout_gravity="fill"
android:background="#color/black"
android:textSize="18sp"
android:padding="5dp"
android:layout_margin="5dp"
android:src="#drawable/ic_launcher_foreground"/>
<ImageButton
android:id="#+id/ImageButton5"
android:layout_rowWeight="1"
android:layout_columnWeight="1"
android:layout_gravity="fill"
android:background="#android:color/holo_blue_dark"
android:textSize="18sp"
android:layout_margin="5dp"
android:padding="5dp"
android:src="#drawable/ic_launcher_background"/>
<ImageButton
android:id="#+id/ImageButton6"
android:layout_rowWeight="1"
android:layout_columnWeight="1"
android:layout_gravity="fill"
android:background="#android:color/holo_orange_dark"
android:textSize="18sp"
android:layout_margin="5dp"
android:padding="5dp"
android:src="#drawable/ic_launcher_foreground"/>
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"
/>
I have created a GridLayout with 3 rows and 3 columns, I have populated it with 9 imageViews like this:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayoutxmlns: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"
tools:context="eu.isisbassafriulana.android.tria.MainActivity">
<LinearLayout
android:layout_width="368dp"
android:layout_height="495dp"
android:orientation="vertical"
tools:layout_editor_absoluteX="8dp"
tools:layout_editor_absoluteY="8dp"
tools:ignore="MissingConstraints">
<Button
android:id="#+id/buttonStart"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Inizia una nuova partita"
android:onClick="onStart"/>
<GridLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:columnCount="3"
android:rowCount="3">
<ImageView
android:id="#+id/imageView00"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_rowWeight="1"
android:layout_columnWeight="1"
app:srcCompat="#drawable/android"
android:onClick="cellPressed"/>
<ImageView
android:id="#+id/imageView01"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_rowWeight="1"
android:layout_columnWeight="1"
app:srcCompat="#drawable/android"
android:onClick="cellPressed"/>
<ImageView
android:id="#+id/imageView02"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_rowWeight="1"
android:layout_columnWeight="1"
app:srcCompat="#drawable/android"
android:onClick="cellPressed"/>
<ImageView
android:id="#+id/imageView10"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_rowWeight="1"
android:layout_columnWeight="1"
app:srcCompat="#drawable/android"
android:onClick="cellPressed"/>
<ImageView
android:id="#+id/imageView11"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_rowWeight="1"
android:layout_columnWeight="1"
app:srcCompat="#drawable/android"
android:onClick="cellPressed"/>
<ImageView
android:id="#+id/imageView12"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_rowWeight="1"
android:layout_columnWeight="1"
app:srcCompat="#drawable/android"
android:onClick="cellPressed"/>
<ImageView
android:id="#+id/imageView20"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_rowWeight="1"
android:layout_columnWeight="1"
app:srcCompat="#drawable/android"
android:onClick="cellPressed"/>
<ImageView
android:id="#+id/imageView21"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_rowWeight="1"
android:layout_columnWeight="1"
app:srcCompat="#drawable/android"
android:onClick="cellPressed"/>
<ImageView
android:id="#+id/imageView22"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_rowWeight="1"
android:layout_columnWeight="1"
app:srcCompat="#drawable/android"
android:onClick="cellPressed"/>
</GridLayout>
<TextView
android:id="#+id/textView"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
I have a smartphone (Xiaomi Redmi 2 Pro 2014813) with Android 5.1.1 and API 22 with firmware MIUI. When I compile the project, on my smartphone I can't see the images because seems that the weight parameters doesn't work.
On the left there is a screenshot of my smartphone, on the right the Android Studio Preview
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:
I have looked at various solutions, including gravity, but have not found the answer to the problem that I am having, which is that the image buttons inside of the grid layout are not spanning the width of the screen - looking like this picture below. They are more clumped up towards the left. I would like the spacing to be even across the screen. Thanks for the help.
Here is the XML file:
<?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:id="#+id/activity_admin_control"
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.example.myname.myproject.AdminControl">
<Button
android:text="Switch to User"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_centerHorizontal="true"
android:layout_gravity="center"
android:id="#+id/userSwitch" />
<GridLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/userSwitch"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:rowCount="2"
android:columnCount="3"
android:alignmentMode="alignMargins">
<ImageButton
app:srcCompat="#drawable/common_google_signin_btn_icon_dark"
android:layout_row="0"
android:layout_column="0"
android:layout_width="118dp"
android:layout_height="118dp"
android:scaleType="fitCenter"/>
<ImageButton
app:srcCompat="#drawable/common_google_signin_btn_icon_dark"
android:id="#+id/imageButton5"
android:layout_row="0"
android:layout_column="1"
android:layout_width="118dp"
android:layout_height="118dp"
android:scaleType="fitCenter"/>
<ImageButton
app:srcCompat="#drawable/common_google_signin_btn_icon_dark"
android:id="#+id/imageButton6"
android:layout_row="0"
android:layout_column="2"
android:layout_width="118dp"
android:layout_height="118dp"
android:scaleType="fitCenter"/>
<ImageButton
app:srcCompat="#drawable/common_google_signin_btn_icon_dark"
android:id="#+id/imageButton7"
android:layout_row="1"
android:layout_column="0"
android:layout_width="118dp"
android:layout_height="118dp"
android:scaleType="fitCenter"/>
<ImageButton
app:srcCompat="#drawable/common_google_signin_btn_icon_dark"
android:id="#+id/imageButton8"
android:layout_row="1"
android:layout_column="1"
android:layout_width="118dp"
android:layout_height="118dp"
android:scaleType="fitCenter"/>
<ImageButton
app:srcCompat="#drawable/common_google_signin_btn_icon_dark"
android:id="#+id/imageButton9"
android:layout_row="1"
android:layout_column="2"
android:layout_width="118dp"
android:layout_height="118dp"
android:scaleType="fitCenter"/>
</GridLayout>
</RelativeLayout>
Don't define width yourself. Let GridLayout do this task. Set all width and height to 0dp and all weights to 1.
This might work for you. I didn't check it, but it should work.
<GridLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/userSwitch"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:rowCount="2"
android:columnCount="3"
android:alignmentMode="alignMargins">
<ImageButton
app:srcCompat="#drawable/common_google_signin_btn_icon_dark"
android:layout_row="0"
android:layout_column="0"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:scaleType="fitCenter"/>
<ImageButton
app:srcCompat="#drawable/common_google_signin_btn_icon_dark"
android:id="#+id/imageButton5"
android:layout_row="0"
android:layout_column="1"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:scaleType="fitCenter"/>
<ImageButton
app:srcCompat="#drawable/common_google_signin_btn_icon_dark"
android:id="#+id/imageButton6"
android:layout_row="0"
android:layout_column="2"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:scaleType="fitCenter"/>
<ImageButton
app:srcCompat="#drawable/common_google_signin_btn_icon_dark"
android:id="#+id/imageButton7"
android:layout_row="1"
android:layout_column="0"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:scaleType="fitCenter"/>
<ImageButton
app:srcCompat="#drawable/common_google_signin_btn_icon_dark"
android:id="#+id/imageButton8"
android:layout_row="1"
android:layout_column="1"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:scaleType="fitCenter"/>
<ImageButton
app:srcCompat="#drawable/common_google_signin_btn_icon_dark"
android:id="#+id/imageButton9"
android:layout_row="1"
android:layout_column="2"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:scaleType="fitCenter"/>
</GridLayout>
Try this,
<?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"
android:id="#+id/activity_admin_control"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:id="#+id/userSwitch"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_gravity="center"
android:text="Switch to User" />
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_above="#+id/userSwitch"
android:layout_centerHorizontal="true">
<GridLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_centerHorizontal="true"
android:alignmentMode="alignMargins"
android:columnCount="3"
android:rowCount="2">
<ImageButton
android:layout_width="118dp"
android:layout_height="118dp"
android:layout_column="0"
android:layout_row="0"
android:scaleType="fitCenter"
app:srcCompat="#drawable/common_google_signin_btn_icon_dark" />
<ImageButton
android:id="#+id/imageButton5"
android:layout_width="118dp"
android:layout_height="118dp"
android:layout_column="1"
android:layout_row="0"
android:scaleType="fitCenter"
app:srcCompat="#drawable/common_google_signin_btn_icon_dark" />
<ImageButton
android:id="#+id/imageButton6"
android:layout_width="118dp"
android:layout_height="118dp"
android:layout_column="2"
android:layout_row="0"
android:scaleType="fitCenter"
app:srcCompat="#drawable/common_google_signin_btn_icon_dark" />
<ImageButton
android:id="#+id/imageButton7"
android:layout_width="118dp"
android:layout_height="118dp"
android:layout_column="0"
android:layout_row="1"
android:scaleType="fitCenter"
app:srcCompat="#drawable/common_google_signin_btn_icon_dark" />
<ImageButton
android:id="#+id/imageButton8"
android:layout_width="118dp"
android:layout_height="118dp"
android:layout_column="1"
android:layout_row="1"
android:scaleType="fitCenter"
app:srcCompat="#drawable/common_google_signin_btn_icon_dark" />
<ImageButton
android:id="#+id/imageButton9"
android:layout_width="118dp"
android:layout_height="118dp"
android:layout_column="2"
android:layout_row="1"
android:scaleType="fitCenter"
app:srcCompat="#drawable/common_google_signin_btn_icon_dark" />
</GridLayout>
</RelativeLayout>
</RelativeLayout>
I find out that it's not possible to center GridView horizontally with .xml
So I had to do it programmatically... This answer helped me a lot:
link
you can try this width and height is harcoded you need to fix either row or column or you can use margin.
<?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:id="#+id/activity_admin_control"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.myname.myproject.AdminControl">
<Button
android:text="Switch to User"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_centerHorizontal="true"
android:layout_gravity="center"
android:id="#+id/userSwitch" />
<GridLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/userSwitch"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:layout_marginLeft="#dimen/activity_vertical_margin"
android:layout_marginRight="#dimen/activity_vertical_margin"
android:rowCount="2"
android:columnCount="3"
android:alignmentMode="alignMargins">
<ImageButton
app:srcCompat="#drawable/common_google_signin_btn_icon_dark"
android:layout_row="0"
android:layout_column="0"
android:layout_width="118dp"
android:layout_height="118dp"
android:scaleType="fitCenter"/>
<ImageButton
app:srcCompat="#drawable/common_google_signin_btn_icon_dark"
android:id="#+id/imageButton5"
android:layout_row="0"
android:layout_column="1"
android:layout_width="118dp"
android:layout_height="118dp"
android:scaleType="fitCenter"/>
<ImageButton
app:srcCompat="#drawable/common_google_signin_btn_icon_dark"
android:id="#+id/imageButton6"
android:layout_row="0"
android:layout_column="2"
android:layout_width="118dp"
android:layout_height="118dp"
android:scaleType="fitCenter"/>
<ImageButton
app:srcCompat="#drawable/common_google_signin_btn_icon_dark"
android:id="#+id/imageButton7"
android:layout_row="1"
android:layout_column="0"
android:layout_width="118dp"
android:layout_height="118dp"
android:scaleType="fitCenter"/>
<ImageButton
app:srcCompat="#drawable/common_google_signin_btn_icon_dark"
android:id="#+id/imageButton8"
android:layout_row="1"
android:layout_column="1"
android:layout_width="118dp"
android:layout_height="118dp"
android:scaleType="fitCenter"/>
<ImageButton
app:srcCompat="#drawable/common_google_signin_btn_icon_dark"
android:id="#+id/imageButton9"
android:layout_row="1"
android:layout_column="2"
android:layout_width="118dp"
android:layout_height="118dp"
android:scaleType="fitCenter"/>
</GridLayout>
</RelativeLayout>