How to set button selection color along with round

2019-01-27 13:07发布

问题:

I want to set a rounded corner for a button in android along with changing the button color on when selected. I am doing the following things.

drawable/push_button.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >    
    <item android:state_pressed="true"  android:drawable="@color/green"/>
    <item android:state_focused="true"  android:drawable="@color/green"/>
    <item android:state_focused="false"  android:drawable="@color/green"/>
    <item android:state_pressed="false" android:drawable="@color/red"/>
    <item  android:drawable="@drawable/push_button_background"/>         
</selector>

drawable/push_button_background.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" 
    >
    <solid android:color="#3F4040"/>
    <corners 
    android:radius="7dp"
    />
</shape>

and in code, I am using

android:background="@drawable/push_button"

Here, the problem is, button colors are setting properly when selected & deselected. But, rounded corners are not working.

How to do that? If I use

android:background="@drawable/push_button_background"

then, rounded corners are working but the button color change on selection is not working

How to implement this?

I have referred this link. Even then no help!!

回答1:

I have found answer for my question with few trial & error attempts.

Here is the solution.

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

 <item android:state_pressed="true">
    <shape  >
    <solid android:color="@color/green"/>
    <corners 
    android:radius="7dp"/>
    </shape>
 </item>

 <item android:state_focused="true" >
    <shape xmlns:android="http://schemas.android.com/apk/res/android" >
    <solid android:color="@color/green"/>
    <corners 
    android:radius="7dp"/>
    </shape>
 </item>

 <item android:state_focused="false" >
    <shape xmlns:android="http://schemas.android.com/apk/res/android" >
    <solid android:color="@color/red"/>
    <corners 
    android:radius="7dp"/>
    </shape>   
 </item>

 <item android:state_pressed="false" >
    <shape xmlns:android="http://schemas.android.com/apk/res/android" >
    <solid android:color="@color/red"/>
    <corners 
    android:radius="7dp"
    />
    </shape>
 </item> 

</selector>


回答2:

What I did was defined the shape and specify the dp of each corner.

<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" android:padding="90dp">
<solid android:color="#FFFFFF"/>
<padding />
<corners
    android:bottomRightRadius="15dp"
    android:bottomLeftRadius="15dp"
    android:topLeftRadius="15dp"
    android:topRightRadius="15dp"/>

</shape>

If you increase the dp in each corner it will make the button more rounded.



回答3:

I have been successful at doing exactly what you're describing. I did the following:

First, I created a new class that extends Button. In this class, I created a method called setState():

public void setState (int s)
{
    if (s > 0 && s < 4 &&)
    {
        this.state = s;
        switch (state)
        {
            case 1:
                setBackgroundDrawable (def_gray);
                break;

            case 2:
                setBackgroundDrawable (lt_gray);
                break;

            case 3:
                setBackgroundDrawable (black);
        }
    }
}

The three background drawables you see above are XML files describing the button look. They are mostly the same, but vary in the color set for each one. The default gray button is described like this:

<?xml version="1.0" encoding="utf-8"?>

<selector
    xmlns:android="http://schemas.android.com/apk/res/android">

    <item>

        <shape>

            <gradient
                android:startColor="#333333"
                android:endColor="#333333" />

            <stroke
                android:width="2dp"
                android:color="@android:color/white" />

            <corners
                android:radius="5dp" />

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

        </shape>

    </item>

</selector>

As far as I know, that XML format is expecting to be used to configure a color gradient on the button face. Since that wasn't what I wanted, I set both color values the same and the background color is consistent. You may need to experiment a bit with color values, but it looks like you've already got a handle on that.