How to make app intro or guide on first impression quick and fast? (or android instructions when open the application at first time) - SpartaCode

SpartaCode

Make your development faster and easier !

How to make app intro or guide on first impression quick and fast? (or android instructions when open the application at first time)


Show Android instructions when you open application at first time

When you have an idea you make an App to make your idea true. Its most better to consider that End User or Customer will not have any information about usability of your created App. Its very important to provide proper instructions or intro gestures to make your app more familier to Customer.

Customers will be happy to use your app as you guide through your app there will be clear understanding of how to use your app even if end user is a stranger. So you can increase more downloads which helps increase your revenue.

App intro will also make your app more standard and look like company created Android apps.
App intro also increases usability of your app and make it more easy to use. So to make such beautiful app intro or guide you need to use better library which will be introduced in this tutorial.

Lets Get Started,
1. Showing instructions for Toolbar Elements:

Step 1: Importing Library
Here we will import taptargetview library as it is used to show instructions for your android app.
To import taptargetview copy following code into your apps build gradle.
  compile 'com.getkeepsafe.taptargetview:taptargetview:1.10.0'

Step 2: Use Library
Once you have added library to your app gradle and sync project you will be able to use the taptargetview library to provide instruction. 
Now lets use it into our project to show instructions when user opens your app.
Copy the following code in onCreate() method of any activity you wish to show instruction.
It can be MainActivity or Dashboard of your project.
 // We have a sequence of targets, so lets build it!
            final TapTargetSequence sequence = new TapTargetSequence(this)
                    .targets(
                            // Likewise, this tap target will target the search button
                            TapTarget.forToolbarMenuItem(toolbar, R.id.menu_share, "Your Custom Text to explain the target view.")
                                    .dimColor(R.color.colorPrimary)
                                    .outerCircleColor(R.color.colorAccent)
                                    .targetCircleColor(R.color.colorPrimary)
                                    .textColor(android.R.color.black)
                                    .cancelable(false)
                                    .id(1),
                            // Likewise, this tap target will target the search button
                            TapTarget.forToolbarMenuItem(toolbar, R.id.menu_rateus, "Your Custom Text to explain the target view.")
                                    .dimColor(R.color.colorPrimary)
                                    .outerCircleColor(R.color.colorAccent)
                                    .targetCircleColor(R.color.colorPrimary)
                                    .textColor(android.R.color.black)
                                    .cancelable(false)
                                    .id(2)

                    )
                    .listener(new TapTargetSequence.Listener() {
                        // This listener will tell us when interesting(tm) events happen in regards
                        // to the sequence
                        @Override
                        public void onSequenceFinish() {
                           // Executes when sequence of instruction get completes.
                        }

                        @Override
                        public void onSequenceStep(TapTarget lastTarget, boolean targetClicked) {
                            Log.d("TapTargetView", "Clicked on " + lastTarget.id());
                        }

                        @Override
                        public void onSequenceCanceled(TapTarget lastTarget) {
                            final AlertDialog dialog = new AlertDialog.Builder(MainActivity.this)
                                    .setTitle("Uh oh")
                                    .setMessage("You canceled the sequence")
                                    .setPositiveButton("OK", null).show();
                            TapTargetView.showFor(dialog,
                                    TapTarget.forView(dialog.getButton(DialogInterface.BUTTON_POSITIVE), "Uh oh!", "You canceled the sequence at step " + lastTarget.id())
                                            .cancelable(false)
                                            .tintTarget(false), new TapTargetView.Listener() {
                                        @Override
                                        public void onTargetClick(TapTargetView view) {
                                            super.onTargetClick(view);
                                            dialog.dismiss();
                                        }
                                    });
                        }
                    });

            sequence.start();


After copy pasting you can change corresponding toolbar object in your Activity and providing your id of menu instead of mine(R.id.menu_share).

Wow! Wonderful thats all for showing toolbar instructions for app when your activity is opened.

2. Showing instructions for any Views inside Activity.
.Now lets learn how to show instructions for a Button or any View you would like to tell user about that view and instruct user to use it correctly.
Copy the following code to show instruction to exact view you need to instruct user.
TapTargetView.showFor(this,                 // `this` is an Activity
    TapTarget.forView(findViewById(R.id.target), "This is a target", "We have the best targets, believe me")
        // All options below are optional
        .outerCircleColor(R.color.red)      // Specify a color for the outer circle
 .outerCircleAlpha(0.96f)            // Specify the alpha amount for the outer circle
        .targetCircleColor(R.color.white)   // Specify a color for the target circle
        .titleTextSize(20)                  // Specify the size (in sp) of the title text
        .titleTextColor(R.color.white)      // Specify the color of the title text
        .descriptionTextSize(10)            // Specify the size (in sp) of the description text
        .descriptionTextColor(R.color.red)  // Specify the color of the description text
        .textColor(R.color.blue)            // Specify a color for both the title and description text
        .textTypeface(Typeface.SANS_SERIF)  // Specify a typeface for the text
        .dimColor(R.color.black)            // If set, will dim behind the view with 30% opacity of the given color
        .drawShadow(true)                   // Whether to draw a drop shadow or not
        .cancelable(false)                  // Whether tapping outside the outer circle dismisses the view
        .tintTarget(true)                   // Whether to tint the target view's color
        .transparentTarget(false)           // Specify whether the target is transparent (displays the content underneath)
        .icon(Drawable)                     // Specify a custom drawable to draw as the target
        .targetRadius(60),                  // Specify the target radius (in dp)
    new TapTargetView.Listener() {          // The listener can listen for regular clicks, long clicks or cancels
        @Override
        public void onTargetClick(TapTargetView view) {
            super.onTargetClick(view);      // This call is optional
            doSomething();
        }
    });

Where target is the view you want to instruct user.
Congradulations! Again you learnt how to instruct user for your app and improve usability of your app.

3. Showing instructions any where on your app screen
Isnt Amazing! Now you can show instructions on any part of your app, you just need xy Coordinates or bounds. 
Lets learn this amazing function.
        // We have a sequence of targets, so lets build it!
        final TapTargetSequence sequence = new TapTargetSequence(this)
                .targets(
                        // Likewise, this tap target will target the bounds
                        TapTarget.forBounds(new Rect(140,1200,100,1300), "Add New Party", "Party can be Customer or Supplier.")
                                .dimColor(R.color.colorPrimary)
                                .outerCircleColor(R.color.colorAccent)
                                .transparentTarget(true)
                                .targetCircleColor(R.color.colorPrimary)
                                .textColor(android.R.color.black)
                                .cancelable(false)
                                .id(1),
                        // Likewise, you can create multiple targets as you wish.
                        TapTarget.forBounds(new Rect(310,1200,400,1300), "Product List", "List of all your products will be visible here.")
                                .dimColor(R.color.colorPrimary)
                                .outerCircleColor(R.color.colorAccent)
                                .transparentTarget(true)
                                .targetCircleColor(R.color.colorPrimary)
                                .textColor(android.R.color.black)
                                .cancelable(false)
                                .id(2)

                )
                .listener(new TapTargetSequence.Listener() {
                    // This listener will tell us when interesting(tm) events happen in regards
                    // to the sequence
                    @Override
                    public void onSequenceFinish() {

                    }

                    @Override
                    public void onSequenceStep(TapTarget lastTarget, boolean targetClicked) {
                        Log.d("TapTargetView", "Clicked on " + lastTarget.id());
                    }

                    @Override
                    public void onSequenceCanceled(TapTarget lastTarget) {
                        final AlertDialog dialog = new AlertDialog.Builder(YourActivity.this)
                                .setTitle("Uh oh")
                                .setMessage("You canceled the sequence")
                                .setPositiveButton("OK", null).show();
                        TapTargetView.showFor(dialog,
                                TapTarget.forView(dialog.getButton(DialogInterface.BUTTON_POSITIVE), "Uh oh!", "You canceled the sequence at step " + lastTarget.id())
                                        .cancelable(false)
                                        .tintTarget(false), new TapTargetView.Listener() {
                                    @Override
                                    public void onTargetClick(TapTargetView view) {
                                        super.onTargetClick(view);
                                        dialog.dismiss();
                                    }
                                });
                    }
                });

        sequence.start();


Congradulations! My Friends. Now you have learnt amazing part of Android App Usability Instructions provided to your customers or client.
If you need more information about this library you can visit to following link and learn indepth if you are interested.


If you want to show instructions only first time the user opens your app you can use SharedPreference to store IsFirstTime status and you can assign some value once user opens your app.

To learn SharedPreference, Please Go through this link:

To check whether user has opened your app first time use this code:
            SharedPreference spref = new SharedPreference(getApplicationContext());

            if(spref.getData("IsFirstTime")==null){
                provideinstructions();
                spref.setData("IsFirstTime","No");
            }
Note:  I have used my own Library SharedPreference and not SharedPreferences. To get this library go through above sharedpreference Guide link i have provided. Thank you.

Sample Output


❤ Thank You for your Visit ❤
If you Love post, Please Share and Comment.

No comments:

Post a Comment

Get Amazing Traffic to your Site

Traffic Exchange

Post Bottom Ad

Responsive Ads Here