GridView Highlight selected Item - android

I am using custom background for Grid items, and as normal it works, but when i do click on any of the Grid item (it's not working)
So what could be the reason, why its not working when i am doing click on any of the Grid Item, whereas its working in normal mode..
For ImageGallery I am using this tutorial and to highlight grid item following this one
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#color/blue" android:state_pressed="true" />
<item android:drawable="#color/blue" android:state_selected="true" />
<item android:drawable="#color/blue" android:state_focused="true" />
<item android:drawable="#color/white" />
</selector>
Grid item layout xml:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/grid_background"
android:descendantFocusability="blocksDescendants"
android:padding="5dp">
<ImageView
android:id="#+id/grid_item_image"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:scaleType="centerCrop">
</ImageView>
<FrameLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:padding="1dip" >
<ProgressBar
android:id="#+id/loading"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:visibility="gone" />
</FrameLayout>
</RelativeLayout>
Here is the main grid xml:
<?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"
android:background="#000000">
<!-- The GridView to display picture's preview -->
<GridView
android:id="#+id/grid_view"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:numColumns="auto_fit"
android:gravity="center"
android:stretchMode="columnWidth"
android:drawSelectorOnTop="true"
android:focusable="true"
android:clickable="true"
android:scrollbars="none"
>
</GridView>
</RelativeLayout>
This is what i am getting as normal and even when i do tap on any of the GridView Item:

This may help you
make your selector like this
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#color/black" android:state_pressed="true" />
<item android:drawable="#color/black" android:state_selected="true" />
<item android:drawable="#color/black" android:state_focused="true" />
<item android:drawable="#color/white" />
</selector>
and Relative layout add
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="true"
android:descendantFocusability="blocksDescendants"
android:background="#drawable/grid_background"
android:padding="5dp">
<ImageView
android:id="#+id/grid_item_image"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:focusable="false"
android:scaleType="centerCrop">
</ImageView>
<FrameLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:focusable="false"
android:padding="1dip" >
<ProgressBar
android:focusable="false"
android:id="#+id/loading"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:visibility="gone" />
</FrameLayout>
</RelativeLayout>

Write drawable file for your selector like this call it selector.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true">
<shape>
<solid android:color="#color/blue" />
</shape>
</item>
<item android:state_pressed="false">
<shape>
<solid android:color="#android:color/transparent" />
</shape>
</item>
</selector>
then inside xml of gridview add following two lines
android:drawSelectorOnTop="true"
android:listSelector="#drawable/selector"

Related

Rounding top and bottom corners of a listview

This is my issue I can't seem to round the edges on the bottom of my listview.
I've tried a couple of methods where you create a shape for the backgroup resource, tried it programmatic ally and in the layout xml's but it does not do anything at all.
Like I either did it wrong which I doubt since I am familiar with shapes, or something else interferes with my attempts.
Either way I need help is what I'm getting at.
Here's some of the xml's that make up what you're looking at.
This makes up the actual dialog. (settings_dialog.xml)
<?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"
android:background="#BB000000"
android:gravity="center">
<ImageView
style="#style/CloseButtonStyle"
android:id="#+id/ivCancel_SD"
android:layout_width="75dp"
android:layout_height="75dp"
android:layout_above="#+id/rlContainer_SD"
android:layout_toRightOf="#+id/rlContainer_SD"
android:layout_toEndOf="#+id/rlContainer_SD"/>
<RelativeLayout
style="#style/SettingsDialogStyle"
android:id="#+id/rlContainer_SD"
android:layout_width="800dp"
android:layout_height="600dp"
android:layout_centerVertical="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true">
<TextView
style="#style/SettingsHeaderStyle"
android:id="#+id/tvSettingsLabel_SD"
android:layout_width="330dp"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:text="#string/sd_header_label"/>
<ListView
style="#style/SettingsListStyle"
android:id="#+id/lvOptions_SD"
android:background="#drawable/bg_listview_corners"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/tvSettingsLabel_SD"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"/>
</RelativeLayout>
</RelativeLayout>
This is located in my styles.xml with a bunch of other stuff that has no relation to this.
<style name="SettingsListStyle">
<item name="android:divider">#color/table_divider_color</item>
<item name="android:dividerHeight">1dp</item>
<item name="android:paddingTop">40dp</item>
<item name="android:paddingLeft">6dp</item>
<item name="android:paddingRight">6dp</item>
<item name="android:paddingBottom">2dp</item>
</style>
And this makes up a list_item. (settings_list_item.xml)
<?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="80dp"
android:padding="5dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
style="#style/SettingsOptionNameStyle"
android:id="#+id/tvOptionName_SLI"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"/>
<TextView
style="#style/SettingsOptionDescStyle"
android:id="#+id/tvOptionDesc_SLI"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"/>
</LinearLayout>
</RelativeLayout>
And here is the shape I used to try and round the edges.
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/bg_listview_corners" android:shape="rectangle">
<corners android:radius="30dp" />
</shape>
I've also tried this piece for the shape.
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/bg_listview_corners" android:shape="rectangle">
<corners
android:bottomRightRadius="30dp"
android:bottomLeftRadius="30dp" />
</shape>
This is all the information I think you'll need to help me on my way.
In case I missed some information or you just have questions don't hesitate to ask.
Update 1:
I figured out it somehow only shapes the container of the listview but not the listview itself.
Any ideas?
you can increase the padding (paddingRight, paddingLeft, and paddingBottom)
<style name="SettingsListStyle">
<item name="android:divider">#color/table_divider_color</item>
<item name="android:dividerHeight">1dp</item>
<item name="android:paddingTop">40dp</item>
<item name="android:paddingLeft">7dp</item>
<item name="android:paddingRight">7dp</item>
<item name="android:paddingBottom">3dp</item>
or use mask background over the listview (like this Post which use 9-Patch as mask, or you can use your "bg_listview_corners.xml" background for the mask)
You can create a custom background drawable selector file called custom_list.xml in your drawable folder with this code in it
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/list_pressed" android:state_pressed="true"/>
<item android:drawable="#drawable/list_focused" android:state_focused="true"/>
<item android:drawable="#drawable/list_default"/>
</selector>
then create another file list_default.xml in your drawable folder with this code in it
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<gradient
android:angle="270"
android:endColor="#1c95a0"
android:startColor="#1c95a0" />
<corners android:radius="5dip" />
</shape>
finally set the background property of the list view to
android:background="#drawable/custom_list"
Ended up using a mask as suggested by #Sally here is how I changed it.
<?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"
android:background="#BB000000"
android:gravity="center">
<ImageView
style="#style/CloseButtonStyle"
android:id="#+id/ivCancel_SD"
android:layout_width="75dp"
android:layout_height="75dp"
android:layout_above="#+id/rlContainer_SD"
android:layout_toRightOf="#+id/rlContainer_SD"
android:layout_toEndOf="#+id/rlContainer_SD"/>
<RelativeLayout
style="#style/SettingsDialogStyle"
android:id="#+id/rlContainer_SD"
android:layout_width="800dp"
android:layout_height="600dp"
android:layout_centerVertical="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true">
<TextView
style="#style/SettingsHeaderStyle"
android:id="#+id/tvSettingsLabel_SD"
android:layout_width="330dp"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:text="#string/sd_header_label"/>
<ListView
style="#style/SettingsListStyle"
android:id="#+id/lvOptions_SD"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/tvSettingsLabel_SD"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"/>
</RelativeLayout>
<ImageView
android:layout_width="800dp"
android:layout_height="600dp"
android:layout_centerVertical="true"
android:background="#drawable/bg_listview_corners"/>
</RelativeLayout>
I added an ImageView on top of the relative layout matching the container.
This is the drawable I used for masking the layout.(bg_listview_corners.xml)
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape android:shape="rectangle" >
<stroke
android:width="12dp"
android:color="#color/app_night_sky_color" />
<padding android:left="6px"
android:top="6px"
android:right="6px"
android:bottom="6px"/>
<corners android:radius="30dp" />
</shape>
</item>
<item>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<stroke
android:width="6dp"
android:color="#color/popup_bg_color" />
<corners android:radius="30dp" />
</shape>
</item>
</layer-list>

How to configure a selector on a relativelayout in a listview

In an android listview each rowitem that has a relativelayout as its top level view. I want to have a selector on this relativelayout to indicate focused and pressed states. All answers that I have tried still do not work. Is this possible? Here is the code I am using:
##my_list_selector
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" android:drawable="#drawable/my_color_list_selected" />
<item android:state_activated="true" android:drawable="#drawable/my_color_list_selected" />
<item android:state_focused="true" android:drawable="#drawable/my_color_list_focused" />
<item android:state_selected="true" android:drawable="#drawable/my_color_list_focused" />
<item android:drawable="#drawable/my_color_list_default" />
</selector>
##my_color_list_selected
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<gradient android:endColor="#21d70076"
android:startColor="#21d70076"
android:angle="90"></gradient>
</shape>
##my_color_list_focused
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<gradient android:endColor="#ffffff"
android:startColor="#ffffff"
android:angle="90"></gradient>
<stroke android:width="2dp" android:color="#21d70076"/>
</shape>
##my_color_list_default
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<solid android:color="#ffffff"></solid>
</shape>
## List View
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:gravity="center"
android:layout_gravity="top">
<com.mydemo.app.util.ListView
android:id="#android:id/list"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:listSelector="#android:color/transparent"
/>
<ProgressBar
android:id="#+id/progress"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:indeterminateDrawable="#drawable/progress_rotate"
android:visibility="gone" />
<TextView
android:id="#android:id/empty"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:text="#string/no_content"
android:layout_gravity="center"
android:visibility="gone"/>
</LinearLayout>
##ROW VIEW
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/main"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="top"
android:background="#drawable/my_list_selector">
<TextView
android:id="#+id/episode_number"
android:layout_toRightOf="#+id/image_frame"
android:layout_alignParentTop="true"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="#dimen/gridview_row_margins"
android:layout_marginRight="#dimen/gridview_row_margins"
android:layout_marginTop="#dimen/gridview_row_margins"
/>
<TextView
android:id="#+id/description"
android:layout_toRightOf="#+id/image_frame"
android:layout_below="#+id/episode_number"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="#dimen/gridview_row_margins"
android:layout_marginRight="#dimen/gridview_row_margins"
android:lines="1"
android:ellipsize="end"/>
</RelativeLayout>
UPDATE:
* The issue was resolved unrelated to this code. There was a hard coded background inadvertently being set in the adapater. This code actually does work.

Android GridView has black background on API8 (at least)

Works fine on Kitkat, but has issues in API 8 (real device) and emulator.
Image:
http://i.stack.imgur.com/wY33Y.png
Code:
-- main layout:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:background="#drawable/inner_background"
android:layout_height="wrap_content" >
<GridView
android:id="#+id/busListGrid"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:cacheColorHint="#00000000"
android:divider="#null"
android:dividerHeight="0px"
android:background="#00000000"
android:listSelector="#drawable/bus_grid_selector"
android:numColumns="3"
android:scrollbarSize="3dp"
android:scrollbarStyle="insideInset"
android:scrollbarThumbVertical="#drawable/custom_scroll_style_busgrid" >
</GridView>
</RelativeLayout>
--single item xml for custom adapter:
<?xml version="1.0" encoding="utf-8"?>
<lv.sezy.satiksme.rezekne.layouts.SquareView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="#drawable/bus_grid_selector" >
<LinearLayout
android:id="#+id/busGridSingleHolder"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:background="#drawable/empty"
android:orientation="horizontal" >
<TextView
android:id="#+id/bus_number"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_gravity="center"
android:gravity="center_vertical|center"
android:text="#string/tester"
android:textColor="#color/busGridTextColor"
android:textSize="60sp"
android:textStyle="bold" />
</LinearLayout>
</lv.sezy.satiksme.rezekne.layouts.SquareView>
-- bus_grid_selector:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/bus_grid_regular" android:state_pressed="false" android:state_selected="false"/>
<item android:drawable="#drawable/bus_grid_focus" android:state_pressed="true" android:state_selected="true"/>
<item android:drawable="#drawable/bus_grid_focus" android:state_pressed="true"/>
</selector>
--bus_grid_regular:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item
android:bottom="0dp"
android:left="-2dp"
android:right="0dp"
android:top="-2dp">
<shape android:shape="rectangle" >
<stroke
android:width="1dp"
android:color="#90FFFFFF" />
<solid android:color="#00FFFFFF" />
</shape>
</item>
</layer-list>
I was able to fix similar issue with ListView by adding
android:cacheColorHint="#00000000"
bus it does not help with GridView.
Problem was with LinearLayout background #drawable/empty, which was just and empty shape.
Appears that API8 interprets empty shape as black shape.

Tab Selection Indicator

In my app i am using Tabs, by default it looks like this:
and now, i want to show different color [like:dark blue] for selected tab in rounded corner shape
I am using below XMLs to create above Tabs
using this to create rounded shape tabs, with white corner, mytab_custom.xml:-
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#44b8ec"/>
<stroke android:width="1dp"
android:color="#ffffff" />
<padding android:left="1dp"
android:top="1dp"
android:right="1dp"
android:bottom="1dp" />
<corners android:bottomRightRadius="7dp" android:bottomLeftRadius="7dp"
android:topLeftRadius="7dp" android:topRightRadius="7dp" />
</shape>
and using this, to show Image in Tabs, tab_contact.xml:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/birthday_text"
android:state_selected="true" />
<item android:drawable="#drawable/birthday_text" />
</selector>
tab_indicator.xml:-
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="0dip"
android:layout_height="40dip"
android:layout_weight="1"
android:orientation="vertical"
android:padding="5dp">
<ImageView
android:id="#+id/icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:src="#drawable/icon"
/>
</RelativeLayout>
main.xml:-
<?xml version="1.0" encoding="utf-8"?>
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#android:id/tabhost"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/btn_background"
>
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:padding="5dp">
<TabWidget
android:id="#android:id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/check"
/>
<FrameLayout
android:id="#android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:padding="5dp" />
</LinearLayout>
</TabHost>
The problem might lie here:-
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/birthday_text"
android:state_selected="true" />
<item android:drawable="#drawable/birthday_text" />
</selector>
try using a different image here:-
<item android:drawable="#drawable/birthday_text"
android:state_selected="true" />

Android listview item click color change

I am having issue while highlighting list item color on click. Here is code i am using
Listview layout is as below. my custom list view class is extending ListView.
<?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:layout_alignParentBottom="true"
android:orientation="vertical"
android:focusableInTouchMode="true"
android:focusable="true"
android:background="#drawable/list_selector" // also tried this but it doesn't work
>
<TextView
android:id="#+id/textView_list_info"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical|center_horizontal"
>
</TextView>
<com.custom.listview.ViewEditListView
android:id="#+id/customListView"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:listSelector="#drawable/list_selector" //this line doesn't work.
/>
</LinearLayout>
list-selector.xml is as below
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item
android:state_selected="false"
android:state_pressed="false"
android:drawable="#drawable/list_divider" />
<item android:state_pressed="true"
android:drawable="#drawable/list_divider_hover" />
<item android:state_selected="true"
android:state_pressed="false"
android:drawable="#drawable/list_divider_hover" />
</selector>
custom_row.xml is as below
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
**android:background="#drawable/list_selector"**> //this also didn't work.
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<TextView
android:id="#+id/v_row1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="14sp"
android:textStyle="bold"
android:textColor="#C11B17"
android:layout_alignParentLeft="true"
/>
------
I don't know why it's not highlighting when i click list item.
Thanks
CP
If u use custom row to set listview..put this selector into ur row.xml like android:background="#drawable/this_selector_name"
this_selector_name.xml
<item android:state_selected="true"><shape>
<gradient android:angle="270" android:centerColor="#4EA0F2" android:endColor="#224466" android:startColor="#BED5ED" />
</shape></item>
<item android:state_pressed="true"><shape>
<gradient android:angle="270" android:centerColor="#4EA0F2" android:endColor="#4EA0F2" android:startColor="#4EA0F2" />
</shape></item>
<item><shape>
<solid android:color="#color/yellow" />
</shape></item>

Categories

Resources