BubbleEmitter animation in Android with Examples
BubbleEmitter is an animation library that helps to gain the attention of the user. It shows fancy animated bubbles as an Android view. It is used to create a beautiful user interface where the user can feel the app in real. Some useful features and application of BubbleEmitter are:
- To create a live wallpaper app BubbleEmitter can be used for this.
- Use this view where if you want the user to wait for some time.
- ProgressBar can be used instead of this but because of its unique UI, it will attract the user and hence users wait for enough time.
- It also provides full control to developer.
- One can also create a custom colorful bubble.
Approach
- Step 1: Add the support library in the root build.gradle file (not in module build.gradle file). This library jitpack is a novel package repository. It is made for JVM so that any library which is present in github and bitbucket can be directly used in the application.
allprojects {
repositories {
maven { url 'https://jitpack.io' }
}
}
- Step 2: Add the support library in build.gradle file and add dependency in the dependencies section.
implementation 'com.github.FireZenk:BubbleEmitter:-SNAPSHOT'
- Step 3: Add the following code in activity_main.xml file. In this file add BubbleEmitter to the layout.
activity_main.xml
<?
xml
version
=
"1.0"
encoding
=
"utf-8"
?>
<
androidx.constraintlayout.widget.ConstraintLayout
xmlns:android
=
"http://schemas.android.com/apk/res/android"
xmlns:app
=
"http://schemas.android.com/apk/res-auto"
xmlns:tools
=
"http://schemas.android.com/tools"
android:layout_width
=
"match_parent"
android:layout_height
=
"match_parent"
tools:context
=
".MainActivity"
>
<
org.firezenk.bubbleemitter.BubbleEmitterView
android:id
=
"@+id/bubbleEmitter"
android:layout_width
=
"match_parent"
android:layout_height
=
"match_parent"
app:layout_constraintBottom_toBottomOf
=
"parent"
app:layout_constraintLeft_toLeftOf
=
"parent"
app:layout_constraintRight_toRightOf
=
"parent"
app:layout_constraintTop_toTopOf
=
"parent"
/>
</
androidx.constraintlayout.widget.ConstraintLayout
>
- Step 4: Add the following code in MainActivity.kt file. In this file create a thread and attach it to the main thread.
MainActivity.kt
package
org.w3wiki.bubbleemitter
import
androidx.appcompat.app.AppCompatActivity
import
android.os.Bundle
import
android.os.Handler
import
kotlinx.android.synthetic.main.activity_main.*
import
kotlin.random.Random
class
MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super
.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
emitBubbles()
}
private
fun emitBubbles() {
// It will create a thread and attach it to
// the main thread
Handler().postDelayed({
// Random is used to select random bubble
// size
val size = Random.nextInt(
20
,
80
)
bubbleEmitter.emitBubble(size)
emitBubbles()
}, Random.nextLong(
100
,
500
))
}
}
Output: Run on Emulator
- Step 5: To add color in bubbles add the following code in MainActivity.kt file. In this file we are going create black color bubbles.
MainActivity.kt
package
org.w3wiki.bubbleemitter
import
androidx.appcompat.app.AppCompatActivity
import
android.os.Bundle
import
android.os.Handler
import
kotlinx.android.synthetic.main.activity_main.*
import
kotlin.random.Random
class
MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super
.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
emitBubbles()
}
private
fun emitBubbles() {
// It will create a thread and attach it to
// the main thread
Handler().postDelayed({
// Random is used to select random bubble
// size
val size = Random.nextInt(
20
,
80
)
bubbleEmitter.emitBubble(size)
bubbleEmitter.setColors(android.R.color.black,
android.R.color.black,
android.R.color.black);
emitBubbles()
}, Random.nextLong(
100
,
500
))
}
}
Output: Run on Emulator
Contact Us