Open In App

How to Use Balloon Library in Android?

Improve
Improve
Like Article
Like
Save
Share
Report

Balloon Library is another popular feature that is commonly used in most Android Apps. You can get to see this feature in most of the shopping and messaging apps. With the help of this feature, you can get a hint about what to do next in any app. In this article, we are going to see how to implement balloon view in our Android App. A sample GIF is given below to get an idea about what we are going to do in this article. Note that we are going to implement this project using the Java language. 

 Balloon Library in Android Sample GIF

Application of Balloon Library

  • Balloon Library can be used to display hints of EditText for messaging app in an attractive way.
  • It can be used to show the toast message in an Android app.
  • Helps user about what to do next in Android app displaying hint text in it.

Attributes of Balloon Library

Attributes

Description

.setWidthRatio() Use to display the width of pop up according to ratio of horizontal screen size.
.showAlignBottom() Use to display pop up at bottom.
.dismiss() Use to dismiss pop up after it has been shown.
.setMargin() Use to give margin from all sides.
.setIsVisibleArrow() Use to show Arrow.
.setArrowPosition() Use to set the position of arrow to the pop up.
.setArrowOrientation()  Use to set the orientation of the pop up.
 .setText() Use to display Text.
.setTextColor() Use to display Text Color.
.setHeight() Use to give height to pop up.
.setCornerRadius() Use to make pop up rounded from all sides.
.setBalloonAnimation() Use to give Animation to pop up.

Step by Step Implementation

Step 1: Create a New Project

To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. Note that select Java as the programming language.

Step 2: Add dependency of Balloon library in build.gradle file

Then Navigate to gradle scripts and then to build.gradle(Module) level. Add below line in build.gradle file in the dependencies section.

implementation “com.github.skydoves:balloon:1.2.9”

Now click on Sync now it will sync your all files in build.gradle().

Step 3: Create a new Balloon View in your activity_main.xml

Go to the activity_main.xml file and refer to the following code. Below is the code for the activity_main.xml file.

XML




<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
  
    <!--Button for showing balloon view-->
    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="Button"
        android:textSize="15dp"
        android:textStyle="bold" />
      
</RelativeLayout>


Step 4: Working with the MainActivity.java file

Go to the MainActivity.java file and refer to the following code. Below is the code for the MainActivity.java file. Comments are added inside the code to understand the code in more detail.

Java




import android.os.Bundle;
import android.os.Handler;
import android.view.View;
import android.widget.Button;
  
import androidx.appcompat.app.AppCompatActivity;
import androidx.core.content.ContextCompat;
  
import com.skydoves.balloon.ArrowOrientation;
import com.skydoves.balloon.Balloon;
import com.skydoves.balloon.BalloonAnimation;
  
public class MainActivity extends AppCompatActivity {
  
    Button button;
    Balloon balloon;
  
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
  
        // Id for the button
        button = findViewById(R.id.button);
  
        // Balloon view created here
        balloon = new Balloon.Builder(getApplicationContext())
                .setArrowSize(10)
                .setArrowOrientation(ArrowOrientation.TOP)
                .setIsVisibleArrow(true)
                .setArrowPosition(0.3f)
                .setWidthRatio(0.6f)
                .setHeight(65)
                .setTextSize(15f)
                .setCornerRadius(4f)
                .setAlpha(0.9f)
                .setText("Hi! Geeks for Geeks.")
                .setTextColor(ContextCompat.getColor(getApplicationContext(), R.color.design_default_color_secondary))
                .setBackgroundColor(ContextCompat.getColor(getApplicationContext(), R.color.design_default_color_secondary_variant))
                .setBalloonAnimation(BalloonAnimation.FADE)
                .build();
          
        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                balloon.showAlignBottom(button);
                new Handler().postDelayed(new Runnable() {
                    @Override
                    public void run() {
                        balloon.dismiss();
                    }
                }, 2000);
            }
        });
    }
}


Output:



Last Updated : 15 Jan, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads