如何用渐变放置阴影 [英] How to put shadow with gradient

问题描述

如何在 Button 的阴影中添加两种或三种颜色的渐变?

我只找到了改变阴影颜色的方法，但我至少需要阴影中的两种颜色

您可以在下面的链接中找到示例

如果你仔细观察，你会发现阴影只有 2 个 gradients.左边是苹果绿色，右边是橙色.但是Button的区域有3个gradients.从左边开始苹果绿、浅蓝和橙色.

结束语:

到目前为止，这种组合是让我使用这样一个 Button 的唯一方法.图书馆的霓虹灯 Button 不是那种可修改的，这让我想到了这个组合.给我这个想法实际上是一个愉快的巧合/意外.

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!

解决方案

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.

这篇关于如何用渐变放置阴影的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！