android button selector

Question

This is a button selector such that when normal it appears red, when pressed it appears grey.

I would like to ask how could the code be further directly modified such that when PRESSED the text size and color could also change? Many thanks!

<item android:state_pressed="true" >         
    <shape xmlns:android="http://schemas.android.com/apk/res/android"> 
        <stroke android:width="2dp" android:color="@color/black" />
        <solid android:color="@color/grey"/>
        <padding android:left="5dp" android:top="2dp" 
            android:right="5dp" android:bottom="2dp" /> 
        <corners android:radius="5dp" /> 
    </shape>    
</item>

<item>
    <shape xmlns:android="http://schemas.android.com/apk/res/android"> 
        <stroke android:width="2dp" android:color="@color/black" />
        <solid android:color="#FF6699"/>
        <padding android:left="5dp" android:top="2dp" 
            android:right="5dp" android:bottom="2dp" /> 
        <corners android:radius="5dp" /> 
    </shape>
</item>

Salamander

Answer 1

You just need to set selector of button in your layout file.

<Button
     android:id="@+id/button1"
     android:background="@drawable/selector_xml_name"
     android:layout_width="200dp"
     android:layout_height="126dp"
     android:text="Hello" />

and done.

Edit

Following is button_effect.xml file in drawable directory

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

    <item android:drawable="@drawable/numpad_button_bg_selected" android:state_selected="true"></item>
    <item android:drawable="@drawable/numpad_button_bg_pressed" android:state_pressed="true"></item>
    <item android:drawable="@drawable/numpad_button_bg_normal"></item>

</selector>

In this, you can see that there are 3 drawables, you just need to place this button_effect style to your button, as i wrote above. You just need to replace selector_xml_name with button_effect.

Endocarditis

could you please elaborate more for how to set pressed and non-pressed state? (with all the components above such as round color, stroke, etc). Many thanks! – Salamander

Best way to implement the selector is by using the xml refer this blazin.in/2016/03/how-to-use-selectors-for-botton.html i implemented as per this and its working – Valida

Hi , I know it's been a while you wrote this post but maybe you will know what I'm missing. I used your code and my button is allways green then for pressed =true and selected =true it's changing drawable to gray but the secod before other activity is opened button has default android style. Any idea what state I'm missing? – Medullated

Answer 2

You can't achieve text size change with a state list drawable. To change text color and text size do this:

Text color

To change the text color, you can create color state list resource. It will be a separate resource located in res/color/ directory. In layout xml you have to set it as the value for android:textColor attribute. The color selector will then contain something like this:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" android:color="@color/text_pressed" />
    <item android:color="@color/text_normal" />
</selector>

Text size

You can't change the size of the text simply with resources. There's no "dimen selector". You have to do it in code. And there is no straightforward solution.

Probably the easiest solution might be utilizing View.onTouchListener() and handle the up and down events accordingly. Use something like this:

view.setOnTouchListener(new OnTouchListener() {

        @Override
        public boolean onTouch(View v, MotionEvent event) {
            switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                // change text size to the "pressed value"
                return true;
            case MotionEvent.ACTION_UP:
                // change text size to the "normal value"
                return true;
            default:
                return false;
            }
        }
});

A different solution might be to extend the view and override the setPressed(Boolean) method. The method is internally called when the change of the pressed state happens. Then change the size of the text accordingly in the method call (don't forget to call the super).

Demagogy

Answer 3

Create custom_selector.xml in drawable folder

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
   <item android:drawable="@drawable/unselected" android:state_pressed="true" />
   <item android:drawable="@drawable/selected" />
</selector>

Create selected.xml shape in drawable folder

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

Create unselected.xml shape in drawable folder

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

Add following colors for selected/unselected state in color.xml of values folder

<color name="selected">#a8cf45</color>
<color name="unselected">#ff8cae3b</color>

you can check complete solution from here

Seko

Answer 4

You can use this code:

<Button
    android:id="@+id/img_sublist_carat"
    android:layout_width="70dp"
    android:layout_height="68dp"
    android:layout_centerVertical="true"
    android:layout_marginLeft="625dp"
    android:contentDescription=""
    android:background="@drawable/img_sublist_carat_selector"
    android:visibility="visible" />

(Selector File) img_sublist_carat_selector.xml:

<?xml version="1.0" encoding="UTF-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
 <item android:state_focused="true" 
       android:state_pressed="true"        
       android:drawable="@drawable/img_sublist_carat_highlight" />
 <item android:state_pressed="true" 
       android:drawable="@drawable/img_sublist_carat_highlight" />
 <item android:drawable="@drawable/img_sublist_carat_normal" />
</selector>

Semiporcelain

Answer 5

In Layout .xml file

<Button
 android:id="@+id/button1"
 android:background="@drawable/btn_selector"
 android:layout_width="100dp"
 android:layout_height="50dp"
 android:text="press" />

btn_selector.xml

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

 <item android:drawable="@drawable/btn_bg_selected" android:state_selected="true"></item>
<item android:drawable="@drawable/btn_bg_pressed" android:state_pressed="true"></item>
<item android:drawable="@drawable/btn_bg_normal"></item>

Carmagnole