3d кнопка с эффектом щелчка - PullRequest
Новая
       93

3d кнопка с эффектом щелчка

0 голосов
/ 14 февраля 2019

Я пытаюсь создать плоскую кнопку с трехмерным эффектом, который нажимается при нажатии на нее. flatbutton

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

TextView / кнопка, которую я хочу стилизовать: 

<TextView
    android:id="@+id/chip_view"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:paddingLeft="15dp"
    android:paddingRight="15dp"
    android:paddingTop="10dp"
    android:paddingBottom="10dp"
    android:ellipsize="end"
    android:singleLine="true"
    android:scrollHorizontally="false"
    android:textColor="@color/speedDialText"
    android:background="@drawable/chip_view_selector"
/>

chip_view_selector.xml: 

    <?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
        <item android:state_pressed="false">
            <layer-list>
                <item android:drawable="@drawable/chip_view_shadow" android:top="4dp"/>
                <item android:drawable="@drawable/chip_view_btn_face" android:bottom="4dp"/>
            </layer-list>
        </item>

        <item android:state_pressed="true">
            <layer-list>
                <item android:drawable="@drawable/chip_view_shadow" android:top="4dp"/>
                <item android:drawable="@drawable/chip_view_btn_face" android:top="4dp" android:bottom="1dp" />
            </layer-list>
        </item>
    </selector>

chip_view_btn_face.xml 

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
    <!-- Button foreground -->
    <shape xmlns:android="http://schemas.android.com/apk/res/android">
        <solid android:color="@color/speedDialButtonBackground" />
        <padding
            android:left="1dp"
            android:right="1dp"
            android:bottom="1dp"
            android:top="1dp" />
        <corners android:radius="6dp" />
    </shape>
    </item>
</selector>

chip_view_shadow.xml (на самом деле это не тень, а нижний слой, который придает ему трехмерный вид): 

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
    <!-- 3d effect part of button (not the button face) -->
        <shape>
            <solid android:color="#D3D3D3" />
            <corners android:radius="6dp" />
        </shape>
</item>
</selector>
...