Skip to content
Douglas Soares Pereira edited this page Aug 15, 2017 · 14 revisions

Double Tap View is an Android library to create an animation when double tap a custom view.

A customizable view with a cool animation and a simple listener.

I'm open to suggestions and bug reports to try to improve it.

Add to your project

You just need to add the Maven Jitpack repository on Project Gradle:

 allprojects {
    repositories {
      maven { url 'https://jitpack.io' }
    }
 }

and the library dependence on Module Gradle:

 dependencies {
    compile 'com.github.douglasspgyn:DoubleTapView:0.6.0'
 }

Sync your project and it's done!

Elements

These are some Double Tap View elements and names.

Double Tap View

Layout (XML)

This is an example of a Double Tap View with all custom attributes:

<douglasspgyn.com.github.doubletapview.DoubleTapView
        android:id="@+id/doubleTapView"
        android:layout_width="200dp"
        android:layout_height="200dp"
        app:animatedViewAnimation="@anim/bounce_in_out"
        app:animatedViewBackground="@drawable/round_background_view"
        app:animatedViewBackgroundColor="@color/colorPrimary"
        app:animatedViewDrawable="@drawable/ic_android"
        app:animatedViewDrawableColor="@color/colorAccent"
        app:animatedViewMeasure="100dp"
        app:backgroundScaleType="centerInside" />

Animation

You can choose what animation will be displayed directly from xml.

app:animatedViewAnimation="@anim/bounce_in_out"

Animated View Background

That's a drawable used as background of the animated view.

app:animatedViewBackground="@drawable/round_background_view"

You can use any drawable but in the library is included round_background_view (default), square_background_view and heart_background_view.

Animated View Background Color

The color of the Animated View Background.

app:animatedViewBackgroundColor="@color/colorPrimary"

Animated View Drawable

The drawable displayed on the top of all.

app:animatedViewDrawable="@drawable/ic_android"

Animated View Drawable Color

The color of the drawable displayed on the top of all.

app:animatedViewDrawableColor="@color/colorAccent"

Animated View Measure

The measure of the height and width.

app:animatedViewMeasure="100dp"

Background Scale Type

Used to define what is the scale type of the Background Image View.

app:backgroundScaleType="centerInside"

Code

A simple example with some Double Tap View custom attributes programmatically:

doubleTapView.setAnimatedViewAnimation(R.anim.bounce_in_out);
doubleTapView.setAnimatedViewBackground(R.drawable.round_background_view);
doubleTapView.setAnimatedViewBackgroundColor(R.color.colorPrimary);
doubleTapView.setAnimatedViewDrawable(R.drawable.ic_android);
doubleTapView.setAnimatedViewDrawableColor(R.color.colorAccent);
doubleTapView.setAnimatedViewMeasure(100);

Animation

You can choose what animation will be displayed programatically.

doubleTapView.setAnimatedViewAnimation(R.anim.bounce_in_out);

Animated View Background

That's a drawable used as background of the animated view.

doubleTapView.setAnimatedViewBackground(R.drawable.round_background_view);
doubleTapView.setAnimatedViewDrawable(getResources().getDrawable(R.drawable.round_background_view));
doubleTapView.setAnimatedViewDrawable(ContextCompat.getDrawable(this, R.drawable.round_background_view));

You can use any drawable but in the library is included round_background_view (default), square_background_view and heart_background_view.

Animated View Background Color

The color of the Animated View Background.

doubleTapView.setAnimatedViewBackgroundColor("#3F51B5");
doubleTapView.setAnimatedViewBackgroundColor(R.color.colorPrimary);

Animated View Drawable

The drawable displayed on the top of all.

doubleTapView.setAnimatedViewDrawable(R.drawable.ic_android);
doubleTapView.setAnimatedViewDrawable(getResources().getDrawable(R.drawable.ic_android));
doubleTapView.setAnimatedViewDrawable(ContextCompat.getDrawable(this, R.drawable.ic_android));

Animated View DrawableColor

The color of the Animated View Drawable.

doubleTapView.setAnimatedViewBackgroundColor("#FF4081");
doubleTapView.setAnimatedViewBackgroundColor(R.color.colorAccent);

Animated View Measure

The measure of the height and width.

doubleTapView.setAnimatedViewMeasure(100);

Enable/Disable Double Tap

You can enable, disable and check the state.

doubleTapView.enableDoubleTap();
doubleTapView.disableDoubleTap();
doubleTapView.isDoubleTapEnabled();

Listener

You can attach a listener, remove or get it.

doubleTapView.setOnDoubleTapEventListener(new DoubleTapView.onDoubleTapEventListener() {
            @Override
            public void onDoubleTap() {
                Toast.makeText(context, "Double Tap Callback", Toast.LENGTH_SHORT).show();
            }
        });
        
doubleTapView.removeOnDoubleTapEventListener();
doubleTapView.getDoubleTapEventListener();

Background Image View

That's the image on the back of all.

doubleTapView.getBackgroundImageView()

It's fully compatible with other libraries like Picasso.

Picasso.with(this).load("http://i.imgur.com/DvpvklR.png").into(doubleTapView.getBackgroundImageView());
Double Tap View is based on a Relative Layout so you need to use doubleTapView.getBackgroundImageView() to set the background image and not directly.