I have an Android app in which I am trying to center a grid view in a linear layout. I don't have to use the linear layout, but I prefer to if possible.
I want to set the horizontal spacing (space between columns) in the grid view, as well as center the grid view in the parent.
When I use android:stretchMode="none" in the XML, the horizontal spacing works. However when I do this the grid view is left aligned. Using android:stretchMode="columnWidth" the grid view is centered, but the horizontal spacing does not work.
How can I have both?
Sample of my XML below (horizontal spacing works, centering does not):
<LinearLayout 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:orientation="vertical"
android:gravity="center_horizontal">
<GridView
android:id="#+id/myList"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:numColumns="auto_fit"
android:horizontalSpacing="1dp"
android:columnWidth="400dp"
android:stretchMode="none"
android:layout_gravity="center_horizontal">
</GridView>
</LinearLayout>
If you want to center a component as GridView, the best way is to use RelativeLayout.
You could use layout_centerInParent to center both horizontal & vertical or layout_centerHorizontal to center horizontal only.
For instance:
<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" >
<GridView
[...]
android:layout_centerInParent="true"
android:layout_centerHorizontal="true" >
</GridView>
</RelativeLayout>
Related
I have a LinearLayout with vertical orientation. All of the children's height is set to wrap_content. I would like to make all children have the same height, the height of the biggest child. Is this possible to do?
To distribute sub views evenly in LinearLayout, The official docs give a standard way:
To create a linear layout in which each child uses the same amount of space on the screen, set the android:layout_height of each view to "0dp" (for a vertical layout) or the android:layout_width of each view to "0dp" (for a horizontal layout). Then set the android:layout_weight of each view to "1".
If you want to do to make that item follows its spaces, you can use, layout:weight
For example here,
<LinearLayout
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:orientation="vertical"/>
<LinearLayout
android:layout_height="0dp"
android:layout_width="match_parent"
android:orientation="vertical"
android:weight="1"/>
<LinearLayout
android:layout_height="0dp"
android:layout_width="match_parent"
android:orientation="vertical"
android:weight="1"/>
</LinearLayout>
i am developing an android app where i am showing day wise channel schedule (multiple rows).
now in this i have to provide both vertical and horizontal scrollability.
vertical scrollability will be normal , but horizontal scrollability should be synchronized
that is when user scrolls horizontally all other rows should also be scrolled in a sync.
i tried using table layout but its not going good with my requirement and i have also tried TwoWayView but i am not able to sync the horizontal scrolling.
i would like to know i anyone have faced/solved the similar situation.
Any leads on this is highly appreciated.
xml for vertical and horizontal Scrolling :-
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/vertical_scroll_view2">
<HorizontalScrollView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/horizontal_scroll_view2">
<LinearLayout
android:layout_height="wrap_content"
android:layout_width="910dp"
android:id="#+id/scheduleContainer"
android:orientation="vertical"
/>
</HorizontalScrollView>
</ScrollView>
.....
xml for TwoWayView:-
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/weekday"
android:layout_height="fill_parent"
android:layout_width="40dp"
android:textSize="12dp"
android:textStyle="bold" />
<com.mobiotics.tvb_stb.utilityclasses.TwoWayView
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/hlist"
style="#style/TwoWayView"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_toRightOf="#id/weekday"
android:scrollbars="none"
android:drawSelectorOnTop="false"
tools:context="com.mobiotics.tvb_stb.activity.HomeScreenActivity" />
</RelativeLayout>
i am adding twoway list to linear layout .
If you can have a ListView, I would start there. Just drop the ListView into a HorizontalScrollView. Make sure to set the width of the HorizontalScrollView to wrap_content. I noticed you have it set to fill_parent.
I have a GridView:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_margin="5dp"
android:layout_weight="1"
android:orientation="horizontal" >
<GridView
android:id="#+id/gridView1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#color/DarkSlateGray"
android:layout_weight="1"
android:columnWidth="200dp"
android:gravity="center"
android:numColumns="auto_fit"
android:stretchMode="none" >
</GridView></LinearLayout>
I want to add an ImageView on top of this.
Tried <include>:
<include layout="#layout/connection"/>
connection.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/rl_connection"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<ImageView
android:src="#drawable/globe_connected_icon_48"
android:layout_width="wrap_content"
android:layout_height="wrap_content" /></RelativeLayout>
But result looks like this:
Is there a way to show it on top of the GridView like this:
Change the Linear Layout to a Relative Layout, then have both the grid view and the image view align to the top left of the parent. Make sure the the image view is below the grid view so that it appears on top.
Change your LinearLayout orientation to vertical and place the ImageView above the GridView code. For LinearLayout you can provide attributes to define where in the layout a view will be, such attributes: gravity and layout_gravity. RelativeLayout provides similar attributes: ex.layout_alignParentTop. Also, use android:background="#null" in your ImageView if you want the white boarder around your image to be transparent.
I have GridView:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/frag_books_grid_view_layout"
android:orientation="vertical">
<GridView
android:cacheColorHint="#color/bg_default"
android:listSelector="#drawable/list_selector_background"
android:id="#+id/frag_books_grid_view"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:columnWidth="120px"
android:gravity="center"
android:horizontalSpacing="15dp"
android:scrollbars="none"
android:stretchMode="columnWidth"
/>
</LinearLayout>
And single item (placed in cell of this grid):
<ListView
xmlns:android="http://schemas.android.com/apk/res/android"
android:cacheColorHint="#color/bg_default"
android:scrollbars="none"
android:listSelector="#drawable/list_selector_background"
android:layout_gravity="center_vertical|left"
android:gravity="center_vertical|left"
android:padding="15dp"
android:id="#+id/frag_book_list_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:verticalSpacing="5dp"/>
How it looks: http://i.imgur.com/rhZiu.png
Everything is fine with blue selection, but the contents of the cell is not centered inside of it.
This picture explains what I want: http://i.imgur.com/OumWu.png
Besides it's not recommended to have nested scrollable components, you have the dimensions of list view set to match_parent. So it's not possible to center, since it's already occupying all available space.
If you want to center, you first have make the listView smaller (setting fixed size). And then use gravity="center" on the container. You also can apply a uniform padding to the container, this will also make the listView look centered.
I've got inflating vertical linear layout in my gridView.
When I display only the vertical layout element, there's no space between the two images of my layout.
But when I display the grid, there's a spacing between two grid lines and between my two images (verticaly) in each grid box.
How can I remove these spaces ?
Here is my main layout wich contains my grid :
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_height="wrap_content"
android:layout_width="wrap_content" android:layout_gravity="center">
<GridView android:id="#+id/GridView01"
android:verticalSpacing="0px"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:numColumns="3"
android:horizontalSpacing="0px"
android:stretchMode="none"
android:columnWidth="90px"></GridView>
</LinearLayout>
Here is my vertical layout of each elements grid :
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout android:id="#+id/LayoutP"
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView android:id="#+id/ImageView01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/greyr"></ImageView>
<ImageView android:id="#+id/ImageView02"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/greyp"></ImageView>
</LinearLayout>
Thanks in advanced.
Finally, I've found a "hack". It consists in setting a negative margin for the bottom of the first image, and the same negative margin for the top of the second one, as well as setting negative for the verticalSpacing grid.