What is alternative of android:background in MaterialComponents?

Question

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.

@GabrieleMariotti I can't capture because of some changes are going on. But I'll provide it and I tell you, it is not giving in roung shape, also, button is not coming in exctly center instead it is hiding on left bottom side' — Priyanka Singh, Oct 09 '19 at 10:51

Md. Asaduzzaman · Accepted Answer · 2019-10-09T11:00:38.317

2

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))

edited Oct 09 '19 at 11:00

answered Oct 09 '19 at 10:28

Md. Asaduzzaman

14,963
2
34
46

Then you could use `setBackgroundResource` from code for shape and `android:backgroundTint` from xml for color. Hope this will help you. – Md. Asaduzzaman Oct 09 '19 at 10:46
Could you please add your button layout? I don't know whats going on here. I have tested and its working. – Md. Asaduzzaman Oct 09 '19 at 11:41
Change your button **width** and **height** to **wrap_content** – Md. Asaduzzaman Oct 09 '19 at 12:02
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/200601/discussion-between-md-asaduzzaman-and-priyanka-singh). – Md. Asaduzzaman Oct 09 '19 at 12:03
I did something and now it's showing in circle, but inside button text is not exactly in centre instead it is showing in downside. – Priyanka Singh Oct 09 '19 at 12:54
1

@Md.Asaduzzaman pay attention with `setBackgroundResource()`. It calls the `setBackgroundDrawable` with this warning in logcat: `Do not set the background; MaterialButton manages its own background drawable.` – Gabriele Mariotti Oct 09 '19 at 18:30
1

@GabrieleMariotti, Thank you – Md. Asaduzzaman Oct 09 '19 at 18:32

Gabriele Mariotti · Answer 2 · 2020-08-04T17:00:39.103

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

Muhammad Awais · Answer 3 · 2019-10-09T11:36:55.547

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>

score -1 · Answer 4 · answered Oct 09 '19 at 21:34

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"

What is alternative of android:background in MaterialComponents?

4 Answers4

Linked