CODEWITHSUNDEEP
androidandroid-buttonmaterial-components-androidmaterial-components
Priyanka Singh
Priyanka Singh

Reputation: 303

What is alternative of android:background in MaterialComponents?

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.

Upvotes: 2

Views: 982

Answers (4)

Gabriele Mariotti
Gabriele Mariotti

Reputation: 364684

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

Upvotes: 2

Cameron Ketcham
Cameron Ketcham

Reputation: 8006

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"

Upvotes: -1

Muhammad Awais
Muhammad Awais

Reputation: 548

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>

Upvotes: -1

Md. Asaduzzaman
Md. Asaduzzaman

Reputation: 15433

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

Upvotes: 2

Related Questions