Cannot control the orange part size in Gridview - android

I'm using a ImageAdapter which extends the BaseAdapter.
After running the app, i found that the imageview in gridview cannot fill correctly.. refer to the picture below.. I tried to set android:listselector ="#null" in gridview, but is doesnt work... I just want the orange part disappears or fit the picture...it's too long now...
And here is the layoutinflator in ImageAdapter:
LayoutInflater li = getLayoutInflater();
myView = li.inflate(R.layout.six_item_layout, null);
This is the Gridview layout:
<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:padding="5dp"
android:verticalSpacing="10dp"
android:horizontalSpacing="10dp"
android:numColumns="3"
android:columnWidth="90dp"
android:stretchMode="columnWidth"
android:background="#ffffff"
>
</GridView>
This is the framelayout
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/root"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="top"
android:scaleType="fitStart"/>
</FrameLayout>
Oh///I cannot upload any pictures here... please refer:
http://hi.baidu.com/dishe_fiona/album/item/8a12c4143a292df5bd8f7059bc315c6035a87331.html

thanks for everybody's suggestion, finally, i find the "hack" is that the imageview's height is set incorrectly which leads to the long orange in gridview...
here is the imageview code:
<ImageView
android:id="#+id/image"
android:layout_width="wrap_content"
android:layout_height="135dp"
android:gravity="top"
android:scaleType="fitXY" />

Well if you want your grid of same size having images the same way that are shown in the picture, you can change your list selector to transparent. Otherwise, your gridview images are not alligned in a normal way. I don't know whether is it your requirement or not. But you can always change your listSelector.

Related

Showing the images in the Gridview

i'm using the gridview to display the images.
<GridView
android:id="#+id/gridView1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:columnWidth="96dp"
android:numColumns="auto_fit"
android:stretchMode="columnWidth" >
</GridView>
and the imageview is
<ImageView
android:id="#+id/imageView1"
android:layout_width="96dp"
android:layout_height="96dp"
android:background="#drawable/image_bg"
android:scaleType="fitXY"
android:src="#drawable/ic_launcher" />
Note : I dont want to hardcode the numbers of images to display in single row of gridview because if the screen orientation changed the number changes
When i'm loading m getting the space bewteen the images in the gridview as the below picture
But i dont need the space i want the gridview to appear like the native gallery
Change layout_width
android:layout_width="match-parent" instead of "96dp"
Try using below tag in GridView
android:verticalSpacing="10dp" // changed this value
android:horizontalSpacing="10dp"
For reference HorizontalSpacing and VerticalSpacing
add this to your gridview xml :
android:listSelector="#android:color/transparent"
and also try myGridView.setStretchMode(GridView.STRETCH_COLUMN_WIDTH);

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.

How to cenralize last uneven row in GridView in 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>

How to create GridView with squares items on two columns?

I would like to create a GridView with squares items on two columns which would take the totality of the screen (match_parent).
Every item consists of an imageView and a textView.
Here is the result in image :
How do I make the items width to be equal to their variable height?
Thank you in advance!!
In your activity or Fragment layout you should have GridView like this:
<GridView
android:id="#+id/grid_id"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:numColumns="2"
/>
And then you should have an Adapter that extends BaseAdapter for example and it's item should be as follow:
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:drawableTop="#drawable/yourDrawable"
android:layout_margin="20dip"
android:gravity="center" />
You need more explanation ?
Use these link, they will help you
Option 1
Option 2
This is Gridview.
<GridView
android:numColumns="2"
android:id="#+id/related_contact_grid"
android:layout_width="fill_parent"
android:layout_height="fill_parent"/>
This is item. You will inflate this to gridview in Adapter.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/imageView"
android:text="Tendance"
android:layout_centerHorizontal="true"
</RelativeLayout>
If you want, I can support your work on this Gridview.

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.

Categories

Resources