Android Tooltips – User Interface example in Kotlin

Android Tooltips is a hint to the user about a particular button or another view element. It shows the small pop message to a user on long-press the view or hovers their mouse on it. It’s useful because sometimes the only icon can adjust on screen and information (label) can be longer. In this tutorial example, you will learn how to add tooltips on Android 8.0 (API level 26) and higher using kotlin.

A Tooltip may appear—a small “hover box” with information about the item being hovered over or long-press.

In this tutorial, you will learn the following:

1. Add the floating button in the layout
2. Set Tooltip text in a floating button
3. Default menu “hover box” text

Let’s Build a Simple Example of Android Tooltips

Step 1. Create a new project “Build Your First Android App in Kotlin“

Step 2. Add FloatingActionButton in resources layout “activity_main.xml“

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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:layout_height="match_parent"
    tools:context=".MainActivity">

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/floatingActionButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="24dp"
        android:layout_marginEnd="24dp"
        android:clickable="true"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:srcCompat="@android:drawable/ic_dialog_email" />
</android.support.constraint.ConstraintLayout>

Step 3. Create a new menu and add following code

if you don’t have any menu resource file then create first “Android Resource directory” then create resource file “main_menu.xml”

for more information follow this tutorial – Android Toolbar example

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:id="@+id/action_fav"
        android:icon="@android:drawable/btn_star_big_off"
        android:title="Star mails"
        app:showAsAction="always"/>
</menu>

Step 4. Open the “MainActivity.kt” and add the following code

In the code setting a tooltipText and menu in The Activity. For menu tooltipText will show the <itme> android:title = "Star mails"</> , Long press will popup the small text in the screen.

package `in`.eyehunt.androidtooltips

import android.support.v7.app.AppCompatActivity
import android.os.Bundle
import android.view.Menu
import kotlinx.android.synthetic.main.activity_main.*

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        // setting tooltip message
        floatingActionButton.tooltipText = "Send Email"
    }

    override fun onCreateOptionsMenu(menu: Menu?): Boolean {
        menuInflater.inflate(R.menu.main_menu, menu)
        return true
    }
}

Step 5. Now Run the application, in an emulator or On you android device

Output screenshot Android Tooltips example :

Download source code Android Tooltips in kotlin

https://github.com/EyeHunts/AndroidTooltips

Note: This example (Project) is developed in Android Studio 3.1.3. Tested on Android 9 ( Android-P), compile SDK version API 27: Android 8.0 (Oreo)

MinSdkVersion=”26″

TargetSdkVersion=”27″

Coding in Kotlin