Как добиться Android Button Animation с размытым текстом и тенью

Question

Я хочу добиться этой анимации кнопок в Android.Пример ниже от iOS.Я хочу, чтобы тень исчезала, когда пользователь нажимал кнопку, и появлялась снова, когда пользователь отпускает кнопку.

Любая помощь будет высоко оценена.

Answer 1

Вы можете использовать эту библиотеку: pushdown-anim-click

Как установить:

compile( 'com.github.thekhaeng:pushdown-anim-click:1.1.1' ){
    exclude group: 'com.android.support'
}

Как использовать:

Button button = findViewById( R.id.button );

PushDownAnim.setPushDownAnimTo( button, ... )
    .setOnClickListener( new View.OnClickListener(){
        @Override
        public void onClick( View view ){
            Toast.makeText( MainActivity.this, "PUSH DOWN !!", Toast.LENGTH_SHORT ).show();
        }

});

Для Shadow:

Как я видел библиотечные файлы, есть только три java-файла.Он просто использовал класс, чтобы оживить кнопку.Вы можете придать тень своей кнопке таким образом .Даже при том, что я создал выпуск Вы можете следить за этим.

Для получения дополнительной функциональности вы можете посетить ссылку github.

Спасибо.

Answer 2

Вам нужно добавить цвет, как показано ниже.Например, имя цвета button_text_color.xml.Вот XML-файл, который нужно поместить в папку color.Если папка color не существует, создайте ее в каталоге res.

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="#50FFFFFF" android:state_pressed="true" />
    <item android:color="#FFFFFF" android:state_pressed="false" />
</selector>

Убедитесь, что я добавил прозрачность 50% к белому цвету в нажатом состоянии.Теперь просто добавьте этот атрибут в Button, где он объявлен.

Теперь вам нужен фон для рисования, который будет помещен в вашу папку drawable.Например, давайте возьмем имя отрисовки button_state_list_animator.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>
                <shape>
                    <solid android:color="@android:color/darker_gray" />
                    <corners android:radius="19dp" />
                </shape>
            </item>
            <item android:bottom="5px">
                <shape>
                    <padding android:bottom="5dp" />
                    <gradient android:angle="270" android:endColor="#163969" android:startColor="#1c4985" />
                    <corners android:radius="19dp" />
                    <padding android:bottom="10dp" android:left="10dp" android:right="5dp" android:top="10dp" />
                </shape>
            </item>
        </layer-list>
    </item>

    <item android:state_pressed="true">
        <layer-list>
            <item>
                <shape>
                    <solid android:color="#102746" />
                    <corners android:radius="19dp" />

                </shape>
            </item>
            <item android:bottom="5px">
                <shape>
                    <padding android:bottom="5dp" />
                    <gradient android:angle="270" android:endColor="#163969" android:startColor="#1c4985" />
                    <corners android:radius="19dp" />
                    <padding android:bottom="10dp" android:left="10dp" android:right="5dp" android:top="10dp" />
                </shape>
            </item>
        </layer-list>
    </item>
</selector>

Теперь ваша конструкция кнопки проста.

<Button
    android:id="@+id/button"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_centerInParent="true"
    android:layout_margin="32dp"
    android:background="@drawable/button_state_list_animator"
    android:text="Save Changes"
    android:textColor="@color/button_text_color" />

Вот скриншот из моего кода.

Вы можете использовать анимацию нажатия, используя библиотеку также, как уже упоминалось в ответе здесь.

Надеюсь, это поможет!

Answer 3

Используйте эффект анимации (как код ниже) на пользовательской кнопке при нажатии на кнопку.

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <scale xmlns:android="http://schemas.android.com/apk/res/android"
        android:fromXScale="1"
        android:toXScale="0.8"
        android:fromYScale="1"
        android:toYScale="0.8"
        android:duration="500"
        android:pivotX="50%"
        android:pivotY="50%" >
    </scale>
    <alpha
        android:fromAlpha="1"
        android:toAlpha="0.8"
        android:duration="500">
    </alpha>
</set>

установите анимацию при нажатии кнопки с помощью.

 btn_custom.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Animation animation = AnimationUtils.loadAnimation(getApplicationContext(), R
                        .anim.animation_btn);
                btn_custom.startAnimation(animation);
            }
        });

попробуйте изменитьальфа-значения как ваши потребности и увидеть эффект.

Answer 4

Добавить макет с фоном в виде тени под кнопкой.В button.setOnTouchListener скрыть раскладку при нажатии кнопки и сделать ее видимой при отпускании.Однако это будет работать, только если тень будет ниже.