2016-10-12 3 views
22

Я создал кнопку, и я хочу добавить эффект пульсации на эту кнопку!Добавить эффект пульсации на мою кнопку с цветом фона кнопки?

Я создал кнопку Б.Г. XML файл: (bg_btn.xml)

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"> 
<gradient android:startColor="#FFFFFF" android:endColor="#00FF00" android:angle="270" /> 
<corners android:radius="3dp" /> 
<stroke android:width="5px" android:color="#000000" /> 
</shape> 

И это мой Волновой эффект файла: (ripple_bg.xml)

<ripple xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:tools="http://schemas.android.com/tools" 
    android:color="#f816a463" 
    tools:targetApi="lollipop"> 
    <item android:id="@android:id/mask"> 
     <shape android:shape="rectangle"> 
      <solid android:color="#f816a463" /> 
     </shape> 
    </item> 
</ripple> 

И Это моя кнопка, которая Я хочу, чтобы добавить эффект ряби:

<Button 
android:layout_width="wrap_content" 
android:layout_height="wrap_content" 
android:text="New Button" 
android:id="@+id/button" 
android:layout_centerHorizontal="true" 
android:layout_marginTop="173dp" 
android:textColor="#fff" 
android:background="@drawable/ripple_bg" 
android:clickable="true" /> 

но после добавления пульсации фон кнопки эффекта является прозрачным, и но дисплей тонный только при нажатии, так:

Перед Нажмите

По щелчку

Но мне нужно как цвет фона кнопки и мультипликационный эффект, я нашел некоторые из этого кода в разных блогах Stack Overflow, но все же он не работает!

ответ

33

Добавить Ripple Effect/Анимация на Android Button

Просто замените фона кнопки атрибут с андроида: "атр/selectableItemBackground" фон = и ваш код выглядит следующим образом.

 <Button 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:background="?attr/selectableItemBackground" 
     android:text="New Button" /> 

Другой способ добавить Ripple Effect/Анимация на Android Button

Используя этот метод, вы можете настроить мультипликационный эффект цвета. Во-первых, вы должны создать xml-файл в своем каталоге ресурсов с возможностью рисования. Создайте файл ripple_effect.xml и добавьте следующий код. Реза/рисуют/ripple_effect.xml

<?xml version="1.0" encoding="utf-8"?> 
<ripple xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:tools="http://schemas.android.com/tools" 
    android:color="#f816a463" 
    tools:targetApi="lollipop"> 
    <item android:id="@android:id/mask"> 
     <shape android:shape="rectangle"> 
      <solid android:color="#f816a463" /> 
     </shape> 
    </item> 
</ripple> 

и установить фон кнопку выше вытяжку файла ресурсов

<Button 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:background="@drawable/ripple_effect" 
    android:padding="16dp" 
    android:text="New Button" /> 
+1

Для меня, эффект ряби не появилось. это был просто переключатель цвета для кнопки:/Моя версия для Android - 5.1.1, поэтому она должна работать. Не могли бы вы помочь? Я следовал за твоими шагами – UrviG

+0

android: цвет должен отличаться от мачты: цвет, или вы хотите увидеть эффект пульсации – SpyZip

+0

Не работает ниже lollipop –

3

При использовании андроида: фон, вы заменяете большую часть стиля и смотреть и ощущение кнопки с пустым цветом.

Обновление: Начиная с версии App.0.0.0 версии 2.0.0.0, существует новый цветной стиль Widget.AppCompat.Button.A, в котором используется цветная кнопка для вашей темы colorbuttonNormal для отключенного цвета и colorAccent для включенного цвета.

Это позволяет применить его к кнопке непосредственно через

<Button 
... 
style="@style/Widget.AppCompat.Button.Colored" /> 

Вы можете использовать вытяжку в каталоге V21 для фона, таких как:

<?xml version="1.0" encoding="utf-8"?> 
<ripple xmlns:android="http://schemas.android.com/apk/res/android" 
    android:color="?attr/colorControlHighlight"> 
<item android:drawable="?attr/colorPrimary"/> 
</ripple> 

Это обеспечит цвет фона ? attr/colorPrimary и имеет стандартную дроппинг-анимацию, используя значение по умолчанию attr/colorControlHighlight (которое вы также можете задать в своей теме, если хотите).

Примечание: вы должны создать пользовательский селектор менее чем v21:

<?xml version="1.0" encoding="utf-8"?> 
<selector xmlns:android="http://schemas.android.com/apk/res/android"> 
<item android:drawable="@color/primaryPressed"   android:state_pressed="true"/> 
<item android:drawable="@color/primaryFocused" android:state_focused="true"/> 
<item android:drawable="@color/primary"/> 
</selector> 
+0

им не используя minSDK лвло 21 –

+0

там нет Drawable папки V21, только одна папки, папка самой V21 папки –

+1

чем @Rak вам нужно идти третий участник апи HTTPS «атр/colorPrimary?»://github.com/traex/RippleEffect –

19

В дополнение к решению Jigar Patel «s, добавьте это к ripple.xml избежать прозрачной фон кнопок.

<item 
    android:id="@android:id/background" 
    android:drawable="@color/your-color" /> 

Полный XML:

<ripple xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:tools="http://schemas.android.com/tools" 
    android:color="@color/your-color" 
    tools:targetApi="lollipop"> 
    <item android:id="@android:id/mask"> 
     <shape android:shape="rectangle"> 
      <solid android:color="@color/your-color" /> 
     </shape> 
    </item> 
    <item 
     android:id="@android:id/background" 
     android:drawable="@color/your-color" /> 
</ripple> 

Используйте этот ripple.xml в качестве фона в вашей кнопки:

android:background="@drawable/ripple" 
+1

Нам не нужно было использовать ' [...] '. Если вы не хотите овальной маски. Спасибо за Ваш ответ! –

+0

хорошо, я рад, что это вам помогло! –

+0

Что делает этот элемент в любом случае, я создал 2 похожих элемента с этим атрибутом и без него, и они выглядят точно так же –

35

добавить "?attr/selectableItemBackground" атрибуту ваш взгляд в foreground если он уже имеет фон вместе с android:clickable="true"

+2

Это должно быть отмечено как ответ! –

+0

не всегда работает, но вы можете добавить фон к эффекту пульсации, как указано в комментариях принятого ответа. – Tyler

2

Просто используйте:

android:backgroundTint="#f816a463" 

Вместо:

android:background="#f816a463" 

Не забудьте изменить ваш Button к android.support.v7.widget.AppCompatButton

+0

Плохо то, что если вам нужна кнопка для заполнения 100% горизонтального экрана, вы не будете. –

11

Когда кнопка имеет фон от Drawable, мы можем добавьте эффект пульсации в параметр переднего плана. Проверьте ниже код его работы для моей кнопки с другим фоном

<Button 
    android:layout_width="wrap_content" 
    android:layout_height="40dp" 
    android:gravity="center" 
    android:layout_centerHorizontal="true"                
    android:background="@drawable/shape_login_button" 
    android:foreground="?attr/selectableItemBackgroundBorderless" 
    android:clickable="true" 
    android:text="@string/action_button_login" 
    /> 

Добавить ниже параметра для пульсирующего эффекта

android:foreground="?attr/selectableItemBackgroundBorderless" 
    android:clickable="true" 
4

Вот еще рисуем XML для тех, кто хочет добавить все вместе градиентный фон, радиус угла и мультипликационный эффект:

<?xml version="1.0" encoding="utf-8"?> 
<ripple xmlns:android="http://schemas.android.com/apk/res/android" 
    android:color="@color/colorPrimaryDark"> 
    <item android:id="@android:id/mask"> 
     <shape android:shape="rectangle"> 
      <solid android:color="@color/colorPrimaryDark" /> 
      <corners android:radius="@dimen/button_radius_large" /> 
     </shape> 
    </item> 

    <item android:id="@android:id/background"> 
     <shape android:shape="rectangle"> 
      <gradient 
       android:angle="90" 
       android:endColor="@color/colorPrimaryLight" 
       android:startColor="@color/colorPrimary" 
       android:type="linear" /> 
      <corners android:radius="@dimen/button_radius_large" /> 
     </shape> 
    </item> 
</ripple> 

Добавить это на фоне вашей кнопки.

<Button 
    ... 
    android:background="@drawable/button_background" /> 
+0

Его работа для меня ... –

3

В дополнение к Садиш R

Добавить Ripple Effect/Анимация на Android кнопки с формы кнопки прямоугольник с углом

Создание XML-файла Рез/рисуем/your_file_name.xml

<?xml version="1.0" encoding="utf-8"?> 
<ripple xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:tools="http://schemas.android.com/tools" 
    android:color="@color/colorWhite" 
    tools:targetApi="lollipop"> 
    <item android:id="@android:id/mask"> 
     <shape android:shape="rectangle"> 
      <solid android:color="@color/colorPrimaryDark" /> 
      <corners android:radius="50dp" /> 
     </shape> 
    </item> 

    <item android:id="@android:id/background"> 
     <shape android:shape="rectangle"> 
      <gradient 
       android:angle="90" 
       android:endColor="@color/colorAccent" 
       android:startColor="@color/colorPrimary" 
       android:type="linear" /> 
      <corners android:radius="50dp" /> 
     </shape> 
    </item> 
</ripple> 
+0

выглядит красиво ..... –

2

попробовать это

<Button 
      android:id="@+id/btn_location" 
      android:layout_width="121dp" 
      android:layout_height="38dp" 
      android:layout_gravity="center" 
      android:layout_marginBottom="24dp" 
      android:layout_marginTop="24dp" 
      android:foreground="?attr/selectableItemBackgroundBorderless" 
      android:clickable="true" 
      android:background="@drawable/btn_corner" 
      android:gravity="center_vertical|center_horizontal" 
      android:paddingLeft="13dp" 
      android:paddingRight="13dp" 
      android:text="Save" 
      android:textColor="@color/color_white" />