Related
Currently, I have the following bottom log in button.
When button is not being pressed
When button is being pressed
The XML looks like this
<LinearLayout
android:background="?attr/welcomeBottomNavBarBackground"
android:orientation="horizontal"
android:id="#+id/sign_in_bottom_nav_bar"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true">
<Button
style="?android:attr/buttonBarButtonStyle"
android:id="#+id/sign_in_button"
android:layout_width="0dp"
android:width="0dp"
android:layout_weight="1.0"
android:layout_height="48dp"
android:gravity="center"
android:layout_gravity="center"
android:enabled="true"
android:textAllCaps="true"
android:text="#string/log_in" />
</LinearLayout>
I would like to remove the padding (Or should I call it margin? Please refer to my bottom most p/s section) around button when it is being pressed.
I look at How to remove padding around buttons in Android?
I had tried
<Button
...
...
android:minHeight="0dp"
android:minWidth="0dp" />
It doesn't work and has no effect.
I further try
<Button
...
...
android:background="#null"
android:minHeight="0dp"
android:minWidth="0dp" />
No more padding when pressed. However, the material designed pressed visual effect will gone too.
May I know what is the best way to remove button padding during pressed, yet retain the material designed pressed visual effect?
P/S
I don't really know whether I should call it padding or margin. What I wish to achieve is that, when we press on the bottom region, press visual effect change should be covered entire 100% bottom bar region (#+id/sign_in_bottom_nav_bar), instead of current 95% bottom bar region.
A standard button is not supposed to be used at full width which is why you experience this.
Background
If you have a look at the Material Design - Button Style you will see that a button has a 48dp height click area, but will be displayed as 36dp of height for...some reason.
This is the background outline you see, which will not cover the whole area of the button itself.
It has rounded corners and some padding and is supposed to be clickable by itself, wrap its content, and not span the whole width at the bottom of your screen.
Solution
As mentioned above, what you want is a different background. Not a standard button, but a background for a selectable item with this nice ripple effect.
For this use case there is the ?selectableItemBackground theme attribute which you can use for your backgrounds (especially in lists).
It will add a platform standard ripple (or some color state list on < 21) and will use your current theme colors.
For your usecase you might just use the following:
<Button
android:id="#+id/sign_in_button"
style="?android:attr/buttonBarButtonStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Login"
android:background="?attr/selectableItemBackground" />
<!-- /\ that's all -->
There is also no need to add layout weights if your view is the only one and spans the whole screen
If you have some different idea on what your background should look like you have to create a custom drawable yourself, and manage color and state there.
As simple, use the inset property like:
android:insetTop="0dp"
android:insetBottom="0dp"
android:insetRight="0dp"
android:insetLeft="0dp"
In styles.xml
<style name="MyButtonStyle" parent="Base.Widget.AppCompat.Button">
<item name="android:background">#drawable/selector</item>
<item name="android:textColor">#android:color/black</item>
</style>
In values/drawable:
my_drawable.xml
<?xml version="1.0" encoding="utf-8"?>
<shape android:shape="rectangle" xmlns:android="http://schemas.android.com/apk/res/android">
<corners android:radius="2dp" />
<!-- specify your desired color here -->
<solid android:color="#9e9b99" />
</shape>
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:drawable="#drawable/my_drawable"/>
<item android:state_pressed="true" android:drawable="#drawable/my_drawable"/>
<item android:drawable="#android:color/transparent"/>
</selector>
In values/drawable-v21:
my_drawable.xml
<?xml version="1.0" encoding="utf-8"?>
<shape android:shape="rectangle"
android:tint="?attr/colorButtonNormal"
xmlns:android="http://schemas.android.com/apk/res/android">
<corners android:radius="2dp" />
<solid android:color="#android:color/white" />
</shape>
selector.xml
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="?attr/colorControlHighlight">
<item android:id="#android:id/mask"
android:drawable="#drawable/my_drawable" />
</ripple>
In layout:
<Button
android:id="#+id/button"
style="#style/MyButtonStyle"
android:layout_width="match_parent"
android:layout_height="100dp"
android:text="Test"/>
Result on API 19:
Result on API 21:
Source code
I think the best solution to solve that is create your own Ripple Effect. The padding when you press the button is respecting the default Ripple Effect of the component.
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="?attr/colorControlHighlight">
<item android:drawable="?attr/colorPrimary"/>
</ripple>
Or you can try change the style of your button to style="?android:textAppearanceSmall"
Remember: This effect is only shown on Android Lollipop (API 21) or higher.
I have been through what you are going through. Long story short, you just cannot do it cleanly with a <Button> tag alone, while ensuring backwards compatibility.
The simplest and the most widely practiced method is to use a <RelativeLayout> underlay, around a <Button>.
Button Code:
<RelativeLayout
android:id="#+id/myButtonUnderlay"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorPrimary"
android:visibility="visible">
<Button
android:id="#+id/myButton"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/selectableItemBackgroundBorderless"
android:text="I am as cute as a Button"/>
</RelativeLayout>
Wherever you need to use a button, you use this complete code.
Here is the breakdown:
OnClick events will be hooked to myButton.
Control dimensions of your button, by changing attributes of myButtonUnderlay.
In myButton, android:background="?attr/selectableItemBackgroundBorderless". This will make it a transparent button with just the text, and backwards compatible ripples.
In myButtonUnderlay, you will do all the other background applications, like setting the color of the button, margins, paddings, borders, gradients, and shadows etc.
If manipulation of the button's visibility (programmatic or not) is wish, you do it on myButtonUnderlay.
Note: To ensure backwards compatibility, make sure that you use
android:background="?attr/selectableItemBackgroundBorderless", and NOT
android:background="?android:attr/selectableItemBackgroundBorderless"
As #David Medenjak answer you can read the Google Material design Button-style to its developer site. Use button style as #David Medenjak explained in his answer. You can also do by the following way also
It is not a padding or margin but it is actually background effect of button.
If you want to remove that then you can do as following.
Option 1:
Step 1: Put the below code in styles.xml
<style name="myColoredButton">
<item name="android:textColor">#FF3E96</item>
<item name="android:padding">0dp</item>
<item name="android:minWidth">88dp</item>
<item name="android:minHeight">36dp</item>
<item name="android:elevation">1dp</item>
<item name="android:translationZ">1dp</item>
<item name="android:background">#FF0000</item>
</style>
Step 2:Create a new XML file under drawables folder and add the following code: I named my XML file as button_prime.xml
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#color/colorPrimary">
<item>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<corners android:radius="1dp" />
<solid android:color="#8B8386" />
</shape>
</item>
</ripple>
Step 3: Use the style and drawable in your Button as follows.
<Button
style="#style/myColoredButton"
android:layout_width="250dp"
android:layout_height="50dp"
android:text="Cancel"
android:gravity="center"
android:background="#drawable/button_prime"
android:colorButtonNormal="#3578A9" />
Option 2:
With the Support Library v7, all the styles are actually already defined and ready to use, for the standard buttons, all of these styles are available.So you can set your button style like this
<Button
style="#style/Widget.AppCompat.Button.Borderless"
android:layout_width="match_parent"
android:layout_height="50dp"
android:text="BUTTON"
android:gravity="center"
android:minHeight="0dp"
android:minWidth="0dp"
android:background="#color/colorAccent"/>
For more detail of Button style please check this answer
I think you will check this answer also. I hope you will get your solution.
The padding and margin may be a result of the original resources used in the button.
So you could try to change the resources used, using a selector:
<selector
xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" android:drawable="#drawable/btn_action_hover" />
<item android:state_selected="true" android:drawable="#drawable/btn_action_hover" />
<item android:state_focused="true" android:drawable="#drawable/btn_action_hover" />
<item android:drawable="#drawable/btn_action_normal" />
</selector>
That would change the default images/shapes for your buttons, so you could try using drawables and set every item to a drawable. The drawable being either a bitmap, or a .xml file(style file) defining the look of the button in its current state. I assume there still are some native styles included even though you have set the button-style yourself. This may be because you aren't using a custom theme. So the issue may also be solved by defing
theme="#style/myNewTheme"
where myNewTheme is your theme, and it should have any parents(parent="" should not be defined).
Take any given theme(designed by Google/Android, for an instance Theme.AppCompat.[name]), it does also come with a buttonStyle. This is a part of Theme.Holo.Light:
<!-- Button styles -->
<item name="buttonStyle">#style/Widget.Holo.Light.Button</item>
<item name="buttonStyleSmall">#style/Widget.Holo.Light.Button.Small</item>
<item name="buttonStyleInset">#style/Widget.Holo.Light.Button.Inset</item>
<item name="buttonStyleToggle">#style/Widget.Holo.Light.Button.Toggle</item>
<item name="switchStyle">#style/Widget.Holo.Light.CompoundButton.Switch</item>
<item name="mediaRouteButtonStyle">#style/Widget.Holo.Light.MediaRouteButton</item>
<item name="selectableItemBackground">#drawable/item_background_holo_light</item>
<item name="selectableItemBackgroundBorderless">?attr/selectableItemBackground</item>
<item name="borderlessButtonStyle">#style/Widget.Holo.Light.Button.Borderless</item>
<item name="homeAsUpIndicator">#drawable/ic_ab_back_holo_light</item>
As you see, this theme defines how your buttons will look/work in basic features. You can override parts of it, but you haven't overridden the important parts(being buttonStyle and similar). So if you create a new theme yourself and style it to your liking and set the theme(using theme="themename") and that theme does not inherit any theme, you should be able to style your buttons to your liking without having to worry about the default styles in the theme
Basically:
calling padding/margin="0dp" will not help. The default drawable defined by the theme has this in the button drawable, meaning you cannot change it. So you have to either change the button style, or change the theme completely. Make sure that theme does not have any parents, because many themes define the button style. You do not want the button style defined by the theme.
The best solution these days is just to use MaterialButton in place of Button.
Note: MaterialButton is visually different from Button and AppCompatButton. One of the main differences is that AppCompatButton has a 4dp inset on the left and right sides, whereas MaterialButton does not. To add an inset to match AppCompatButton, set android:insetLeft and android:insetRight on the button to 4dp, or change the spacing on the button’s parent layout.
When replacing buttons in your app with MaterialButton, you should inspect these changes for sizing and spacing differences.
Source: https://material.io/develop/android/components/material-button/
I'd suggest you taking a look at this just in case before all.
Then, if not working i'd suggest you to create your own style (like azizbekian suggest)using android xml drawables, and drawable states to differentiate pressed/notpressed.
I think using your own style may be the best answer as it will further give you more control on how your app is displaying, but using android default themes and styles also allows the user to have custom styles which is a good idea. However, you cannot test every custom style so you cannot check that your app will display correctly on ALL custom styles, and therefore may encounter problems with some.
Set the Button background as android:background="?selectableItemBackground"
<LinearLayout
android:background="?attr/welcomeBottomNavBarBackground"
android:orientation="horizontal"
android:id="#+id/sign_in_bottom_nav_bar"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true">
<Button
style="?android:attr/buttonBarButtonStyle"
android:background="?selectableItemBackground"
android:id="#+id/sign_in_button"
android:layout_width="0dp"
android:width="0dp"
android:layout_weight="1.0"
android:layout_height="48dp"
android:gravity="center"
android:layout_gravity="center"
android:enabled="true"
android:textAllCaps="true"
android:text="#string/log_in" />
</LinearLayout>
After trying lots of solution, Finally I came to a conclusion that with tag alone we can't achieve this. to remove this unwanted space around button my solution is as below:
<RelativeLayout
android:id="#+id/myButtonUnderlay"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:visibility="visible">
<Button
android:id="#+id/save_button"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_marginTop="-5dp"
android:layout_marginBottom="-5dp"
android:layout_above="#+id/content_scrollview"
android:layout_gravity="bottom"
android:background="#drawable/ripple_theme"
android:enabled="true"
android:text="SetUp Store"
android:textColor="#fff"
android:textSize="18sp"
android:visibility="gone"
tools:visibility="visible"
style="#style/MediumFontTextView" />
</RelativeLayout>
1.add a drawable resource file named maybe button_background.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="#ff0000"/>
<stroke android:width="5dp" android:color="#00ff00"/>
</shape>
</item>
<item>
<shape>
<solid android:color="#00ff00"/>
</shape>
</item>
</selector>
2.Use the button_background.xml as the button background, done!
github
blog
I don't really know whether I should call it padding or margin.
The button is enacting surface elevation for providing visual feedback in response to touch. It is one of two feedbacks used for surface reaction; the first one being the ripple effect. For example, a raised button has resting state elevation of 2dp and pressed state elevation of 8dp (See raised button under Shadows). The button meets the finger as it touches the surface.
May I know what is the best way to remove button padding during pressed, yet retain the material designed pressed visual effect?
Having answered the first part, I do not believe you are having all of the material design if you wish to remove the surface elevation effect.
Anyways, here is how to remove surface elevation visual feedback:
Add animator file button_raise.xml to animator directory under res directory having the following code:
<?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="true">
<objectAnimator
android:duration="#android:integer/config_shortAnimTime"
android:propertyName="translationZ"
android:valueTo="0dp"
android:valueType="floatType" />
</item>
</selector>
Refer newly created animator in the button using stateListAnimator property:
<Button
...
android:stateListAnimator="#animator/button_raise"
... />
Hope this helps.
I want to achieve this kind of style
As you can see, my background app is a texture so i need a transparent background and just a few pixels of gradient color at the bottom of the view.
I used simply this to describe my background of EditText
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">>
<item
android:gravity="bottom"
android:height="2dp"
android:drawable="#drawable/my_gradient">
</item>
</layer-list>
It works well on Android 6.0 and Android M Preview but not on "older version" as Android 5.1.1
API 23 and 22(M) versus API 22 and older rendering
I can't understand why my gravity attribute is not applied
It seems that the gravity (and size) property for LayerDrawable children are recent, LayerDrawable.setLayerGravity() indicates
Added in API level 23.
Edit : As for a solution, here is what I could think of:
Use a nine patch as background, with a transparent vertically extensible part
Overlay the unwanted part of the gradient with another shape, having the same color as the background (wich obviously needs to be opaque)
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:drawable="#drawable/my_gradient" />
<item android:bottom="2dp">
<shape>
<solid android:color="background color" />
</shape>
</item>
</layer-list>
Use a View to hold the gradient. Depending on how the EditText, is used in the layout it may be necessary to add also a Framelayout, for example :
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<View
android:layout_width="match_parent"
android:layout_height="2dp"
android:layout_gravity="bottom"
android:background="#drawable/my_gradient" />
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Some text" />
</FrameLayout>
I'm new to android programming. How do I change the color of a button?
<Button
android:id="#+id/btn"
android:layout_width="55dp"
android:layout_height="50dp"
android:layout_gravity="center"
android:text="Button Text"
android:paddingBottom="20dp"/>
The RIGHT way...
The following methods actually work.
if you wish - using a theme
By default a buttons color is android:colorAccent. So, if you create a style like this...
<style name="Button.White" parent="ThemeOverlay.AppCompat">
<item name="colorAccent">#android:color/white</item>
</style>
You can use it like this...
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:theme="#style/Button.White"
/>
alternatively - using a tint
You can simply add android:backgroundTint for API Level 21 and higher, or app:backgroundTint for API Level 7 and higher.
For more information, see this blog.
The problem with the accepted answer...
If you replace the background with a color you will loose the effect of the button, and the color will be applied to the entire area of the button. It will not respect the padding, shadow, and corner radius.
You can change the colour two ways; through XML or through coding. I would recommend XML since it's easier to follow for beginners.
XML:
<Button
android:background="#android:color/white"
android:textColor="#android:color/black"
/>
You can also use hex values ex.
android:background="#FFFFFF"
Coding:
//btn represents your button object
btn.setBackgroundColor(Color.WHITE);
btn.setTextColor(Color.BLACK);
For the text color add:
android:textColor="<hex color>"
For the background color add:
android:background="<hex color>"
From API 21 you can use:
android:backgroundTint="<hex color>"
android:backgroundTintMode="<mode>"
How to customize different buttons in Android
If the first solution doesn't work try this:
android:backgroundTint="#android:color/white"
I hope this work.
Happy coding.
Many great methods presented above - One newer note
It appears that there was a bug in earlier versions of Material that prevented certain types of overriding the button color.
See: [Button] android:background not working #889
I am using today Material 1.3.0. I just followed the direction of KavinduDissanayake in the linked post and used this format:
app:backgroundTint="#color/purple_700"
(I changed the chosen color to my own theme of course.) This solution worked very simply for me.
Here is my code, to make different colors on button, and Linear, Constraint and Scroll Layout
First, you need to make a custom_button.xml on your drawable
Go to res
Expand it, right click on drawable
New -> Drawable Resource File
File Name : custom_button, Click OK
Custom_Button.xml Code
<?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>
Second, go to res
Expand values
Double click on colors.xml
Copy the code below
Colors.xml Code
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="colorPrimary">#3F51B5</color>
<color name="colorPrimaryDark">#303F9F</color>
<color name="colorAccent">#FF4081</color>
<color name="black">#000</color>
<color name="violet">#9400D3</color>
<color name="indigo">#4B0082</color>
<color name="blue">#0000FF</color>
<color name="green">#00FF00</color>
<color name="yellow">#FFFF00</color>
<color name="orange">#FF7F00</color>
<color name="red">#FF0000</color>
</resources>
Screenshots below
XML Coding
Design Preview
Starting with API 23, you can do:
btn.setBackgroundColor(getResources().getColor(R.color.colorOffWhite));
and your colors.xml must contain:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="colorOffWhite">#80ffffff</color>
</resources>
Best way to change button color without losing button ghosting and other features.
Try it and you will see it is the best
app:backgroundTint="#color/color_name"
in theme change this:
parent="Theme.MaterialComponents.DayNight.DarkActionBar"
to that:
parent="Theme.AppCompat.Light.NoActionBar"
It worked for me after many search
usually with API 21 and above :
just PUT this attribute : android:backgroundTint=" your color "
You can change the value in the XML like this:
<Button
android:background="#FFFFFF"
../>
Here, you can add any other color, from the resources or hex.
Similarly, you can also change these values form the code like this:
demoButton.setBackgroundColor(Color.WHITE);
Another easy way is to make a drawable, customize the corners and shape according to your preference and set the background color and stroke of the drawable.
For eg.
button_background.xml
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<stroke android:width="2dp" android:color="#ff207d94" />
<corners android:radius="5dp" />
<solid android:color="#FFFFFF" />
</shape>
And then set this shape as the background of your button.
<Button
android:background="#drawable/button_background.xml"
../>
Hope this helps, good luck!
see the image and easy understand
in new update of android studio you have to change the
button -> androidx.appcompat.widget.AppCompatButton
then only the button color will changed
res/drawable/button_color_border.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<solid android:color="#FFDA8200" />
<stroke
android:width="3dp"
android:color="#FFFF4917" />
</shape>
And add button to your XML activity layout and set background
android:background="#drawable/button_color_border".
<androidx.appcompat.widget.AppCompatButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/button_border"
android:text="Button" />
Use below code for button background color
btn.setBackgroundResource(R.drawable.btn_rounded);
here is drawable xml
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle" >
<solid android:color="#color/gray_scale_color"/>
<corners android:radius="#dimen/_12sdp"/>
<stroke android:width="0.5dp"
android:color="?attr/appbackgroundColor"/>
</shape>
</item>
</layer-list>
i'm using api 32 and I had to do it this way in the xml code:
android:backgroundTint="#android:color/white"
If you are trying to set the background as some other resource file in your drawable folder, say, a custom-button.xml, then try this:
button_name.setBackgroundResource(R.drawable.custom_button_file_name);
eg. Say, you have a custom-button.xml file. Then,
button_name.setBackgroundResource(R.drawable.custom_button);
Will set the button background as the custom-button.xml file.
I have the same problem
the solution for me was the background color was colorPrimary of my theme
you can use custom theme as one answer say above and set the colorPrimary to what you want
1- add this to your "value/themes/themes.xml" inside resources
<resources>
<style name="Button.color" parent="ThemeOverlay.AppCompat">
<item name="colorPrimary">#color/purple_500</item>
</style>
</resources>
2- add this line to the button you want to have the color
<Button
android:theme="#style/Button.color"/>
Go to res > values > themes > theme.xml/themes.xml. Then change:
<style name="Theme.BirthdayGreet" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
To:
<style name="Theme.MemeShare" parent="Theme.AppCompat.Light.NoActionBar">)>
Watch this video for more information.
backgroundTint above API21 background has no effect it takes colorPrimary of the theme by default
Button background color in xml
<Button
android:id="#+id/button"
android:background="#0000FF"
android:textColor="#FFFFFF"/>
Change button background color programmatically
Button button = findViewById(R.id.button);
button.setBackgroundColor(Color.BLUE);
Custom button background
shape.xml [res --> drawble]
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<corners android:radius="5dp" />
<gradient
android:angle="0"
android:endColor="#0000FF"
android:startColor="#00FFFF" />
<stroke
android:width="1dp"
android:color="#000000" />
</shape>
Add this line
android:background="#drawable/shape"
full code
<Button
android:id="#+id/button"
android:background="#drawable/shape"
android:textColor="#FFFFFF"/>
Material Design Button
Change button background color
app:backgroundTint="#0000FF"
Button Stroke color
app:strokeColor="#000000"
Button Stroke width
app:strokeWidth="2dp"
Full code
<Button
android:id="#+id/button"
android:textColor="#FFFFFF"
app:backgroundTint="#0000FF"
app:strokeColor="#000000"
app:strokeWidth="2dp"/>
Hope you helpful!
Go to themes.xml file under res -> values -> themes
Go to the line -
<style name="Theme.YourProjectName" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
and change it to -
<style name="Theme.YourProjectName" parent="Theme.AppCompat.DayNight.DarkActionBar">
Then proceed with changing
android:backgroundTint to desired color
Buttons use colorPrimary attribute by default.
If you are styling using Theme:
<item name="colorPrimary">#color/yourColor</item>
Note that other widgets also use this attribute.
Drop any other widgets, that you know use this attribute, in the comments.
To change the color of button programmatically
Here it is :
Button b1;
//colorAccent is the resource made in the color.xml file , you can change it.
b1.setBackgroundResource(R.color.colorAccent);
I have set thumb image of a seek bar but my thumb looks little below of seek bar. How to set thumb at proper position of a seekbar. Have a look on the attached image
<SeekBar android:id="#+id/PP_Player_SeekBar"
android:thumb="#drawable/music_player_playerhead"
android:paddingLeft="8dip"
android:paddingRight="8dip"
android:progressDrawable="#drawable/seekbar_drawable_xml_background"
android:layout_width="236dip"
android:layout_centerHorizontal="true"
android:layout_height="wrap_content"
android:layout_marginTop="47dip"></SeekBar>
Thanks
Sunil Kumar Saoo
Set minHeight and maxHeight same as the height of seekbar. eg
<SeekBar
android:id="#+id/PP_Player_SeekBar"
android:thumb="#drawable/music_player_playerhead"
android:paddingLeft="8dip"
android:paddingRight="8dip"
android:progressDrawable="#drawable/seekbar_drawable_xml_background"
android:layout_width="236dip"
android:layout_centerHorizontal="true"
android:layout_height="wrap_content"
android:layout_marginTop="47dip"
android:minHeight="11dip"
android:maxHeight="11dip" />
See the following url
http://qtcstation.com/2011/05/android-how-to-fix-seekbar-bar-thumb-centering-issues/
In fact, it is enough to define maxHeight to a big number like 1000dp.
This also has the benefit of working with height=wrap_content and height=match_parent.
For me, the issue is more related to the vertical centering of the background (track drawable). This is the flawed drawable code I used originally (which generated the problem), as suggested by Android developer and other StackOverflow entries:
<item
android:id="#android:id/background"
android:drawable="#drawable/seekbar_track"/>
<item android:id="#android:id/secondaryProgress">
<scale
android:drawable="#drawable/seekbar_progress2"
android:scaleWidth="100%" />
</item>
<item android:id="#android:id/progress">
<scale
android:drawable="#drawable/seekbar_progress"
android:scaleWidth="100%" />
</item>
The problem here is the first item, which relates to the background of the SeekBar. Many entries will tell you to set the layout_minHeight feature to some large value to avoid a vertical spatial disconnect between the thumb and its track. This was not the solution for me - when viewed on a tablet, the background was still drawing to its smaller phone-based size - so the track was consistently positioned well above the center of the SeekBar track. The solution is to remove this entry in the SeekBar drawable, so it now looks like this:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:id="#android:id/secondaryProgress">
<scale
android:drawable="#drawable/seekbar_progress2"
android:scaleWidth="100%" />
</item>
<item android:id="#android:id/progress">
<scale
android:drawable="#drawable/seekbar_progress"
android:scaleWidth="100%" />
</item>
</layer-list>
Then, in the style definition of the SeekBar, set the layout_background to the the track drawable. Mine looks like this:
<style name="styleSeekBar" parent="#android:style/Widget.SeekBar">
<item name="android:padding">#dimen/base_0dp</item>
<item name="android:background">#drawable/seekbar_track</item>
<item name="android:progressDrawable">#drawable/abratingbar</item>
<item name="android:minHeight">#dimen/base_29dp</item>
<item name="android:maxHeight">#dimen/base_29dp</item>
<item name="android:layout_marginLeft">#dimen/base_10dp</item>
<item name="android:layout_marginRight">#dimen/base_10dp</item>
<item name="android:layout_marginTop">#dimen/base_10dp</item>
<item name="android:layout_marginBottom">#dimen/base_10dp</item>
<item name="android:scaleType">fitXY</item>
</style>
(Previously, the background setting here was just a color [white].).
This is the entry in my layout, which uses both the style and the drawables:
<SeekBar
android:id="#+id/seekbar_page_number"
style="#style/styleSeekBar"
android:layout_width="match_parent"
android:layout_height="#dimen/base_29dp"
android:minHeight="#dimen/base_29dp"
android:maxHeight="#dimen/base_29dp"
android:layout_marginLeft="#dimen/base_230dp"
android:layout_gravity="bottom|right"
android:progress="1"
android:max="20"
android:progressDrawable="#drawable/abseekbar"
android:thumb="#drawable/abseekbar_thumb"/>
So, to summarize, do not set the background (track) feature in your custom SeekBar drawable, set it in the layout_background feature of your custom SeekBar style. This ensures the track is always vertically centered in a horizontal SeekBar.
I simply resolved the misaligned horizontal seekbar thumb by setting layout_height of the seekbar to wrap_content instead of match_parent
I would like to know how I can change indeterminate ProgressBar color from basis white/grey color to black ? When I change the indeterminateDrawable, I get a static image instead of a moving animated progressBar. Is there any way to do it simply in XML?
progressBar.getIndeterminateDrawable().setColorFilter(
getResources().getColor(Your_Color),
android.graphics.PorterDuff.Mode.SRC_IN);
and replace Your_Color with the desired color like: R.color.your_color_code
To get a ProgressBar in the default theme that is to be used on white/light back ground, use one of the inverse styles:
<ProgressBar style="#android:style/Widget.ProgressBar.Inverse"/>
<ProgressBar style="#android:style/Widget.ProgressBar.Large.Inverse"/>
<ProgressBar style="#android:style/Widget.ProgressBar.Small.Inverse"/>
This will usually give you a black on transparent ProgressBar, but some OS installs use custom assets. If you're looking for a specific color, you'll have to roll your own drawables by following the instructions provided by CommonsWare.
I see other answers are quite old, in order to change the indeterminate ProgressBar color you have just to set android:indeterminateTint and android:indeterminateTintMode attributes in your ProgressBar item directly in XML:
<ProgressBar
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:indeterminateTint="#color/colorPrimary"
android:indeterminateTintMode="src_in"
android:indeterminate="true" />
android:indeterminateTint - Tint to apply to the indeterminate progress indicator.
Must be a color value, in the form of "#rgb", "#argb", "#rrggbb", "#aarrggbb", or a reference to a resource #color/colorPrimary.
android:indeterminateTintMode - Blending mode used to apply the progress indicator tint.
Must be one of the following constant values:
add, multiply, screen, src_atop, src_in or src_over
Getter and Setter methods for these attributes are:
getIndeterminateTintList()
getIndeterminateTintMode()
setIndeterminateTintList(ColorStateList tint)
setIndeterminateTintMode(PorterDuff.Mode tintMode)
All of them were added in API level 21
I make sample project and post in in my blog. Please, look at. http://www.hrupin.com/2011/09/21/how-to-make-custom-indeterminate-progressbar-in-android-or-how-to-change-progressbar-style-or-color
Hope, it help you
<?xml version="1.0" encoding="UTF-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="#android:id/background" android:drawable="#drawable/bg" />
<item android:id="#android:id/secondaryProgress" android:drawable="#drawable/secondary" />
<item android:id="#android:id/progress" android:drawable="#drawable/progress" />
</layer-list>
For API less than 23 use
progressBar.getIndeterminateDrawable().setColorFilter(
getResources().getColor(Your_Color),
android.graphics.PorterDuff.Mode.SRC_IN);
else use
progressBar.getIndeterminateDrawable().setColorFilter(
ContextCompat.getColor(context, Your_Color),
android.graphics.PorterDuff.Mode.SRC_IN);
Override android:colorControlActivated in your AppTheme which should be in your styles.xml:
<style name="AppTheme" parent="...">
...
<item name="android:colorControlActivated">#color/beautiful_color</item>
...
</style>
Works on API 21+
With the Material Component Library you can use the CircularProgressIndicator with these attributes:
indicatorColor
trackColor
Something like:
<com.google.android.material.progressindicator.CircularProgressIndicator
android:indeterminate="true"
app:trackColor="#color/red600Light"
app:indicatorColor="#color/red600Dark"
app:indicatorSize="50dp"
.../>
You can also use a Multi-color indeterminate indicator.
<com.google.android.material.progressindicator.CircularProgressIndicator
android:indeterminate="true"
app:trackColor="#color/red600Light"
app:indicatorColor="#array/progress_colors"
app:indeterminateAnimationType="contiguous"/>
with array/progress_colors:
<integer-array name="progress_colors">
<item>#color/...</item>
<item>#color/...</item>
<item>#color/...</item>
</integer-array>
actually all u need to do (for both cirle and bar) is create an xml file in drawable as shown below......
progress_spinner_001 points to whatever image u want to animate and duration ... how long u want to display each frame for.......
and set ur android:indeterminateDrawable= filename_in_drawable....
<?xml version="1.0" encoding="utf-8"?>
<animation-list
xmlns:android="http://schemas.android.com/apk/res/android"
android:oneshot="false">
<item android:drawable="#drawable/progress_spinner_001" android:duration="300" />
<item android:drawable="#drawable/progress_spinner_002" android:duration="300" />
<item android:drawable="#drawable/progress_spinner_003" android:duration="300" />
<item android:drawable="#drawable/progress_spinner_004" android:duration="300" />
<item android:drawable="#drawable/progress_spinner_005" android:duration="300" />
<item android:drawable="#drawable/progress_spinner_006" android:duration="300" />
<item android:drawable="#drawable/progress_spinner_007" android:duration="300" />
<item android:drawable="#drawable/progress_spinner_008" android:duration="300" />
</animation-list>
ps u may need to resize the progressbar to show as desired