How to Implement Tooltip in Android Studio?

0 0 3 minutes read

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