Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Show tooltip below ActionBar items

I tried searching a lot but was not able to find any simple solution for this. Basically I want to show a tool-tip balloon below an ActionBar item.

Reference Image

like image 757
Jexem Avatar asked Aug 31 '15 11:08

Jexem


2 Answers

Method 1:

First create custom toolbar

Tooltip library link

Visit

activity_login.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:banner="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:background="@mipmap/background"
tools:context="com.and.postanads.LoginActivity">

<android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/AppTheme.AppBarOverlay">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        app:popupTheme="@style/AppTheme.PopupOverlay">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textAppearance="?android:attr/textAppearanceSmall"
            android:text="SKIP"
            android:textColor="#FFFFFF"
            android:textStyle="bold"
            android:fontFamily="sans-serif"
            android:id="@+id/txt_skip"
            android:layout_marginRight="15dp"
            android:layout_gravity="right"/>

    </android.support.v7.widget.Toolbar>

</android.support.design.widget.AppBarLayout>

LoginActivity.java

public class LoginActivity extends AppCompatActivity implements Tooltip.Callback {


private Tooltip.ClosePolicy mClosePolicy = Tooltip.ClosePolicy.TOUCH_ANYWHERE_CONSUME;
@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_login);
    Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
    setSupportActionBar(toolbar);

    Tooltip.dbg = true;

    TextView textView = (TextView)findViewById(R.id.txt_skip);
    Tooltip.make(this, new Tooltip.Builder(101)
                .anchor(textView, Tooltip.Gravity.BOTTOM)
                .closePolicy(mClosePolicy, 5000)
                .text("Tooltip on a TabLayout child...Tooltip on a TabLayout child...")
                .withStyleId(R.style.ToolTipLayoutDefaultStyle_CustomFont)
                .fadeDuration(200)
                .fitToScreen(true)
                .activateDelay(2000)
                .withCallback(this)
                .floatingAnimation(Tooltip.AnimationBuilder.DEFAULT)
                .showDelay(400)
                .build()
        ).show();
    }
}

Sample

Method 2:

Using Menu_item

menu_login.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item
    android:id="@+id/menu_skip"
    android:orderInCategory="100"
    android:title="Skip"
    app:showAsAction="always"/>
</menu>

LoginActivity.java

public class LoginActivity extends AppCompatActivity implements Tooltip.Callback {
private Tooltip.ClosePolicy mClosePolicy = Tooltip.ClosePolicy.TOUCH_ANYWHERE_CONSUME;
@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_login);
    Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
    setSupportActionBar(toolbar);

    Tooltip.dbg = true;
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
    getMenuInflater().inflate(R.menu.menu_login, menu);
    return true;
}

@Override
public boolean onOptionsItemSelected(MenuItem item) {
    int id = item.getItemId();
    if (id == R.id.menu_skip) {
        View view = findViewById(R.id.menu_skip);
        Tooltip.make(this, new Tooltip.Builder(101)
                .anchor(view, Tooltip.Gravity.BOTTOM)
                .closePolicy(mClosePolicy, 5000)
                .text("Tooltip on a TabLayout child...Tooltip on a TabLayout child...")
                .fadeDuration(200)
                .fitToScreen(true)
                .activateDelay(2000)
                .withCallback(this)
                .floatingAnimation(Tooltip.AnimationBuilder.DEFAULT)
                .showDelay(400)
                .build()
        ).show();
        return true;
    }
    return super.onOptionsItemSelected(item);
}
}
like image 193
Jayaprakash G Avatar answered Oct 19 '22 01:10

Jayaprakash G


See answer here how to display ToolTip in android?

Long story short - you can use Toast for this purpose (the same way as ActionBar does it). Here is ready utility class to do that CheatSheet

like image 1
GregoryK Avatar answered Oct 19 '22 01:10

GregoryK