Scrolling in GridLayout

Scrolling in GridLayout - android

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>

Related

Grid layout extra space

I am trying to make an android Calculator app but however i am stuck on one thing, there is some extra space coming up while using grid layout.
Now i know i have used match parent value for the layout height and width which might be the reason for the extra spacing in the image.
Since , i am new to android and i am just learning more and more of android, could anyone let me know , how can i evenly distribute those buttons on the grid layout?
Code
<?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:id="#+id/constraintLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context="com.example.tilak.myfirstapplication.MainActivity">
<LinearLayout
android:id="#+id/linearLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
app:layout_constraintBottom_toTopOf="parent"
app:layout_constraintEnd_toStartOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<EditText
android:id="#+id/editText3"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:height="225dp"
android:ems="10"
android:layout_gravity="fill_horizontal"
android:inputType="textMultiLine"
tools:layout_editor_absoluteX="104dp"
tools:layout_editor_absoluteY="207dp" />
<GridLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:rowCount="5"
android:columnCount="4"
android:background="#ff0000"
tools:layout_editor_absoluteX="8dp"
tools:layout_editor_absoluteY="8dp">
<Button
android:id="#+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button"
android:layout_row="0"
android:layout_column="0"
tools:layout_editor_absoluteX="136dp"
tools:layout_editor_absoluteY="100dp" />
<Button
android:id="#+id/button5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button"
android:layout_row="0"
android:layout_column="1"
tools:layout_editor_absoluteX="116dp"
tools:layout_editor_absoluteY="289dp" />
<Button
android:id="#+id/button6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button"
android:layout_row="0"
android:layout_column="2"
tools:layout_editor_absoluteX="129dp"
tools:layout_editor_absoluteY="255dp" />
<Button
android:id="#+id/button7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button"
android:layout_row="0"
android:layout_column="3"
tools:layout_editor_absoluteX="41dp"
tools:layout_editor_absoluteY="180dp" />
<Button
android:id="#+id/button8"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button"
android:layout_row="1"
android:layout_column="0"
tools:layout_editor_absoluteX="64dp"
tools:layout_editor_absoluteY="259dp" />
<Button
android:id="#+id/button9"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_row="1"
android:layout_column="1"
android:text="Button" />
<Button
android:id="#+id/button10"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button"
android:layout_row="1"
android:layout_column="2"
tools:layout_editor_absoluteX="129dp"
tools:layout_editor_absoluteY="217dp" />
<Button
android:id="#+id/button11"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_row="1"
android:layout_column="3"
android:text="Button"
tools:layout_editor_absoluteX="129dp"
tools:layout_editor_absoluteY="168dp" />
<Button
android:id="#+id/button12"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_row="2"
android:layout_column="0"
android:text="Button" />
<Button
android:id="#+id/button13"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_row="2"
android:layout_column="1"
android:text="Button" />
<Button
android:id="#+id/button14"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_row="2"
android:layout_column="2"
android:text="Button" />
<Button
android:id="#+id/button15"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_row="2"
android:layout_column="3"
android:text="Button" />
<Button
android:id="#+id/button16"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_row="3"
android:layout_column="0"
android:text="Button" />
<Button
android:id="#+id/button17"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_row="3"
android:layout_column="1"
android:text="Button" />
<Button
android:id="#+id/button18"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_row="3"
android:layout_column="2"
android:text="Button" />
<Button
android:id="#+id/button19"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_row="3"
android:layout_column="3"
android:text="Button" />
<Button
android:id="#+id/button20"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_row="4"
android:layout_column="0"
android:text="Button" />
<Button
android:id="#+id/button21"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_row="4"
android:layout_column="1"
android:text="Button" />
<Button
android:id="#+id/button22"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_row="4"
android:layout_column="2"
android:text="Button" />
<Button
android:id="#+id/button23"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_row="4"
android:layout_column="3"
android:text="Button" />
</GridLayout>
</LinearLayout>
</android.support.constraint.ConstraintLayout>

I suggest using the weight attribute to make the child views share the space equally. There's another post here on StackOverflow with a great answer that covers the subject:
https://stackoverflow.com/a/30245753/2281718
In short, just set the width to 0dp and add the android:layout_columnWeight="1" for all children
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_columnWeight="1"
...
/>

Use place holder like this.
This is not exact XML.
<button 1/>
<textview weight=1>
<button 2/>
<textview weight=1>
<button 3/>
<textview weight=1>
<button 4/>

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>

ImageButtons overlap in GridLayout, but don't want this

I am having problems with a GridLayout. In the layout below, phone_image and voip_image overlap and I don't want them to. phone_image is in column 0 and voip_image is in column 2.
SSCCE on Github
https://github.com/emnrd-ito/LayoutDemo
<HorizontalScrollView
android:id="#+id/container_scroll_view"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<GridLayout xmlns:mapbox="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/individual_gridlayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:alignmentMode="alignBounds"
android:columnCount="4"
android:columnOrderPreserved="false"
android:rowCount="7">
<ImageView
android:id="#+id/division_logo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="0"
android:layout_columnSpan="3"
android:layout_margin="10dp"
android:layout_row="0"
android:layout_rowSpan="3"
android:background="#null"
android:layout_gravity="center_horizontal"
android:src="#mipmap/ic_launcher" />
<TextView
android:id="#+id/employee_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_column="3"
android:layout_margin="10dp"
android:layout_row="0"
android:text="Nobody Lastname"
tools:text="name" />
<TextView
android:id="#+id/division"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="3"
android:layout_margin="10dp"
android:layout_row="1"
android:text="My Division"
tools:text="division" />
<TextView
android:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="3"
android:layout_margin="10dp"
android:layout_row="2"
android:text="My Title"
tools:text="position" />
<TextView
android:id="#+id/address"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="3"
android:layout_margin="10dp"
android:layout_row="3"
android:text="123 Sesame St."
tools:text="address" />
<TextView
android:id="#+id/city_state"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="3"
android:layout_margin="10dp"
android:layout_row="4"
android:text="mycity, mystate"
tools:text="city,state" />
<TextView
android:id="#+id/phone_number"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="3"
android:layout_margin="10dp"
android:layout_row="5"
android:text="(555) 555-5555"
tools:text="phone" />
<TextView
android:id="#+id/email"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="1"
android:layout_columnSpan="3"
android:layout_margin="10dp"
android:layout_row="6"
android:text="someone#somewhere.com"
tools:text="email" />
<ImageButton
android:id="#+id/directions_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="0"
android:layout_row="4"
android:background="#null"
android:src="#drawable/ic_directions_enabled" />
<ImageButton
android:id="#+id/phone_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="0"
android:layout_row="5"
android:background="#null"
android:src="#drawable/ic_phone_enabled" />
<ImageButton
android:id="#+id/voip_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="2"
android:layout_row="5"
android:background="#null"
android:src="#drawable/ic_voip_enabled" />
<ImageButton
android:id="#+id/email_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="0"
android:layout_row="6"
android:background="#null"
android:src="#drawable/ic_email_enabled" />
</GridLayout>
</HorizontalScrollView>
Edit:
I tried using Space like so:
<android.support.v4.widget.Space
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:layout_column="1"
android:layout_row="5"/>
It seems to insert about 1/2 column, whereas using the blank image inserts a whole column. There may be parameters to play within the Space component though.

You can try to give android:maxWidth property to both voipImage and phoneImage ImageButtons, like this:
<ImageButton
android:id="#+id/phone_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="0"
android:layout_row="5"
android:maxWidth="96dp"
android:background="#null"
android:src="#drawable/ic_phone_enabled" />
<ImageButton
android:id="#+id/voip_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="2"
android:layout_row="5"
android:maxWidth="96dp"
android:background="#null"
android:src="#drawable/ic_voip_enabled" />
Update
The above changes are not necessary. I think that to solve your problem you can simply change the layout_column property of voip_image like this:
android:layout_column="1"
Hope this can help

One solution is to create a blank image and put it in the drawable folder.
Then use it to take up space in the layout like so:
<ImageButton
android:id="#+id/phone_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="0"
android:layout_row="5"
android:background="#null"
android:src="#drawable/ic_phone_enabled" />
<ImageButton
android:id="#+id/blank_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="1"
android:layout_row="5"
android:background="#null"
android:src="#drawable/ic_blank" />
<ImageButton
android:id="#+id/voip_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="2"
android:layout_row="5"
android:background="#null"
android:src="#drawable/ic_voip_enabled" />

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.

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.

Scrolling in GridLayout - android

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>

Related

Grid layout extra space

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

ImageButtons overlap in GridLayout, but don't want this

tic tac toe game in android screen size change

Android ListView Item Layout getting screwed up

Categories

Resources