tic tac toe game in android screen size change

tic tac toe game in android screen size change - android

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.

Related

Scrolling in GridLayout

I am designing an app in which I have to display image buttons in 10 rows and 2 columns, so I chose grid layout design to arrange them. However, I'm having difficulty in linking the scrollbar to it. The code for GridLayout is given below:
<GridLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:columnCount="2"
android:rowCount="10"
android:layout_alignParentTop="true"
android:layout_alignParentStart="true">
<ImageButton
android:layout_marginBottom="20dp"
android:layout_width="165dp"
android:layout_height="75dp"
android:background="#drawable/navbharat"
android:id="#+id/navbharat"
android:layout_gravity="left"
android:scaleType="centerCrop"
android:layout_row="0"
android:layout_column="0" />
<ImageButton
android:layout_width="165dp"
android:layout_height="75dp"
android:background="#drawable/ajjtak"
android:id="#+id/ajjtak"
android:layout_gravity="right"
android:scaleType="centerCrop"
android:layout_below="#+id/navbharat"
android:layout_alignParentStart="true"
android:layout_row="0"
android:layout_column="1"/>
<ImageButton
android:layout_marginBottom="20dp"
android:layout_width="165dp"
android:layout_height="75dp"
android:background="#drawable/abpnews"
android:id="#+id/imageButton"
android:layout_gravity="left"
android:scaleType="centerCrop"
android:layout_below="#+id/ajjtak"
android:layout_alignParentStart="true"
android:layout_row="1"
android:layout_column="0"
/>
<ImageButton
android:layout_gravity="right"
android:layout_width="165dp"
android:layout_height="75dp"
android:background="#drawable/amarujala"
android:id="#+id/imageButton3"
android:layout_row="1"
android:layout_column="1"/>
<ImageButton
android:layout_marginBottom="20dp"
android:layout_width="165dp"
android:layout_height="75dp"
android:background="#drawable/dainikbhaskar"
android:id="#+id/imageButton5"
android:layout_row="2"
android:layout_column="0"/>
<ImageButton
android:layout_gravity="right"
android:layout_width="165dp"
android:layout_height="75dp"
android:layout_row="2"
android:layout_column="1"
android:background="#drawable/dainikjagran"
android:id="#+id/imageButton6" />
<ImageButton
android:layout_marginBottom="20dp"
android:layout_width="165dp"
android:layout_height="75dp"
android:layout_row="3"
android:layout_column="0"
android:background="#drawable/dainiknavjyoti"
android:id="#+id/imageButton7" />
<ImageButton
android:layout_gravity="right"
android:layout_width="165dp"
android:layout_height="75dp"
android:layout_row="3"
android:layout_column="1"
android:background="#drawable/googlenews"
android:id="#+id/imageButton8" />
<ImageButton
android:layout_marginBottom="20dp"
android:layout_width="165dp"
android:layout_height="75dp"
android:layout_row="4"
android:layout_column="0"
android:background="#drawable/aryan"
android:id="#+id/imageButton9" />
<ImageButton
android:layout_gravity="right"
android:layout_width="165dp"
android:layout_height="75dp"
android:layout_row="4"
android:layout_column="1"
android:background="#drawable/cnbc"
android:id="#+id/imageButton10" />
<ImageButton
android:layout_marginBottom="20dp"
android:layout_width="165dp"
android:layout_height="75dp"
android:layout_row="5"
android:layout_column="0"
android:background="#drawable/ddnews"
android:id="#+id/imageButton11" />
<ImageButton
android:layout_gravity="right"
android:layout_width="165dp"
android:layout_height="75dp"
android:layout_row="5"
android:layout_column="1"
android:background="#drawable/graminrajasthan"
android:id="#+id/imageButton12" />
<ImageButton
android:layout_marginBottom="20dp"
android:layout_width="165dp"
android:layout_height="75dp"
android:layout_row="6"
android:layout_column="0"
android:background="#drawable/haribhoomi"
android:id="#+id/imageButton14" />
<ImageButton
android:layout_gravity="right"
android:layout_width="165dp"
android:layout_height="75dp"
android:layout_row="5"
android:layout_column="1"
android:background="#drawable/ibn7"
android:id="#+id/imageButton15" />
</GridLayout>

GridLayout it doesn't need any scrollview for this. Elements in a gridview automatically arranged in a fixed scroll view so that you need not implement any additional scrollview to scroll it.

You can use this
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<Gridlayout>
your code
</Gridlayout>
</ScrollView>

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>

Image alignment issue using gridlayout

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>

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>

On different size of screens, Images are not aligned properly and size/clarity of image got reduced in android

I have created UI for android mobile 5.5 inch. But When I run it in different size mobiles image size/clarity reduced. Also images are not aligned properly.
Here is my output image for which I designed and how output looks like in different screens.
Please help me
1) how can I make proper alignment for any screen size
2) Image size also should be increased if screen size increased.
Output image
Here is my XML code:
<?xml version="1.0" encoding="utf-8"?>
<!--<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/container" android:orientation="vertical"
android:layout_width="fill_parent" android:layout_height="fill_parent"
android:background="#003300"
android:weightSum="1"
android:paddingTop="#dimen/abc_action_bar_default_height_material">-->
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/containerroot"
android:weightSum="1">
<TextView
android:layout_width="wrap_content"
android:layout_height="30dp"
android:layout_gravity="center"
android:text="Review Card"
android:textColor="#010101"
android:textSize="24sp"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:textStyle="bold"
android:gravity="center"
android:background="#1c59b9"
android:id="#+id/textView2" />
<ImageView
android:layout_width="50dp"
android:layout_height="wrap_content"
android:id="#+id/imageButton2"
android:layout_alignParentTop="true"
android:layout_alignBottom="#+id/textView2"
android:layout_marginLeft="20dp"
android:src="#drawable/revuename"/>
<ScrollView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:fillViewport="true"
android:id="#+id/scrollView"
android:layout_below="#+id/textView3"
android:layout_margin="5dp">
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/containerrviewcard" android:background="#fc5ca8ff"
android:weightSum="1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_gravity="center" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/closeFactsCard"
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:src="#drawable/close_image" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="SUBMIT"
android:id="#+id/submitReviewButton"
android:textStyle="bold"
android:textColor="#060906"
android:layout_alignParentBottom="true"
android:layout_toRightOf="#+id/imageView10"
android:layout_toEndOf="#+id/imageView10" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="1. The Food is:"
android:id="#+id/textView4"
android:layout_alignBottom="#+id/closeFactsCard"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_marginLeft="25dp"
android:layout_marginStart="40dp"
android:textStyle="bold"
android:textColor="#010101" />
<ImageView
android:layout_width="80dp"
android:layout_height="80dp"
android:id="#+id/tasty"
android:padding="5dp"
android:background="#drawable/whitebgcolorcircle"
android:layout_below="#+id/textView4"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_marginLeft="10dp"
android:layout_marginTop="10dp" />
<ImageView
android:layout_width="80dp"
android:layout_height="80dp"
android:id="#+id/healthy"
android:padding="5dp"
android:background="#drawable/whitebgcolorcircle"
android:layout_alignTop="#+id/tasty"
android:layout_toRightOf="#+id/tasty"
android:layout_toEndOf="#+id/tasty"
android:layout_marginLeft="20dp" />
<ImageView
android:layout_width="80dp"
android:layout_height="80dp"
android:id="#+id/servedfresh"
android:padding="5dp"
android:background="#drawable/whitebgcolorcircle"
android:layout_alignTop="#+id/healthy"
android:layout_toRightOf="#+id/healthy"
android:layout_toEndOf="#+id/healthy"
android:layout_marginLeft="20dp" />
<ImageView
android:layout_width="80dp"
android:layout_height="80dp"
android:id="#+id/valueformoney"
android:padding="5dp"
android:background="#drawable/whitebgcolorcircle"
android:layout_alignTop="#+id/servedfresh"
android:layout_toRightOf="#+id/servedfresh"
android:layout_marginLeft="20dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="2. The Menu:"
android:id="#+id/textView5"
android:textStyle="bold"
android:textColor="#010101"
android:layout_below="#+id/tasty"
android:layout_alignLeft="#+id/tasty"
android:layout_alignStart="#+id/tasty"
android:layout_marginTop="25dp"
android:layout_marginLeft="20dp" />
<ImageView
android:layout_width="80dp"
android:layout_height="80dp"
android:id="#+id/imageView"
android:padding="5dp"
android:background="#drawable/whitebgcolorcircle"
android:layout_below="#+id/textView5"
android:layout_alignLeft="#+id/textView5"
android:layout_alignStart="#+id/textView5"
android:layout_marginTop="20dp" />
<ImageView
android:layout_width="80dp"
android:layout_height="80dp"
android:id="#+id/imageView2"
android:padding="5dp"
android:background="#drawable/whitebgcolorcircle"
android:layout_alignTop="#+id/imageView"
android:layout_toLeftOf="#+id/imageView7"
android:layout_toStartOf="#+id/imageView7" />
<ImageView
android:layout_width="80dp"
android:layout_height="80dp"
android:id="#+id/imageView3"
android:padding="5dp"
android:background="#drawable/whitebgcolorcircle"
android:layout_above="#+id/textView6"
android:layout_toRightOf="#+id/servedfresh"
android:layout_toEndOf="#+id/servedfresh" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="3. The Catering team:"
android:id="#+id/textView6"
android:textStyle="bold"
android:textColor="#010101"
android:layout_below="#+id/imageView"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_marginTop="25dp"
android:layout_marginLeft="25dp" />
<ImageView
android:layout_width="80dp"
android:layout_height="80dp"
android:id="#+id/imageView5"
android:padding="5dp"
android:background="#drawable/whitebgcolorcircle"
android:layout_below="#+id/textView6"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_marginTop="20dp"
android:layout_marginLeft="20dp" />
<ImageView
android:layout_width="80dp"
android:layout_height="80dp"
android:id="#+id/imageView4"
android:padding="5dp"
android:background="#drawable/whitebgcolorcircle"
android:layout_alignTop="#+id/imageView5"
android:layout_centerHorizontal="true" />
<ImageView
android:layout_width="80dp"
android:layout_height="80dp"
android:id="#+id/imageView6"
android:padding="5dp"
android:background="#drawable/whitebgcolorcircle"
android:layout_alignTop="#+id/imageView4"
android:layout_toLeftOf="#+id/closeFactsCard"
android:layout_toStartOf="#+id/closeFactsCard" />
<ImageView
android:layout_width="80dp"
android:layout_height="80dp"
android:id="#+id/imageView7"
android:padding="5dp"
android:background="#drawable/whitebgcolorcircle"
android:layout_below="#+id/imageView4"
android:layout_toRightOf="#+id/imageView4"
android:layout_toEndOf="#+id/imageView4" />
<ImageView
android:layout_width="80dp"
android:layout_height="80dp"
android:id="#+id/imageView8"
android:padding="5dp"
android:background="#drawable/whitebgcolorcircle"
android:layout_below="#+id/imageView5"
android:layout_toLeftOf="#+id/imageView4"
android:layout_toStartOf="#+id/imageView4" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="4. The Food court:"
android:id="#+id/textView7"
android:textStyle="bold"
android:textColor="#010101"
android:layout_below="#+id/imageView8"
android:layout_alignLeft="#+id/imageView5"
android:layout_alignStart="#+id/imageView5"
android:layout_marginTop="10dp" />
<ImageView
android:layout_width="80dp"
android:layout_height="80dp"
android:id="#+id/imageView9"
android:padding="5dp"
android:background="#drawable/whitebgcolorcircle"
android:layout_above="#+id/submitReviewButton"
android:layout_alignLeft="#+id/textView6"
android:layout_alignStart="#+id/textView6" />
<ImageView
android:layout_width="80dp"
android:layout_height="80dp"
android:id="#+id/imageView10"
android:padding="5dp"
android:background="#drawable/whitebgcolorcircle"
android:layout_alignTop="#+id/imageView9"
android:layout_toRightOf="#+id/imageView8"
android:layout_toEndOf="#+id/imageView8" />
<ImageView
android:layout_width="80dp"
android:layout_height="80dp"
android:id="#+id/imageView11"
android:padding="5dp"
android:background="#drawable/whitebgcolorcircle"
android:layout_above="#+id/submitReviewButton"
android:layout_alignLeft="#+id/imageView6"
android:layout_alignStart="#+id/imageView6" />
</RelativeLayout>
</ScrollView>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="Alliance University Camous Food court"
android:id="#+id/textView3"
android:background="#19d1e0"
android:textStyle="bold"
android:textColor="#020202"
android:gravity="center"
android:layout_alignRight="#+id/scrollView"
android:layout_alignEnd="#+id/scrollView"
android:layout_below="#+id/textView2"
android:layout_alignLeft="#+id/scrollView"
android:layout_alignStart="#+id/scrollView"
android:layout_margin="2dp" />
</RelativeLayout>

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.

tic tac toe game in android screen size change - android

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.

Related

Scrolling in GridLayout

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

Image alignment issue using gridlayout

Android ListView Item Layout getting screwed up

On different size of screens, Images are not aligned properly and size/clarity of image got reduced in android

Categories

Resources