How to Implement Tooltip in Android Studio?
Last Updated :
28 Feb, 2022
A tooltip is a message which appears when a cursor is positioned over an icon, image, hyperlink, or any other GUI component. In this application, we will be using an EditText to take the message from the user and then display that message as a tooltip over a view. Here is a sample video of the application which we are going to build. Note that we are going to implement this project in Java Language.
Step by Step Implementation
Step 1: Create a new project
- Open a new project.
- We will be working on Empty Activity with language as Java. Leave all other options unchanged.
- You can change the name of the project at your convenience.
- There will be two default files named activity_main.xml and MainActivity.java.
If you don’t know how to create a new project in Android Studio then you can refer to How to Create/Start a New Project in Android Studio?
Step 2: Navigate to Build scripts -> build.gradle(module) file and add the following dependency to it
implementation 'com.tomergoldst.android:tooltips:1.0.10'
Click on sync now to save the changes.
Step 3: Working with the activity_main.xml file
Navigate to the app > res > layout > activity_main.xml and add the below code to that file. Below is the code for the activity_main.xml file.
XML
<?xml version="1.0" encoding="utf-8"?>
<!-- Relative layout as parent layout-->
<RelativeLayout
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:id="@+id/relative_layout"
android:layout_height="match_parent"
tools:context=".MainActivity">
<!-- Edit text to take message from user-->
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/et_message"
android:hint="Type a message"
android:padding="12dp"
android:background="@android:drawable/editbox_background"
/>
<!-- Linear layout to hold buttons-->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/linear_layout"
android:orientation="horizontal"
android:layout_marginTop="16dp"
android:layout_below="@id/et_message"
>
<!-- Button for above tooltip-->
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:id="@+id/bt_above"
android:text="Above"
android:layout_marginStart="8dp"
/>
<!-- Button for right tooltip-->
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:id="@+id/bt_right"
android:text="Right"
android:layout_marginStart="8dp"
/>
<!-- Button for Below tooltip-->
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:id="@+id/bt_below"
android:text="Below"
android:layout_marginStart="8dp"
/>
<!-- Button for left tooltip-->
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:id="@+id/bt_left"
android:text="Left"
android:layout_marginStart="8dp"
/>
</LinearLayout>
<!-- View over which tooltip will be displayed-->
<TextView
android:layout_width="100dp"
android:layout_height="100dp"
android:id="@+id/text_view"
android:text="View"
android:textColor="@color/white"
android:gravity="center"
android:layout_centerInParent="true"
android:background="@color/teal_700"
/>
</RelativeLayout>
After executing the above code design of the activity_main.xml file looks like this.
Step 4: Working with 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
package com.example.tooltip;
import androidx.appcompat.app.AppCompatActivity;
import android.graphics.Color;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.RelativeLayout;
import android.widget.TextView;
import android.widget.Toast;
import com.tomergoldst.tooltips.ToolTip;
import com.tomergoldst.tooltips.ToolTipsManager;
public class MainActivity extends AppCompatActivity implements ToolTipsManager.TipListener, View.OnClickListener {
// Initialize variable
RelativeLayout relativeLayout;
EditText etMessage;
Button btAbove,btRight,btLeft,btBelow;
TextView textView;
ToolTipsManager toolTipsManager;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// assign variable
relativeLayout=findViewById(R.id.relative_layout);
etMessage=findViewById(R.id.et_message);
btAbove=findViewById(R.id.bt_above);
btBelow=findViewById(R.id.bt_below);
btLeft=findViewById(R.id.bt_left);
btRight=findViewById(R.id.bt_right);
textView=findViewById(R.id.text_view);
// Initialize tooltip manager
toolTipsManager=new ToolTipsManager(this);
btRight.setOnClickListener(this);
btLeft.setOnClickListener(this);
btAbove.setOnClickListener(this);
btBelow.setOnClickListener(this);
textView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
// Dismiss tooltip
toolTipsManager.dismissAll();
}
});
}
@Override
public void onTipDismissed(View view, int anchorViewId, boolean byUser) {
// check condition
if(byUser)
{
// when user dismiss the tooltip
// display toast
Toast.makeText(getApplicationContext(), "Dismissed", Toast.LENGTH_SHORT).show();
}
}
@Override
public void onClick(View v) {
// check condition
switch(v.getId())
{
case R.id.bt_above:
// when above button clicked
// define position
int position= ToolTip.POSITION_ABOVE;
// define alignment
int align=ToolTip.ALIGN_RIGHT;
// create method
displayToolTip(position,align);
break;
case R.id.bt_right:
// when right button is clicked
displayToolTip(ToolTip.POSITION_RIGHT_TO,ToolTip.ALIGN_CENTER);
break;
case R.id.bt_below:
// when below button clicked
displayToolTip(ToolTip.POSITION_BELOW,ToolTip.ALIGN_LEFT);
break;
case R.id.bt_left:
// when left button is clicked
displayToolTip(ToolTip.POSITION_LEFT_TO,ToolTip.ALIGN_CENTER);
break;
}
}
private void displayToolTip(int position, int align) {
// get message from edit text
String sMessage=etMessage.getText().toString().trim();
// set tooltip on text view
toolTipsManager.findAndDismiss(textView);
// check condition
if(!sMessage.isEmpty())
{
// when message is not equal to empty
// create tooltip
ToolTip.Builder builder=new ToolTip.Builder(this,textView,relativeLayout,sMessage,position);
// set align
builder.setAlign(align);
// set background color
builder.setBackgroundColor(Color.BLUE);
// show tooltip
toolTipsManager.show(builder.build());
}
else
{
// when message is empty
// display toast
Toast.makeText(getApplicationContext(), "Type a Message", Toast.LENGTH_SHORT).show();
}
}
}
Here is the final output of our application.
Output:
Similar Reads
How to Implement SuperBottomBar in Android App?
In this article, we are going to implement bottom navigation like there in Spotify. We all have come across apps that have a Bottom Navigation Bar. Some popular examples include Instagram, Snapchat, etc. In this article, letâs learn how to implement an easy stylish SuperBottomBar functional Bottom N
3 min read
How to Implement Zoom In or Zoom Out in Android?
ImageView in Android is used to display images of different formats. Images are set according to the size of ImageView irrespective of the size of the image. However, ImageView does not provide a provision to zoom in or zoom out of the image. So in this article, we will show you how you could creat
2 min read
How to Implement View Binding Inside Dialog in Android?
In android, View binding is a feature that allows you to more easily write code that interacts with views. Once view binding is enabled in a module, it generates a binding class for each XML layout file present in that module. An instance of a binding class contains direct references to all views th
4 min read
How to Implement Stepper Functionality in Android?
A Stepper widget allows you to organize content in a sequence of steps, and the user can navigate between them. In this article we are going to implement a Stepper-like functionality in an Android app here we take the help of Tablayout to achieve this. A Sample video is attached below to get an idea
4 min read
Different Ways to Format Code in Android Studio
Code formatting is very important when you are building an Android application. This will help you to organize your code properly and to maintain your code to make it easily readable. Below is a list of purposes of having a standard coding format. Purposes of Having Coding Standards A coding standar
3 min read
How to Implement Shapeable ImageView in Android?
In Android, ShapeableImageView is used to change the shape of your image to circle, diamond, etc. Also, you can set a corner radius to your ImageView. You can do much more by using this ShapeableImageView with minimal code. So in this article, we are going to make a ShapableImageView in android. By
5 min read
How to Customize Option Menu of Toolbar in Android?
In this article, we will see how to add icons and change background color in the options menu of the toolbar. Option menu is a collection of menu items of an activity. Android Option Menus are the primary menus of the activity. They can be used for settings, search, delete items, etc. We will first
3 min read
How to Implement Custom Dialog Maker in Android?
In this article, we are going to make an application of Custom Dialog Maker in android studio. In this application, we can create dialogs of our own choice of style, type, and animation. What is a dialog? A dialog is a small window that prompts the user to make a decision, provide some additional in
5 min read
How to Use Quick Settings Placement API in Android 13?
Quick Settings tile is a quick setting that is present in the android device notification bar from where we can easily enable and disable the device or app settings such as Bluetooth or wifi. In this article, we will take a look at How to add a Quick Tile to our android device using Quick Settings P
3 min read
How to Add Share Button in Toolbar in Android?
In this article, we are going to create a simple Share Button in the Toolbar in Android. The Share Button is used to share information on mail, Bluetooth, Facebook, Twitter, WhatsApp, etc to an individual person or a group on any social media. We can share any type of message like text, images, vide
4 min read