Material-components-android: [MaterialShapeDrawable] Unable to add gradient to MaterialShapeDrawable

Created on 30 Mar 2020  路  7Comments  路  Source: material-components/material-components-android

Is your feature request related to a problem? Please describe.
A have a lot of cases when I need to use a gradient with material shapes, but I can't do it because
MaterialShapeDrawable used the only fillColor.
If I want to use gradient or another drawable view with MaterialShapeDrawable becomes black.

Describe the solution you'd like
Add the possibility to use drawables with MaterialShapeDrawable.

feature request

Most helpful comment

    extendedFab.backgroundTintList = null
    extendedFab.setBackgroundResource(R.drawable.btn_extendedfab_shrinked_gradient)

R.drawable.btn_extendedfab_shrinked_gradient

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/btn_shape_extendedfab_shrinked_disabled" android:state_enabled="false" />

    <item android:state_enabled="true">
        <ripple android:color="?attr/colorControlHighlight">
            <item android:drawable="@drawable/btn_shape_extendedfab_shrinked_gradient" />
        </ripple>
    </item>
</selector>

btn_shape_extendedfab_shrinked_gradient

    <?xml version="1.0" encoding="utf-8"?>
    <inset xmlns:android="http://schemas.android.com/apk/res/android">
      <shape android:shape="rectangle">
        <corners android:radius="56dp" />
        <gradient
                android:angle="90"
                android:endColor="#000000"
                android:startColor="#ffffff"
                android:type="linear" />
        <padding android:left="0dp"
                android:top="0dp"
                android:right="0dp"
                android:bottom="0dp" />
      </shape>
    </inset>

All 7 comments

"A have a lot of cases when I need to use a gradient with material shapes", could you please explain what they are?

Simple widgets with gradient background, like this:

Floating Action Button:
grafik

Chip:
grafik

Button:
grafik

Would be great if FloatingActionButton supported custom backgrounds like MaterialButton and ExtendedFloatingButton (which extends MaterialButton)

FloatingActionButton does not supports custom backgrounds. (for example gradient background)
It would be great if we have this functionality

I found a workaround to get it with not too much work
Use ExtendedFloatingActionButton without label (shrinked) and override the background (as it's a MaterialButton you can just do it)

I found a workaround to get it with not too much work
Use ExtendedFloatingActionButton without label (shrinked) and override the background (as it's a MaterialButton you can just do it)

can you add a link or sample code?

    extendedFab.backgroundTintList = null
    extendedFab.setBackgroundResource(R.drawable.btn_extendedfab_shrinked_gradient)

R.drawable.btn_extendedfab_shrinked_gradient

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/btn_shape_extendedfab_shrinked_disabled" android:state_enabled="false" />

    <item android:state_enabled="true">
        <ripple android:color="?attr/colorControlHighlight">
            <item android:drawable="@drawable/btn_shape_extendedfab_shrinked_gradient" />
        </ripple>
    </item>
</selector>

btn_shape_extendedfab_shrinked_gradient

    <?xml version="1.0" encoding="utf-8"?>
    <inset xmlns:android="http://schemas.android.com/apk/res/android">
      <shape android:shape="rectangle">
        <corners android:radius="56dp" />
        <gradient
                android:angle="90"
                android:endColor="#000000"
                android:startColor="#ffffff"
                android:type="linear" />
        <padding android:left="0dp"
                android:top="0dp"
                android:right="0dp"
                android:bottom="0dp" />
      </shape>
    </inset>

Was this page helpful?
0 / 5 - 0 ratings