I want to set opacity to my ImageButton, so when it is unselected, I can see the background a bit, and when I press on it - it becomes normal(no transparency).
If the background you are using is itself an image, then you can't simply "set" the transparency, it's coming from the png image that is the resource for the background. I'd recommend creating 3 9-patch png images for the different stages of the button using transparency as necessary for whichever stage you like. There's a description of how to use a different graphic and xml config file for your own background images in the docs on ImageButton
http://developer.android.com/reference/android/widget/ImageButton.html
If you used a solid color for the background, transparency can be achieved using a color code that has AARRGGBB as elements.
android:background="#55FF0000" would be a partially transparent red background.
Use Selector (http://developer.android.com/reference/android/content/res/ColorStateList.html)
The layout code would look sth like that :
android:background="#drawable/my_selector"
and the selector code would be my_selector.xml with following content :
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:state_pressed="true" android:drawable="#drawable/button_without_opactity" />
<item android:state_selected="true" android:drawable="#drawable/button_without_opactity" />
<item android:drawable="#drawable/button_with_opacity" />
</selector>
button_without_opacity & button_with_opacity should be 9-patches
Related
I have a ToggleButton. I want the background to be clear, like in the default alarm app for the days of the week. The code below covers the toggle with the clear color. Is there any way to keep the toggle and change the background color without rolling my own toggle button? If not, that would be pretty poorly throughout, imo. Also, do I really have to define a clear color here or is there a built in clear color I could be using in my xml?
<ToggleButton
android:background="#drawable/clear_toggle_button"
android:id="#+id/btn_sunday"
android:layout_width="50dp"
android:layout_height="50dp"
android:textOn="SUN"
android:textOff="SUN"
/>
This is my colors.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="clear">#ffffff00</color>
</resources>
This is my color state list xml in the drawable folder.
<?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="#color/clear" />
<item
android:state_focused="true"
android:state_pressed="true"
android:drawable="#color/clear" />
</selector>
I want the background to be clear..
Transparent? Yes, android does have a color defined for that. You can access it as:
#android:color/transparent
Or, in code:
Color.TRANSPARENT
#android:color/transparent is defined in res/values/colors.xml:
<color name="transparent">#00000000</color>
The alpha bits (first and second) are zero.
But, your definition for color clear:
<color name="clear">#ffffff00</color>
is not transparent. You can visualize transparent as any color with its alpha set to zero. In your definition of clear, the alpha bits are full-blown to ff - 255 - opaque.
Your color definition produces this:
Is there any way to keep the toggle and change the background color without rolling my own toggle button?
The thing is: the background color and the toggle is one drawable. The whole 'on' state is represented by one single drawable, and so is the 'off' state. You cannot simply change the color without losing the toggle feedback. To change anything about the default ToggleButton's background, you will have to provide alternate drawables for each state.
I want the background to be clear, like in the default alarm app for the days of the week..
Setting the background to transparent will not work then. I would suggest that you go through the source code and resources involved in the making of a ToggleButton. For example, the on and off states of a ToggleButton are represented by drawable resources. So, if you decide to change the background, you will need to provide ToggleButton with at least two drawables: one for each state.
Look at how the default alarm app does it. The ToggleButtons being used for days are defined as:
<ToggleButton
android:layout_width="wrap_content"
android:layout_height="48dp"
android:layout_gravity="center"
android:padding="0dp"
style="#style/body"
android:textColor="#color/clock_gray"
**android:background="#drawable/toggle_underline"**
android:clickable="false"
android:singleLine="true"/>
The drawable toggle_underline is a state-selector:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" android:state_window_focused="true"
android:drawable="#drawable/toggle_underline_activated"/>
<item android:state_checked="true"
android:drawable="#drawable/toggle_underline_activated"/>
<item
android:drawable="#drawable/toggle_underline_normal"/>
</selector>
As you can see, when the ToggleButton is set to on or checked ( or when it is pressed), #drawable/toggle_underline_activated is set to the background. Otherwise, #drawable/toggle_underline_normal is used - state is off.
toggle_underline_activated and toggle_underline_normal are both 9-patch drawables.
toggle_underline_activated.9.png:
toggle_underline_normal.9.png:
You can get these drawables (and more) here: Link.
So, you can either create your own 9 patch drawables with transparent background, and use them with a state-selector drawable - or you can look at the default alarm clock project and use the drawables from its drawable-XXXX folders.
If you want to just change the color of the ToggleButton without losing its "Toggle" the way I found is to create a theme for it on your style.xml:
<style name="AppTheme.Button" parent="Widget.AppCompat.Button.Colored">
<item name="colorButtonNormal">#color/primary_dark</item>
<item name="android:textColor">#color/accent</item>
</style>
Then on the xml of your button just set the theme:
<ToggleButton
android:id="#+id/part2"
android:layout_width="60dp"
android:layout_height="wrap_content"
android:textOff="B"
android:textOn="B"
android:theme="#style/AppTheme.Button"/>
With this I've set the color of the button to my primary_dark color while maintaining it's toggle appearence.
Hope it may help someone.
Try this
<ToggleButton
android:background="#color/buttoncolor"
android:id="#+id/togglebutton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textOn="ON"
android:textOff="OFF"/>
Create values/color.xml
<color name="buttoncolor">#FF4000</color>
When I create a round ImageButton, there is also a transparent square border around the object. It shows wenn I click on the ImageButton in the Graphical Layout of the xml file.
How can I remove this border?
You can set custom background for the button,
You can specify two images(rounded) for the two states(pressed and not pressed), so that the only two round shaped images wold cover your image, default rectangular would go. I hope It helps you.
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#color/skyblueBackground" android:state_pressed="true" />
<item android:drawable="#color/transparentBackground" />
</selector>
I tried with colors, you can use images. You just want to save it in your drowable folder and specify it for the background of button
I have some problems to add the blue color over the button when the user press it. It works if there is no drawable in background for this button but in my case, i have to add a custom background and i want the blue color when the user clicks on the button.
Here is my code
<Button
android:id="#+id/create_profile"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/info_account"
android:layout_centerHorizontal="true"
android:background="#drawable/btn_create_profile" />
Blue color is not something that platform draws for you. Standard buttons have a selector drawable as their background, which involves a set of images for a view. So for button for example it is a standard button image, pressed button image (with blue overlay drawn above), disabled (half transparent), etc.
Button knows it's current state and displays appropriate image.
So what you want to do is to draw a pressed button yourself and create a selector drawable like this:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" android:drawable="#drawable/your_pressed_button/>
<item android:drawable="#drawable/your_normal_button/>
</selector>
I believe it's worth reading about Drawable Resources. You can also find examples of button states generated here.
You should make custom drawable :
For this you have to simply create a xml file in your drawable folder and write :
<?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/ic_back" />
<item android:state_pressed="true"
android:drawable="#drawable/ic_back_pressed" />
<item android:state_focused="true"
android:drawable="#drawable/ic_back_pressed" />
</selector>
and now set this drawable in background of your button.
Here, in normal state background id ic_back
and pressed and focus state background is ic_back_pressed
For creating solid drawable shapes (for example, if you want solid color backround as drawable you can go here.. )
I have a lot of custom views and I have style for state_pressed. Basically its a rectangle with
solid android:color="#DC2D5A8C"
What I am trying to do is simulate the blue background color that comes with the standard views/controls. For example: when you click on a button or list view item, the background changes to blue (on_pressed).
I got that to work with the above style, but the problem is let's call it the tint effect. In a button, the text caption is black. When you press, the background is blue and the text color changes to white.
Now how can I achieve such a so called "tint" change in my custom control's view?
Your response is much appreciated.
Thanks!
You can use selector xml file to do this.You must be setting background to the button.Instead of that set the xml file to its background.Create selector.xml file in your drawable folder as shown below and set that xml file as background to that button just like : android:background="#drawable/selector"
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- When selected, use blue -->
<item android:drawable="#drawable/btn_blue"
android:state_pressed="true" />
<!-- When not selected, use black-->
<item android:drawable="#drawable/btn_black"/>
</selector>
By doing this you will get so called tint effect to your button.Hope this will help you.
How do I style an image button so that it displays as a PNG icon but on click/touch, the PNG shape gets a soft glowing edge?
You probably want to look at 9-patch
Basically you create a transparent png with the glow effect baked into the image, and it'll scale the edges while keeping the corners intact and letting you place the content within a predefined area of the image.
To map your images to a button, you need a selector, which is a xml file and goes into your projects drawables. A sample grabbed from another answer looks like this
<?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/red_button_pressed" />
<item android:state_focused="true" android:drawable="#drawable/red_button_focus" />
<item android:drawable="#drawable/red_button_rest" />
</selector>