Making App Intro using YouTube video

We all want to show users in our app some most important things to use our app when first staring the app. This feature calls App Intro or Onboarding Experience.

It is no problem to find good solution on Github to resolve App Intro with some drawables, but how to makes it more interesting to user? I think you’ll agree that watching video is a best way to present your app inside app.

So, let’s release this.

The first thing we need is to get API Key in Google Developer Console

a) We create new project and activate YouTube Data API

YouTube API Key

b) Now, we must create API Key for Android project, give it a name, paste our package name and SHA-1.

After this you’ll get generated API Key that looks like that: AIzaSyCKQSxрJFAHFHj9r2wfwfqkagkhFFa

Save it. We’ll use it in our app.

Now, create a new project in Android Studio.

a) Let’s add strings.xml:

<string name="intro_header">Introduction</string>     
<string name="skip_intro">Skip Intro</string>
<string name="error_player">Error initializing Youtube player: %1$s</string>

b) colors.xml:

<!-- Intro Youtube video -->     
<color name="intro_skip_normal">#9e9e9e</color>
<color name="intro_skip_active">#616161</color>

c) dimens.xml:

<!-- Additional margins including ones for Intro Youtube video -->     <dimen name="middle_margin">8dp</dimen>     
<dimen name="bottom_text_margin">40dp</dimen>

d) Now we must create directory color and inside it xml file intro_text_link.xml (this style will use for layouts):

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true"
android:color="@color/intro_skip_active" />
<item android:state_focused="true"
android:color="@color/intro_skip_active" />
<item android:color="@color/intro_skip_normal" />
</selector>

In this step we made some pre settings of our intro. Let’s go further. We need to download YouTube library archive here and connect it to our project.

Next step is to copy file YouTubeAndroidPlayerApi.jar from downloaded file and pate it to app/libs (switch to Project in project pane) and Sync with Gradle Files.

It’s time to write some code to make everything work fine.

Let’s create Java class, e.g. Config.java where we’ll store Google API Key and video id which will demonstrate our Intro (in all YouTube URL videos id is after “?v=”, for example in video www.youtube.com/watch?v=aScEqSidNf8 id is “aScEqSidNf8”):

public class Config {

//Google API Key
static final String API_KEY = "AIzaSyCKQSxрJFAHFHj9r2wfwfqkagkhFFa";
//YouTube video id for intro     
static final String YOUTUBE_INTRO_ID = "aScEqSidNf8";
}

Create a xml file inside drawable directory, which will be used for background color of Intro and for rounded corners:

a) intro_gradient.xml:

<?xml version="1.0" encoding="utf-8"?> 
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient
android:startColor="@color/colorPrimaryDark"
android:centerColor="@color/colorPrimary"
android:endColor="@color/colorPrimary"
android:angle="270" />
</shape>

b) intro_rounded_corners.xml:

<?xml version="1.0" encoding="utf-8"?> 
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape android:shape="rectangle" >
<solid android:color="@android:color/white" />
<corners android:radius="8dp" />
</shape>
</item>
</layer-list>

Let’s create a layout file activity_intro.xml for vertical and horizontal orientation:

a) vertical:

Image 1 — vertical orientation
Image 2 — vertical orientation

b) horizontal:

Image 1 — horizontal orientation
Image 2— horizontal orientation

Create a class YouTubeFailureRecoveryActivity:

We are almost finish. Now, create IntroActiviry.java:

And the last step is to add some permissions and declare activity in Manifest:

<uses-permission android:name="android.permission.INTERNET"/>
...
<activity android:name=".IntroActivity" />

The result of our work is here:

Intro result in portrait and landscape mode

Conclusion

I hope this article will be helpful for you and you’ll create a good intros with quality videos. If anyone will have questions I’m ready for discuss.

Happy coding :-)