Округлая кнопка без потери стиля - PullRequest
Новая
       48

Округлая кнопка без потери стиля

0 голосов
/ 19 мая 2018

я пытаюсь сделать простую закругленную кнопку, например это начиная с это

Проблема в том, что я не хочу потерять стиль (рябь и цвет меняются при нажатии на него и тень).это могло бы произойти с использованием нарисованного состояния в качестве фона.

Как мне этого добиться?

1 Ответ

0 голосов
/ 19 мая 2018 
<android.support.v7.widget.AppCompatButton
            style="@style/buttonApp"
            android:text="Normal" />

в res>values>styles.xml положить это.и измените отступы, цвета, если вам нужно. 

<style name="buttonApp" parent="@style/Widget.AppCompat.Button.Borderless">
    <item name="android:layout_height">@dimen/appButtonHeight</item>
    <item name="android:layout_width">wrap_content</item>
    <item name="android:gravity">center</item>
    <item name="android:paddingLeft">20dp</item>
    <item name="android:paddingRight">20dp</item>
    <item name="android:paddingTop">10dp</item>
    <item name="android:paddingBottom">10dp</item>
    <item name="android:textColor">@color/colorWhite</item>
    <item name="android:textStyle">bold</item>
    <item name="android:textSize">16sp</item>
    <item name="android:background">@drawable/bg_button_orange</item>
</style>

Вы получите требуемый эффект нажатия на 1 чертеж для версии после 21, как показано ниже, но версия до 21 не поддерживает волновой эффект, поэтому у вас естьЧтобы сделать фон для рисования для эффекта печати и без него, я включил окончательное решение здесь

bg_button_orange.xml в res>drawables-v21>

(это после версии 21 для Android) 

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="?android:attr/colorControlHighlight">
    <item android:id="@android:id/mask">
        <shape android:shape="rectangle">
            <solid android:color="@color/colorGreenAlpha" />
            <corners android:radius="15dp" />
        </shape>
    </item>
    <item android:drawable="@drawable/bg_button_not_selected" />
</ripple>

bg_button_orange.xml в res>drawables>

(это для Android до версии 21) 

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

bg_button_not_selected.xml in res>drawables

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="@color/colorGreenLight" />
    <corners android:radius="@dimen/appButtonRadius" />
</shape>

bg_button_not_selected.xml in res>drawables

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="@color/colorGreen" />
    <corners android:radius="@dimen/appButtonRadius" />
</shape>

вставлено res>values>dimens.xml

<dimen name="appButtonHeight">60dp</dimen>
<dimen name="appButtonRadius">30dp</dimen>

вставлено res>values>colors.xml

<color name="colorGreen">#009688</color>
<color name="colorGreenAlpha">#b0009688</color>
<color name="colorGreenLight">#27d4c4</color>

Высота кнопки должна быть вдвое больше, чем радиус кнопки, чтобы получить точные закругленные углы.

Вы получите изображение, похожее на белу, с эффектом ряби в версии после 21и нажмите эффект до 21 версии.

result

...