i created this drawable to use in my buttons in my application:
btnprimary.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/btnprimary_disabled" android:state_enabled="false" />
<item android:drawable="#drawable/btnprimary_pressed" android:state_enabled="true" android:state_pressed="true" />
<item android:drawable="#drawable/btnprimary_focused" android:state_enabled="true" android:state_focused="true" />
<item android:drawable="#drawable/btnprimary_enabled" android:state_enabled="true" />
</selector>
Every state has a drawable too, so, for example, this is the file for btnprimary_enabled
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
<corners
android:radius="5dp"
/>
<gradient
android:angle="90"
android:startColor="#335BB8"
android:endColor="#6397FF"
android:type="linear"
/>
<padding
android:left="0dp"
android:top="0dp"
android:right="0dp"
android:bottom="0dp"
/>
<stroke
android:width="1dp"
android:color="#878787"
/>
</shape>
So, i can use this in a button like this, using the background property:
<Button
android:id="#+id/btn_login"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/btnprimary"
android:text="#string/login"
android:textColor="#FFFFFF"
android:gravity="center"/>
And i have my theme on styles.xml, but is empty now. Like this:
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
</style>
</resources>
My Question is, can i put those configuration that i created on drawable into my theme, and all buttons has this style, without need to add the background property?
Have you tried this code ? In your style file, define the button style
<style name="ApplicationStyle" parent="android:Theme">
<item name="android:buttonStyle">#style/yourButton</item>
</style>
Related
Hello Learned Friends,
I am using Material Design Theme but I need to overried its statePressed so that when the button is clicked it changes color (highlighted for a moment) as demonstrated below.
For this I have a drawable which I set on the buttons as follows
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="false">
<shape>
<solid android:color="#color/primaryColor" />
<stroke android:color="#color/primaryDarkColor" android:width="#dimen/stroke_width"/>
<corners android:radius="#dimen/corner_radius" />
</shape>
</item>
<item android:state_pressed="true">
<shape>
<solid android:color="#color/secondaryColor" />
<stroke android:color="#color/secondaryLightColor" android:width="#dimen/stroke_width" />
<corners android:radius="#dimen/corner_radius" />
</shape>
</item>
I also got a ThemeOverlay to override the state pressed
<style name="ThemeOverlay.Red.UnitedStates" parent="">
<item name="android:colorPressedHighlight">#color/secondaryColor</item>
</style>
Unfortunately when I click the buttons the highlight doesn't happen.
What could I be missing?
This is Material Theme XML
<style name="AppTheme" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/primaryColor</item>
<item name="colorPrimaryVariant">#color/primaryLightColor</item>
<item name="colorPrimaryDark">#color/primaryDarkColor</item>
You can use just the app:backgroundTint attribute:
<com.google.android.material.button.MaterialButton
app:backgroundTint="#color/custom_button_selector"
../>
with:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="#color/red600" android:state_pressed="true"/>
<item android:color="?attr/colorPrimary" android:state_enabled="true"/>
<item android:alpha="0.12" android:color="?attr/colorOnSurface"/>
</selector>
Normal state:
Pressed state:
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'm trying to create a style for buttons in my app. In order to do that, I created a drawable file with the corner tag. I also created different styles for different button state (normal and disabled). When I apply the style without setting the background attribute, the button have the correct color. But when I set the background attribute with my drawable file, the text color defined in the style.xml works but not the background color. Here is the code :
values/style.xml :
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="android:background">#color/background</item>
<item name="android:textColor">#color/text_color</item>
</style>
<style name="ButtonStyle">
<item name="android:background">#color/button_color</item>
</style>
<style name="ButtonDisableStyle">
<item name="android:background">#color/button_color_disabled</item>
<item name="android:textColor">#color/buttonText_color_disabled</item>
</style>
drawable/button_shape.xml :
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
<corners
android:radius="5dp" />
<padding
android:left="0dp"
android:top="0dp"
android:right="0dp"
android:bottom="0dp" />
</shape>
main_activity :
<Button
android:id="#+id/newButton"
android:text="#string/generate_first"
style="#style/ButtonStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="30"
android:background="#drawable/button_shape"
/>
I saw several post about the same problem and I know that it is possible to define the button's background color in the drawable/button_shape.xml but I'd like to keep the style and make it works (I want the shape and the style to be separated).
Do you have any idea about it ?
Finally and after more research, I found a solution. I created 3 xml shape files for the button corresponding to 3 different states. Then I created a 4th xml shape file which includes the 3 others.
Finally, I put a reference to the 4th shape xml file into the button style (in values/style.xml). Here is the code :
drawable/button_disabled.xml :
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<solid android:color="#color/buttonText_color_disabled"/>
<padding android:left="7dp"
android:top="7dp"
android:right="7dp"
android:bottom="7dp" />
<corners android:radius= "5dp" />
</shape>
drawable/button_pressed.xml :
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<solid android:color="#color/button_color_pressed"/>
<padding android:left="7dp"
android:top="7dp"
android:right="7dp"
android:bottom="7dp" />
<corners android:radius= "5dp" />
</shape>
drawable/button_enabled.xml:
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<solid android:color="#color/button_color"/>
<padding android:left="7dp"
android:top="7dp"
android:right="7dp"
android:bottom="7dp" />
<corners android:radius= "5dp" />
</shape>
drawable/button.xml :
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:state_enabled="false"
android:drawable="#drawable/button_disabled" />
<item
android:state_pressed="true"
android:state_enabled="true"
android:drawable="#drawable/button_pressed" />
<item
android:state_enabled="true"
android:drawable="#drawable/button_enabled" />
</selector>
values/style.xml :
<style name="Custom_button" parent="#android:style/Widget.Button">
<item name="android:gravity">center_vertical|center_horizontal</item>
<item name="android:textColor">#color/text_color</item>
<item name="android:textSize">16dip</item>
<item name="android:textStyle">bold</item>
<item name="android:background">#drawable/button</item>
<item name="android:clickable">true</item>
</style>
main_activity :
<Button
android:id="#+id/newButton"
android:text="#string/generate_first"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_below="#id/app_info"
android:layout_centerHorizontal="true"
android:layout_marginTop="35dp"
android:layout_marginBottom="50dp"
style="#style/Custom_button" />
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>
I have created a background drawable that I use for a spinner. I would like to now but an arrow image inside this background. I have tried things like android:drawableRight="arrowimage", but this does not seem to show anything. Does anyone know how I can include an image in my custom background for a spinner?
Create an XML in a drawable folder with any name for example spinner_bg.xml and add this following lines
<?xml version="1.0"
encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<layer-list>
<item>
<shape>
<gradient android:angle="90"
android:endColor="#ffffff"
android:startColor="#ffffff"
android:type="linear" />
<stroke android:width="1dp"
android:color="#504a4b" />
<corners android:radius="5dp" />
<padding android:bottom="3dp"
android:left="3dp"
android:right="3dp"
android:top="3dp" />
</shape>
</item>
<item>
<bitmap android:gravity="bottom|right"
android:src="#drawable/spinner_ab_default_holo_dark_am" />
// you can use any other image here, instead of default_holo_dark_am
</item>
</layer-list>
</item>
</selector>
Add the following lines to your styles.xml which is inside values folder
<style name="spinner_style" >
<item name="android:background">#drawable/spinner_bg</item>
<item name="android:layout_marginLeft">10dp</item>
<item name="android:layout_marginRight">10dp</item>
<item name="android:layout_marginBottom">10dp</item>
<item name="android:paddingLeft">8dp</item>
<item name="android:paddingTop">5dp</item>
<item name="android:paddingBottom">5dp</item>
</style>
Now add this style to your spinner as
<Spinner android:id="#+id/spinner1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="#style/spinner_style"
android:popupBackground="#cccccc" />
Aniruddha's solution worked fine for me, when I used JellyBean (4.2.2) or Kitkat (4.4). But unfortunately on Marshmallow (6.0) I have an exception, possible cause explained here: Using drawable resources
I ended up just making a trick and place spinner to LinearLayout with ImageView like this:
<LinearLayout
android:id="#+id/spinner_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center">
<Spinner
android:id="#+id/spinner"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/your_arrow_drawable"/>
</LinearLayout>
This works for me. You may be missing the default state. Without posting your code it's hard to tell.
<!-- theme -->
<item name="android:dropDownSpinnerStyle">#style/mySpinnerStyle</item>
<!-- style -->
<style name="mySpinnerStyle" parent="android:Widget.Holo.Spinner">
<item name="android:background">#drawable/mySpinner_background</item>
</style>
<!-- mySpinner_background -->
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_enabled="false"
android:drawable="#drawable/mySpinner_disabled" />
<item android:state_pressed="true"
android:drawable="#drawable/mySpinner_pressed" />
<item android:state_pressed="false" android:state_focused="true"
android:drawable="#drawable/mySpinner_focused" />
<item android:drawable="#drawable/mySpinner_default" />
</selector>
This has worked for me:
<Spinner
android:id="#+id/spinner"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Light"
android:spinnerMode="dropdown" />
Set your Image ICON On Spinner :
<item>
<layer-list>
<item>
<color android:color="#android:color/white" />
</item>
<item>
<bitmap android:gravity="center_vertical|right" android:src="#drawable/down_arrow" />
</item>
</layer-list>
</item>