I'm new on Android and I have a silly problem with my application design.
My problem is that I want to make a grid as shown in this example http://developer.android.com/guide/tutorials/views/hello-gridview.html
but I want to create a texbox below the grid and a button after the grid. The textbox has to be always at the top and the button always at the bottom. I have done this:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/textView1"
android:layout_marginLeft="20px"
android:text="#string/intro"
android:layout_marginTop="20px"
android:textSize="35px">
</TextView>
<GridView
android:id="#+id/gridView1"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
android:numColumns="auto_fit"
android:verticalSpacing="10dp"
android:horizontalSpacing="10dp"
android:columnWidth="90dp"
android:stretchMode="columnWidth"
android:gravity="center"
</GridView>
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="#string/Button_create"
android:textSize="18px">
android:id="#+id/button1">
</Button>
</LinearLayout>
But with this code I have the textbox at the top but not the button at the bottom always. It appears when the grid finish. Also I noticed that in the example there're 2 o 3 columns inside the grid as I want but with this code it only appears one and I do not know why.
Could you help me?
PS. For who will edit the code zone, could you explain me what I have to put when a line ends but it continues the code? Thanks and sorry for your time editing my post
You should put an android:layout_gravity value of e.g. 1 to the GridView which you have determined to fill the height of the parent and then for the Button, put value of 0.5.
Related
I have a GridView within FrameLayout as shown below:
As seen, numbers are aligned closer to left side of the screen. I have tried to bring numbers closer so that i could solve the problem, but failed. Playing around with stretchMode like 'columnWidth' and 'none' couldn't solve my problem. Please suggest me any way that i can fit numbers within background white area.
.xml file:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical" >
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<GridView
android:id="#+id/gridview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/paperbck"
android:columnWidth="30dp"
android:gravity="center"
android:horizontalSpacing="20dp"
android:numColumns="4"
android:stretchMode="columnWidth"
android:verticalSpacing="20dp" />
</FrameLayout>
</LinearLayout>
Try giving left margin to the Grid View.
I have a GridView , which displays pictures of alphabets
what happens is , every time in the last row there are less no of alphabets.
and the last row is left aligned , which doesn't look good
so I want make the last row to be in centre,
any suggestion
My GridView code:
<?xml version="1.0" encoding="utf-8"?>
<GridView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/grid_view"
android:layout_width="fill_parent"
android:layout_marginRight="20dp"
android:layout_marginTop="20dp"
android:layout_height="fill_parent"
android:numColumns="auto_fit"
android:columnWidth="70dp"
android:horizontalSpacing="10dp"
android:verticalSpacing="20dp"
android:gravity="center"
android:stretchMode="spacingWidthUniform" >
</GridView>
I have the same problem, but I managed this using two gridviews, with first gridview displaying the rows except the last row, with the second gridview displaying the last row. This is the simplest way to achieve what I need.
I have not find a better solution. Looking forward to see a nice and simple way also.
you could try using invisible elements, it not the most efficient solution but is simple, you can put two elements, one at the start, one at the end of the row and make them invisible
For those who are still looking for a solution for this here's my take for this, create a TableLayout and, and for each TableRow set its weigth to android:weightSum="4" and dont forget to add android:gravity="center"
For complete code check this gist for reference.
You could center the grid row inside of a relative layout and then add android:layout_centerHorizontal="true" to the alphabet ImageView's. Assuming that they're ImageView's.
So your GridView would be wrapped in something like this:
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_cotent"
android:orientation="horizontal" >
<GridView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/grid_view"
android:layout_width="fill_parent"
android:layout_marginRight="20dp"
android:layout_marginTop="20dp"
android:layout_height="fill_parent"
android:numColumns="auto_fit"
android:columnWidth="70dp"
android:horizontalSpacing="10dp"
android:verticalSpacing="20dp"
android:gravity="center"
android:stretchMode="spacingWidthUniform" >
</GridView>
</RelativeLayout>
And the individual alphabet images would need android:layout_centerHorizontal="true" like this:
<ImageView
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_centerHorizontal="true"
</ImageView>
I have a problem with grid view layout on Android. I can't find solution to eliminate extra space in grid view.I mention the code fro gridview as below :-
<?xml version="1.0" encoding="utf-8"?>
<GridView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/gridview"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:alwaysDrawnWithCache="true"
android:background="#android:color/background_dark"
android:clipChildren="true"
android:columnWidth="100dp"
android:gravity="center_horizontal"
android:horizontalSpacing="2dp"
android:numColumns="auto_fit"
android:padding="0dp"
android:scrollingCache="true"
android:smoothScrollbar="true"
android:stretchMode="columnWidth"
android:verticalSpacing="2dp" />
now my application's grid view look like this
As shown there is extra space which i want to remove it and it can look like this:-
So please provide me solution..
Thanks in advance..
You need to alter the value for android:columnWidth attribute for all layout types [hdpi,mdpi,xhdpi etc.] supported by your application.
You can use :
android:listSelector="#null"
to eliminate extera space
and try this , for 3 column cell:
android:numColumn = "3"
What's up guys, just a quick question. I'm trying to get my GridView to be center inside it's parent which is a RelativeLayout. I want the entire grid to be centered, not the items. From what I'm seeing, the default alignment is "left-aligned" and it's difficult to change this behavior. I tried a few other solutions suggested in other SO questions found here as well as couple others. This seems like something trivial, and that it shouldn't be such a headache. I tried wrapping the GridView inside a LinearLayout with horizontal orientation but to no avail.
The only semi workaround I've found was to mess around with the left and right padding, but even that approach leaves way too much empty space at the sides.
This image is before I changed the padding
This image is after I messed around with padding, but again..seems a bit hackish and not really what I'm looking for. I'm looking for flush center without the extra padding on the sides
Another reason why this approach is impractical is due to the extra space, the selector appears to be too large..as seen in the image below
Any help on this would great, thanks as always!
Code for the layout
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/weatherFragRoot"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<GridView
android:id="#+id/menuGridView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:background="#drawable/weathermate_lv_background"
android:gravity="center_horizontal"
android:listSelector="#drawable/list_selector"
android:numColumns="3"
android:paddingLeft="30dp"
android:paddingRight="5dp"
android:stretchMode="columnWidth"
android:visibility="invisible" >
</GridView>
</RelativeLayout>
EDIT
As suggest by user, I centered each grid item row inside it's own relative layout..and that gave me the result I was looking for! Here is the updated XML files to reflect the solution
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/weatherFragRoot"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<GridView
android:id="#+id/menuGridView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:background="#drawable/weathermate_lv_background"
android:gravity="center_horizontal"
android:listSelector="#drawable/list_selector"
android:numColumns="3"
android:stretchMode="columnWidth"
android:visibility="invisible" >
</GridView>
</RelativeLayout>
This is the layout for the grid row. As you can see, what worked for me was setting the orientation to Horizontal and adding android:layout_centerHorizontal="true" to each child.
<?xml version="1.0" encoding="utf-8"?>
<ImageView
android:id="#+id/menuItem"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_centerHorizontal="true"
android:background="#android:drawable/ic_menu_add" >
</ImageView>
<TextView
android:id="#+id/tvMenuItemName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/menuItem"
android:layout_centerHorizontal="true"
android:text="Option"
android:textColor="#android:color/white" >
</TextView>
</RelativeLayout>
The answear is to center image and text views in each grids as they have separate layout :)
I have a gridview that is inflated by multiple buttons. I used just a gridview and it worked fine. The grid was in correct order and was centered. Although, I wanted to add a button below the grid of buttons that was different and centered. To do this I decided to section off the gridview and then add the button (therefore it wouldn't be affected by the gridview). I tried the following code to seperate the views:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TableLayout
android:id="#+id/tbl_gridcreator"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center">
<TableRow>
<GridView
android:id="#+id/gridview"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:columnWidth="150px"
android:numColumns="7"
android:stretchMode="spacingWidthUniform"
android:gravity="center">
<!--
android:horizontalSpacing="0px" -->
</GridView>
</TableRow>
<TableRow android:gravity="center">
<Button android:text="Submit"
android:id="#+id/submit"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
</Button>
</TableRow>
</TableLayout>
</LinearLayout>
The problem is that this code smushes the gridview to the left and oddly it flips it (Position 0 is ont he bottom right and the last button is on the top left pushed off screen). The following image shows what is the result:
Any idea why its pushed to the left and flipped? Or maybe how I could have just the Gridview with the button on the bottom?
I figured it out. Not sure why I was using a TableLayout to encapsulate the GridView and the Button but I fixed it by removing the TableLayout and just having the the GridView above the Button in a RelativeLayout instead of a LinearLayout. There still some bugs but the most of the issue has been solved.