![test3.PNG](https://res.cloudinary.com/hpiynhbhq/image/upload/v1518664843/hzxgrf74pli5hruqifqj.png) #### What Will I Learn? - Integrate the Showcase library via gradle - Implement Simple Single Showcase - Implement Custom Showcase - Implement Sequence Showcase - How to reset the specific and all showcases #### Requirements - Android Studio (3.0 recommended) - Basic understanding of Android Studio tools - Understanding of Java Programming language - Understanding of xml layout or design in Android development - Undestanding how to include dependency on an Android app #### Difficulty - Intermediate #### Tutorial Contents What is MaterialShowcaseView? Showcase is a situation to show to user what, where or how is the function of a specific view. MaterialShowCaseView is a library using material design that provide showcase view, so we can tutor users to help better understanding of an android app like to guide where is the buy button, what is the function of filter button, etc. Integrate the project via gradle First, go to your build.gradle (the project gradle as shown below). ![new_showcase_demo_gradle.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1518580140/twkxqudllimqjb8qlfqb.png) In the ```allprojects``` section add this line ```maven { url "https://jitpack.io" }```. This is the allprojects section be like. ``` allprojects { repositories { google() jcenter() maven { url "https://jitpack.io" } } } ``` After that, we are going to include the dependecy via module:app gradle as shown below. ![new_showcase_demo_gradle.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1518580442/uchhkawmvyfd3mbfacrq.png) Add this line in the dependency section to include the material showcase dependency ```implementation 'com.github.deano2390:MaterialShowcaseView:1.2.0'``` Your dependency section should look like this. ``` dependencies { implementation fileTree(dir: 'libs', include: ['*.jar']) implementation 'com.android.support:appcompat-v7:26.1.0' implementation 'com.android.support.constraint:constraint-layout:1.0.2' implementation 'com.github.deano2390:MaterialShowcaseView:1.2.0' testImplementation 'junit:junit:4.12' androidTestImplementation 'com.android.support.test:runner:1.0.1' androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.1' } ``` Once you've done, sync the project and wait until finish. After the gradle has completed the sync, you can use the library on your project. Creating the buttons to go to simple, custom and sequence showcase First, we create the layout by dragging 4 buttons that contains simple, custom, sequence showcase and reset all the showcase like something below. Don't forget to set the constraint if you are using constraint as its parent. ![new_main.PNG](https://res.cloudinary.com/hpiynhbhq/image/upload/v1518583484/beb0wwnt7klsujg0smkb.png) After that, go to the MainActivity.java class to get the reference of each button using findViewById like code below. ``` mSingleButton = findViewById(R.id.single_button); mCustomButton = findViewById(R.id.custom_button); mSequenceButton = findViewById(R.id.sequence_button); ``` Then, we add the listener for the ```mSingleButton``` to go to SingleTutorialActivity using intent using code below. ``` mSingleButton.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { Intent intent = new Intent(MainActivity.this, SingleTutorialActivity.class); startActivity(intent); } }); ``` Once you've done, we're going to make the SingleTutorialActivity class. Implementing the Simple Single Showcase First, we are going to create the activity using these steps: - Right click on our package in java folder and create new activity as shown below. ![new_activity_tutor.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1518610036/atj5czbnvrwewdhzv0xz.png) - Name your class as shown below, in this case i named id SingleTutorialActivity. Don't forget to extends the superclass using AppCompatActivity for compability reason. After that, click OK. ![new_class_tutor.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1518627274/w4fzj7kyvf5bzwnh9xeb.png) - Don't forget to add this line to AndroidManifest.xml file to prevent crash when opening the activity. ``` ``` inside the application tag as shown below. ```

``` After the SingleTutorial has been created, we need to make the layout so we can use it on this SingleTutorialActivity class. Follow this steps: - Click to expand the res folder and right click the layout resource directory as shown below to place under the layout resource directory. ![new_layout_tutor.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1518610384/xyptjvihsbghljyzj6dr.png) - Then, name the layout resource file and click OK. ![test0.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1518627413/pqu9fpltanj7bjhvce8f.png) Once the layout has been created, drag and set the constraints or create the 2 buttons using xml depends on your like. The buttons are show single tutor button and reset the specific tutor button. Give them id to refer in the SingleTutorialActivity later. Your single tutorial layout should look like this. ![test.PNG](https://res.cloudinary.com/hpiynhbhq/image/upload/v1518620874/j9jxs0gcoglkea0tfz2v.png) And the single tutorial xml should look like this. ```

Topics