Is there anyway to change the appearance of a button when the user clicks on it? for example change the color or make it dark? Like using CSS in ASP.net to hover over a word or a link.
Try this. Save this as a drawable xml resource and set this as a background of your button. Please explore the other options of Selector class.
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="false"><shape>
<gradient android:angle="270" android:endColor="#BB908C8B" android:startColor="#BB908C8B" />
<corners android:bottomLeftRadius="9dp" android:topRightRadius="9dp" />
</shape></item>
<item android:state_pressed="true"><shape>
<gradient android:angle="270" android:endColor="#BB54504F" android:startColor="#BB54504F" />
<corners android:bottomLeftRadius="9dp" android:topRightRadius="9dp" />
</shape></item>
</selector>
Look at the link http://android.onyou.ch/2011/01/25/simple-custom-button-using-a-selector-xml-layout/
I believe State List is what you're looking for.
Related
I created a drawable for my ToggleButtons, but I also need to show an icon.
How can I do this if there's just a background attribute?
Here's the ToggleButton drawable:
<?xml version="1.0" encoding="utf-8"?>
<shape android:shape="rectangle"
xmlns:android="http://schemas.android.com/apk/res/android">
<corners android:radius="8dp" />
<stroke android:color="#CED2D4" android:width="1dp" />
<solid android:color="#EDEEEF"/>
</shape>
And the code to place the ToggleButton (currently using IconFont, but I have to change as the items are dynamic):
<ToggleButton
android:id="#+id/toggleCreditCard"
android:layout_width="#dimen/width_filter_facilities_button"
android:layout_height="#dimen/height_filter_facilities_button"
android:background="#drawable/filter_service_toggle_default"
android:textOff="#string/fa_credit_card"
android:textOn="#string/fa_credit_card" />
This may help you. You can create a layer-list and add two item. First item is your custom drawable, the second is your icon.
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:drawable="#drawable/list_bg_top"></item>
<item android:left="10dp">
<bitmap android:src="#drawable/waiting_status_btn"
android:gravity="center_vertical|left" />
</item>
Check it out: customize toggle button on Android
How to create this type of button in android. I tried . May I know what is the correct way to achieve my objective?Maybe this question too basic, but i did't find any suitable solution.Please Help me out.
I want to create This
<Button
android:id="#+id/Btn1"
android:layout_width="20dp"
android:layout_height="20dp"
android:background="#drawable/green_circle"
android:textSize="20sp"
android:textColor="#android:color/white"
android:clickable="true"
/>
Here is green_circle.xml :
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<stroke android:width="1sp" android:color="#54d66a" />
</shape>
When i use this ,Button looks
How can i get my desire button. Any Help Appreciated
You defined 1sp (you should use "dp" btw.) circle and you got it.
I think that the easiest way to achieve what you want is using layer list xml element - just put your current drawing as the first layer and put second layer for the centered dot (just solid oval with some margins)
Here you have documentation: http://developer.android.com/guide/topics/resources/drawable-resource.html#LayerList
Simple usage (it's not your's case but I think that it show you what you should to do):
<layer-list >
<item>
<shape android:shape="rectangle">
<corners android:radius="2dp"/>
<solid android:color="#color/grey"/>
</shape>
</item>
<item android:bottom="2dp">
<shape android:shape="rectangle">
<corners android:radius="2dp"/>
<solid android:color="#color/green_light"/>
</shape>
</item>
</layer-list>
Key is android:bottom="2dp" that causes that the foreground layer is smaller than the background one.
One way to achieve your desired effect is using a Layer List Drawable. To get a Drawable similar to the image you've posted, try the following
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="oval">
<stroke android:width="1sp" android:color="#54d66a" />
</shape>
</item>
<item android:top="5dp" android:left="5dp" android:right="5dp" android:bottom="5dp">
<shape android:shape="oval">
<solid android:color="#54d66a" />
</shape>
</item>
</layer-list>
1.use two different images of radio on and off actually what you want and make a xml in drawable :
<?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/check_off" />
<item android:state_checked="true" android:drawable="#drawable/checkbox_on" />
<item android:drawable="#drawable/checkbox_off" />
</selector>
2.and set this drawable as a background on your radio button.
Use an ImageButton:
<ImageButton android:src="#drawable/green_circle" />
The documentation also states how you can have different images depending on the state of the button.
put an image of green circle in drawable folder. then in xml just set background image for your button
<Button
android:id="#+id/Btn1"
android:layout_width="20dp"
android:layout_height="20dp"
android:background="#drawable/yourimage"
/>
this will work :)
I am trying to use the Android Holo.Light theme and for some reason when I add a background image, it makes the buttons look very strange and see-through. Here is a screen shot:
Would anyone know why this happens? It looks very strange. Is it meant to be like that? Or am I doing something incorrectly?
When I had just Light as my theme, the same image was not see-through.
Thank you!
The default for Holo buttons are slightly opaque. Just set a background drawable for them!
Here's an example of a gray button with a 1px outline. Includes the pressed state. You will set this on the button with "android:background="#drawable/gray_btn":
#drawable/gray_btn.xml
<?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="#ffffff"
/>
<stroke
android:width="1dp"
android:color="#E3E3E3" />
<corners
android:radius="4dip" />
</shape>
</item>
<item>
<shape>
<solid
android:color="#edeff1"
/>
<stroke
android:width="1dp"
android:color="#E3E3E3" />
<corners
android:radius="4dip" />
</shape>
</item>
Here when i pressed on these left and right arrow button at that time I want to see these type of effects on button. These same thing happens in Iphone/IOS by default.
Can i make this type of effect?
Here i mentioned the pic what exactly i want.
Here i used this xml files but didnt got success.
button_pressed.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true"><shape>
<gradient android:angle="180" android:centerColor="#657377" android:endColor="#AFFFFFFF" android:startColor="#FFFFFFFF" android:type="linear"/>
<corners android:radius="10dp" />
</shape></item>
</selector>
EDIT
I used android:background="#drawable/button_pressed.xml" line but i did not got which i want Exactly.
Tried :
I used this xml file as per Piyush's Answer but i didnt get success and i am getting this effect.
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape android:shape="rectangle" >
<solid android:color="#color/transparent" />
</shape>
</item>
<item>
<shape
android:innerRadiusRatio="4"
android:shape="ring"
android:thicknessRatio="9"
android:useLevel="false" >
<gradient
android:endColor="#00000000"
android:gradientRadius="250"
android:startColor="#ffffffff"
android:type="radial" />
</shape>
</item>
</layer-list>
I agreed top and bottom part cuts because i have limited space in layout for this button. that we will think later but why its not taking effect like shadow and alpha and all that same like which i mentioned?
OUTPUT :
Please help me If any body has idea about this.
Thanks in Advance.
The shape has to be radially drawn with fading from white to black outwards.
Try this:
<shape
xmlns:android="http://schemas.android.com/apk/res/android">
<gradient
android:startColor="#ffffffff"
android:endColor="#00000000"
android:gradientRadius="100"
android:type="radial"/>
</shape>
Also, you cannot directly set this as a background to your button. You will have to create a selector drawable file in which you specify different backgrounds based on the state of the button. In this case, you need this background to be set only when button is pressed. The selector will look something like this:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" android:drawable="#drawable/button_pressed"/>
<item android:state_selected="true" android:drawable="#drawable/button_pressed"/>
<item android:state_focussed="true" android:drawable="#drawable/button_pressed"/>
<item android:drawable="#android:color/transparent" />
</selector>
PS: It is not recommended to replicate iOS design when designing an Android app. For Android design guidelines, please refer: http://developer.android.com/design/building-blocks/buttons.html
can try this regarding for circular shape, can set your colors accordingly.
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape android:shape="rectangle" >
<solid android:color="#color/transparent" />
</shape>
</item>
<item>
<shape
android:shape="ring"
android:useLevel="false" >
<gradient
android:endColor="#00000000"
android:gradientRadius="200"
android:startColor="#ffffffff"
android:type="radial" />
</shape>
</item>
While I'm touching something in a ListView I get a blue highlight. Now I have another view elsewhere that I want to look the same; I tap on it and get a blue highlight. I thought this was a list_selector_background, but when I try that I get an orangey color.
My first question is: what is the style for the stock ListView item's background when selected?
Second (and more importantly), how do I figure this out? I'm looking for the chain of investigation, like...
List item
Look at the default theme (ABC)
Look at theme ABC for the style (QWE)
Look at style QWE and get the selected drawable (RTY)
Look at drawable RTY
Or whatever the actual investigation trail is
In your layout .xml for this view you want to add a new .xml called button_selector to the attributue android:background like so...
android:background="#drawable/button_selector"
Then create a new android .xml in the drawable folder called button_selector.xml containing this code....
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- When selected -->
<item android:drawable="#drawable/button_selected"
android:state_focused="true" />
<!-- When not selected-->
<item android:drawable="#drawable/button_unselected" />
</selector>
Then create your button_unselected.xml and button_selected.xml in the drawable folder as well for the layout of each of the buttons.
this is an example of one of my button_unselected.xml files ....
<?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="#10000000" />
<padding
android:bottom="4dp"
android:top="4dp" />
<corners android:radius="5dp" />
</shape>
</item>
<item>
<shape android:shape="rectangle" >
<solid android:color="#20558e34" />
</shape>
</item>
</layer-list>
Hope this helps...