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