In this blog, I will explain how I implemented showcase View to display all the essential features of the Phimpme Android application when the application starts first. In this, the users will know which activity is used for what purpose.
Importing material design Showcase View
I used material design showcase in Phimpme Android application to take the benefit of the latest Android design and to add more text on the screen which is easily visible by the users. We need to add the following to our gradle.
compile 'com.github.deano2390:MaterialShowcaseView:1.1.0'
|
There is a very good repository in Github for material design Showcase view which we have used here.
Implementing Material design showcaseView on the desired activity
In Phimpme Android application we have three main activity on the home screen. Namely:
- Camera
- Gallery
- Accounts Activity
Camera Activity and Gallery Activity is used to take pictures and select the picture respectively. Accounts Activity contains more than 10 accounts of various social media platforms and storage platform. When the application starts my aim is to display the function of all three activities in a showcase View. it is implemented in the following Steps:
Step 1
Import all the module from the Material showcase view we have used in the gradle.
import uk.co.deanwild.materialshowcaseview.MaterialShowcaseSequence; import uk.co.deanwild.materialshowcaseview.MaterialShowcaseView; import uk.co.deanwild.materialshowcaseview.ShowcaseConfig; |
Step 2
Get the reference all the buttons you want to show the features. These buttons will be highlighted when the showcase View is displayed.
nav_home = (BottomNavigationItemView) findViewById(R.id.navigation_home); nav_cam = (BottomNavigationItemView) findViewById(R.id.navigation_camera); nav_acc = (BottomNavigationItemView) findViewById(R.id.navigation_accounts); |
Step 3
In Phimpme Android application I have used to display the features of three navigation buttons. So, to display the features of more than one button or View we have to use MaterialShowcaseSequence class to display the features of the buttons in a sequence, that is one after the other.
In the onCreate activity, I am calling presentShowcaseSequence function. This function has a delay time. This delay time is required to wait for four seconds until the splash screen activity is over and the activity is started.
private void presentShowcaseSequence() { ShowcaseConfig config = new ShowcaseConfig(); config.setDelay(4000); // half second between each showcase view MaterialShowcaseSequence sequence = new MaterialShowcaseSequence(this, SHOWCASE_ID); sequence.setOnItemShownListener(new MaterialShowcaseSequence.OnSequenceItemShownListener() { @Override public void onShow(MaterialShowcaseView itemView, int position) { } }); sequence.setConfig(config); |
Step 4
Set the initial target Button. This target button will be pointed first when the app is launched for the first time.
sequence.addSequenceItem(nav_home, getResources().getString(R.string.home_button), getResources().getString(R.string.ok_button)); |
Step 5
Add subsequent target buttons to display the features of that buttons. To add more subsequent target buttons we will use function addSequenceitem. To set the target we have specify the button which we want to focus in setTarget(Button). We need to display the text which will show the important features in regarding that activity in setContentText(text to be displayed). For a dismiss button we need to specify the a string in setDismissText(Dismiss button string)
sequence.addSequenceItem( new MaterialShowcaseView.Builder(this) .setTarget(nav_cam) .setDismissText(getResources().getString(R.string.ok_button)) .setContentText(getResources().getString(R.string.camera_button)) .build() ); sequence.addSequenceItem( new MaterialShowcaseView.Builder(this) .setTarget(nav_acc) .setDismissText(getResources().getString(R.string.ok_button)) .setContentText(getResources().getString(R.string.accounts_button)) .build() ); sequence.start(); |
Sequence.start is used to display the showcase.
Conclusion
Using this method users can easily have the knowledge of the functionality of the application and can navigate through the activities without wasting a lot of time in figuring out the functionality of the application.
Github
Resources
- Github repository for the Material Showcase view https://github.com/deano2390/MaterialShowcaseView
- Repository for showcase view https://github.com/amlcurran/ShowcaseView