I have a png button, which is enabled, non-pressed. When user click the button, I want only to darken the png. I need something like this:
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
//normal button with background my_button.png
<item
android:state_enabled="true"
android:drawable="#drawable/my_button" //my_button.png
/>
//pressed button with background my_button.png overlayed by 50% black
<item
android:state_pressed="true"
android:state_enabled="true"
>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<bitmap android:src="#drawable/my_button"/>
<color android:color="#00000088"/>
</RelativeLayout>
</item>
</selector>
Is there some way how to do that? Or do I must have another png file?
In my_button_bg.xml:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/button_pressed" android:state_pressed="true"/>
<item android:drawable="#drawable/button_normal"/>
</selector>
button_normal is a png
button_pressed is an xml:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:drawable="#drawable/button_normal"/>
<item android:drawable="#color/btn_bg_pressed_mask"/>
</layer-list>
where btn_bg_pressed_mask is a color:
<color name="btn_bg_pressed_mask">#19000000</color>
This should work
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:state_enabled="true"
android:drawable="#drawable/my_button" />
<item>
<selector>
<item
android:state_pressed="true"
android:state_enabled="true">
<color android:color="#00000088" />
</item>
</selector>
</item>
</layer-list>
The order of the items in the selector XML make a difference. The first match is what is going to get displayed. As you see in marmor's answer, the normal state of the button is listed at the end.
Another thing to keep in mind is that if you are using 9-patch images (.9.png), the color will only be applied to the content area. So if you want the color to be overlayed over the whole image, make sure to mark the whole image as the content area.
Related
What I want to do is a custom colored image like this,
What I tried is making a layer list like this
<layer-list
xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:drawable="#drawable/ic_home"
android:bottom="20dp"
>
</item>
<item
android:top="20dp"
android:drawable="#drawable/ic_bottom_nav_selected_indicator"
android:gravity="center_vertical|center_horizontal">
</item>
But it will be shown white not orange and white
then I created a an image containing the two items and the image Shown as white !!!!
not forget to mention I added the selector like this.
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true" android:drawable="#drawable/img_selected_home"/>
<item android:state_pressed="true" android:state_enabled="true"
android:drawable="#drawable/img_selected_home"/>
<item android:drawable="#drawable/ic_home"/>
</selector>
I have two images. In one is a number, the other is shadow. I need to show this two images as can be seen in the second photo.
This is my code. Right now it only shows or the number (when is not pressed), or the shadow(when is pressed).
How is possible to show both images when the user press the button?
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/button_select" android:state_pressed="true"
android:alpha="0.75"/>
<item android:drawable="#drawable/number_1" android:state_enabled="true" />
<item android:drawable="#drawable/number_1" android:state_pressed="false"
/>
</selector>
this are the two images
this is the goal
Also I was trying using layerDrawable in this way, but didn't work:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/button_select" android:state_pressed="true"
android:alpha="0.75"/>
<item android:drawable="#drawable/number_1" android:state_enabled="true" />
</selector>
</item>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/number_1" android:state_pressed="false"
/>
</selector>
</layer-list>
You should use two different images...
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/pressed_image" android:state_pressed="true"/>
<item android:drawable="#drawable/normal_image" android:state_pressed="false"/>
</selector>
You can use Relative Layout for that
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<ImageView
android:id="#+id/iv_background"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/button_select"/>
<ImageView
android:id="#+id/iv_img"
android:layout_width="wrap_content"
android:padding="5dp"
android:layout_height="wrap_content"
android:background="#drawable/number_1"/>
</RelativeLayout>
Just change image of iv_img id GOOD LUCK
please change the drawable selector file with this code..
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true">
<layer-list>
<item android:drawable="#drawable/number_1" />
<item android:bottom="#dimen/margin_5" android:left="#dimen/margin_5" android:right="#dimen/margin_5" android:top="#dimen/margin_5">
<bitmap android:src="#drawable/button_select" />
</item>
</layer-list>
</item>
<item android:drawable="#drawable/number_1" android:state_pressed="false"/>
Limitation ::
It can use for single image of number ..for multiple numbers you have to create different selector.xml for each one..
Please tell if need more explanation or help..
I want to make a weekly calendar, where every day is a custom checkbox with objective to look like the image bellow:
(http://i.imgur.com/WjIKCd0.png)
When the user clicks on a day (Monday in this case), the "background" and "button" checkbox changes as well the text color...
I made the drawables and it seems to work fine... check bellow the code:
Checkbox layout:
<CheckBox
android:id="#+id/selectMonday"
android:layout_width="40dp"
android:layout_height="40dp"
android:button="#drawable/ic_none"
style="#style/CheckBoxBackgroundView"
android:onClick="selectDay"
android:text="#string/monday_letter"
android:gravity="center"
android:checked="true"/>
(the drawable "ic_none", is simple a 135x135 "transparent" image with nothing in it...)
Style (CheckBoxBackgroundView):
<style name="CheckBoxBackgroundView">
<item name="android:background">#drawable/background_day_week_picker_box_selector</item>
<item name="android:textColor">#color/text_color_day_week_picker_box_selector</item>
<item name="android:textSize">#dimen/text_spinner_text</item>
<item name="android:textStyle">bold</item>
</style>
Background Selector (background_day_week_picker_box_selector):
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="false"
android:drawable="#drawable/background_day_of_week_picker_unselected" />
<item android:state_checked="true"
android:drawable="#drawable/background_day_of_week_picker_selected" />
</selector>
Background selected (background_day_of_week_picker_selected):
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<!-- view background color -->
<solid
android:color="#color/red_color" >
</solid>
<!-- view border color and width -->
<stroke
android:width="3dp"
android:color="#color/transparent">
</stroke>
<!-- Here is the corner radius -->
<corners
android:radius="10dp" >
</corners>
</shape>
and finally the color selector (text_color_day_week_picker_box_selector):
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="false"
android:color="#color/red_color"></item>
<item android:state_checked="true"
android:color="#color/white"></item>
</selector>
I tried this in several devices... in some, it appears like it suppose to, in others the text disappears and it looks like this:
(http://i.imgur.com/Jy9FrPS.png)
probably is coincidence, but all the devices that worked are below 5 inches...
is there anything wrong with my code that I'm not seeing? anyone have any suggestions?
Thanks in advance
The problem is that the 135x135 button drawable is pushing the text out of the bounds of your CheckBox's width. Instead of using a drawable, you can just set android:button="#color/transparent".
I have the following definition of an android style and selector applied to ListView, however I see no effect of gray gradient applied when I click on it. On click it immediately displays blue gradient.
As author of this example has written:
We want to apply this to our list selector. Instead of always showing
the same gradient, we want the gradient to change its start color from
grey to a light blue whenever a list item is pressed. Because we now
have two different list selectors—one for default state one for
pressed state—we need to keep them in separate files.
Can someone explain how it should be displayed properly ? Or I'm missing something ?
More general, what exactly I should expect to see on display screen ? Something like fluent transition from gray gradient to blue gradient on list item click ?
Update: this is how author 'sees' it, but when I click on item it looks only like on right side of picture. May I assume that author wants to see all items in list to be gray by default ? Or this state is not applicable to list view items ?
list_item_default.xml -> GRAY GRADIENT
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<gradient
android:angle="0"
android:endColor="#FFFF"
android:startColor="#AFFF" />
<stroke
android:width="1dip"
android:color="#CCC" />
<corners android:radius="5px" />
</shape>
list_item_pressed.xml -> BLUE GRADIENT
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<gradient
android:angle="0"
android:endColor="#FFFF"
android:startColor="#AA66CCFF" />
<stroke
android:width="1dip"
android:color="#CCC" />
<corners android:radius="5px" />
</shape>
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_default" android:state_pressed="false"/>
<item android:drawable="#drawable/list_item_pressed" android:state_pressed="true"/>
</selector>
styles.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="MyMoviesTheme" parent="#android:style/Theme.Black">
<item name="android:listViewStyle">#style/MyMoviesListView</item>
<item name="android:windowBackground">#drawable/film_bg</item>
</style>
<style name="MyMoviesTextAppearance" parent="#android:style/TextAppearance">
<!--<item name="android:textStyle">bold</item>-->
</style>
<style name="MyMoviesListView" parent="#android:Widget.ListView">
<item name="android:background">#color/list_background</item>
<item name="android:listSelector">#drawable/list_selector</item>
<item name="android:cacheColorHint">#android:color/transparent</item>
<item name="android:fastScrollEnabled">true</item>
<item name="android:footerDividersEnabled">false</item>
</style>
</resources>
Try adding a sentence：
<item
android:state_enabled="true"
android:drawable="#drawable/list_item_default"/>
<item
android:state_enabled="true"
android:drawable="#drawable/list_item_pressed"
android:state_pressed="true"/>
I am using the Xamarin sample at the following link:
Part 3 - Customizing a ListView's Appearance
The sample code is from the following file: CustomRowView.zip
Here is a screenshot of my running code: Emulator screenshot
The background color of the ListView items are in yellow.
May I please have some help to change this color to be the default color, or to choose this color?
I am not sure where to find this in code. I have looked in the XML layout files, but cannot find the correct item.
In the RelativeLayout, there is a reference to the following:
android:background="#drawable/CustomSelector"
And this is the contents of the file:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="false"
android:state_selected="false"
android:drawable="#color/cellback" />
<item android:state_pressed="true" >
<shape>
<gradient
android:startColor="#E88A93"
android:endColor="#E88A93"
android:angle="270" />
</shape>
</item>
<item android:state_selected="true"
android:state_pressed="false"
android:drawable="#color/cellback" />
</selector>
Is this code relevant to the question?
Thanks in advance
The "yello background color" is the custom listview item's background color. In the toturial you referenced, you can find it in "/Resources/Layout/CustomView.axml" :
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#FFDAFF7F"
android:padding="8dp">
<LinearLayout android:id="#+id/Text"
android:orientation="vertical"
...
...
android:layout_height="48dp"
android:padding="5dp"
android:src="#drawable/icon"
android:layout_alignParentRight="true"
/>
</RelativeLayout >
the android:background="#FFDAFF7F" is what you want to modify.
Your ListView is using CustomView.axml for each row. in CustomView.axml parent element (RelativeLayout) is using CustomSelector.xml from Drawable folder in android:background attribute. In this file you can change colors of three states (pressed, pressed & selected, none) as you wish.
Create a color.xml in your values file and defines your color(which color you wnt to set to your listview ite) here
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="magenta">#FF00FF</color>
<color name="yellow">#FFFF00</color>
<color name="light_grey">#ffb9b8bb</color>
</resources>
and then use these colors in your custom selector
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#color/light_grey" android:state_pressed="false" android:state_selected="false"/>
<item android:state_pressed="true"><shape>
<gradient android:angle="270" android:endColor="#E88A93" android:startColor="#E88A93" />
</shape></item>
<item android:drawable="#color/light_grey" android:state_pressed="false" android:state_selected="true"/>
</selector>
I never get it yellow, which should come after pressing an item in the list.
(I changed your sample to yellow for state_pressed=true.
Tks
Seli
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#color/light_grey" android:state_pressed="false" android:state_selected="false"/>
<item android:state_pressed="true">
<shape>
<gradient android:angle="270" android:endColor="#E88A93" android:startColor="#E88A93" />
</shape>
</item>
<item android:drawable="#color/yellow" android:state_pressed="false" android:state_selected="true"/>
</selector>