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.
Related
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.
Im trying to manipulate the to do the following but its so far just lead to frustration... following is the poorly draw picture of what I am trying to accomplish:
http://i.stack.imgur.com/WZOta.png
http://i.stack.imgur.com/6cEQk.png
<?xml version="1.0" encoding="utf-8"?>
<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center"
android:orientation="vertical" >
<ListView
android:id="#+id/android:list"
android:layout_width="wrap_content"
android:layout_height="419dp" >
</ListView>
<TextView
android:id="#+id/android:empty"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/FAP001"
/>
<Button
android:id="#+id/button1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:text="+1" />
</LinearLayout>
</ScrollView>
Im not sure if the listview is the way to go.. heck im not even sure if linearlayout is a good call.. Im trying to have end result close to what is on the 2nd image.
THANKS IN ADVANCE!!!
You can't place an ListView within a ScrollView. Thats not possible. Because then the ListView has got two options to scroll trough the content, as you will. And this won't work.
For more Information:
https://groups.google.com/forum/m/?fromgroups#!topic/android-beginners/LRpLgGOy2Pc
If you want to have a ListView with 3 "sections" I would recommend you to create your own custom ListView with a Custom Adapter.
Here is a an Example of an custom ListView
http://www.androidhive.info/2012/02/android-custom-listview-with-image-and-text/
You can just take this ListView and just have to modify the Adapter and the Row XML to your own needs.
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.
I have a linearlayout with 3 imageView and a listview in vertical orientation.i want to scroll the full screen including the images when the user scrolls the list.is that possible?thanks
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#222222"
android:orientation="vertical" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/ph2" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/ph1" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/ph2" />
<ListView
android:id="#+id/ll4_list"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="0.5"
android:cacheColorHint="#00000000" />
</ScrollView>
You definitely don't want to put the ListView inside of the ScrollView, but it's certainly possible to include the images. I would recommend considering putting the layout with the images in a header to the ListView. See addHeaderView. This related SO post may also be of use to you.
You should search api , the scrollView can not be inner more than one child , must has one direct child
I want to make Activity like this using GridView.
And this Activity have only one scrollbar include all text & gridview.
for it, using scrollview.
<ScrollView>
android:layout_width="fill_parent"
android:layout_height="fill_parent"
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
/>
<GridView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
/>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
/>
<GridView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
/>
</LinearLayout>
</ScrollView>
I wrote xml and class like attached using ScrollView to have only one
scroll.
GridView has android:layout_height="fill_parent", but just visible one row.
And each GridView has scroll.
Same result layout_height was changed to wrap_content.
Is it bug? or Do I have some mistake? or Is it impossible?
Thanks.
You need to use the parameter weight :
0 for TextView
1 for GridView