Rain Animation Examples

Step by step examples to teach you Rain Animation.

1. Rainlayout

Constraintlayout based rain-animation view developed backed by Kotlin Coroutines..

Constraintlayout based rain-animation view developed backed by Kotlin Coroutines.

Demo

Here is the demo:

Follow these steps to use it:

Step 1: Installation

Declare Jitpack then add the implementation statement:

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

  .....

dependencies {
      implementation 'com.github.fevziomurtekin:Rainlayout:1.1'
   }
}

Step 2: Add to Layout

Add this to your xml layout:

<com.fevziomurtekin.widget.RainlayoutView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/rainview"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:background="@android:color/holo_orange_light"
        xmlns:android="http://schemas.android.com/apk/res/android"
        app:isColorful="true"
        app:dropPerSecond="1"
        app:durationOfDropTime="500"
        app:dropSrc="@drawable/umbrella"
        app:dropTintColor="@color/colorPrimary">

</com.fevziomurtekin.widget.RainlayoutView>

Attributes

isColorful
dropPerSecond
durationOfDropTime
dropSrc
dropTintColor

Warning : To Stop the animation in Activity / Fragment changes!

override fun onStop() {
        super.onStop()
        rainview.animationClear()
    }

Full Example

Let us look at a full Rain Animation Example based on this library:

Step 1. Design Layouts

For this project let's create the following layouts:

(a). activity_main.xml

Our activity_main layout.

This layout will represent our Main Activity's layout. Specify com.fevziomurtekin.widget.RainlayoutView as it's root element then inside it place the following widgets:

<?xml version="1.0" encoding="utf-8"?>
<com.fevziomurtekin.widget.RainlayoutView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/rainview"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:background="@android:color/holo_blue_dark"
        xmlns:android="http://schemas.android.com/apk/res/android"
        app:isColorful="true"
        app:dropPerSecond="10"
        app:durationOfDropTime="1000"
        app:dropSrc="@drawable/umbrella"
        app:dropTintColor="@color/colorPrimary"
>

</com.fevziomurtekin.widget.RainlayoutView>

Step 2. Write Code

Finally we need to write our code as follows:

(a). MainActivity.kt

Our MainActivity class.

Here is the full code:

package replace_with_your_package_name

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import kotlinx.android.synthetic.main.activity_main.*

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
    }

    override fun onStop() {
        super.onStop()
        rainview.animationClear()
    }
}

Reference

Download the code below:

More

Here are some more examples related to Rain Animation.