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

This has been answered http://stackoverflow.com/questions/4510585/android-create-iphone-like-gradient — CosminO, Apr 10 '12 at 07:55

score 64 · Accepted Answer · answered Apr 10 '12 at 07:46

64

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

answered Apr 10 '12 at 07:46

Adil Soomro

37,609
9
103
153

I want to specify height of start color can you tell how to do? – mohan Apr 10 '12 at 09:36
2

it is not possible, however you can specify `android:centerColor="#fff"` also, and you can also define colours array programmatically, in which you can have more than three colours. for example [see here](http://stackoverflow.com/a/6116273/593709). – Adil Soomro Apr 10 '12 at 10:16

score 8 · Answer 2 · answered Apr 10 '12 at 07:47

<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

score 1 · Answer 3 · answered Aug 23 '19 at 08:54

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'

score 0 · Answer 4 · answered Jul 22 '16 at 01:18

To display gradient effect from top to bottom in android with transparent:

Create a new XML file in res/drawable folder with the name gradient_transparent.xml and add following code.

.

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

In XML Layout file

<LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_alignParentBottom="true"
                    android:background="@drawable/gradient_transparent"
                    android:orientation="vertical"
                    android:padding="@dimen/spacing_middle">
</LinearLayout>

How to display gradient effect from top to bottom in android

4 Answers4