Question: android:background is not giving effect in MaterialComponents.
In my project, I was using AppCompat
( <style name="DayTheme" parent="Theme.AppCompat.Light.NoActionBar">)
and everything was working fine.
but, because of some requirement in my project, now, I've to use MaterialComponents
( <style name="DayTheme" parent="Theme.MaterialComponents.Light.NoActionBar"> )
And because of that some UI looks bad.
Problem: In AppComapt, I was using android:background="#drawable/bg_circle_btn" which was working fine, but in MaterialComponents, this background is not giving effect.
I tried to change color, shape n all but it's not giving effect.
<Button
android:id="#+id/custom_category_image"
android:layout_width="match_parent"
android:layout_height="25dp"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:background="#drawable/bg_circle_btn"
android:text="A"
android:textColor="#color/colorWhite"
android:textSize="12dp"
android:visibility="gone"
app:srcCompat="#drawable/ic_navigate_next_black_24dp" />
(I'm using button, because, instead of any fixed image, I'm setting the first letter of title in this button and this button is actually inside carview, so it'll be cirlce also.)
bg_circle_btn:
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid android:color="?attr/toolbarcolor" />
<size
android:width="120dp"
android:height="120dp" />
</shape>
Please note that, in whole project, I need to use this background, so please do not give any other alternative ways.
You could use androidx.appcompat.widget.AppCompatButton instead of Button. This will solve your problem.
Besides this you can use android:backgroundTint to change the color only.
To change both (Shape&Color) for com.google.android.material.button.MaterialButton, you have to do this from you code:
setBackgroundResource(R.drawable.bg_circle_btn) setBackgroundTintList(ColorStateList.valueOf(Color.RED))
Since you are using the Material Components theme, <Button> is replaced by the <com.google.android.material.button.MaterialButton> at runtime. There is an auto-inflation (check this post).
To change the background color just use the app:backgroundTint attribute.
It works with a color, not a drawable.
Something like:
<com.google.android.material.button.MaterialButton
app:backgroundTint="#color/...."
../>
If you want to apply a custom background to the MaterialButton:
you can use
android:background in MaterialButton but it requires at least the version 1.2.0-alpha06 (check this answer)
use an AppCompatButton as suggested by #Md. Asaduzzaman
You cannot use background attribute, when using MaterialComponents theme.
You can only change its color using backgroundTint attribute.
Possible way of achieving your task is to use View/Layout, then providing a shape background on it.
For example using CardView, you can do this as follow.
You cannot use background on CardView, but using some of the CardView useful attributes you can achieve your task:
<androidx.cardview.widget.CardView
android:layout_width="120dp"
android:layout_height="120dp"
app:cardBackgroundColor="#color/colorPrimary"
app:cardCornerRadius="65dp">
<Widget_You_Want />
</androidx.cardview.widget.CardView>
For a round circle you could use shape theming with Material Components. You would probably want to define a ShapeAppearance like
<style name="ShapeAppearance.Round" parent="">
<item name="cornerFamily">rounded</item>
<item name="cornerSize">50%</item>
</style>
Then apply that to your button (or button style) with app:shapeAppearance="#style/ShapeAppearance.Round"
Related
I find out that since Android Studio 4.1 I cannot change the background color of a Button by setting color on its android:background, just no effect. And custom Drawable is not working as well.
My background Drawable:
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<stroke
android:width="1.5dp"
android:color="#android:color/black" />
<solid
android:color="#android:color/white" />
<corners
android:radius="8dp" />
</shape>
My Button:
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Add To Cart"
android:background="#drawable/background3"/>
Result:
The Android Studio 4.1 new-project wizard, for many of its templates, has the project use the Material Components for Android library. And, it sets up the default theme to be based on Theme.MaterialComponents.DayNight.DarkActionBar.
A side effect of this is that any <Button> elements in a layout get turned into MaterialButton widgets, not regular Button widgets. MaterialButton ignores android:background.
If all you want to do is to change the color, use android:backgroundTint or change the colorPrimary attribute in the theme.
If you want a button that has a custom background, and your theme is set up to use Theme.MaterialComponents, you could switch the XML element in the layout to be <android.widget.Button> instead of <Button>. This should cause the Material Components for Android to ignore that element, and you can manipulate this button normally with respect to XML attributes.
UPDATE 03/2021
app:backgroundTint="#null" //just need this
android:background="#drawable/background_button"
Ok, since MaterialButton is the default Button starting from Android Studio 4.1, we can modify the shape by using app:shapeAppearanceOverlay attribute.
1. Create a Custom Style in themes.xml:
<style name="leaf">
<item name="cornerSizeTopLeft">70%</item> //can specify corner position
<!--<item name="cornerFamilyTopLeft">cut</item>-->
<item name="cornerSizeBottomRight">70%</item>
<!--<item name="cornerFamilyBottomRight">cut</item>-->
</style>
2. Apply Style in Material Button:
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:text="Show"
app:shapeAppearanceOverlay="#style/leaf" /> //here
Result:
Helpful video:
https://www.youtube.com/watch?v=jihLJ0oVmGo
Add only this:
app:backgroundTint="#null"
I found easiest solution in this video.
https://www.youtube.com/watch?v=E_1H52FEqII
Just go to themes.xml under values folder in project window and change the MaterialComponents to AppCompact in both themes and button start working as normal as it was in past.
Existing: Theme.MaterialComponents.DayNight.DarkActionBar
After Modification: Theme.AppCompat.DayNight.DarkActionBar
It worked for me, hope it works for others as weell.
Just set null to backgroundTint.
android:backgroundTint="#null".
I want to applying drawable to my android button.
But, background drawable is not working.
This is my drawable code.
<?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="#FFEF1D1D" />
</shape>
</item>
</layer-list>
and This is my layout code
<Button
android:id="#+id/booking"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="6.5"
android:text="bokking"
android:textStyle="bold"
android:textColor="#color/white"
android:background="#drawable/booking_btn"
android:layout_marginRight="10dp"/>
Drawable is not applied to Button, but drawable is applied to AppCompatButton. I wonder why too.
When I applied this code, Only backgroundTint applies to buttons.
I spent a week on this issue, but I couldn't solve it.
plz help me
You can't apply the background on the material button.
If you are using Theme.MaterialComponents.*, then the normal button also used as the material button forcefully.
You have two options.
change it to any AppCompat theme.
Still If you need a material theme for some components, then use any material theme with a bridge. like Theme.MaterialComponents.*.Bridge
So, If you will go with option 2, you can use material button as per your need.
use com.google.android.material.button.MaterialButton for material button else use your normal button.
Looks like there is a problem with the Theme since Android Studio 4.1, try changing the base Theme from Theme.MaterialComponents.DayNight.DarkActionBar to Theme.AppCompat.DayNight.DarkActionBar, it works for me.
There is only one chance for that.I think you are using material theme.That's why the background property is not applying for button.If you want use that,change the theme to appcompat varaint.
You didn't use the selector in your XML. Use Selector instead of Layer-List
I'm using the new material components com.google.android.material:material with android x but I can't set a custom background to the button.
I know that I can use app:backgroundTint to change the color
but the default background has some padding that I want to get rid of, and the old way of using android:background to set my own background but this is no longer working.
I looked at the docs but can't find any mention to this change.
In the Material Components Library, the MaterialButton has a default style with insetBottom and insetTop with a value of 6dp.
You can change it using:
<com.google.android.material.button.MaterialButton
android:insetTop="0dp"
android:insetBottom="0dp"
../>
If you want to change the background color you can use the app:backgroundTint attribute or you can override some theme attributes from a default style then you can use new materialThemeOverlay attribute.
In your case you can do something like:
<style name="MtButtonStyle"
parent="Widget.MaterialComponents.Button">
<item name=“materialThemeOverlay”>#style/GreenButtonThemeOverlay</item>
</style>
<style name="GreenButtonThemeOverlay">
<item name="colorPrimary">#color/green</item>
</style>
Finally starting with the version 1.2.0-alpha06 you can use the android:background attribute in the MaterialButton.
<MaterialButton
app:backgroundTint="#null"
android:background="#drawable/button_drawable"
... />
The documentation for the MaterialButton class says:
Do not use the android:background attribute. MaterialButton manages its own background drawable, and setting a new background means MaterialButton can no longer guarantee that the new attributes it introduces will function properly. If the default background is changed, MaterialButton cannot guarantee well-defined behavior.
However, the GitHub readme says:
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.
This mentions only left/right inset, but the Attributes section of the readme shows that all four insets are supported:
So you could add these attributes to your <MaterialButton> tag:
android:insetTop="0dp"
android:insetBottom="0dp"
Looking at https://medium.com/#velmm/material-button-in-android-e4391a243b17 I found that app:backgroundTint (and app:backgroundTintMode) works. It changes a color, but not a drawable selector.
Also you can replace <Button with <android.widget.Button.
If you want to use gradient drawable as MaterialButton's background,
set Your MaterialButton as below:
<com.google.android.material.button.MaterialButton
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="16dp"
app:backgroundTint="#null"
android:background="#drawable/group_47"
app:layout_constraintEnd_toEndOf="#+id/input_password"
app:layout_constraintStart_toStartOf="#+id/input_password"
app:layout_constraintTop_toBottomOf="#+id/input_password" />
If you wish to keep your
android:background="#drawable/button_background"
And have MaterialButton respect it, then you must set
app:backgroundTint="#null"
app:backgroundTintMode="add" // it doesn't matter the value, but it must be set
Please note that you can also use app:background instead, although I've noticed enough breaking changes that I still prefer the method above.
I face the same issue when I use state drawable in a Button but It does not change the background of the button. After searching for a long time, I found 2 solutions as below:
The first solution is change the application theme from MaterialComponents to AppCompat in values/themes.xml file. then state drawable will work well.
to
<style name="Theme.MyApplication" parent="Theme.AppCompat.DayNight.DarkActionBar">
If you still want to use MaterialComponents theme then you can try the second solution.Use <android.widget.Button instead of <Button or <com.google.android.material.button.MaterialButton
<android.widget.Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/state_test"
android:text="Button" />
The second solution I found at Here
The main reason for this decision by the google design team to exclude the functionality android:background="#drawable/" from the initial release versions of the material library is to enable developers to build consistent and professional-looking designs for apps at a faster pace. This is because most developers like me are bad in making decisions related to design and colors of the app.
Also, I found this snippet from google tutorial while migrating to MDC.
Just by using android:backgroundTint
<style name="MyButtonStyle" parent="Widget.MaterialComponents.Button">
<item name="android:backgroundTint">#color/pink</item>
</style>
<com.google.android.material.button.MaterialButton
android:id="#+id/followButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/channel_header_item_margin"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#id/titeChannelTV"
style="#style/MyButtonStyle"/>
using a simple
app:backgroundTint="#null"
with button attributes works perfectly.
I saw new appCompat controls are available here. And implemented it in android app, but I don't find any specific way of customizing its color.
Just like if we set accent color in style, the edit text automatically catches it. But it is not working in case of AppCompatButton.
Does anybody find something regarding this?
See here: Coloring Buttons in Android with Material Design and AppCompat
To summarize, you can use the tintBackground attribute on the button itself or you can use colorControlNormal (or a combination).
Also, you can just use Button and it'll get converted to an AppCompatButton as long as you're using the theme and inheriting from AppCompatActivity correctly.
Examples from the linked URL
theme.xml:
<item name="colorButtonNormal">#color/button_color</item>
v21/theme.xml
<item name="android:colorButtonNormal">#color/button_color</item>
or
<Button
android:id="#+id/add_remove_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:backgroundTint="#color/bg_remove_btn_default"
android:textColor="#android:color/white"
tools:text="Remove" />
Use the SupportLib with AppCompatButton like this:
<android.support.v7.widget.AppCompatButton
android:id="#+id/add_remove_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:backgroundTint="#color/bg_remove_btn_default"
android:textColor="#android:color/white"
tools:text="Remove" />
app is a mxlns: xmlns:app="http://schemas.android.com/apk/res-auto"
so the backgroundTint works also for preLollipop
How do I implement the "raised button" and the "flat button" as described in google's material design guidelines?
Raised buttons add dimension to mostly flat layouts. They emphasize >
functions on busy or wide spaces.
Use flat buttons for toolbars and dialogs to avoid excessive layering.
Source: http://www.google.com/design/spec/components/buttons.html
This requires Android 5.0
Raised Button
Inherit your button style from Widget.Material.Button, and the standard elevation and raising action will automatically be applied.
<style name="Your.Button" parent="android:style/Widget.Material.Button">
<item name="android:background">#drawable/raised_button_background</item>
</style>
Then you need to create a raised_button_background.xml file with your button's background color inside a ripple tag:
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="?attr/colorControlHighlight">
<item android:drawable="#color/button_color"/>
</ripple>
Flat Button
Edit: Instead of my previous advice for flat buttons, you should instead use follow the advice given by Stephen Kaiser below:
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="DONE"
style="?android:attr/borderlessButtonStyle"
/>
Edit: If you are using Support Library, you can achieve the same result on Pre-Lollipop devices by using style="?attr/borderlessButtonStyle". (notice the absence of android:) The above example then becomes
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="DONE"
style="?attr/borderlessButtonStyle"
/>
In order to implement the flat buttons, you could just add style="?android:attr/borderlessButtonStyle".
Example:
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="DONE"
style="?android:attr/borderlessButtonStyle"
/>
Here's the reference for the attribute.
You can use MaterialDesignLibrary. It's third party library.
This is a library with components of Android L to you use in android 2.2
If you want use this library, you only have to download MaterialDesign project, import it into your workspace and add the project as a library in your android project settings.
I'm working on a material compatibility library. The button class is there and supports animated shadows and the touch ripple. Maybe you will find it useful. Here's the link.
I use this as a background for a button with AppCompat and it depicts a raised button (with ripples n all), hope it helps.
myRaisedButton.xml - inside the drawable folder:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#color/yourColor"/>
<corners android:radius="6dp"/>
</shape>
</item>
<item android:drawable="?android:selectableItemBackground"/>
</layer-list>
styles.xml:
<resources>
<style name="AppTheme" parent="AppTheme.Base"/>
<style name="AppTheme.Base" parent="Theme.AppCompat">
</resources>
styles.xml (v21):
...
<style name="AppTheme" parent="AppTheme.Base">
layout.xml:
...
android:background="#drawable/myRaisedButton"
For a description of how to do this using the appcompat libray, check my answer to another question: https://stackoverflow.com/a/27696134/1932522
This will show how to make use of the raised and flat buttons for both Android 5.0 and earlier (up to API level 11)!
You asked for material design buttons Library - you got it - https://github.com/navasmdc/MaterialDesignLibrary
You may also need to add a bottom margin to your button, in order to be able to see the raised-button shadow effect:
<item name="android:layout_marginBottom">#dimen/activity_vertical_margin</item>
<item name="android:elevation">1dp</item>