I have defined the below files in res folder.
styles_apptheme.xml
<?xml version="1.0" encoding="utf-8"?>
<!-- Generated with http://android-holo-colors.com -->
<resources xmlns:android="http://schemas.android.com/apk/res/android">
<style name="ButtonAppTheme" parent="android:Widget.Holo.Light.Button">
<item name="android:background">#drawable/apptheme_btn_default_holo_light</item>
</style>
</resources>
themes_apptheme.xml
<?xml version="1.0" encoding="utf-8"?>
<!-- Generated with http://android-holo-colors.com -->
<resources xmlns:android="http://schemas.android.com/apk/res/android">
<style name="AppTheme" parent="#style/_AppTheme"/>
<style name="_AppTheme" parent="Theme.AppCompat.Light">
<item name="android:editTextBackground">#drawable/apptheme_edit_text_holo_light</item>
<item name="android:buttonStyle">#style/ButtonAppTheme</item>
</style>
</resources>
In my Layout.xml file, i have defined my button as below
<Button
android:id="#+id/btnAddTitle"
android:layout_below="#id/edEnterTitleValue"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/btn_AddTitle"
android:layout_margin="20dp"
/>
If i add the below line to the button view above,
android:background="#style/ButtonAppTheme"
Application crashes saying that drawable resource should be set for the background attribute.
So i created the below drawable file - abc.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_window_focused="false" android:state_enabled="true"
android:drawable="#drawable/apptheme_btn_default_normal_holo_light" />
<item android:state_window_focused="false" android:state_enabled="false"
android:drawable="#drawable/apptheme_btn_default_disabled_holo_light" />
<item android:state_pressed="true"
android:drawable="#drawable/apptheme_btn_default_pressed_holo_light" />
<item android:state_focused="true" android:state_enabled="true"
android:drawable="#drawable/apptheme_btn_default_focused_holo_light" />
<item android:state_enabled="true"
android:drawable="#drawable/apptheme_btn_default_normal_holo_light" />
<item android:state_focused="true"
android:drawable="#drawable/apptheme_btn_default_disabled_focused_holo_light" />
<item
android:drawable="#drawable/apptheme_btn_default_disabled_holo_light" />
</selector>
If i set android:background="#drawable/abc" i dont see the style set in the button.
So please let me know how i can set the style for the button.
Thanks.
It would be rather simple if you do it this way.
First create a button_selector.xml in drawable folder.
<?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="5dp" />
<stroke android:width="1dip" android:color="#color/green_temp" />
<gradient android:angle="-90" android:startColor="#color/green_temp" android:endColor="#color/green_temp" />
</shape>
</item>
<item android:state_focused="true">
<shape android:shape="rectangle" >
<corners android:radius="5dp" />
<stroke android:width="1dip" android:color="#971E05" />
<solid android:color="#58857e"/>
</shape>
</item>
<item >
<shape android:shape="rectangle" >
<corners android:radius="5dp" />
<stroke android:width="1dip" android:color="#color/bright_green" />
<gradient android:angle="-90" android:startColor="#color/green_temp" android:endColor="#color/button_green" />
</shape>
</item>
</selector>
Add these colors in colors.xml of values folder.
<!-- Green -->
<color name="green_temp">#23A96E</color>
<color name="green_dark">#159204</color>
<color name="bright_green">#02D8B0</color>
<color name="button_green">#10a54a</color>
Finally in your desired button of layout.xml put background from above selector.
<Button
android:id="#+id/btnAddTitle"
android:layout_below="#id/edEnterTitleValue"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/btn_AddTitle"
android:background="#drawable/button_selector"
android:layout_margin="20dp"
/>
Then its all done your button will be styled with color you want.
Android Button Maker is online tool to generate buttons code for Android Apps. Android API provide Drawable Resources where XML file defines geometric shape, including colors, border and gradients.
These button is generating based on shape drawable XML code which load faster compare to normal png buttons. You can customize button properties in setting panel and get source code.
Check this link Button Maker
No need to crack brains...this tool make it simple
replace
android:background="#style/ButtonAppTheme"
with
style="#style/ButtonAppTheme"
and every thing is ok!
Try this out as alternative. create a drawable folder under res then create xml files and copypaste below code and try first then you customize as per your requirement.
button_bg.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#00acc1"/>
<stroke android:width="2dp" android:color="#ffffff"/>
<corners android:radius="2dp"/> </shape>
button_bg_pressed.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#006064"/>
<stroke android:width="1dp" android:color="#ffffff"/>
<corners android:radius="2dp"/> </shape>
button_selector.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="true"
android:drawable="#drawable/button_bg_pressed" />
<item android:state_focused="false" android:state_pressed="true"
android:drawable="#drawable/button_bg_pressed" />
<item android:drawable="#drawable/button_bg" /> </selector>
And now in your button xml set the background as button_selector.xml
<Button
android:id="#+id/btnAddTitle"
android:layout_below="#id/edEnterTitleValue"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/btn_AddTitle"
android:background="#drawable/button_selector"
android:layout_margin="20dp"/>
This will do the job for you. You can customize your entire button style by this way.
If you want to have the default animation of button by material design and change button color, try this.
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="#dimen/padding_12"
android:text="button text here"
android:theme="#style/NavyBtn" />
in style.xml
<style name="NavyBtn" parent="Theme.AppCompat.Light">
<item name="colorButtonNormal">#020e39</item>
<item name="android:textColor">#FFFFFF</item>
</style>
Related
Create a login page. but I don't know what problem this code
login button don't work change color when I clicked!
I want to when I click then change color button
why doesn't changed that 'LOGIN' button?
how I can solve this?
activity_login.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="16dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_marginBottom="16dp"
android:background="#drawable/btn_login"
android:clickable="true"
android:gravity="center"
android:paddingLeft="32dp"
android:paddingRight="32dp">
<ImageView
android:layout_width="30dp"
android:layout_height="30dp"
android:src="#drawable/icon_user" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="LOGIN"
android:textColor="#fff"
android:textSize="16dp" />
</LinearLayout>
</LinearLayout>
selector xml ->
btn_login.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_enabled="true">
<shape android:shape="rectangle">
<solid android:color="#4DAEEA" />
<corners android:radius="30dp" />
</shape>
</item>
<item android:state_pressed="true">
<shape android:shape="rectangle">
<solid android:color="#00ff00" />
<corners android:radius="30dp" />
</shape>
</item>
<item android:state_enabled="false">
<shape android:shape="rectangle">
<solid android:color="#999" />
<corners android:radius="30dp" />
</shape>
</item>
</selector>
you should make LinearLayout behave like a button by adding style and removing background , follow these steps
<LinearLayout
......
style="#style/btn_stand"
.......
>
</LinearLayout>
My style definition for the button:
<style name="btn_stand" parent="AppBaseTheme">
<item name="android:background">#drawable/btn_stand_sel</item>
<item name="android:textColor">#drawable/btn_stand_text_color</item>
<item name="android:minHeight">48dp</item>
<item name="android:paddingLeft">5dp</item>
<item name="android:paddingRight">5dp</item>
</style>
My #drawable/btn_stan_sel file:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- disabled state -->
<item android:drawable="#drawable/btn_stand_disabled" android:state_enabled="false"/>
<!-- enabled and pressed state -->
<item android:drawable="#drawable/btn_stand_pressed" android:state_enabled="true" android:state_pressed="true"/>
<!-- enabled and focused state -->
<item android:drawable="#drawable/btn_stand_focused" android:state_enabled="true" android:state_focused="true"/>
<!-- enabled state -->
<item android:drawable="#drawable/btn_stand_enabled" android:state_enabled="true"/>
</selector>
My drawable file repeated for each state just with different colors for each state:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<stroke
android:width="1dp"
android:color="#color/stroke" />
<solid android:color="#color/blue" />
<corners android:radius="6dp" />
</shape>
this was an example that works for me , hope you use it and choose the color you want
Add android:focusable="true"to your linear layout xml code.
In the event that that doesn't work, you can try to replace android:background=#drawable/btn_login with android:foreground="?android:attr/selectableItemBackground".
I have this button XML, which has transparent background and when clicked, the color changes, so that it shows a "click effect".
Drawable XML:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- press-->
<item android:drawable="#android:color/transparent" android:state_pressed="false" />
<!-- focused-->
<item style="#style/AppTheme" android:drawable="#color/color_primary" android:state_pressed="true" />
<!-- normal-->
<item android:drawable="#android:color/transparent" />
</selector>
My question is, how to put border on this button? Or an XML example so you have the same result. Thank you!
create a drawable, similar to this, selected.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#ff0000"/>
<stroke
android:width="1dp"
android:color="#00ff00" />
</shape>
then change this line
<item
style="#style/AppTheme"
android:drawable="#color/color_primary"
android:state_pressed="true" />
to
<item
style="#style/AppTheme"
android:drawable="#drawable/selected"
android:state_pressed="true" />
the solid is the background color and the border is the stroke, you can create drawables that are used in the diferent states of the selector
You can do something like this:
1. First create a drawable file like this:
<shape android:shape="rectangle">
<!--apply button background transparent, full opacity-->
<solid android:color="#00ffffff"/>
<!--make button border solid color, nontransparent-->
<stroke android:color="#stroke color" android:width="2dp"/>
<corners android:radius="2dp"/>
</shape>
then in your provided code replace these lines:
<!-- press-->
<item android:drawable="path to above drawable" android:state_pressed="false" />
<!-- focused-->
<item style="#style/AppTheme" android:drawable="#color/color_primary" android:state_pressed="true" />
<!-- normal-->
<item android:drawable="path to above drawable" />
as
<!-- press-->
<item android:drawable="path to above drawable" android:state_pressed="false" />
<!-- focused-->
<item style="#style/AppTheme" android:drawable="#color/color_primary" android:state_pressed="true" />
<!-- normal-->
<item android:drawable="path to above drawable" />
I want to change the color of button on clicking it and when it is about to move on to next activity its color should be set to original color. In short it should highlight the button clicked by changing the color and back to same color.
use button background as in xml :
my_button_selector.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/red"/> <!-- pressed -->
<item android:state_focused="true" android:drawable="#color/blue"/> <!-- focused -->
<item android:drawable="#color/black"/> <!-- default -->
</selector>
Create colors.xml file at res/values folder:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="black">#000</color>
<color name="blue">#00f</color>
<color name="red">#f00</color>
</resources>
mybutton.xml place this file in drawable folder
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="wrap_content" android:layout_height="wrap_content">
<item android:state_pressed="true" >
<shape android:shape="rectangle" >
<corners android:radius="3dip" />
<stroke android:width="1dip" android:color="#5e7974" />
<gradient android:angle="-90" android:startColor="#345953" android:endColor="#689a92" />
</shape>
</item>
<item android:state_focused="true">
<shape android:shape="rectangle" >
<corners android:radius="3dip" />
<stroke android:width="1dip" android:color="#5e7974" />
<solid android:color="#58857e"/>
</shape>
</item>
<item >
<shape android:shape="rectangle" >
<corners android:radius="3dip" />
<stroke android:width="1dip" android:color="#5e7974" />
<gradient android:angle="-90" android:startColor="#8dbab3" android:endColor="#58857e" />
</shape>
</item>
</selector>
change the colours according to your needs.
Then in your activity xml screen and the following code in place of Button
<Button
android:id="#+id/button1"
android:background="#drawable/mybutton"
android:layout_width="200dp"
android:layout_height="126dp" />
drawable/background.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= "#000000" />
<item android:drawable="#000000" />
</selector>
color/color.xml
<?xml version="1.0" encoding="utf-8" ?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" android:color= "#000000" />
<item android:color="#4b14b1" />
</selector>
button.setBackgroundResource(R.drawable.background)
button.setTextColor(R.color.color)
You just need to set selector of button in your layout file.
<Button
android:id="#+id/button1"
android:background="#drawable/selector_xml_name"
android:layout_width="200dp"
android:layout_height="126dp"
android:text="Hello" />
and done.
Edit
Following is button_effect.xml file in drawable directory
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/numpad_button_bg_selected" android:state_selected="true"></item>
<item android:drawable="#drawable/numpad_button_bg_pressed" android:state_pressed="true"></item>
<item android:drawable="#drawable/numpad_button_bg_normal"></item>
</selector>
In this, you can see that there are 3 drawables, you just need to place this button_effect style to your button, as i wrote above. You just need to replace selector_xml_name with button_effect.
Check out This link.
You need to create a selector in drawable, lots of solutions available.
Follow the below :
1.) Create xml file button_selector in drawable folder :
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/numpad_button_bg_selected" android:state_selected="true"></item>
<item android:drawable="#drawable/numpad_button_bg_pressed" android:state_pressed="true"></item>
<item android:drawable="#drawable/numpad_button_bg_normal"></item>
</selector>
2.) Open you layout and apply this xml selector file on your button:
<Button
android:id="#+id/btnClick"
android:background="#drawable/button_selector"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
Newbie in Android.
I have the following defined in res/drawable/ for a button in a menu that's defined in style.xml
<style name="menu_icon">
<item name="android:layout_width">match_parent</item>
<item name="android:layout_height">#dimen/menu_item_height</item>
<item name="android:background">#drawable/menu_item_bg_sel</item>
</style>
Now, menu_item_bg_sel in drawable has two different color gradients for 2 states that I am interested in- pressed and selected.
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true">
<layer-list>
<item>
<shape>
<gradient android:angle="180"
android:endColor="#color/background_menu_gray_selected2"
android:centerColor="#color/background_menu_gray_selected1"
android:startColor="#color/background_menu_gray_selected" />
</shape>
</item>
</layer-list>
</item>
<item android:state_selected="true">
<layer-list>
<item>
<shape>
<gradient android:angle="180" android:endColor="#color/background_menu_home2"
android:centerColor="#color/background_menu_home1"
android:startColor="#color/background_menu_home" />
</shape>
</item>
</layer-list>
</item>
<item android:drawable="#color/transparent"/>
However, when I press the button (that transient state) the button still creates the gradient taking colors from the selected_state only.
What am I doing wrong? Any ideas?
state_selected is commonly used when navigating using d-pads or maybe a pen like what Samsung Notes so I suggest not to use state_selected since when you press automatically it will be selected or gain focus although selected and focus are kind or different. I suggest to use state_pressed, state_focused and state_hovered instead.
For more info click here
You can use this code. You can copy paste this code into one drawable file. You can assign different drawable files or define shapes in this file itself for the different states.I have assigned a drawable file for the focused state as an example.
simple_button_states.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:state_focused="true"
android:drawable="#drawable/rounded_edittext_focused"
/>
<!--pressed -->
<item
android:state_pressed="true" />
<!--selected -->
<item
android:state_selected="true" />
<!-- focused -->
<item
android:drawable="#drawable/rounded_edittext_unfocused"/>
</selector>
round_edittext_focused.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android"
>
<solid android:color="#FFFFFF" />
<stroke
android:width="2dp"
android:color="#color/CornflowerBlue" />
<corners
android:topLeftRadius="4dp"
android:topRightRadius="4dp"
android:bottomLeftRadius="4dp"
android:bottomRightRadius="4dp"
/>
</shape>
Finally assign the background of the actual button as the drawable file that you have declared above.
<Button
android:layout_width="150dp"
android:layout_height="wrap_content"
android:background="#drawable/simple_button_states"
/>
Hope this helps
I use the following selector to change image of image button, when I click on it. But this does not work most of the times. Only for few buttons it works. Don't know what the cause here is
mapselector.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Button Pressed -->
<item android:state_focused="true" android:state_pressed="true"
android:drawable="#drawable/mapiconover"/>
</selector>
And in the button,
Am doing like this,
<ImageButton
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:id="#+id/btnMap" android:layout_centerInParent="true" android:src="#drawable/mapselector"
android:background="#drawable/map" android:scaleType="fitXY"
android:layout_alignParentBottom="true">
</ImageButton>
but still image is not changing when I click.
Any guess for this?
you have create like this in the ImageButton xml
create xml file using the button image 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/backbutton" />
<item
android:drawable="#drawable/closebutton" />
</selector>
add that xml file as background for IMageButton
<ImageButton
android:layout_height="50px"
android:layout_width="50px"
android:id="#+id/settings"
android:background="#drawable/settings_button" //setting_button in
the xml file
android:text="Settings"/>
Not sure if this will work but you could try changing your selector to this:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Button Pressed -->
<item android:state_focused="true" android:state_pressed="true"
android:drawable="#drawable/mapiconover"/>
<item android:drawable="#drawable/map" />
</selector>
And your image button to this:
<ImageButton
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:id="#+id/btnMap"
android:layout_centerInParent="true"
android:background="#drawable/mapselector"
android:scaleType="fitXY"
android:layout_alignParentBottom="true">
</ImageButton>
I had the same problem. For me it was because of
android:state_xxxx
conflict. It solved by clarifying the conditions between enabled and pressed. I used the following code to get different states between press and normal state:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_enabled="true" android:state_pressed="false" >
<shape
android:shape="rectangle">
<gradient android:startColor="#1094ff"
android:endColor="#7eb6e3"
android:angle="270" />
<corners android:radius="#dimen/fab_margin" />
<stroke android:width="2px"
android:color="#505050" />
</shape>
</item>
<item android:state_pressed="true" android:state_enabled="true">
<shape
android:shape="rectangle">
<gradient android:startColor="#0075d4"
android:endColor="#0070cb"
android:angle="270" />
<corners android:radius="#dimen/fab_margin" />
<stroke android:width="2px"
android:color="#ff0000" />
</shape>
</item>
<item android:state_enabled="false" >
<shape
android:shape="rectangle">
<gradient android:startColor="#b9b9b9"
android:endColor="#848484"
android:angle="270" />
<corners android:radius="#dimen/fab_margin" />
<stroke android:width="2px"
android:color="#505050" />
</shape>
</item>
</selector>
This example uses different gradient and stroke for different states. You can also use your drawable instead. Just create a file like "mybutton.xml" in your drawable folder. then set the background property of your button like this:
android:background="#drawable/mybutton"
I hope it be helpful.