Custom group expanding icon in ExpandableListView - android

I am trying to use a custom icon for group expand and collapse state of an ExpandableListView. But this doesn't seem to work. The icons doesn't get changed even when the Output messages are working sequentially.
explistView.setOnGroupClickListener(new OnGroupClickListener()
{
#Override
public boolean onGroupClick(ExpandableListView parent, View v, int groupPosition, long id)
{
groupIndicator = (ImageView) findViewById(R.id.group_indicator);
if (parent.isGroupExpanded(groupPosition))
{
System.out.println("1");
parent.collapseGroup(groupPosition);
System.out.println("2");
groupIndicator.setImageResource(R.drawable.expand_icon_35x35);
System.out.println("3");
adapter.notifyDataSetChanged();
}
else
{
System.out.println("4");
parent.expandGroup(groupPosition);
System.out.println("5");
groupIndicator.setImageResource(R.drawable.collapse_icon_35x35);
System.out.println("6");
adapter.notifyDataSetChanged();
}
return true;
}
});

You can refer to this answer
You can change the icons by using following:-
<ExpandableListView android:id="#+id/list"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_marginTop="10dp"
android:groupIndicator="#drawable/settings_selector"
/>
and Setting selector is:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/up_arrow" android:state_empty="true"/>
<item android:drawable="#drawable/down_arrow" android:state_expanded="true"/>
</selector>

In my case,android:state_empty="true" is not working.
So, I changed it to android:state_expanded="false" .
<ExpandableListView
android:id="#+id/expl"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:groupIndicator="#drawable/settings_selector"/>
And
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/plus_arrow" android:state_expanded="true"/>
<item android:drawable="#drawable/minus_arrow" android:state_expanded="false"/>
</selector>
I hope it helps.

Related

Change background color of the selected item in Android Spinner

I am working on an android app and using Spinner at many places in my app.
What I want is to change the background color of the selected item of spinner, so that one can easily identify which item is currently selected.
I have already checked this link Setting background color for Spinner Item on selection but doing so will change the selected textview background color but do not change its color in dropdown list and I want to change the background color of the selected textview when I will see the dropdown list.
I want to change the color of selected item in list not on spinner, please see the image below.
How can I do this? Please, can someone help me here?.
Thanks a lot in advanced.
You need to implement below method in your adapter class:
It will help you:
int selectedItem = -1;
ArrayAdapter<String> dataAdapter = new ArrayAdapter<String>(this, android.R.layout.simple_spinner_item, list) {
#Override
public View getDropDownView(int position, View convertView, ViewGroup parent)
{
View v = null;
v = super.getDropDownView(position, null, parent);
// If this is the selected item position
if (position == selectedItem) {
v.setBackgroundColor(Color.BLUE);
}
else {
// for other views
v.setBackgroundColor(Color.WHITE);
}
return v;
}
};
dataAdapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);
mySpinner.setAdapter(dataAdapter);
Now on item selected in spinner put below
selectedItem = position;
Here is solution via XML:
Spinner looks like:
<Spinner
android:id="#+id/settingsSleepingTimePicker"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/spinner_main_button"
android:popupBackground="#color/colorPrimary"
android:textColor="#android:color/white"
android:textSize="20sp"/>
While creating spinner set setDropDownViewResource as custom layout:
adapter.setDropDownViewResource(R.layout.spinner_item);
And spinner_item.xml looks like:
<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#android:id/text1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/spinner"
android:textColor="#ffffff"
android:textSize="20sp" />
And finally we set #drawable/spinner like this:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#color/colorPrimaryLight" android:state_hovered="true" />
<item android:drawable="#color/colorPrimaryLight" android:state_selected="true" />
</selector>
Hope my answer will be helpfull!
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="colorControlNormal">#color/spinner_background</item>
</style>
Define Spinner_background color in color folder..
Try creating a selector in the drawable, something like,
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="false" android:drawable="#color/colorPrimary" />
<item android:drawable="#android:color/transparent" />
</selector>
And set the spinner background as
android:background="#drawable/spinner_selector"
I've searched the internet for a proper solution to do this without hardcoding the background behaviour in java code.
You can achieve this (setting the selected item background color) using drawables.
What you need to do it set the dropdownViewResource to a custom layout. That layout should look something like this:
<?xml version="1.0" encoding="utf-8"?>
<TextView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/spinner_item_background"
android:gravity="left"
android:padding="8dp" />
In spinner_item_background.xml, you can define a background for each item state. For example, if you want to have a ripple effect on press, but a solid effect when selected, you can try this:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Activated state is the selected item -->
<item android:state_activated="true" android:drawable="#00ff00"/>
<!-- Pressed state is the one the user is interacting with -->
<item android:state_pressed="true" android:drawable="#00ff00"/>
<!-- The rest of the items -->
<item android:drawable="#ffffff"/>
</selector>
Create an int variable public static int posOfItemSpinnerSelected in your Activity:
spinner.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener() {
#Override
public void onItemSelected(AdapterView<?> parent, View view, int position, long id) {
posOfItemSpinnerSelected=position;
}
#Override
public void onNothingSelected(AdapterView<?> parent) {
}
});
and in your adapter insert this code
if(position== YourActivity.posOfItemSpinnerSelected){
textView.setBackgroundColor(ContextCompat.getColor(mActivity,R.color.item_spinner_selected));
} else {
textView.setBackgroundColor(ContextCompat.getColor(mActivity,R.color.white));
}

How to change background color in multiple items row delete in ListView

I am selecting multiple item in listview for delete . I can delete multiple item . The code is as follows :
smsListView.setMultiChoiceModeListener(new MultiChoiceModeListener() {
#Override
public void onItemCheckedStateChanged(ActionMode mode,
int position, long id, boolean checked) {
// Capture total checked items
final int checkedCount = smsListView.getCheckedItemCount();
// Set the CAB title according to total checked items
mode.setTitle(checkedCount + " Selected");
View v = smsListView.getChildAt(position
- smsListView.getFirstVisiblePosition());
// Calls toggleSelection method from ListViewAdapter Class
((SmsArrayAdapter) arrayAdapter).toggleSelection(position,v);
}
#Override
public boolean onActionItemClicked(ActionMode mode, MenuItem item) {
switch (item.getItemId()) {
case R.id.delete:
// Calls getSelectedIds method from ListViewAdapter Class
SparseBooleanArray selected = ((SmsArrayAdapter) arrayAdapter)
.getSelectedIds();
// Captures all selected ids with a loop
for (int i = (selected.size() - 1); i >= 0; i--) {
if (selected.valueAt(i)) {
SMSItem selecteditem = (SMSItem) arrayAdapter.getItem(selected.keyAt(i));
// Remove selected items following the ids
arrayAdapter.remove(selecteditem);
}
}
// Close CAB
mode.finish();
return true;
default:
return false;
}
}
#Override
public boolean onCreateActionMode(ActionMode mode, Menu menu) {
mode.getMenuInflater().inflate(R.menu.activity_main, menu);
return true;
}
#Override
public void onDestroyActionMode(ActionMode mode) {
// TODO Auto-generated method stub
((SmsArrayAdapter) arrayAdapter).removeSelection();
}
#Override
public boolean onPrepareActionMode(ActionMode mode, Menu menu) {
// TODO Auto-generated method stub
return false;
}
});
But I want to change color of the rows that I have selected . Currently there are no color on selection item in the list .
I have tried the following .
Step no 1: write below line to to your listview item layout
android:background="?android:attr/activatedBackgroundIndicator"
Step no 2: write below line to style.xml file
<style name="AppTheme" parent="#style/Theme.AppCompat.Light">
<item name="actionBarStyle">#style/MyActionBar</item>
<item name="android:activatedBackgroundIndicator">#drawable/muliple_selected_item</item>
</style>
Step no 3: Create muliple_selected_item.xml into Drawable folder and write below code.
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_activated="true" android:drawable="#color/lvMultipleSelectionColor" />
<item android:state_checked="true" android:drawable="#color/lvMultipleSelectionColor" />
<item android:state_pressed="true" android:drawable="#color/lvMultipleSelectionColor" />
<item android:drawable="#android:color/transparent" />
</selector>
But by this code , all itemsof the list are colored when I select any item of the listview . I want to change background color to those items only which I have selected .
How can I do this ?
The listview layoput is as follows :
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/MainLayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<RelativeLayout
android:id="#+id/smsItemContainerRelativeLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerInParent="true"
android:layout_gravity="center_horizontal|top"
android:text="SMS Inbox"
android:textAppearance="?android:attr/textAppearanceMedium" />
<TextView
android:id="#+id/unread_count"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="-20dp"
android:background="#drawable/notification_bg"
android:gravity="center"
android:text="88"
android:textColor="#android:color/background_light"
android:textSize="20sp"
android:textStyle="bold"
android:layout_alignParentRight="true"
android:visibility="invisible" />
</RelativeLayout>
<ListView
android:id="#+id/SMSList"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="5dp" />
</LinearLayout>
The rows layout is as follows :
<?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:orientation="vertical"
android:background="#drawable/muliple_selected_item" >>
<TextView
android:id="#+id/textView_from"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="SMS From"
android:textAppearance="?android:attr/textAppearanceLarge" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<TextView
android:id="#+id/textView_sms"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0.5"
android:text="SMS : " />
<TextView
android:id="#+id/textView_time"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="right"
android:text="Time : " />
</LinearLayout>
</LinearLayout>
The muliple_selected_item.xml is as follows : .
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_activated="true" android:drawable="#color/lvMultipleSelectionColor" />
<item android:state_checked="true" android:drawable="#color/lvMultipleSelectionColor" />
<item android:state_pressed="true" android:drawable="#color/lvMultipleSelectionColor" />
<item android:drawable="#android:color/transparent" />
</selector>
You need to set Multiple Select Choice mode to your ListView
smsListView.setChoiceMode(ListView.CHOICE_MODE_MULTIPLE_MODAL);
You need to create Drawable file for your ListView's row Layout and use Drawable as background in that layout.
Here is Drawable file:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#color/menuitem_press_background_color" android:state_activated="true" />
<item android:drawable="#color/white" />
</selector>
EDIT:
remove changeBackgroundColor() used in selectView() and check if it works
You can refer this Selecting multiple items in ListView. it might help you
Just put the line below in your single row xml file(the xml file in which you define the define the layout for single row of listview):-
android:background="?android:attr/activatedBackgroundIndicator"
And no need to edit any more xml files. For more details, please visit the link below :-
Click here to go to link ...!
Hope this helps :)
You can use drawables for that like below,
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:state_activated="true"
android:drawable="#android:color/darker_gray" />
</selector>
and set it as background of your row layout,
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/list_item_background_activated" >
</RelativeLayout>
You can Achieve it in this way:-
First add property(variable) isSelected to SMSItem class with default Value false.
on onItemCheckedStateChanged method Execution set value for variable isSelected.
on getView method of Adapter you have to chech value for isSelected variable. then make a decison base on it, if false then set default
background and if true the set another background to perticular row.
call notifyDataSetChanged() method on Adepter from onItemCheckedStateChanged.
on Your Request, Im posting Code:-
add this to onItemCheckedStateChanged method
SMSItem selecteditem = (SMSItem) arrayAdapter.getItem(selected.keyAt(i));
selecteditem.setSelection(checked);
notifydatasetChanged();
and manage getView yourself

listSelector for Group Header and Child Layout in ExpandableListview not working android

I am using ExpandableListview that displays data dynamically from server.
I used selector for Group Header and Child Layout, but I can't notice any selector that reflects.
Pls help me how to get this done.
Thanks in advance.
row_highlighter.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android"
android:exitFadeDuration="#android:integer/config_mediumAnimTime">
<item android:drawable="#android:color/holo_blue_bright" android:state_pressed="true"/>
<item android:drawable="#android:color/holo_blue_light" android:state_selected="true"/>
<item android:drawable="#android:color/holo_blue_dark" android:state_activated="true"/>
</selector>
ExpandableListviewDemo.java
expListView.setOnGroupClickListener(new OnGroupClickListener() {
#Override
public boolean onGroupClick(ExpandableListView parent, View v,int groupPosition, long id) {
int index = parent.getFlatListPosition(ExpandableListView.getPackedPositionForGroup(groupPosition));
parent.setItemChecked(index, true);
return false;
}
});
// Clicking on Child
expListView.setOnChildClickListener(new OnChildClickListener() {
#Override
public boolean onChildClick(ExpandableListView parent, View v,int groupPosition, int childPosition, long id) {
int index = parent.getFlatListPosition(ExpandableListView.getPackedPositionForChild(groupPosition, childPosition));
parent.setItemChecked(index, true);
return true;
}
});
activity_demo.xml
<ExpandableListView
android:id="#+id/search_expandable_listview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="start"
android:choiceMode="singleChoice"
android:divider="#color/list_divider"
android:childDivider="#drawable/listview_divider"
android:dividerHeight="1dp"
android:listSelector="#drawable/row_highlighter"
android:background="#color/list_background"
android:layout_below="#+id/search_header"
android:layout_above="#+id/layout_option_buttons"
android:scrollingCache="false"
android:transcriptMode="disabled"
android:fastScrollEnabled="false"
android:smoothScrollbar="true"
android:fastScrollAlwaysVisible="false"
android:animationCache="false"
android:persistentDrawingCache="none"
android:alwaysDrawnWithCache="false"
android:drawingCacheQuality="low"/>
Your selector is missing the default selector put the default color like below, instead of adding the selector in the ExpandableList try adding it as a background for the rootView of your Parent and Child layouts.
<selector xmlns:android="http://schemas.android.com/apk/res/android"
android:exitFadeDuration="#android:integer/config_mediumAnimTime">
<item android:drawable="#android:color/holo_blue_bright" android:state_pressed="true"/>
<item android:drawable="#android:color/holo_blue_light" android:state_selected="true"/>
<item android:drawable="#android:color/holo_blue_dark" android:state_activated="true"/>
<item android:drawable="#android:color/transparent" />
</selector>

Highlight selected item in ListView on Android

I have been making an application that works with ListViews in Android, and I can't make it so that the selected (chacked) item has a different background. I'm using CHOICE_MODE_SINGLE. This is how my code looks so far:
The ListView that I use:
(inside layout.xml)
<ListView
android:id="#+id/listView"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:choiceMode="singleChoice"
android:listSelector="#drawable/selector_test" >
</ListView>
The TextView layout I use in the adapter:
(listItem.xml)
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/listItem"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="23sp"
android:textStyle="bold" />
This is where I add the adapter:
mListAdapter = new ArrayAdapter<String>(this, R.layout.listItem, mList);
mListView = (ListView) findViewById(R.id.listView);
mListView.setAdapter(mAuthorAdapter);
mListView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
#Override
public void onItemClick(AdapterView<?> arg0, View arg1, int position, long arg3) {
String selected = mList.get(position);
// ...
mListView.setItemChecked(position, true);
}
});
I'm sure that the proper item is checked on click, because when I call getCheckedItemPosition(), it returns the proper value.
And now, the two things I tried in order to highlight the checked item:
Selector drawable:
(selector_test.xml)
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" android:enterFadeDuration="#android:integer/config_longAnimTime">
<item android:state_checked="true"><shape>
<solid android:color="#color/red" />
</shape></item>
<item android:state_selected="true"><shape>
<solid android:color="#color/blue" />
</shape></item>
<item android:state_pressed="true"><shape>
<solid android:color="#color/green" />
</shape></item>
</selector>
I add it to .xml with:
android:listSelector="#drawable/selector_test"
Background drawable:
(background_test.xml)
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#color/red" android:state_checked="true"/>
<item android:drawable="#color/blue" android:state_selected="true"/>
<item android:drawable="#color/green"/>
</selector>
I add it to .xml with:
android:background="#drawable/background_test"
I've tried adding the selector and the background to both listView.xml and listItem.xml, but the only thing that changes is the default background color, and the color of the selector when the item is pressed (or held).
android:state_checked="true" and android:state_selected="true" seem to do nothing.
I can change the background by overriding the getView() method in ArrayAdapter and invoking setBackgroundColor() in it if the view is selected, and it does change the background, but also gets rid of the selector entirely. Also, I don't really like to override classes just to change one line of code, especially if that same thing can be achieved in a different way.
So what I'm asking is, is there a way to highlight checked item in ListView by adding a selector or background drawable to it, and I am just doing it wrong, or will I have to make it work some other way.
Thanks in advance! :)
add this line in onStart of your activity
lv.setChoiceMode(ListView.CHOICE_MODE_SINGLE);
where lv is instance of listView
then override this method and add the following lines to it.
#Override
public void onListItemClick(ListView l, View v, int position, long id) {
// Set the item as checked to be highlighted
lv.setItemChecked(position, true);
v.setBackgroundColor(Color.BLUE);
conversationAdapter.notifyDataSetChanged();
}
and then change the color of previous selected item's background back to normal in getView method of your custom adapter
Try this:
listViewDay.setItemChecked(position, true);
listViewDay.setSelection(position);
listitem.xml
<?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="40dp"
android:background="#drawable/list_day_selector" >
<TextView
android:id="#+id/txtItemDay"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center_vertical|center_horizontal"
android:text="22"
android:textColor="#android:color/white"
android:textSize="22sp" />
</LinearLayout>
list_selector.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/list_item_bg_normal" android:state_activated="false"/>
<item android:drawable="#drawable/bg_with_left_arrow" android:state_pressed="true"/>
<item android:drawable="#drawable/bg_with_left_arrow" android:state_activated="true"/>
</selector>
Programmatically, use setSelector. For example:
lv.setSelector(R.color.abc_background_cache_hint_selector_material_dark);
After some hours of encountering one glitch after another (including the selector leaving a dirty stripe), I decided to do it myself:
class MyListAdapter extends ArrayAdapter<MyData> {
// !!! access to the current selection
int mSelected = 0;
#Override
public View getView(int position, View convertView, ViewGroup parent) {
View v = super.getView(position, convertView, parent);
// !!! this is where the selected item is highlighted
v.findViewById(R.id.selectionSign).setVisibility(position == mSelected ? View.VISIBLE : View.INVISIBLE);
return v;
}
public CommandListAdapter(Context context, List<MyData> objects) {
super(context, R.layout.mylistitem, R.id.mytext, objects);
}
}
with the OnItemClickListener:
mMyListView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
#Override
public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
setSelectionPosNoUpd(position);
update();
}
});
and the functions defined as:
void setSelectionPosNoUpd(int n) {
mCommandListAdapter.mSelected = n;
//update();
}
void update() {
mListViewOfCommands.smoothScrollToPosition(getSelectionPos());
mCommandListAdapter.notifyDataSetChanged();
}
and the list item XML (res/layout/mylistitem.xml) is:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#+id/mytext"
/>
</LinearLayout>
<View
android:id="#+id/selectionSign"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#10ff5000"
android:visibility="invisible"
/>
</FrameLayout>
The downside is that after changing the selection I have to update(): there is no easy way to unhighlight the previously highlighted view.
Set item state in selector like this:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_activated="true"
android:color="#color/XXX/>
</selector>
I don't know why state_checked not working. At first I thought it must be a Checkableview then I tried CheckedTextView. Still not working.
Anyway, state_activated will solve the problem.
I think you cann't use mListView inside anonymous class. You must use AdapterView arg0
mListView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
#Override
public void onItemClick(AdapterView<?> arg0, View view,
int position, long id) {
AnyObject obj=(AnyObject)arg0.getItemAtPosition(position);
........
.........
.........
}
});
This post has worked out for me: http://www.mynewsfeed.x10.mx/articles/index.php?id=14
The ListView (inside layout.xml):
<ListView
android:id="#+id/list"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:background="#drawable/list_custom"
android:choiceMode="singleChoice"/>
Selector drawable(list_custom.xml):
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" android:drawable="#color/orange"/>
<item android:state_activated="true" android:drawable="#color/blue" />
<item android:drawable="#color/green" />
</selector>
Color.xml in values folder:
<resources>
<item name="blue" type="color">#FF33B5E5</item>
<item name="green" type="color">#FF99CC00</item>
<item name="orange" type="color">#FFFFBB33</item>
</resources>

Change background color of selected item on a ListView

I want to know on how I can change the background color of the selected item on my listView. I only want to change the specific item clicked by the user, meaning if the user clicks another item it will be the one which is highlighted. Well since I want it to keep simple as possible and use the default android listview I used this code instead:
record_list.setOnItemClickListener(new AdapterView.OnItemClickListener() {
#Override
public void onItemClick(AdapterView<?> adapterView, View view, int i, long l) {
try{
for (int ctr=0;ctr<=record_items.length;ctr++){
if(i==ctr){
record_list.getChildAt(ctr).setBackgroundColor(Color.CYAN);
}else{
record_list.getChildAt(ctr).setBackgroundColor(Color.WHITE);
}
}
}
catch (Exception e){
e.printStackTrace();
}
Log.v("Selected item",record_list.getItemAtPosition(i));
}
});
Ok this one is working but the problem is that it's slow. Now I want to know if there's any other way around that I can do which will give the same output as I made.
I tried using record_list.getSelectedView().setBackgroundColor(Color.CYAN); but it gives me a null pointer exception.
I also tried the selector.xml but it also didn't do the trick.
Furthermore, there is one properties here on ListView which is called listSelector. It's a drawable as said by the documentation "Drawable used to indicate the currently selected item in the list." I also believe that this should do the trick and yes it do the trick on my emulator but not on my galaxy tab. I also tried the other methods but nothing works as I wanted it to be.
You can keep track the position of the current selected element:
OnItemClickListener listViewOnItemClick = new OnItemClickListener() {
#Override
public void onItemClick(AdapterView<?> adapter, View arg1, int position, long id) {
mSelectedItem = position;
mAdapter.notifyDataSetChanged();
}
};
And override the getView method of your adapter:
#Override
public View getView(int position, View convertView, ViewGroup parent) {
final View view = View.inflate(context, R.layout.item_list, null);
if (position == mSelectedItem) {
// set your color
}
return view;
}
For me it did the trick.
You can use a selector. Change the colors values and modify the below according to your needs.
bkg.xml in drawable folder
<?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/pressed" />
<item android:state_focused="false"
android:drawable="#drawable/normal" />
</selector>
pressed.xml in drawable folder
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#FF1A47"/> // color
<stroke android:width="3dp"
android:color="#0FECFF"/> // border
<padding android:left="5dp"
android:top="5dp"
android:right="5dp"
android:bottom="5dp"/>
<corners android:bottomRightRadius="7dp" // for rounded corners
android:bottomLeftRadius="7dp"
android:topLeftRadius="7dp"
android:topRightRadius="7dp"/>
</shape>
normal.xml in drawable folder
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#FFFFFF"/>
<stroke android:width="3dp"
android:color="#0FECFF" />
<padding android:left="5dp"
android:top="5dp"
android:right="5dp"
android:bottom="5dp"/>
<corners android:bottomRightRadius="7dp"
android:bottomLeftRadius="7dp"
android:topLeftRadius="7dp"
android:topRightRadius="7dp"/>
</shape>
Set the background drawable to listview custom layout to be inflated for each row
I recommend using a custom listview with a custom adapter.
android:background="#drawable/bkg"
If you have not used a custom adapter you can set the listselector to listview as below
android:listSelector="#drawable/bkg"
Define variable
private ListView mListView;
Initialize variable
mListView = (ListView)findViewById(R.id.list_view);
OnItemClickListener of listview
mListView.setOnItemClickListener(new OnItemClickListener() {
#Override
public void onItemClick(AdapterView<?> adpterView, View view, int position,
long id) {
for (int i = 0; i < mListView.getChildCount(); i++) {
if(position == i ){
mListView.getChildAt(i).setBackgroundColor(Color.BLUE);
}else{
mListView.getChildAt(i).setBackgroundColor(Color.TRANSPARENT);
}
}
}
});
Build and run the project - Done
If you want to have the item remain highlighted after you have clicked it, you need to manually set it as being selected in the onItemClick listener
Android ListView selected item stay highlighted:
myList.setOnItemClickListener(new OnItemClickListener() {
public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
view.setSelected(true); // <== Will cause the highlight to remain
//... do more stuff
}});
This assumes you have a state_selected item in your selector:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_enabled="true" android:state_pressed="true" android:drawable="#color/red" />
<item android:state_enabled="true" android:state_focused="true" android:drawable="#color/red" />
<item android:state_enabled="true" android:state_selected="true" android:drawable="#color/red" />
<item android:drawable="#color/white" />
</selector>
Method 1:
Update ListView in the your xml layout activity/fragment:
<ListView
...
android:choiceMode="singleChoice"
android:listSelector="#android:color/darker_gray"
/>
That's it, you're done!
If you want a programmatic way to handle this then use method 2...
Method 2:
If you're using a ListFragment you can override onListItemClick(), using the view to set the colour. Save the current View selected to reset the colour of the last selection.
Please note, this only works on listviews that fit on one screen, as the view is recycled.
public class MyListFragment extends ListFragment {
View previousSelectedItem;
...
#Override
public void onListItemClick(ListView parent, View v, int position, long id) {
super.onListItemClick(parent, v, position, id);
if (previousSelectedItem!=null) {
previousSelectedItem.setBackgroundColor(Color.WHITE);
}
previousSelectedItem=v;
v.setBackgroundColor(Color.BLUE);
}
}
First you can create selector xml file like below in your drawable folder drawable/list_item_selector.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_activated="true">
<shape android:shape="rectangle">
<solid android:color="#333333" />
<padding android:left="5dp" android:right="5dp" />
</shape></item>
<item><shape android:shape="rectangle">
<solid android:color="#222222" />
</shape></item>
</selector>
And then in your listview specify background as
android:background="#drawable/list_item_selector"
For those wondering what EXACTLY needs to be done to keep rows selected even as you scroll up down. It's the state_activated The rest is taken care of by internal functionality, you don't have to worry about toggle, and can select multiple items. I didn't need to use notifyDataSetChanged() or setSelected(true) methods.
Add this line to your selector file, for me drawable\row_background.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" android:drawable="#android:color/holo_blue_light"/>
<item android:state_enabled="true" android:state_pressed="true" android:drawable="#android:color/holo_blue_light" />
<item android:state_enabled="true" android:state_focused="true" android:drawable="#android:color/holo_blue_bright" />
<item android:state_enabled="true" android:state_selected="true" android:drawable="#android:color/holo_blue_light" />
<item android:state_activated="true" android:drawable="#android:color/holo_blue_light" />
<item android:drawable="#android:color/transparent"/>
</selector>
Then in layout\custom_row.xml
<?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="wrap_content"
android:padding="10dip"
android:background="#drawable/row_background"
android:orientation="vertical">
<TextView
android:id="#+id/line1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
For more information, I'm using this with ListView Adapter, using
myList.setChoiceMode(ListView.CHOICE_MODE_MULTIPLE_MODAL);
and
myList.setMultiChoiceModeListener(new MultiChoiceModeListener()...
from this example: http://www.androidbegin.com/tutorial/android-delete-multiple-selected-items-listview-tutorial/
Also, you (should) use this structure for your list-adapter coupling: List myList = new ArrayList();
instead of: ArrayList myList = new ArrayList();
Explanation: Type List vs type ArrayList in Java
Simplest way I've found:
in your activity XML add these lines:
<ListView
...
android:choiceMode="singleChoice"
android:listSelector="#666666"
/>
or programatically set these properties:
listView.setSelector(Drawable selector)
listView.setSelector(int resourceId)
My particular example:
<ListView
android:choiceMode="singleChoice"
android:listSelector="#666666"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/listView"/>
thanks to AJG:
https://stackoverflow.com/a/25131125/1687010
View updateview;// above oncreate method
listView.setChoiceMode(ListView.CHOICE_MODE_SINGLE);
listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
#Override
public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
if (updateview != null)
updateview.setBackgroundColor(Color.TRANSPARENT);
updateview = view;
view.setBackgroundColor(Color.CYAN);
}
});
I'm also doing the similar thing: highlight the selected list item's background (change it to red) and set text color within the item to white.
I can think out a "simple but not efficient" way:
maintain a selected item's position in the custom adapter, and change it in the ListView's OnItemClickListener implement:
// The OnItemClickListener implementation
#Override
public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
mListViewAdapter.setSelectedItem(position);
}
// The custom Adapter
private int mSelectedPosition = -1;
public void setSelectedItem (int itemPosition) {
mSelectedPosition = itemPosition;
notifyDataSetChanged();
}
Then update the selected item's background and text color in getView() method.
// The custom Adapter
#Override
public View getView(int position, View convertView, ViewGroup parent) {
...
if (position == mSelectedPosition) {
// customize the selected item's background and sub views
convertView.setBackgroundColor(YOUR_HIGHLIGHT_COLOR);
textView.setTextColor(TEXT_COLOR);
} else {
...
}
}
After searching for a while, I found that many people mentioned about to set android:listSelector="YOUR_SELECTOR". After tried for a while, I found the simplest way to highlight selected ListView item's background can be done with only two lines set to the ListView's layout resource:
android:choiceMode="singleChoice"
android:listSelector="YOUR_COLOR"
There's also other way to make it work, like customize activatedBackgroundIndicator theme. But I think that would be a much more generic solution since it will affect the whole theme.
use the below xml as listitem background it will solve all the issues.
The selected will be highlighted though you scrolled down.
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#android:color/holo_orange_dark" android:state_pressed="true"/>
<item android:drawable="#android:color/holo_green_light" android:state_selected="true"/>
<item android:drawable="#android:color/holo_green_light" android:state_activated="true"/>
Thanks,
Nagendra
I know this is a old question, but i give a simple solution for this need (without loops!):
//On your adapter create a variable:
private View lastSelectedItem;
//Define the folowing method:
private void toggleBackgroundItem(View view) {
if (lastSelectedItem != null) {
lastSelectedItem.setBackgroundColor(Color.TRANSPARENT);
}
view.setBackgroundColor(getResources().getColor(R.color.colorPrimaryDark));
lastSelectedItem = view;
}
//finally invoque the method onItemClick
lvSac.setOnItemClickListener(new AdapterView.OnItemClickListener()
{
#Override
public void onItemClick (AdapterView < ? > adapterView, View view,int i, long l){
toggleBackgroundItem(view);
}
}
In a ListView set:
android:choiceMode="singleChoice"
Create a selector for a background (drawable/selector_gray.xml):
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#color/gray" android:state_checked="true" />
<item android:drawable="#color/white" />
</selector>
Add an item for a list:
<?xml version="1.0" encoding="utf-8"?>
<TextView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:padding="5dp"
android:background="#drawable/selector_gray"
android:textColor="#color/colorPrimary"
tools:text="Your text" />
In a ViewHolder you can inflate this item.
nameofList.getChildAt(position).setBackgroundColor(RED);
worked for me
assume you want one item to be clicked each time. Then this code works well. Let's take the listview name as stlist
stList.setOnItemClickListener(new AdapterView.OnItemClickListener() {
#Override
// here i overide the onitemclick method in onitemclick listener
public void onItemClick(AdapterView<?> parent, View view,
int position, long id) {
//color change
//selected item colored
for(int i=0; i<stList.getAdapter().getCount();i++)
{
stList.getChildAt(i).setBackgroundColor(Color.TRANSPARENT);
}
parent.getChildAt(position).setBackgroundColor(Color.GRAY);
});
This is a simple method that can handle selection even if the list is long as well:
public View getView(final int position, View convertView, ViewGroup parent) {
// TODO Auto-generated method stub
Holder holder=new Holder();
View rowView;
rowView = inflater.inflate(R.layout.list_item, null);
//Handle your items.
//StringHolder.mSelectedItem is a public static variable.
if(getItemId(position)==StringHolder.mSelectedItem){
rowView.setBackgroundColor(Color.LTGRAY);
}else{
rowView.setBackgroundColor(Color.TRANSPARENT);
}
return rowView;
}
And then in your onclicklistener:
list.setOnItemClickListener(new AdapterView.OnItemClickListener() {
#Override
public void onItemClick(AdapterView<?> adapterView, View view, int i, long l) {
StringHolder.mSelectedItem = catagoryAdapter.getItemId(i-1);
catagoryAdapter.notifyDataSetChanged();
.....
It's very simple. In the constructor of the "OnItemClick" use the parameter "view" which is the second one that represents the listView or GridView's items's view and it becomes the new item's view made by the adapterView it self. So to set new color ONLY to the SELECTED ITEM itself do as the following:
public void onItemClick(AdapterView<?> adapterView, View view, int i, long l){
//view is instead of the view like textView , ImageView, or whatever
view.setBackgroundColor(Color.green);
}
If you do any different codes to set new color, you will face awkward behaviours like the green color will be applied to the unclicked item.

Categories

Resources