CODEWITHSUNDEEP
androidbuttonbordergradient
LHIOUI
LHIOUI

Reputation: 3337

Android: gradient in border of button

I am trying to create a button border style like this: enter image description here

So I have created a drawable.xml and put 2 rectangular shapes on top of each other with the second one 2dp smaller like this:

<?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:angle="135"
                android:endColor="#6cd0f4"
                android:startColor="#acd44d"
                android:type="linear" />

            <corners android:radius="5dp" />
        </shape>
    </item>
    <item
        android:bottom="2dp"
        android:left="2dp"
        android:right="2dp"
        android:top="2dp">
        <shape android:shape="rectangle" >
            <solid android:color="#4267af" />

            <corners android:radius="3dp" />
        </shape>
    </item>
</layer-list>

This work fine but I want to make the button transparent so it takes the color of its parent view. Anyone have an idea how can I create a similar effect? Is nine-patch drawable more flexible to do such a job?

Upvotes: 0

Views: 1765

Answers (3)

LHIOUI
LHIOUI

Reputation: 3337

I finilly decided to use nine patch images.

Upvotes: 1

Ajit Kumar Dubey
Ajit Kumar Dubey

Reputation: 1563

Instead of creating two rectangular view you can create view like this. I hope it will helpful for you for an example given below

<LinearLayout
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:background="#4178AA"
    android:padding="5dp">

    <Button
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="@string/xxxxx"
        android:background="@drawable/test" />
</LinearLayout>

test is your rectangular view.This will give you same shape as you added in question

Upvotes: 0

Trinadh venna
Trinadh venna

Reputation: 475

Add #80 in the beginning of your hash code. 

android:color="#804267af"

The 80 in the beginning is the value of transparency. Edited: the following are the values for the transparency, insert the two characters at the beginning of the hex for required percentage. 

100% — FF

95% — F2

90% — E6

85% — D9

80% — CC

75% — BF

70% — B3

65% — A6

60% — 99

55% — 8C

50% — 80

45% — 73

40% — 66

35% — 59

30% — 4D

25% — 40

20% — 33

15% — 26

10% — 1A

5%  — 0D

0% —  00

you can also use the following background attribute, 

android:background="@android:color/transparent"

But you cannot explicitly give any required percentage values here.

Another way of doing it through your code is manually setting the alpha value of the color of the element.

yourButton.getBackground().setAlpha(0);

Hope this helps you.

Upvotes: 0

Related Questions