How to center GridView on the screen - android

How to center GridView on the screen.I have GridView with 4 items as 2 items per row. I try to center the GridView inside the Relative layout using padding in relative layout. But I developed application for multiple screens.So I think hardcoded padding is not good practice. How to center this Grid view on mulitple screens?
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/gridrelativelayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingTop="60dp"
android:paddingBottom="60dp"
android:paddingLeft="150dp"
android:paddingRight="150dp"
tools:context=".MainMenuActivity" >
<GridView
android:id="#+id/gridview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#F9F9F9"
android:gravity="center"
android:horizontalSpacing="50dp"
android:numColumns="2"
android:stretchMode="columnWidth"
android:verticalSpacing="50dp"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true" />
</RelativeLayout>
Updated Code:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/gridrelativelayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="150dp"
android:paddingRight="150dp"
tools:context=".MainMenuActivity" >
<GridView
android:id="#+id/gridview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:columnWidth="20dp"
android:background="#FF0000"
android:gravity="center"
android:horizontalSpacing="50dp"
android:numColumns="2"
android:verticalSpacing="50dp"
android:layout_centerInParent = "true"
/>
</RelativeLayout>
This updated code centers gridView on screen properly. But see,I hardcoded padding for left ad Right in Relative layout.As I want to support to multiple scrrens, I want to make this padding as dynamic using following code.But It not works.
RelativeLayout gridrelativelayout = (RelativeLayout)findViewById(R.id.gridrelativelayout);
int pad=gridrelativelayout.getWidth()/3;
gridrelativelayout.setPadding(pad, 0, pad, 0);

Apply RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
and For GridView
android:layout_centerInParent = "true"

Use android:layout_centerInParent = "true" for GridView. This surely works...

If want write best app to multiple screen devices, so you need read this:
Supporting Multiple Screens
and it is very useful to you:
Supporting Different Screens

Use
android:layout_centerHorizontal = "true"
for GridView.

Related

How to set layout height to one screen height except actionbar and status bar, in scrollview

I have a layout in a scrollview and I add another layout to the end of the first one. Actually I am trying to make a one page design and the rest of the other views will appear after scrolling. I tried to put linearlayout1 and linearlayout2 to another view but it didn't work. Also I set scrollview android:fillViewport="true" but it made the scrollview in screen size.
I've added an image of what I want, but it could also be one view, I mean lin1 and lin2 together.
I can set width and height for one phone but I want to do this for each screen. For example like yahoo weather app. They have done one layout for first view and start another view from the end of screen. I tried so many things but I couldn't imagine how to put layouts. Could you help me?
Thanks for your help
Here is what I want
Here is I tried:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/scroller"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:id="#+id/linearlayout1"
android:background="#android:color/holo_purple"
android:layout_width="match_parent"
android:layout_height="350dp" >
<TextView
android:text="LinearLayout1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
<LinearLayout
android:id="#+id/linearlayout2"
android:background="#android:color/holo_blue_bright"
android:layout_width="match_parent"
android:layout_height="250dp"
android:orientation="vertical">
<TextView
android:text="LinearLayout2"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
<LinearLayout
android:background="#android:color/holo_green_light"
android:layout_width="match_parent"
android:layout_height="350dp">
<TextView
android:text="LnearLayout3"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
</LinearLayout>
</ScrollView>
But unfortunately I couldn't configure this for each screen size.
enter image description here
Just try this.
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_below="#+id/action_bar"
Instead of hardcoding the height as in:
android:layout_height="250dp"
Set android:layout_height="0dp" and use
android:layout_weight="25"
And also in the other layout use weight. Weight works like this, if you have 3 components in your container, set the weights to let's say 1, 2 and 3 => they will take in that order 1/6, 2/6 and 3/6 of the container. 6 being the sum of 1,2,3. So here instead of using heights as 350 and 250, you can set them to 0 and use weights 2.5 and 3.5 or 25 and 35.

Android get screen size in XML

Hey I have a scrollview from the top of the screen to a bit before the bottom of the screen because this is where my ad banner takes place. I want to have some pixels in between these elements ( between buttons and banner ) due the google policy. So far I did this with setting a value in dp. But as devices differ, this results in having a huge gap between the ad and the scrollview on some hi-res phones. This is why I'd like to set
<ScrollView
android:layout_height="(Screen_height-banner)-5px"
(of course I didn't even try it in this way, as this is no code, but I think it sums up pretty well what I plan to do)
Thanks a lot for your answers!
You can't query screen size in XML since it doesn't run at runtime, you can do this by using RelativeLayout and use alignments and margins.
in your case if Screen_height-banner represent a screen height and you want to position it at bottom and make a 5dp separator from end your XML would be
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<ScrollView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:layout_marginBottom="5dp">
</RelativeLayout >
If you need to scale the scroll view instead of position it you xml would be
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:padding_bottom="5dp">
<ScrollView
android:layout_width="wrap_content"
android:layout_height="fill_parent">
</RelativeLayout >
You can user weight parameter. If you set weight of both layouts 0.5, this will share screen width equals for these layouts.
<LinearLayout
android:id="#+id/alt_panel"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/orta_panel" >
<LinearLayout
android:id="#+id/altsol_panel"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="0.5"
android:gravity="center_horizontal"
android:orientation="vertical" >
</LinearLayout>
<LinearLayout
android:id="#+id/altsag_panel"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="0.5"
android:gravity="center_horizontal"
android:orientation="vertical" >
</LinearLayout>
</LinearLayout>
Use a RelativeLayout, set a Margin of 5px and use layout_above
If the following codes don't work for you, you're probably using a newer version of something, and you could try using android:bottom="80dp" instead of android:layout_marginBottom="5dp"

Android layout orientation issue

I need to create new activity in my project, and I want to show pictures. The layout that I want to create is like that.
All heights must have "wrap_content" property.
Which layouts I must use?
Try this:
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal" >
<GridView
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="66" >
</GridView>
<GridView
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="33" >
</GridView>
</LinearLayout>
<GridView
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1" >
</GridView>
</LinearLayout>
Note: you can use any other View instead of GridView just make sure the attributes are the same.
I think you want to create an StaggeredGridView.
StaggeredGridView is a modified version of Android’s experimental StaggeredGridView. The StaggeredGridView allows the user to create a GridView with uneven rows similar to how Pinterest looks. Includes own OnItemClickListener and OnItemLongClickListener, selector, and fixed position restore.
Use this library.
Hope this helps :)
Why do you insist on using wrap_content?
You have "fixed" width of boxes (66% and 33%). You can use sp/dp units to achieve this, I am sure. With some tweaking, of course.
For more info regarding this topic go to
http://developer.android.com/guide/practices/screens_support.html
and
What is the difference between "px", "dp", "dip" and "sp" on Android?
Consider using a TableLayout or a GridView and use the attribute layout_weight on the children.
Your first child (66%) can have a layout weight of 2, the second (33%) a layout of 1.
Then the first child will occupy 2/3 of the width (66%) and the second child 1/3, that is 33%.
And use the layout_span attribute to expand the last view on the two columns.
For example :
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:stretchColumns="*" >
<TableRow>
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="2"/>
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"/>
</TableRow>
<TableRow>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_span="2" />
</TableRow>
</TableLayout>
Also see that question for an explanation on layout_weight.

How to divide a screen equally between a graph and a listview

I'd like the top half of my screen to be a graph, and the bottom part to be a listview. Both parts should occupy half of the screen.
With the setup I have now it only works if there are like 10 or more items in the listview. If there are less, the listview will take up less than half the screen. If there's one item in the list, it takes up even less the the height of one list item.
Based on the solution of ANDROID : split the screen in 2 equals parts with 2 listviews this is what I've got now:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dip"
android:layout_weight="0.5"
android:id="#+id/graph_container"
android:orientation="vertical">
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dip"
android:layout_weight="0.5"
android:orientation="vertical">
<ListView
android:id="#android:id/list"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:drawSelectorOnTop="false"/>
</LinearLayout>
</LinearLayout>
I add the graph dynamically:
((LinearLayout) findViewById(R.id.graph_container))
.addView(chart, 0,
new LinearLayout.LayoutParams(
ViewGroup.LayoutParams.MATCH_PARENT,
ViewGroup.LayoutParams.MATCH_PARENT));
Does anyone know how I should do this?
UPDATE
So, the essential part was changing the layout_height to math_parent. Removing the parent linear layout of the listview was optional, but definitely cleaner.
Remove container that listView stays in, change the weight to 1 and set height of the main container to match_parent. Here is an example:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:id="#+id/graph_container"
android:orientation="vertical">
</LinearLayout>
<ListView
android:id="#android:id/list"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:fillViewport="true"
android:drawSelectorOnTop="false" >
</ListView>
You just have to change your first LinearLayout height to match_parent
Try to use weight values as digits 1:1 fox example.
Setting the android:weightSum="1" and android:layout_height="match_parent" for the parent LinearLayout should work.

GridView item position

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.

Categories

Resources