RippleView

Приветствую!  В ближайшие две-три недели постараюсь рассмотреть если не все, то хотя бы большинство элементов из Material Design.

В этой статье я рассмотрю небольшой, но очень важный View- компонент — RippleView. Идея RippleView заключается в имитации движения воды при соприкосновении с ней.

Так как этого View-компонента в Support Library нет, мы воспользуемся библиотекой с GitHub. Библиотека очень легкая и представляет из себя всего один java-файл. Подключить библиотеку можно одним из способов описаных здесь.

Создание RippleView возможно как с помощью XML, так и программно, здесь я опишу оба способа.

<com.indris.material.RippleView
            android:id="@+id/btn"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:text="@string/click_me"
            android:textAppearance="?android:attr/textAppearanceMedium"
            android:background="@drawable/card_bk"
            android:gravity="center"
            android:padding="35dp"
            ripple:alphaFactor="0.7"
            ripple:rippleColor="#58FAAC"
            ripple:hover="true"
     />

Рассмотрим атрибуты с префиксом ripple:

alphaFactor — прозрачность фигуры
rippleColor — цвет фигуры
hover — следовать за пальцем

Отлично, все работает. Теперь создадим RippleView из кода и присвоим ему те же самые атрибуты:

package ru.javahelp.rippleview;

import android.app.Activity;
import android.graphics.Color;
import android.os.Bundle;

import com.indris.material.RippleView;


public class MainActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_ripple_view);

    	RippleView rippleView = new RippleView(this);
    	rippleView.setRippleColor(Color.parseColor("#58FAAC"), 0.7f);
    	rippleView.setHover(true);
      
    }

}

На этом все. До свидания!

Библиотека на GitHub: RippleView.
Исходники примера: RippleView.

Комментарии:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *