How to put shadow with gradient

Question

How can i put gradient of two or three color in the shadow of Button?

I have only find the way to change the color of the shadow, but i need at least two colors in the shadow

You can find an example in the link below

Button Example

Thanks for the help!

Lucilla

Answer 1

Foreword:

I saw that there were dozens of requests for this type of Button. And in fact, there has not yet been a real Button that has color gradients as areas and shadows. I found a library that has gradients in the shadows. However, you cannot use a color gradient for the solids. Therefore I created a drawable myself (custom_shape.xml) which has it. Now we have separate shadows and areas. I combined the two and used a trick. The shadow of the library Button is covered by my drawable. But if you use a transparent stroke on my drawable, the shadow shines through.

Execution:

Install the package in your build.gradle(Module:):

allprojects {
    repositories {
        ...
        maven { url 'https://jitpack.io' }
    }
}

In your other folder called build.gradle(Project:) you need to implement the mentioned library:

dependencies {
     implementation 'com.github.SMehranB:GlowNeonButton:2.0.1'
}

Define your button as follows in your activity_main.xml:

<com.smb.glowbutton.NeonButton
    android:id="@+id/btnNeonOne"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:nb_cornerRadius="90dp"
    app:nb_gradientEnd="#FF6D00"
    app:nb_gradientStart="#AEEA00"
    android:background="@drawable/custom_shape"
    app:nb_text="Upvote"
    app:nb_textColor="#ffffff"
    app:nb_textSize="16sp"
    app:nb_textStyle="normal" />

After that you need to define my created drawable, set as android:background="@drawable/custom_shape" for the Button:

This is the custom drawable called custom_shape.xml:

Result:

If you look closely, you can see that the shadow only has 2 gradients. Apple green on the left and orange on the right. However, the area of ​​the Button has 3 gradients. From the left apple green, light blue and orange.

Closing Word:

This combination is so far the only approach that has brought me to such a Button. The library's neon Button is not that modifiable, which led me to this combination. It was actually a happy coincidence / accident that gave me this idea.

Stenosis

I think shadow is missing :) – Winnifredwinning

I'm glad you like the library. if you would like more modifiable attributes, feel free to request it on the github repository and I will try to add it in the next version. – Nica