CODEWITHSUNDEEP
androidandroid-layoutandroid-drawable
user6008330
user6008330

Reputation:

How to put border on button and click effect?

I have this button XML, which has transparent background and when clicked, the color changes, so that it shows a "click effect".

Drawable XML:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <!-- press-->
    <item android:drawable="@android:color/transparent" android:state_pressed="false" />

    <!-- focused-->
    <item style="@style/AppTheme" android:drawable="@color/color_primary" android:state_pressed="true" />

    <!-- normal-->
    <item android:drawable="@android:color/transparent" />

</selector>

My question is, how to put border on this button? Or an XML example so you have the same result. Thank you!

Upvotes: 1

Views: 1168

Answers (2)

xanexpt
xanexpt

Reputation: 753

create a drawable, similar to this, selected.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
             android:shape="rectangle">
    <solid android:color="#ff0000"/>
    <stroke
        android:width="1dp"
        android:color="#00ff00" />
</shape>

then change this line

<item 
     style="@style/AppTheme" 
     android:drawable="@color/color_primary" 
     android:state_pressed="true" />

to 

<item 
     style="@style/AppTheme" 
     android:drawable="@drawable/selected" 
     android:state_pressed="true" />

the solid is the background color and the border is the stroke, you can create drawables that are used in the diferent states of the selector

Upvotes: 1

Abhilash Maurya
Abhilash Maurya

Reputation: 308

You can do something like this: 1. First create a drawable file like this:

<shape android:shape="rectangle">
     <!--apply button background transparent, full opacity-->
     <solid android:color="#00ffffff"/>
     <!--make button border solid color, nontransparent-->
     <stroke android:color="#stroke color" android:width="2dp"/>
     <corners android:radius="2dp"/>
</shape>

then in your provided code replace these lines:

<!-- press-->
<item android:drawable="path to above drawable" android:state_pressed="false" />

<!-- focused-->
<item style="@style/AppTheme" android:drawable="@color/color_primary" android:state_pressed="true" />

<!-- normal-->
<item android:drawable="path to above drawable" />

as

<!-- press-->
<item android:drawable="path to above drawable" android:state_pressed="false" />

<!-- focused-->
<item style="@style/AppTheme" android:drawable="@color/color_primary" android:state_pressed="true" />

<!-- normal-->
<item android:drawable="path to above drawable" />

Upvotes: 0

Related Questions