:sparkles: An easy way to implement an elastic touch effect for Android.

Overview

ElasticViews

License API Build Status Android Weekly Javadoc

An easy way to implement an elastic touch effect for Android.

Including in your project

Maven Central Kitpack

Gradle

Add below codes to your root build.gradle file (not your module build.gradle file).

allprojects {
    repositories {
        mavenCentral()
    }
}

And add a dependency code to your module's build.gradle file. dependencies { implementation "com.github.skydoves:elasticviews:2.0.9" }


## Usage
`ElasticViews` lets we use like using normal views and gives all of the Views or GroupViews touch effect very simply.

#### Add XML Namespace
First add below XML Namespace inside your XML layout file.

```gradle
xmlns:app="http://schemas.android.com/apk/res-auto"

OnClick Method

All of ElasticViews should be set OnClickListener or OnClick method. If not, nothing happens.

ElasticButton elasticButton = (ElasticButton)findViewById(R.id.elasticbutton);
elasticButton.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        // do something
    }
});

ElasticButton

<com.skydoves.elasticviews.ElasticButton
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:text="Elastic Button"
   android:textColor="@android:color/white"
   android:textSize="17sp"
   app:button_cornerRadius="4dp"
   app:button_duration="250"
   app:button_scale="0.87" />

ElasticCheckButton

<com.skydoves.elasticviews.ElasticCheckButton
   android:layout_width="match_parent"
   android:layout_height="45dp"
   android:background="#30354b"
   android:text="Text"
   android:textColor="@android:color/white"
   android:textStyle="bold"
   app:checkButton_cornerRadius="4dp"
   app:checkButton_alpha="0.7"
   app:checkButton_duration="400"
   app:checkButton_scale="0.9" />

ElasticImageView

<com.skydoves.elasticviews.ElasticImageView
   android:layout_width="23dp"
   android:layout_height="23dp"
   android:scaleType="fitXY"
   android:src="@drawable/ic_question"
   android:tint="#3d95c9"
   app:imageView_scale="0.7"
   app:imageView_duration="300" />

ElasticFloatingButton

<com.skydoves.elasticviews.ElasticFloatingActionButton
   android:layout_width="64dp"
   android:layout_height="64dp"
   android:src="@drawable/ic_add"
   android:tint="#ffffff"
   app:fabSize="normal"
   app:fabutton_duration="400"
   app:fabutton_scale="0.85" />

ElasticCardView

<com.skydoves.elasticviews.ElasticCardView
  android:layout_width="match_parent"
  android:layout_height="120dp"
  app:cardCornerRadius="8dp"
  app:cardElevation="12dp"
  app:cardBackgroundColor="@color/background"
  app:cardView_duration="250"
  app:cardView_scale="0.8" >

  ...

</com.skydoves.elasticviews.ElasticCardView>

ElasticLayout

ElasticLayout gives elastic animation to all child views.

<com.skydoves.elasticviews.ElasticLayout
  android:layout_width="match_parent"
  android:layout_height="80dp"
  app:layout_cornerRadius="4dp"
  app:layout_duration="500"
  app:layout_scale="0.85">

  <TextView
      android:id="@+id/textView0"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:text="This is"
      android:textColor="#ffffff"
      android:textSize="18sp" />

  <TextView
      android:layout_below="@+id/textView1"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:layout_alignParentBottom="true"
      android:text="ElasticLayout"
      android:textColor="#ffffff"
      android:textSize="18sp"
      android:gravity="end" />
</com.skydoves.elasticviews.ElasticLayout>

ElasticAnimation

ElasticAnimation implements elastic animations for android views and view groups.

new ElasticAnimation(clickedView).setScaleX(0.9f).setScaleY(0.9f).setDuration(400)
.setOnFinishListener(onFinishListener).doAction();

ViewPropertyAnimatorListener

we can set ViewPropertyAnimatorListener using setListener method and detect animation's status.

.setListener(new ViewPropertyAnimatorListener() {
   @Override
   public void onAnimationStart(View view) {
       // do something
   }

   Override
   public void onAnimationEnd(View view) {
       finishListener.onFinished();
   }

   Override
   public void onAnimationCancel(View view) {
       // do something
   }
});

Kotlin Extension

ElasticAnimation supports kotlin extension elasticAnimation.

val anim = textView.elasticAnimation(0.8f, 0.8f, 400, object: ElasticFinishListener {
    override fun onFinished() {
        // do anything
    }
})
anim.doAction()

Kotlin dsl

elasticAnimation(this) {
  setDuration(duration)
  setScaleX(scale)
  setScaleY(scale)
  setOnFinishListener(object : ElasticFinishListener {
       override fun onFinished() {
       onClick()
    }
  })
}.doAction()

Example : Normal Button

we can implement animation on all of the views like below.

@OnClick(R.id.button)
public void addNewAlarm(View v){
    // implements animation uising ElasticAnimation
    new ElasticAnimation(v).setScaleX(0.85f).setScaleY(0.85f).setDuration(500)
    .setOnFinishListener(new ElasticFinishListener() {
            @Override
            public void onFinished() {
                // Do something after duration time
            }
        }).doAction();
    }
}

Example : ListView Item

So also we can implement animation on listView's items like below.

private class ListViewItemClickListener implements AdapterView.OnItemClickListener {
    @Override
    public void onItemClick(AdapterView<?> adapterView, View clickedView, final int pos, long id) {
      new ElasticAnimation(clickedView).setScaleX(0.9f).setScaleY(0.9f).setDuration(400)
        .setOnFinishListener(new ElasticFinishListener() {
              @Override
              public void onFinished() {
              //Do something after duration time
              Toast.makeText(getBaseContext(), "ListViewItem" + pos, Toast.LENGTH_SHORT).show();
              }
          }).doAction();
        }
    };

Find this library useful? ❤️

Support it by joining stargazers for this repository.

Sponsor

If you feel like to sponsor me a coffee for my efforts, I would greatly appreciate it.

Buy Me A Coffee

License

The MIT License (MIT)

Copyright (c) 2017 skydoves

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
You might also like...
EtsyBlur is an Android library that allows developers to easily add a glass-like blur effect implemented in the  Etsy app.
EtsyBlur is an Android library that allows developers to easily add a glass-like blur effect implemented in the Etsy app.

EtsyBlur EtsyBlur is an Android library that allows developers to easily add a glass-like blur effect implemented in the past Etsy app. Try out the sa

[] Easily have blurred and transparent background effect on your Android views.
[] Easily have blurred and transparent background effect on your Android views.

##[DEPRECATED] BlurBehind Easily have blurred and transparent background effect on your Android views. Before API level 14 there was a Window flag cal

Android StackBlur is a library that can perform a blurry effect on a Bitmap based on a gradient or radius, and return the result. The library is based on the code of Mario Klingemann.
Android StackBlur is a library that can perform a blurry effect on a Bitmap based on a gradient or radius, and return the result. The library is based on the code of Mario Klingemann.

Android StackBlur Android StackBlur is a library that can perform a blurry effect on a Bitmap based on a gradient or radius, and return the result. Th

Memory efficient shimmering effect for Android applications by Supercharge.

DEPRECATED - ShimmerLayout Attention: This tool is now deprecated. Please switch to Shimmer for Android or any other shimmer effect solution. ShimmerL

A pager for Android with parallax effect

ParallaxPagerTransformer A pager transformer for Android with parallax effect Installation in your build.gradle file dependencies { // ... com

"Gooey-Effect" for android-compose

Gooey effect for android-compose "Gooey" is a library made to use "gooey-effect" that exists as a CSS trick in android-compose. Download repositories

ViewAnimator view with a lollipop style reveal effect
ViewAnimator view with a lollipop style reveal effect

ViewRevealAnimator Widget ViewAnimator view with a lollipop style reveal effect. Regular animation can be set (just like the default ViewAnimator) for

Library project to display DialogFragment with a blur effect.
Library project to display DialogFragment with a blur effect.

BlurDialogFragment This project allows to display DialogFragment with a burring effect behind. The blurring part is achieved through FastBlur algorith

explosive dust effect for views
explosive dust effect for views

ExplosionField explosive dust effect for views Getting started In your build.gradle: dependencies { compile 'tyrantgit:explosionfield:1.0.1' } Ex

Comments
  • ElasticFloatingActionButton supporting LongClickListener

    ElasticFloatingActionButton supporting LongClickListener

    At first thanks for this awesome library :)
    I m using the ElasticFloatingActionButton and it works fine. But i want to apply a LongClickListener to show the user a toast with information what the button is doing.

    I m able to apply the LongClickListener but whenever the button is long pressed the OnClickListener also gets called. I could not find an easy work around for this problem. Can we have another listener and wait if it consumes the event?

    opened by Hatzen 2
  • Refactor views constructor and inititialization

    Refactor views constructor and inititialization

    Guidelines

    I changed the constructors and initialization of ElasticViews. Instead of writing multiple constructors, I use the @JvmOverloads annotation, default values and the init block to check what functions to call.

    Types of changes

    What types of changes does your code introduce?

    • [x ] Bugfix (non-breaking change which fixes an issue)
    • [ ] New feature (non-breaking change which adds functionality)
    • [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)
    opened by eagskunst 0
  • Fix a bug that can not set duration.

    Fix a bug that can not set duration.

    Guidelines

    Describe the big picture of your changes here to communicate to the maintainers why we should accept this pull request. If it fixes a bug or resolves a feature request, be sure to link to that issue.

    Types of changes

    What types of changes does your code introduce?

    • [x] Bugfix (non-breaking change which fixes an issue)
    • [ ] New feature (non-breaking change which adds functionality)
    • [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)

    Preparing a pull request for review

    Ensure your change is properly formatted by running:

    $ ./gradlew spotlessApply
    

    Please correct any failures before requesting a review.


    There is a bug that can not set a duration from xml attribute. At 'setDuration()', it use ElasticAnimation's default duration instead of each view's duration).😄

    opened by 5seunghoon 0
Releases(2.1.0)
Owner
Jaewoong Eum
Android software engineer. Digital Nomad. Open Source Contributor. ❤️ Love coffee, music, magic tricks and writing poems. Coffee Driven Development.
Jaewoong Eum
Library provides an easy way to a add shimmer effect in Android Compose project.

Add a shimmer effect to the layout in Android Compose

Valery 66 Dec 14, 2022
Location tracking & geofencing the easy way. Supports background, killed app, rebooted device different update intervals.

Geofencer Convience library to receive user location updates and geofence events with minimal effort. Features: supports Android-Q receive updates on

null 85 Dec 15, 2022
Simple tool which help you to implement activity and fragment transition for pre-Lollipop devices.

PreLollipopTransition Simple tool which help you to implement activity and fragment transition for pre-Lollipop devices. Download In your app build.gr

Takahiro Menju 1.3k Nov 28, 2022
Cute library to implement SearchView in a Material Design Approach

MaterialSearchView Cute library to implement SearchView in a Material Design Approach. Works from Android API 14 (ICS) and above. #Native version Mayb

Miguel Catalan Bañuls 3.8k Jan 3, 2023
🪐 Jetpack Compose animation library that allows you to implement animations such as shared element transition.

Orbitary ?? Jetpack Compose animation library that allows you to implement animations such as shared element transition. Download Gradle Add the depen

Jaewoong Eum 503 Dec 30, 2022
🪐 Jetpack Compose animation library that allows you to implement animations such as shared element transition.

?? Jetpack Compose animation library that allows you to implement animations such as shared element transition.

Jaewoong Eum 504 Jan 2, 2023
A component for flip animation on Android, which is similar to the effect in Flipboard iPhone/Android

android-flip Aphid FlipView is a UI component to accomplish the flipping animation like Flipboard does. A pre-built demo APK file for Android OS 2.2+

Bo 2.8k Dec 21, 2022
Android ImageViews animated by Ken Burns Effect

KenBurnsView Android library that provides an extension to ImageView that creates an immersive experience by animating its drawable using the Ken Burn

Flávio Faria 2.7k Jan 2, 2023
Android L Ripple effect wrapper for Views

Material Ripple Layout Ripple effect wrapper for Android Views Including in your project compile 'com.balysv:material-ripple:1.0.2' Check for latest v

Balys Valentukevicius 2.3k Dec 29, 2022
Implementation of Ripple effect from Material Design for Android API 9+

RippleEffect ExpandableLayout provides an easy way to create a view called header with an expandable view. Both view are external layout to allow a ma

Robin Chutaux 4.9k Dec 30, 2022