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 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 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
How to Create Your Own Shortcut in Android Studio? Android Studio is the official integrated development environment for Google’s Android operating system, built on JetBrains’ IntelliJ IDEA software and designed specifically for Android app development. Android Studio offers a lot of shortcuts to users. It also provides to configure Keymap and add y
2 min read
How to Add Text Drawable to ImageView in Android? In many android apps, you will get to see a feature in which you can see a simple text is displayed inside an ImageView or you can get to see that a text is displayed in a specific image or a shape. Mostly this type of view is seen in the Contacts application which is present on your Android device.
5 min read
Implementation of WhatsNew Library in Android In this article, we are going to show the important content of the app using the WhatsNew library. It can be simply thought of like showing some information like notification, instructions, faq, or terms and conditions like things. A sample GIF is given below to get an idea about what we are going t
3 min read
Android Studio Main Window Android Studio is the official IDE (Integrated Development Environment) for Android app development and it is based on JetBrains’ IntelliJ IDEA software. Android Studio provides many excellent features that enhance productivity when building Android apps, such as: A blended environment where one can
4 min read