How to set gradient color from complete transparency to dark in android?

Question

I have an imageview and a cardview elevated on top of it. The cardview contains multiple views inside it.

I want to set a background color to cardview such that its startcolor should make the initial part of the imageview behind it to be visible at a transparency rate of 30% and the cardview should become darker and darker and black at the end.

This is what I have tried so far:

<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient
    android:startColor="#80000000"
    android:endColor="#FF000000"
    android:angle="270"
    android:dither="true"
    />
</shape>

This doesn't make my imageview visible.I have explored many SOF posts but wasn't able to reproduce what I want!

Any inputs are welcome and would be very helpful!!

Sorry,can't get what u want,could you provide a sample image? — JiajiaGu, May 17 '19 at 02:15
`80` is for `0.5` alpha . Use less [Opacity](https://stackoverflow.com/a/16890937/4168607)\ . — ADM, May 17 '19 at 03:53
The gradient which you had made ,put backgraound of that card view — Rahul Kushwaha, May 17 '19 at 05:09
Sorry for the late reply guys, thanks for ur inputs, unfortunately I don't have an image but Im able to replicate it by modifying Ezaldeen sahb's answer. — george, May 17 '19 at 19:47
could you guys suggest a good tutorial from which I can understand the basics, nuts and bolts of android styles and themes!!! — george, May 18 '19 at 03:52

score 4 · Accepted Answer · answered May 17 '19 at 06:32

Use this XML code

<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
    android:startColor="#21293B"
    android:centerColor="#21293B00"
    android:endColor="#00000000"
    android:angle="90"/>
</shape>

put it as a background to a View, put that View above your ImageView

 <RelativeLayout
            android:id="@+id/player_layout"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent">
<ImageView
            android:id="@+id/shasha_poster"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            android:minHeight="500dp"
            android:scaleType="centerCrop"
            android:src="@drawable/placeholder"
            android:visibility="visible" />

<View
            android:id="@+id/gradient"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@drawable/background_with_shadow2" />
 </RelativeLayout>

how to modify ur gradient with start,centre,end color for a bg with white,light gray, grayish , light black, full dark.In this case we have a couple of centre colors! any idea? — george, May 21 '19 at 15:50
I hope this tool that can make what you want, you can edit the parameters until you find what suits you " use alpha to edit colors transparency", the second URl will help you in knowing Alpha Hexadecimal color code http://angrytools.com/gradient/, https://gist.github.com/lopspower/03fb1cc0ac9f32ef38f4 — Ezaldeen sahb, May 21 '19 at 16:05

score 0 · Answer 2 · answered May 17 '19 at 06:00

You can do something like this

// this is your back image
<ImageView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:src="@drawable/xxxxx"
    ...
    />

// your cardview over the image
<android.support.v7.widget.CardView
    android:layout_width="match_parent"
    android:layout_height="100dp"
    app:cardBackgroundColor="#00000000"    // make cardview transparent
    ...
    >

    // an image to make the new drawable background
    <ImageView
        android:background="@drawable/gradient"  // the xml with your gradient
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="fitXY"
        />

</android.support.v7.widget.CardView>

score 0 · Answer 3 · answered May 17 '19 at 07:43

I think this is what you looking for, I test this and work as you expected.

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_margin="5dp">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:src="@drawable/your_image" />

    <android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:card_view="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fillViewport="true"
        card_view:cardBackgroundColor="@color/transparent"
        card_view:cardCornerRadius="5dp"
        card_view:cardElevation="0dp"
        card_view:cardMaxElevation="0dp"
        card_view:cardPreventCornerOverlap="false"
        card_view:cardUseCompatPadding="true"
        card_view:contentPaddingTop="2dp">

        <RelativeLayout
            android:id="@+id/list_container_bg"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:background="@drawable/your_gradient"
            android:gravity="center"
            android:orientation="vertical">

            <!--Add your cardview contents-->


        </RelativeLayout>


    </android.support.v7.widget.CardView>

</FrameLayout>

This is the gradient background file your_gradient.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient
        android:startColor="#80000000"
        android:endColor="#FF000000"
        android:angle="270"
        android:dither="true"
        />
</shape>

Thanks for the answer @Dulanga, but this shows me only the gradient color and not showing imageview initially.May be I didn't convey properly. Ezaldeen sahb's one is what I want. — george, May 17 '19 at 19:50

How to set gradient color from complete transparency to dark in android?

3 Answers3