Add Android View Hover Effect

Hover effect is now a cool effect for new Android application but you need to know where and how you’ll use it. And if you don’t know how to implement Android view hover effect in your application then this tutorial is for you.

In my opinion, jumping to a new activity to show your menu is a kind of wasting time and life. So, I think, we need a hover view, to show menu, to show messages.

Steps for How to add Android View Hover effect

Set up RenderScript in build.gradle defaultConfig

renderscriptTargetApi 19
     	renderscriptSupportMode true

Gradle

dependencies {
  compile "com.android.support:support-v4:20.+"
  compile 'com.nineoldandroids:library:2.4.0'
  compile 'com.daimajia.easing:library:1.0.0@aar'
  compile 'com.daimajia.androidanimations:library:1.1.2@aar'
  compile 'com.daimajia.androidviewhover:library:1.0.4@aar'
}

Maven

<dependency>
      <groupId>com.nineoldandroids</groupId>
      <artifactId>library</artifactId>
      <version>2.4.0</version>
  </dependency>
  <dependency>
      <groupId>com.daimajia.androidanimation</groupId>
      <artifactId>library</artifactId>
      <version>1.1.2</version>
      <type>apklib</type>
  </dependency>
  <dependency>
      <groupId>com.daimajia.easing</groupId>
      <artifactId>library</artifactId>
      <version>1.0.0</version>
      <type>apklib</type>
  </dependency>
  <dependency>
      <groupId>com.daimajia.androidviewhover</groupId>
      <artifactId>library</artifactId>
      <version>1.0.4</version>
      <type>apklib</type>
  </dependency>

Create an original view, and make sure it was wrapped by BlurLayout

Add Android View Hover Effect
Add Android View Hover Effect

For example:

<com.daimajia.androidviewhover.BlurLayout
      android:id="@+id/sample"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content">
            <ImageView
                android:layout_centerInParent="true"
                android:scaleType="fitXY"
                android:src="@drawable/kid"
                android:layout_width="match_parent"/>
  </com.daimajia.androidviewhover.BlurLayout>

Note: BlurLayout is entended from RelativeLayout. You can use the RelativeLayout rules to layout your view.

Recommended articles:

Create a hover view, there is no rules to obey. Just please remember that this view will be stretched as large as the original view you have created.

Bind a hover view to BlurLayout

BlurLayout sampleLayout = (BlurLayout)findViewById(R.id.sample);
  View hover = LayoutInflater.from(mContext).inflate(R.layout.hover, null);
  sampleLayout.setHoverView(hover);

and don’t forget that you can add various animations just in one line code. For example:

//View (R.id.heart) appear animation.
  sampleLayout.addChildAppearAnimator(hover, R.id.heart, Techniques.FlipInX);
  //View (R.id.heart) disappear animation.
  sampleLayout.addChildDisappearAnimator(hover, R.id.heart, Techniques.FlipOutX);

You can use lot of animation in this library.

Effects

Attension

Flash, Pulse, RubberBand, Shake, Swing, Wobble, Bounce, Tada, StandUp, Wave

Special

Hinge, RollIn, RollOut,Landing,TakingOff,DropOut

Bounce

BounceIn, BounceInDown, BounceInLeft, BounceInRight, BounceInUp

Fade

FadeIn, FadeInUp, FadeInDown, FadeInLeft, FadeInRight

FadeOut, FadeOutDown, FadeOutLeft, FadeOutRight, FadeOutUp

Flip

FlipInX, FlipOutX, FlipOutY

Rotate

RotateIn, RotateInDownLeft, RotateInDownRight, RotateInUpLeft, RotateInUpRight

RotateOut, RotateOutDownLeft, RotateOutDownRight, RotateOutUpLeft, RotateOutUpRight

Slide

SlideInLeft, SlideInRight, SlideInUp, SlideInDown

SlideOutLeft, SlideOutRight, SlideOutUp, SlideOutDown

Zoom

ZoomIn, ZoomInDown, ZoomInLeft, ZoomInRight, ZoomInUp

ZoomOut, ZoomOutDown, ZoomOutLeft, ZoomOutRight, ZoomOutUp

Hope you like this post. Please comment below your thoughts.

By Tell Me How

It is a technology blog and admin has excellent experience in programming from 5+ year. You can contact us at ceo.tellmehow@gmail.com

Share your thoughts

Leave a Reply

Loading Facebook Comments ...
Loading Disqus Comments ...