worker8 / TourGuide

TourGuide is an Android library that aims to provide an easy way to add pointers with animations over a desired Android View
MIT License
2.63k stars 416 forks source link

How to add tooltip to “Up/back(home” button in toolbar ? #94

Open guruduttstay opened 8 years ago

guruduttstay commented 8 years ago

Hi

Is there way to set up button / Home button view to toolTip so it makes circle over back/up/home button in toolbar ?

Jolinar74 commented 7 years ago

Hello,

maybe it´s a little bit too late, but I have found a good way to get the pointer to the "hamburger icon" in the toolbar.

I searched for a good solution and found this thread at stackoverflow.com: Get Toolbar's navigation icon view referrence. So I changed it a little bit for me:

In my activity (I called it "Startmenu"), where I declare toolbar and navigation drawer, I add following code before the "onCreate":

    TourGuide mTutorialHandler;            //   <-----  ADD THESE 3 LINES
    Startmenu mActivity;
    public static final String STATUS_BAR = "status_bar";

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        Intent intent = getIntent();            //   <-----  ADD FOLLOWING LINES
        boolean status_bar = intent.getBooleanExtra(STATUS_BAR,false);
        if (!status_bar) {
            requestWindowFeature(Window.FEATURE_NO_TITLE);
            getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);
        }
        mActivity = this;            //   <-----  THIS IS LAST LINE TO INSERT

        super.onCreate(savedInstanceState);

You can see, that the additional code is written between the OnCreate-Methode and the super.onCreate...

After the declaration of toolbar, you add following:

View navicon = getToolbarNavigationIcon(toolbar); Now add the code from TourGuide, you wish to use. I my case, I add following:

        Animation animation = new TranslateAnimation(0f, 0f, 300f, 0f);
        animation.setDuration(3000);
        animation.setFillAfter(true);
        animation.setInterpolator(new BounceInterpolator());

        Pointer pointer = new Pointer()
                .setColor(Color.parseColor("#c90000"))
                .setGravity(Gravity.CENTER);

        ToolTip toolTip = new ToolTip()
                .setTitle("Willkommen")
                .setDescription("Bitte hier klicken, um das Menu zu öffnen......")
                .setTextColor(Color.parseColor("#000000"))
                .setBackgroundColor(Color.parseColor("#f2ceb792"))
                .setShadow(true)
                .setGravity(Gravity.BOTTOM | Gravity.RIGHT)
                .setEnterAnimation(animation);

        mTutorialHandler = TourGuide.init(this).with(TourGuide.Technique.Click)
                .setPointer(pointer)
                .setToolTip(toolTip)
                .setOverlay(new Overlay())
                .playOn(navicon);

Now you have to insert is to close the mTutorialHandler, if the user has clicked the "hamburger". You have to insert following code after the onDrawerOpened-Methode:

            @Override
            public void onDrawerOpened(View drawerView) {
                mTutorialHandler.cleanUp();            //   <-----  ADD THIS LINE

The last thing is to copy the code from link above to your activity. You can insert it after closing onCreate or at the end of your activity (right before the last "}").

    public static View getToolbarNavigationIcon(Toolbar toolbar){
        //check if contentDescription previously was set
        boolean hadContentDescription = TextUtils.isEmpty(toolbar.getNavigationContentDescription());
        String contentDescription = !hadContentDescription ? toolbar.getNavigationContentDescription().toString() : "navigationIcon";
        toolbar.setNavigationContentDescription(contentDescription);
        ArrayList<View> potentialViews = new ArrayList<View>();
        //find the view based on it's content description, set programatically or with android:contentDescription
        toolbar.findViewsWithText(potentialViews,contentDescription, View.FIND_VIEWS_WITH_CONTENT_DESCRIPTION);
        //Nav icon is always instantiated at this point because calling setNavigationContentDescription ensures its existence
        View navIcon = null;
        if(potentialViews.size() > 0){
            navIcon = potentialViews.get(0); //navigation icon is ImageButton
        }
        //Clear content description if not previously present
        if(hadContentDescription)
            toolbar.setNavigationContentDescription(null);
        return navIcon;
    }

That´s all. I hope, my English isn´t too bad and it helps others to finish their work. Good luck guys!

Jolinar74