I am trying to set the foreground color of a listview item on multi select of items. But my problem is it is collapsing with the background attribute of listview item. How do I set the foreground to ?attr/activatedBackgroundIndicator without collision with background drawable selector. I have the background drawable set to selector_card_bg which displays card like item. Now, on selecting these items , I want the selected items to be highlighted as in the screenshot.
listview_item:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/selector_card_bg"
android:foreground="?attr/activatedBackgroundIndicator"
android:padding="5dp" >
selector_card_bg:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:state_pressed="true"
android:drawable="#drawable/card_background_pressed" />
<item android:drawable="#drawable/card_background" />
</selector>
card_background:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<solid android:color="#CABBBB"/>
<corners android:radius="2dp" />
</shape>
</item>
<item
android:left="0dp"
android:right="0dp"
android:top="0dp"
android:bottom="2dp">
<shape android:shape="rectangle">
<solid android:color="#4f334e"/>
<corners android:radius="2dp" />
</shape>
</item>
</layer-list>
UPDATE:
Able to achieve by adding the code in getView of adapter. But getView is called so many times because of this. Any suggestions to improve this?
if(mSelectedItemsIds!=null && mSelectedItemsIds.get(position, false))
{
Log.d("tag","if triggered"+mSelectedItemsIds+"position is="+position);
view.setBackgroundColor(Color
.parseColor("#CCCCCC"));
}
else
{
Log.d("tag","else triggered"+mSelectedItemsIds+"position is="+position); // how to restrict this else loop from getting called always
view.setBackgroundResource(R.drawable.selector_card_bg);
}
Related
I have a button that is clear with a white border, and when tapped it becomes light grey. My issue is this transition is instant and quite jarring to see. I want to learn how to smoothly flow from the one color to the other.
I have an XML file that has my button properties:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true">
<shape android:shape="rectangle">
<corners android:radius="250px" />
<padding android:left="100px" android:right="100px" />
<stroke android:color="#cecece" android:width="15px" />
</shape>
</item>
<item>
<shape android:shape="rectangle">
<corners android:radius="250px" />
<padding android:left="100px" android:right="100px" />
<stroke android:color="#color/colorWhite" android:width="15px" />
</shape>
</item>
Then the activity's button has the XML file as the background.
You can use animated-selector instead of plain selector. And control the animation through alpha property.
while using a ListView to show some data to the user, By default the ListView items have a "Clicked" Animation when the user clicks them [as shown in the picture]
Now, i wanted to design the items in the ListView and added android:background="#drawable/border"
to their XML layout definition
when drawable/border.xml is defined to be:
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android">
<stroke android:width="1.5dp" android:color="#000000" />
<solid android:color="#ffe5d226"/>
<padding
android:left="7dp"
android:top="7dp"
android:right="7dp"
android:bottom="0dp" />
<corners android:radius="4dp"/>
</shape>
After doing this the ListView items changed to the shape and color that I wanted, However the "Clicked" animation was gone [I am Clicking on the "Wednesday" in the picture below]
I've been trying to solve this for a long time but with no success :\
How can I retrieve the "Clicked" Animation while keeping the Item designed?
A solution to my problem was found by creating in the #drawable folder:
1) "NOT Clicked" Background layout to the ListView item named not_clicked_layout.xml
like:
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android">
<stroke android:width="1.5dp" android:color="#000000" />
<solid android:color="#color/green"/>
<padding
android:left="7dp"
android:top="7dp"
android:right="7dp"
android:bottom="0dp" />
<corners android:radius="4dp"/>
</shape>
2) "Clicked" Background layout to the ListView item, i.e. how it will look like the moment the user pushes it. named clicked_layout.xml
Like:
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#color/gold"/>
<stroke android:width="1.5dp" android:color="#000000" />
<padding
android:left="7dp"
android:top="7dp"
android:right="7dp"
android:bottom="0dp" />
<corners android:radius="4dp"/>
</shape>
3) The last and most important layout is the one that sticks the two previous steps by creating the last layout named: list_selector.xml:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:state_pressed="false"
android:drawable="#drawable/not_clicked_layout" />
<item android:state_pressed="true"
android:drawable="#drawable/clicked_layout" />
</selector>
The above layout declares the "not_clicked_layout.xml" to be shown when the item is NOT pressed, and "clicked_layout" to be shown when the item is pressed.
4) All that is left to do is to add:
android:background="#drawable/list_selector"
to the layout of your ListView Item and the "Clicked" Animation will arise from the dead :)
Note: this Solution is relevant not only to ListView items, but to any GUI element you would like to create a "Pushed" Animation.
I am using the following xml code to show smooth top white strip and bottom white strip on list item selection. The problem is that it shows gradient on list item selection.I think, I am missing something in xml,Please help me.
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape>
<gradient
android:startColor="#android:color/white"
android:centerColor="#android:color/transparent"
android:endColor="#android:color/white"
android:angle="90" />
</shape>
</item>
</selector>
<!-- If you simply want a background for your list item, use the following -->
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle"><stroke android:color="#color/popup_border" android:width="1dp"/> <!-- For border/outline(Remove this line if you don't want border/outline)-->
<gradient android:startColor="#android:color/white" android:centerColor="#android:color/transparent" android:endColor="#android:color/white" android:angle="270" />
</shape>
</item>
</selector>
I am using a listview. Each row has a fancy layout with different press states, shapes and layers. In the adapter of my listview, I would like to set a particular color to these states according to the list row content. The particular color I would like to change in my adapter for each row is the on in the file "list_row_pressed.xml" (see below, almost at the end, on line android:color="#android:color/blue" )
The xml for each row is in an xml file "list_child.xml"
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/rlLevel"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#layout/list_rowbg" >
...
"list_rowbg.xml" is another xml file containing my 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="#layout/list_row_pressed" >
</item>
<item
android:state_pressed="false"
android:drawable="#layout/list_row_notpressed" >
</item>
"list_row_pressed.xml" is:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape>
<solid
android:color="#android:color/transparent" />
<corners
android:radius="3dp" />
</shape>
</item>
<!-- Top Shadow -->
<item android:top="#dimen/rowShadow">
<shape>
<solid
android:color="#android:color/blue" /> <-- I WANT TO SET THIS COLOR DYNAMICALLY
<corners android:radius="3dp" />
<stroke
android:width="0dp"
android:color="#color/grey" />
</shape>
</item>
So how can I change in my listview adapter the color "#android:color/blue" in my file "list_row_pressed.xml" ?
Thanks
I want to set a rounded corner for a button in android along with changing the button color on when selected. I am doing the following things.
drawable/push_button.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="#color/green"/>
<item android:state_focused="true" android:drawable="#color/green"/>
<item android:state_focused="false" android:drawable="#color/green"/>
<item android:state_pressed="false" android:drawable="#color/red"/>
<item android:drawable="#drawable/push_button_background"/>
</selector>
drawable/push_button_background.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
>
<solid android:color="#3F4040"/>
<corners
android:radius="7dp"
/>
</shape>
and in code, I am using
android:background="#drawable/push_button"
Here, the problem is, button colors are setting properly when selected & deselected. But, rounded corners are not working.
How to do that?
If I use
android:background="#drawable/push_button_background"
then, rounded corners are working but the button color change on selection is not working
How to implement this?
I have referred this link. Even then no help!!
I have found answer for my question with few trial & error attempts.
Here is the solution.
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:state_pressed="true">
<shape >
<solid android:color="#color/green"/>
<corners
android:radius="7dp"/>
</shape>
</item>
<item android:state_focused="true" >
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<solid android:color="#color/green"/>
<corners
android:radius="7dp"/>
</shape>
</item>
<item android:state_focused="false" >
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<solid android:color="#color/red"/>
<corners
android:radius="7dp"/>
</shape>
</item>
<item android:state_pressed="false" >
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<solid android:color="#color/red"/>
<corners
android:radius="7dp"
/>
</shape>
</item>
</selector>
What I did was defined the shape and specify the dp of each corner.
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" android:padding="90dp">
<solid android:color="#FFFFFF"/>
<padding />
<corners
android:bottomRightRadius="15dp"
android:bottomLeftRadius="15dp"
android:topLeftRadius="15dp"
android:topRightRadius="15dp"/>
</shape>
If you increase the dp in each corner it will make the button more rounded.
I have been successful at doing exactly what you're describing. I did the following:
First, I created a new class that extends Button. In this class, I created a method called setState():
public void setState (int s)
{
if (s > 0 && s < 4 &&)
{
this.state = s;
switch (state)
{
case 1:
setBackgroundDrawable (def_gray);
break;
case 2:
setBackgroundDrawable (lt_gray);
break;
case 3:
setBackgroundDrawable (black);
}
}
}
The three background drawables you see above are XML files describing the button look. They are mostly the same, but vary in the color set for each one. The default gray button is described like this:
<?xml version="1.0" encoding="utf-8"?>
<selector
xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape>
<gradient
android:startColor="#333333"
android:endColor="#333333" />
<stroke
android:width="2dp"
android:color="#android:color/white" />
<corners
android:radius="5dp" />
<padding
android:left="2dp"
android:top="2dp"
android:right="2dp"
android:bottom="2dp" />
</shape>
</item>
</selector>
As far as I know, that XML format is expecting to be used to configure a color gradient on the button face. Since that wasn't what I wanted, I set both color values the same and the background color is consistent. You may need to experiment a bit with color values, but it looks like you've already got a handle on that.