How to display gradient effect from top to bottom in android

Question

can anybody tell How to dispaly gradient effect from top to bottom in android .can anybody provide example

Thanks

Answer 1

make an xml file in your dawable folder name it like gradient_bg.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient 
        android:startColor="#000" 
        android:endColor="#fff"
        android:angle="90"
     />
</shape>

and set it as background to your View.

android:background="@drawable/gradient_bg"

or

setBackgroundResource(R.drawable.gradient_bg);

Answer 2

<shape xmlns:android="http://schemas.android.com/apk/res/android" >

    <gradient

        android:angle="90"
        android:type="linear"
        android:startColor="#FFFFFF"
        android:endColor="#000000" />

</shape>

here if you set the angle to the 270 the start color will appear at the bottom and the end color at the top if you set the angle to 90 it will be reversed

Answer 3

You can used a custom view to do that. With this solution, it's finished the gradient shapes of all colors in your projects:

class GradientView(context: Context, attrs: AttributeSet) : View(context, attrs) {

    // Properties
    private val paint: Paint = Paint()
    private val rect = Rect()

    //region Attributes
    var start: Int = Color.WHITE
    var end: Int = Color.WHITE
    //endregion

    override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {
        super.onSizeChanged(w, h, oldw, oldh)
        // Update Size
        val usableWidth = width - (paddingLeft + paddingRight)
        val usableHeight = height - (paddingTop + paddingBottom)
        rect.right = usableWidth
        rect.bottom = usableHeight
        // Update Color
        paint.shader = LinearGradient(0f, height.toFloat(), 0f, 0f,
                start, end, Shader.TileMode.CLAMP)
        // ReDraw
        invalidate()
    }

    override fun onDraw(canvas: Canvas) {
        super.onDraw(canvas)
        canvas.drawRect(rect, paint)
    }

}

I also create an open source project GradientView with this custom view:

https://github.com/lopspower/GradientView

implementation 'com.mikhaellopez:gradientview:1.1.0'