Currently I have a single button with image bound to it and I wanted to add a click effect on that(not click event, a effect). Well it worked fine. I created two xml in my drawable folder and added styles and gradient to it. But now I want to add few more buttons and apply the same click effect on them. One way I can create multiple xml files for as many buttons created. But what happened to code reuse? I want to reuse the same xml files for styling other buttons too. Can it be done? thanks in advance.
My button.xml file is:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_focused="true" android:state_pressed="false" android:drawable="#drawable/stb" />
<item android:state_focused="true" android:state_pressed="true" android:drawable="#drawable/gradient" />
<item android:state_focused="false" android:state_pressed="true" android:drawable="#drawable/gradient" />
<item android:drawable="#drawable/stb" />
</selector>
And my gradient.xml is:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<bitmap android:src="#drawable/stb"/>
</item>
<item>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient android:angle="90" android:startColor="#990f0f10"
android:centerColor="#990d0d0f"
android:endColor="#995d5d5e"/>
</shape>
</item>
</layer-list>
You can set the very same xml selector drawable to as many views as you want. Just set the other button's background via XML:
android:background="#drawable/button"
or code:
yourSecondButton.setBackgroundResource(R.drawable.button);
Related
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 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>
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.
Does any one knows how can i skin an android button to look like this:
a busy cat http://www.11sheep.com/temp/picForSO.jpg
Thanks in advance,
Lior
The following layout files will product a button with 5px radius, of course u input your own color and change the solid color to gradient to match ur screenshots, then on the button change the text colour to white or something.. I dont have time for examples now.. good luck though.
and lastly you have to apply them as background to your button like this
<Button
android:id="#+id/btnLoveThisOne"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dp"
android:text="Love me love u too!"
android:background="#drawable/button_background" <!-- Yes look at me -->
/>
button_background_normal.xml
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#color/button_background_normal_color"/> <!-- Change this to your own colour -->
<corners android:radius="5px"/>
<stroke android:width="1dp" android:color="#20ffffff"/>
</shape>
button_background_pressed.xml
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#color/button_background_pressed_color"/> <!-- Change this to your own colour -->
<corners android:radius="5px"/>
</shape>
button_background.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_focused="true"
android:state_pressed="false"
android:drawable="#drawable/button_background_normal" />
<item android:state_focused="true"
android:state_pressed="true"
android:drawable="#drawable/button_background_pressed" />
<item android:state_focused="false"
android:state_pressed="true"
android:drawable="#drawable/button_background_pressed" />
<item android:drawable="#drawable/button_background_normal" />
</selector>
I know two ways to make it:
a Button or TextView with an image having that engraving rectangle, for stretch, use 9.patch :)
a Button or TextView with transparent background and a selector drawing the shape border
However, I don't know exactly how they did as shown in your picture.
I tried to change the background color of the toggle button using XML file as white color, but the toggle button is totally damaged. It looks like all the button was covered with white.
There is no indication of ON or OFF on the toggle button when I have changed the color of the toggle button to white. Is there is another way to change the background which will not damage the indication of the toggle button?
<ToggleButton android:id="#+id/togglebutton"
android:layout_width="100px"
android:layout_height="46px"
android:background="#ffffff"
android:layout_above ="#+id/save"
android:textOn="DAY"
android:textOff="NIGHT" />
This is how my XML code look for the toggle button.
Yes, there is a way to change the background as you wish, but you have to use a selector like this as background:
<selector
xmlns:android="http://schemas.android.com/apk/res/android"
>
<item
android:state_focused="true"
android:state_pressed="false"
android:drawable="#drawable/some_image" />
<item
android:state_focused="true"
android:state_pressed="true"
android:drawable="#drawable/some_other_image" />
<item
android:state_focused="false"
android:state_pressed="false"
android:drawable="#drawable/some_image1" />
<item
android:state_focused="false"
android:state_pressed="true"
android:drawable="#drawable/other_image" />
</selector>
For #Drawable, etc. (you can use a color or make a gradient. Check this for more information about gradients.
Follow this way to make your ToogleButton have background color red when On and green when OFF
First, create tooglebutton_selector.xml in drawable folder
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/togglebutton_on"
android:state_checked="true" />
<item android:drawable="#drawable/togglebutton_off"
android:state_checked="false"
/>
</selector>
Second, create togglebutton_on.xml in drawable folder
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid
android:color="#ff0000" /> // red color
</shape>
Third, create togglebutton_off.xml in drawable folder
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid
android:color="#00FF00" /> // green color
</shape>
Finally, in your ToggleButton
<ToggleButton
android:id="#+id/btnMon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/tooglebutton_selector" //set background of ToggleButton to tooglebutton_selector
/>
When you decompile your SystemUI.apk, you should go to the following file: SystemUI/res/values/colors.xml
Then change the following line:
#ff000000
#ffffffff
#80000000
#ffadc1d6
#ffffffff
#ffe6e6e6