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 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:
