Кнопка с селектором для цвета фона - при нажатии цвет фона выходит за пределы кнопки

Question

Для начала... кнопка добавляется динамически через код и, следовательно, не может применять стили в xml.

У меня есть несколько кнопок в моей деятельности, и я использую селектор, чтобы изменить цвет фона. К кнопке также прикреплена "форма" для границы.

image_border.xml

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

    <solid android:color="@color/dark_grey" />

    <stroke
        android:width="4dp"
        android:color="@color/light_grey" />

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

</shape>

button_background_blue.xml

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

    <item android:drawable="@color/blue" android:state_pressed="true"/>
    <item android:drawable="@color/dark_grey" android:state_focused="true"/>
    <item android:drawable="@drawable/image_border"/>

</selector>

Теперь, когда я нажимаю на кнопку, цвет фона меняется очень хорошо. Но цвет фона выходит за рамки размера кнопки. Я не уверен, где это происходит.

Пожалуйста, обратитесь к изображениям ниже...

Перед нажатием кнопки:

После нажатия на кнопку:

Я думаю, что цвет распространяется на отступы или что-то еще, но я действительно не совсем уверен, почему это происходит.

Answer 1

Это должен быть ваш селектор:

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

И просто добавьте эти рисунки:

image_border_blue

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
    <solid android:color="@color/blue" />
    <stroke
        android:width="4dp"
        android:color="@color/light_grey" />
    <padding
        android:bottom="4dp"
        android:left="4dp"
        android:right="4dp"
        android:top="4dp" />
</shape>

image_border_dark_grey

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
    <solid android:color="@color/dark_grey" />
    <stroke
        android:width="4dp"
        android:color="@color/light_grey" />
    <padding
        android:bottom="4dp"
        android:left="4dp"
        android:right="4dp"
        android:top="4dp" />
</shape>

Answer 2

Создайте другую фигуру, используя те цвета, которые вы использовали в селекторе... предположим, для Blue цвет... создать форму имени btn_pressed.xml...

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

    <solid android:color="@color/blue" />

    <stroke
        android:width="4dp"
        android:color="@color/blue" />

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

</shape>

Затем поместите эту форму вместо @color/blue в selector следующее...

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

    <item android:drawable="@drawable/btn_pressed" android:state_pressed="true"/>
    <item android:drawable="@color/dark_grey" android:state_focused="true"/>
    <item android:drawable="@drawable/image_border"/>

</selector>

Следуйте тому же процессу для @color/dark_grey,