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

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:

• Add Android PagerSlidingTabStrip
• Two Panels Layout Animation Android Library
• Bubble Tab Animation Library Android
• Cool Cards Menu Animation Android Library
• ViewPager cards animation like Duolingo

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.