How to cenralize last uneven row in GridView in android? - android

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>

Related

GridView element selection has different size

I've a GridView with three columns and a fixed height.
Everything seems to be fine but when I click on an element, the selector is bigger than the clicked element.
In the image, as you can see, the fifth element is selected, and the selection goes over the elemen boundaries.
The GridView layout is pretty simple
<GridView
android:id="#+id/gridview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:numColumns="3"
android:stretchMode="columnWidth" />
and also the item is pretty straightforward
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="#dimen/row_height"
android:gravity="center" >
<ImageView
android:id="#+id/img"
android:layout_width="#dimen/width"
android:layout_height="#dimen/height"
android:layout_gravity="center"
android:background="#color/r1" />
</LinearLayout>
What am I missing?
maybe you are using and old android theme on that activity
Try using an holo theme (#android:style/Theme.Holo.Light.NoActionBar) and check if that solve your problem, it should.

Gridview with layout (imageview + imagebutton) for every value

Is it possible to make a gridview that has instead of a grid of pictures, a grid of pictures with a small imagebutton below every one of them?
Short answer: Yes. You can have an ImageView and an ImageButton in a GridView.
Long answer:
You will naturally have to create a custom GridView for that purpose.
For example:
Create an XML which will hold the container GridView, say, grid.xml:
<GridView
android:id="#+id/gridFriends"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:clipChildren="true"
android:columnWidth="100dp"
android:fastScrollEnabled="true"
android:gravity="center"
android:numColumns="auto_fit"
android:stretchMode="columnWidth" >
</GridView>
And, to define the contents of the GridView, create another XML layout which will hold the ImageView and the ImageButton. Say, grid_items.xml:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/mainContainer"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:padding="5dp" >
<FrameLayout
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:gravity="center" >
<ImageView
android:id="#+id/imgProfilePicture"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:adjustViewBounds="true"
android:scaleType="centerCrop"
android:src="#null" />
<ImageButton
android:id="#+id/imgbtnDemo"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom|center"
android:background="#null"
android:gravity="center"
android:src="#drawable/ic_contact_picture" >
</ImageButton>
</FrameLayout>
</RelativeLayout>
Finally, if you are familiar with the concept of custom ListViews, with a few modifications, you will be able to implement a custom GridView too. If you are not familiar with custom ListViews or GridViews, follow this tutorial to see how to create a custom GridView: http://www.coderzheaven.com/2012/02/29/custom-gridview-in-android-a-simple-example/. Or use this Google Search for more tutorials on the same.
An important point here would be, if you need the ImageButton's to do a function when they are clicked, the onClickListener will need to be setup in the Adapter.
GridView shows a grid of Views. It can show anything that extends View class. It can show a LinearLayout with an ImageView and an ImageButton inside it.

Adjust GridView (Android)

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"

Is it possible to set borders to grid view in android

Is it possible to set borders to grid view in xml. Like, i want each grid cell to contain borders. If so, kindly let me know how to do it. I have set this way. But i am not finding any specific thing to set border.
<GridView
android:layout_marginTop="95px"
android:layout_marginLeft="32px"
android:id="#+id/gridview"
android:layout_width="340px"
android:layout_height="250px"
android:columnWidth="35px"
android:numColumns="7"
android:scrollbars="none"
android:verticalSpacing="14px"
android:horizontalSpacing="18px"
android:stretchMode="columnWidth"
android:gravity="center_horizontal"
android:background="#color/white">
</GridView>
Thank you
Swathi

Android silly ui problem

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.

Categories

Resources