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.
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 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); } }); }} |
