Image alignment issue using gridlayout

Image alignment issue using gridlayout - android

I had some problem with the alignment for the picture when I export the APK to phone for test. The alignment is totally different and out of the grid.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context="sg.edu.rp.c346.tictactoee.MainActivity"
tools:showIn="#layout/activity_main">
<GridLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/board"
android:columnCount="4"
android:rowCount="3"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"
android:id="#+id/gridLayout">
<ImageView
android:layout_width="90dp"
android:layout_height="90dp"
android:id="#+id/imageView0"
android:layout_row="0"
android:layout_column="0"
android:onClick="gameLogic"
android:tag="0"
android:layout_marginLeft="0dp"
android:layout_marginTop="50dp" />
<ImageView
android:layout_width="90dp"
android:layout_height="90dp"
android:id="#+id/imageView1"
android:layout_row="0"
android:layout_column="1"
android:onClick="gameLogic"
android:tag="1"
android:layout_marginTop="50dp"
android:layout_marginLeft="7dp" />
<ImageView
android:layout_width="90dp"
android:layout_height="90dp"
android:id="#+id/imageView2"
android:layout_row="0"
android:layout_column="2"
android:layout_marginLeft="20dp"
android:layout_marginTop="50dp"
android:onClick="gameLogic"
android:tag="2" />
<ImageView
android:layout_width="90dp"
android:layout_height="90dp"
android:id="#+id/imageView3"
android:layout_row="1"
android:layout_column="0"
android:layout_marginLeft="0dp"
android:layout_marginTop="50dp"
android:onClick="gameLogic"
android:tag="3"/>
<ImageView
android:layout_width="90dp"
android:layout_height="90dp"
android:id="#+id/imageView4"
android:layout_row="1"
android:layout_column="1"
android:layout_marginTop="50dp"
android:layout_marginLeft="7dp"
android:onClick="gameLogic"
android:tag="4"/>
<ImageView
android:layout_width="90dp"
android:layout_height="90dp"
android:id="#+id/imageView5"
android:layout_row="1"
android:layout_column="2"
android:layout_marginLeft="15dp"
android:layout_marginTop="50dp"
android:onClick="gameLogic"
android:tag="5"/>
<ImageView
android:layout_width="90dp"
android:layout_height="90dp"
android:id="#+id/imageView6"
android:layout_row="2"
android:layout_column="0"
android:layout_marginLeft="0dp"
android:layout_marginTop="30dp"
android:onClick="gameLogic"
android:tag="6"/>
<ImageView
android:layout_width="90dp"
android:layout_height="90dp"
android:id="#+id/imageView7"
android:layout_row="2"
android:layout_column="1"
android:layout_marginTop="30dp"
android:layout_marginLeft="7dp"
android:onClick="gameLogic"
android:tag="7"/>
<ImageView
android:layout_width="90dp"
android:layout_height="90dp"
android:id="#+id/imageView8"
android:layout_row="2"
android:layout_column="2"
android:layout_marginLeft="15dp"
android:layout_marginTop="30dp"
android:onClick="gameLogic"
android:tag="8"/>
</GridLayout>
<LinearLayout
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"
android:background="#1eccd5"
android:padding="35dp"
android:id="#+id/winnerLayout">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:id="#+id/textView"
android:textColor="#FFFFFFFF" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Play Again"
android:id="#+id/button"
android:onClick="playAgain" />
</LinearLayout>
</RelativeLayout>
It shows like this using android studio:
However, when I export it to my android phone, the alignment totally changes and out of grid, anyone able to help me ?

I guess you are new to Android.
Android uses device's dimensions while creating any view(screen) on your device.
Android supports different dimensions like,
hdpi
xhdpi
xxhdpi
xxxhdpi etc.
So for your case, Android System try to fit all views in absolute size given by you.
I suggest use wrap_content for width and height of your view.
You can modify your layout file as below:
<?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: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"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<GridLayout
android:id="#+id/gridLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:columnCount="4"
android:rowCount="3">
<ImageView
android:id="#+id/imageView0"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="0"
android:layout_row="0"
android:onClick="gameLogic"
android:padding="30dp"
android:src="#android:drawable/ic_menu_add"
android:tag="0"/>
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="1"
android:layout_row="0"
android:onClick="gameLogic"
android:padding="30dp"
android:src="#android:drawable/ic_menu_add"
android:tag="1"/>
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="2"
android:layout_row="0"
android:onClick="gameLogic"
android:padding="30dp"
android:src="#android:drawable/ic_menu_add"
android:tag="2"/>
<ImageView
android:id="#+id/imageView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="0"
android:layout_row="1"
android:onClick="gameLogic"
android:padding="30dp"
android:src="#android:drawable/ic_menu_add"
android:tag="3"/>
<ImageView
android:id="#+id/imageView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="1"
android:layout_row="1"
android:onClick="gameLogic"
android:padding="30dp"
android:src="#android:drawable/ic_menu_add"
android:tag="4"/>
<ImageView
android:id="#+id/imageView5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="2"
android:layout_row="1"
android:onClick="gameLogic"
android:padding="30dp"
android:src="#android:drawable/ic_menu_add"
android:tag="5"/>
<ImageView
android:id="#+id/imageView6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="0"
android:layout_row="2"
android:onClick="gameLogic"
android:padding="30dp"
android:src="#android:drawable/ic_menu_add"
android:tag="6"/>
<ImageView
android:id="#+id/imageView7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="1"
android:layout_row="2"
android:onClick="gameLogic"
android:padding="30dp"
android:src="#android:drawable/ic_menu_add"
android:tag="7"/>
<ImageView
android:id="#+id/imageView8"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="2"
android:layout_row="2"
android:onClick="gameLogic"
android:padding="30dp"
android:src="#android:drawable/ic_menu_add"
android:tag="8"/>
</GridLayout>
<LinearLayout
android:id="#+id/winnerLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:background="#1eccd5"
android:orientation="vertical"
android:padding="35dp"
android:visibility="gone">
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textColor="#FFFFFFFF"/>
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="playAgain"
android:text="Play Again"/>
</LinearLayout>
</RelativeLayout>
You can change padding and src as per your requirement.
Please add image how you want it if this differs!
For more information, Please check this link.

Add padding in your Image view
android:padding="10dp"
For example:
<ImageView
android:layout_width="90dp"
android:layout_height="90dp"
android:id="#+id/imageView0"
android:layout_row="0"
android:layout_column="0"
android:padding="10dp"
android:onClick="gameLogic"
android:tag="0"
android:layout_marginLeft="0dp"
android:layout_marginTop="50dp" />
This will solve your issue.

Change GridLayout to android.support.v7.widget.GridLayout
Add
app:columnCount="3"
app:rowCount="3"
to GridView
On ImageView use
app:layout_columnWeight="1"
app:layout_rowWeight="1"
instead of
android:layout_width="90dp"
android:layout_height="90dp"
xml file will look like this,
<android.support.v7.widget.GridLayout
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="500dp"
app:columnCount="3"
app:orientation="horizontal"
app:rowCount="3"
app:useDefaultMargins="true">
<ImageView
app:layout_columnWeight="1"
app:layout_rowWeight="1"
android:id="#+id/imageView0"
android:tag="0"
android:background="#ff0000" />
<ImageView
app:layout_columnWeight="1"
app:layout_rowWeight="1"
android:id="#+id/imageView1"
android:onClick="gameLogic"
android:tag="1"
android:background="#ff0000"/>
<ImageView
app:layout_columnWeight="1"
app:layout_rowWeight="1"
android:id="#+id/imageView2"
android:background="#ff0000"
android:onClick="gameLogic"
android:tag="2" />
<ImageView
app:layout_columnWeight="1"
app:layout_rowWeight="1"
android:id="#+id/imageView3"
android:background="#ff0000"
android:onClick="gameLogic"
android:tag="3"/>
<ImageView
app:layout_columnWeight="1"
app:layout_rowWeight="1"
android:id="#+id/imageView4"
android:background="#ff0000"
android:onClick="gameLogic"
android:tag="4"/>
<ImageView
app:layout_columnWeight="1"
app:layout_rowWeight="1"
android:id="#+id/imageView5"
android:background="#ff0000"
android:onClick="gameLogic"
android:tag="5"/>
<ImageView
app:layout_columnWeight="1"
app:layout_rowWeight="1"
android:id="#+id/imageView6"
android:background="#ff0000"
android:onClick="gameLogic"
android:tag="6"/>
<ImageView
app:layout_columnWeight="1"
app:layout_rowWeight="1"
android:id="#+id/imageView7"
android:background="#ff0000"
android:onClick="gameLogic"
android:tag="7"/>
<ImageView
app:layout_columnWeight="1"
app:layout_rowWeight="1"
android:id="#+id/imageView8"
android:background="#ff0000"
android:onClick="gameLogic"
android:tag="8"/>
</android.support.v7.widget.GridLayout>

Related

How to center image buttons inside of a Grid Layout - Android Studio

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>

GridLayout looks diffrent in Android Studio vs device

I'm new to Android development. Could somebody tell me, why Android Studio (screenshot) is showing different from my phone (screenshot)? What is wrong with the code? Is there any solution to the problem?
<?xml version="1.0" encoding="utf-8"?>
<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.example.dell.braintrainer.MainActivity">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="GO"
android:id="#+id/btnGO"
android:textSize="80dp"
android:padding="30dp"
android:onClick="start"
android:nestedScrollingEnabled="true"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"
android:visibility="invisible" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="20s"
android:id="#+id/timerTextview"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:textSize="30sp"
android:padding="10sp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="0/0"
android:id="#+id/scoreTextview"
android:textSize="30sp"
android:layout_alignBottom="#+id/timerTextview"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:padding="10sp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="31 + 12"
android:id="#+id/textView"
android:textSize="30sp"
android:padding="20dp"
android:layout_alignTop="#+id/scoreTextview"
android:layout_centerHorizontal="true"
android:textColor="#050505" />
<GridLayout
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:layout_below="#+id/textView"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="false"
android:layout_alignParentEnd="false"
>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/button"
android:layout_column="0"
android:layout_row="0"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:layout_gravity="fill"
android:tag="0"
android:text="31"
android:textSize="40sp" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/button1"
android:layout_column="1"
android:layout_row="0"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:layout_gravity="fill"
android:tag="1"
android:text="31"
android:textSize="40sp"
/>
<Button
android:layout_width="wrap_content"
android:id="#+id/button2"
android:layout_column="0"
android:layout_row="1"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:layout_gravity="fill"
android:tag="2"
android:text="31"
android:textSize="40sp"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/button3"
android:layout_column="1"
android:layout_row="1"
android:layout_columnWeight="1"
android:layout_rowWeight="1"
android:layout_gravity="fill"
android:tag="3"
android:text="31"
android:textSize="40sp"
/>
</GridLayout>
</RelativeLayout>

It has to do with the values for size you are using.
The screen size of your phone and the android studio preview phone are not the same. At least that is what usually happens :P I hope this helps!

tic tac toe game in android screen size change

i made tic tac toe game in android which is working fine in a 5 inch screen but in my honor bee 4.5 inch display it looks like this
in my 5 inch nexus avd it looks fine with all chips inside the line
here's the xml code
for layout
<GridLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"
android:rowCount="3"
android:columnCount="3"
android:id="#+id/grid"
android:background="#drawable/board">
<ImageView
android:layout_width="87dp"
android:layout_height="87dp"
android:id="#+id/imageView"
android:layout_row="0"
android:layout_column="0"
android:layout_marginLeft="10dp"
android:layout_marginTop="20dp"
android:onClick="drop"
android:tag="0"
android:clickable="false"
android:maxHeight="87dp"
android:maxWidth="87dp"
android:adjustViewBounds="true"
android:scaleType="centerInside"/>
<ImageView
android:layout_width="87dp"
android:layout_height="87dp"
android:id="#+id/imageView3"
android:layout_row="0"
android:layout_column="1"
android:layout_marginTop="20dp"
android:layout_marginLeft="35dp"
android:onClick="drop"
android:tag="1"
android:adjustViewBounds="true"
android:scaleType="centerInside"/>
<ImageView
android:layout_width="87dp"
android:layout_height="87dp"
android:id="#+id/imageView2"
android:layout_row="0"
android:layout_column="2"
android:onClick="drop"
android:layout_marginLeft="20dp"
android:layout_marginTop="20dp"
android:layout_marginRight="20dp"
android:tag="2"
android:adjustViewBounds="true"
android:scaleType="centerInside"/>
<ImageView
android:layout_width="87dp"
android:layout_height="87dp"
android:id="#+id/imageView6"
android:layout_row="1"
android:layout_column="0"
android:onClick="drop"
android:layout_marginLeft="10dp"
android:layout_marginTop="80dp"
android:layout_marginBottom="25dp"
android:tag="3"
android:adjustViewBounds="true"
android:scaleType="centerInside"/>
<ImageView
android:layout_width="87dp"
android:layout_height="87dp"
android:id="#+id/imageView5"
android:layout_row="1"
android:layout_column="1"
android:onClick="drop"
android:layout_marginLeft="40dp"
android:layout_marginTop="80dp"
android:layout_marginRight="10dp"
android:tag="4"
android:adjustViewBounds="true"
android:scaleType="centerInside"/>
<ImageView
android:layout_width="87dp"
android:layout_height="87dp"
android:id="#+id/imageView8"
android:layout_row="1"
android:layout_column="2"
android:onClick="drop"
android:layout_marginLeft="20dp"
android:layout_marginTop="80dp"
android:tag="5"
android:adjustViewBounds="true"
android:scaleType="centerInside"/>
<ImageView
android:layout_width="87dp"
android:layout_height="87dp"
android:id="#+id/imageView4"
android:layout_row="2"
android:layout_column="0"
android:onClick="drop"
android:layout_marginLeft="10dp"
android:layout_marginTop="50dp"
android:tag="6"
android:adjustViewBounds="true"
android:scaleType="centerInside"/>
<ImageView
android:layout_width="87dp"
android:layout_height="87dp"
android:id="#+id/imageView7"
android:layout_row="2"
android:layout_column="1"
android:onClick="drop"
android:layout_marginLeft="40dp"
android:layout_marginTop="50dp"
android:tag="7"
android:adjustViewBounds="true"
android:scaleType="centerInside" />
<ImageView
android:layout_width="87dp"
android:layout_height="87dp"
android:id="#+id/imageView9"
android:layout_row="2"
android:layout_column="2"
android:onClick="drop"
android:layout_marginLeft="20dp"
android:layout_marginTop="50dp"
android:tag="8"
android:adjustViewBounds="true"
android:scaleType="centerInside"/>
</GridLayout>
<LinearLayout
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/bck"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"
android:weightSum="1"
android:alpha="1"
android:id="#+id/playagainlayout">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Text"
android:id="#+id/winnermsg"
android:layout_gravity="center_horizontal"
android:textSize="40sp"
android:layout_weight="0.44" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Play Again"
android:id="#+id/play_again"
android:layout_gravity="center_horizontal"
android:layout_weight="0.05"
android:onClick="playagain" />
</LinearLayout>

You have to use layout_weight. Because weight deals with ratio and support all dimension. Otherwise setting width and height will not work in every devices
here is an example of layout_weight.

Why the grid view appear different in the emulator?

Why does the emulator have different sizes of buttons other than the designed ones here is the XML? This is a serious problem with the grid views and I've encountered it many times but I can't find the answer.
Where is the problem?
<?xml version="1.0" encoding="utf-8"?>
<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.example.life.braintrainer.MainActivity">
<Button
android:id="#+id/startButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:background="#26eb47"
android:onClick="start"
android:padding="40dp"
android:text="Go!"
android:textSize="70sp"
android:visibility="invisible" />
<TextView
android:id="#+id/timerTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:background="#e6ff26"
android:padding="10dp"
android:text="30s"
android:textSize="30sp" />
<TextView
android:id="#+id/pointsTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_alignTop="#+id/timerTextView"
android:background="#fe8a0e"
android:padding="10dp"
android:text="0/0"
android:textSize="30sp" />
<TextView
android:id="#+id/sumTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/pointsTextView"
android:layout_centerHorizontal="true"
android:padding="15dp"
android:text="30 + 12"
android:textColor="#312e2e"
android:textSize="25sp" />
<GridLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/sumTextView"
android:layout_alignParentStart="true"
android:columnCount="2"
android:rowCount="2">
<Button
android:id="#+id/button"
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:background="#27f13f"
android:onClick="chooseAnswer"
android:tag="0"
android:text="3"
android:textSize="80sp" />
<Button
android:id="#+id/button1"
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:background="#0a2ef9"
android:onClick="chooseAnswer"
android:tag="1"
android:text="3"
android:textSize="80sp" />
<Button
android:id="#+id/button2"
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:background="#f43ffb"
android:onClick="chooseAnswer"
android:tag="2"
android:text="3"
android:textSize="80sp" />
<Button
android:id="#+id/button3"
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:background="#2cdefe"
android:onClick="chooseAnswer"
android:tag="3"
android:text="3"
android:textSize="80sp" />
</GridLayout>
<TextView
android:id="#+id/resultTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/startButton"
android:layout_centerHorizontal="true"
android:text="Correct!"
android:textSize="40sp" />
</RelativeLayout>

Android ListView Item Layout getting screwed up

I tried to customize the layout of my ListView so I made up the following layout file:
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="100dp"
tools:context=".workout.WorkoutPlanFragment"
android:paddingRight="10dp"
android:orientation="horizontal">
<LinearLayout
android:id="#+id/edit_view"
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_column="0"
android:layout_row="0"
android:visibility="gone">
<ImageView
android:layout_width="40dp"
android:layout_height="wrap_content"
android:src="#drawable/ic_delete"
android:layout_column="0"
android:layout_row="0"
android:layout_rowSpan="3"
android:paddingLeft="5dp"
android:paddingRight="5dp"
android:layout_marginRight="15dp"
android:layout_marginLeft="15dp"
android:id="#+id/image_view_delete_workout_plan"/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/image_view_move_down"
android:src="#drawable/ic_down" android:layout_gravity="center_vertical"
android:layout_marginRight="15dp"/>
<ImageView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/image_view_move_up"
android:src="#drawable/ic_up" android:layout_gravity="center_vertical"
android:layout_marginRight="15dp"/>
</LinearLayout>
<GridLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/workout_plan_fragment" android:layout_column="1" android:layout_row="0">
<ImageView
android:layout_width="93dp"
android:layout_height="match_parent"
android:src="#drawable/img_workout"
android:id="#+id/imageView5"
android:layout_column="0" android:layout_row="0" android:layout_rowSpan="3"
android:paddingBottom="4dp" android:paddingTop="4dp" android:layout_marginRight="10dp"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="Someting"
android:alpha="1"
android:id="#+id/text_view_plan_name" android:layout_gravity="center_vertical"
android:layout_column="1" android:layout_row="0"
android:textColor="#5a70ff"
android:textSize="26dp" android:layout_marginTop="5dp"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="asdf"
android:id="#+id/text_view_anz_exercises" android:layout_row="1" android:layout_column="1"
android:layout_rowWeight="0.1" android:alpha="1" android:textSize="15dp"/>
<TextView android:layout_width="wrap_content" android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceSmall" android:text="blablablablablabla"
android:id="#+id/text_view_last_workout" android:layout_row="2" android:layout_column="1"
android:layout_marginBottom="5dp"/>
</GridLayout>
When I use this layout on a Fragment or just check it in the design tab it looks totally fine like this:
But as soon as I apply this layout to a ListView item it turns out looking like that:
I already tried replacing the GridLayout by a LinearLayout or something like that but it always looks like that...
How can I make the ListView item look like the designed Layout?

Try this code.
<GridLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:paddingRight="10dp" />
<LinearLayout
android:id="#+id/edit_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_column="0"
android:layout_row="0"
android:orientation="horizontal"
android:visibility="gone">
<ImageView
android:id="#+id/image_view_delete_workout_plan"
android:layout_width="40dp"
android:layout_height="wrap_content"
android:layout_column="0"
android:layout_marginLeft="15dp"
android:layout_marginRight="15dp"
android:layout_row="0"
android:layout_rowSpan="3"
android:paddingLeft="5dp"
android:paddingRight="5dp"
android:src="#drawable/ic_launcher" />
<ImageView
android:id="#+id/image_view_move_down"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginRight="15dp"
android:src="#drawable/ic_launcher" />
<ImageView
android:id="#+id/image_view_move_up"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginRight="15dp"
android:src="#drawable/ic_launcher" />
</LinearLayout>
<GridLayout
android:id="#+id/workout_plan_fragment"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_column="1"
android:layout_row="0">
<ImageView
android:id="#+id/imageView5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="0"
android:layout_marginRight="10dp"
android:layout_row="0"
android:layout_rowSpan="3"
android:paddingBottom="4dp"
android:paddingTop="4dp"
android:src="#drawable/ic_launcher" />
<TextView
android:id="#+id/text_view_plan_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="1"
android:layout_gravity="center_vertical"
android:layout_marginTop="5dp"
android:layout_row="0"
android:alpha="1"
android:text="Someting"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#5a70ff"
android:textSize="26dp" />
<TextView
android:id="#+id/text_view_anz_exercises"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="1"
android:layout_row="1"
android:layout_rowWeight="0.1"
android:alpha="1"
android:text="asdf"
android:textAppearance="?android:attr/textAppearanceSmall"
android:textSize="15dp" />
<TextView
android:id="#+id/text_view_last_workout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="1"
android:layout_marginBottom="5dp"
android:layout_row="2"
android:text="blablablablablabla"
android:textAppearance="?android:attr/textAppearanceSmall" />
</GridLayout>

Develop Reference

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

Image alignment issue using gridlayout - android

Related

How to center image buttons inside of a Grid Layout - Android Studio

GridLayout looks diffrent in Android Studio vs device

tic tac toe game in android screen size change

Why the grid view appear different in the emulator?

Android ListView Item Layout getting screwed up

Categories

Resources