Gradient stroke with transparent background

Question

Im trying to achieve something like this, I used layer list in the xml this way :

<item>
    <shape android:shape="rectangle" >
        <gradient

            android:centerColor="#4DD0E1"
            android:endColor="#76FF03"

            android:startColor="@color/colorPrimary"
            android:type="linear" />


    </shape>
</item>

<item
    android:bottom="2dp"
    android:left="2dp"
    android:right="2dp"
    android:top="2dp">


    <shape android:shape="rectangle" >

        <solid android:color="#fff" />
    </shape>
</item>

Here is the layout code, the border of the shape needs to overlap the image.

<RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:layout_marginTop="12dp"
        android:background="@android:color/transparent">


        <ImageView
            android:layout_width="100dp"
            android:layout_height="75dp"
            android:layout_centerVertical="true"
            android:layout_alignParentEnd="true"
            android:layout_alignParentRight="true"
            android:layout_marginRight="12dp"
            android:id="@+id/goals_image" />


        <FrameLayout
            android:id="@+id/goals_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"

            android:layout_gravity="center"
            android:clickable="true"

            android:layout_marginLeft="20dp"
            android:layout_marginRight="32dp"
            android:background="#00000000"
            >


            <TextView
                android:id="@+id/goals_text"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textSize="15dp"
                android:text="Lose Weight"
                android:textColor="@color/black"
                android:layout_margin="40dp"

                />


        </FrameLayout>

    </RelativeLayout>

but if I set the background to transparent the shapes background becomes the whole gradient color. How can i achieve a gradient stroke with a transparent background? Thanks in advance.

Answer 1

Just use an 8-digit color value, eg #FFF8F8F6, where the first two characters are the alpha value. FF being fully opaque, and 00 being fully transparent.

Check this

How to make transparent gradient?

Check this also http://www.coderzheaven.com/2013/02/04/create-transparency-image-android/

Answer 2

after edit check this

<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

<item>
<!-- create gradient you want to use with the angle you want to use -->
    <shape android:shape="rectangle" >
        <gradient
            android:angle="0"
            android:centerColor="@android:color/holo_blue_bright"
            android:endColor="@android:color/holo_red_light"
            android:startColor="@android:color/holo_green_light" />

    </shape>
</item>
<!-- create the stroke for top, left, bottom and right with the dp you want -->
<item
    android:bottom="2dp"
    android:left="2dp"
    android:right="2dp"
    android:top="2dp">
    <shape android:shape="rectangle" >
        <!-- fill the inside in the color you want (could also be a gradient again if you want to, just change solid to gradient and enter angle, start, maybe center, and end color) -->
        <solid android:color="#fff" />
    </shape>
</item>

</layer-list>

Answer 3

try this :

gradient_drawable.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <gradient
                android:centerColor="#4DD0E1"
                android:endColor="#76FF03"
                android:startColor="@color/colorPrimary"
                android:type="linear" />
            <corners android:radius="2dp" />
            <padding
                android:bottom="2dp"
                android:left="2dp"
                android:right="2dp"
                android:top="2dp" />
        </shape>
    </item>
    <item>
        <shape android:shape="rectangle">
            <solid android:color="@color/white" />
            <corners android:radius="2dp" />
            <size
                android:width="50dp"
                android:height="50dp" />
        </shape>
    </item>
</layer-list>

your_layout.xml

<RelativeLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="100dp"
    android:layout_marginTop="12dp"
    android:background="@drawable/gradient_drawable">

    <ImageView
        android:id="@+id/goals_image"
        android:layout_width="100dp"
        android:layout_height="75dp"
        android:layout_alignParentEnd="true"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:layout_marginRight="12dp"
        android:src="@mipmap/ic_launcher" />


    <FrameLayout
        android:id="@+id/goals_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="center"
        android:layout_marginLeft="20dp"
        android:layout_marginRight="32dp"
        android:background="#00000000"
        android:clickable="true">

        <TextView
            android:id="@+id/goals_text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="40dp"
            android:text="Lose Weight"
            android:textColor="@color/black"
            android:textSize="15dp" />
    </FrameLayout>
</RelativeLayout>