Geekly Articles each Day
📜 ⬆️ ⬇️

App Intro using YouTube videos

Hello friends! Some time ago I wrote an article about the App Intro (Onboarding Experience) , with the help of which we can give the user of our application an introductory material upon the first launch.

Now I want to tell and show how you can implement App Intro using a video from YouTube.
Let's say that you are doing a super-mega cool project and you have its promotional video. Our goal is to show this video inside your application as an introductory one and let the user know that he has made the right choice.


')



Intro (introductory informational activation that starts when the application is first started on the device) based on YouTube videos can be very useful to show the user all the features in real video. Or it can be a commercial - not so much features as advertising for what is interesting, useful, cool, etc.

So proceed to the implementation:

1) First we need to create a project and get an API Key in the Google Developer Console :

a) create a project and activate YouTube Data API:



b) Create an API Key for an Android application: give a name (arbitrary), package your project and generate SHA-1



After these steps, you will receive an API Key, such a plan: AIzaSyCKQSxJFAHFHj9r2wfwfqkagkhFFa

Save it, we will use it.

2) Create a new project in Android Studio:

a) add to 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) in colors.xml:

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


c) in dimens.xml:

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


d) create a color directory and intro_text_link.xml file in it (we will use this style in 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" /> <!-- default --> </selector>


At this stage, we need to connect the library to view video clips.
Download the YouTube library archive from this link.

Next, you need to copy and paste the YouTubeAndroidPlayerApi.jar file into app / libs (switch to Project in the studio), and click the Sync button on the toolbar (or in the menu: Tools> Android> Sync Project with Gradle Files)

3) Now we will create a Java Config class in which we will store the Google API Key and id for the video that we will use in our Intro (in the URL followed by "? V =", for example, for the video www.youtube.com/watch? v = aScEqSidNf8 id will be aScEqSidNf8):

 public class Config { //Google API Key static final String API_KEY = "AIzaSyCKQSxJFAHFHj9r2wfwfqkagkhFFa"; //YouTube video id for intro static final String YOUTUBE_INTRO_ID = "aScEqSidNf8"; }


4) Now let's create xml files inside the drawable folder, which will be responsible for the background of our Intro and for the rounding of 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>


5) Now create a layout file, activity_intro.xml for our intro (vertical orientation):

 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@drawable/intro_gradient"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_gravity="center" android:gravity="center_horizontal" android:layout_marginStart="@dimen/activity_horizontal_margin" android:layout_marginEnd="@dimen/activity_horizontal_margin" android:orientation="vertical" android:background="@drawable/intro_rounded_corner"> <TextView android:text="@string/intro_header" android:layout_width="wrap_content" android:layout_height="wrap_content" android:gravity="center" android:textAppearance="@style/TextAppearance.AppCompat.Headline" /> <com.google.android.youtube.player.YouTubePlayerView android:id="@+id/youtube_view" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginBottom="@dimen/middle_margin" /> <ImageView android:src="@mipmap/ic_launcher" android:contentDescription="@string/app_name" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginBottom="@dimen/middle_margin" /> <TextView android:text="@string/app_name" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginBottom="@dimen/bottom_text_margin" android:textAppearance="@style/TextAppearance.AppCompat.Title" /> <TextView android:id="@+id/skip_intro" android:text="@string/skip_intro" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginBottom="@dimen/activity_vertical_margin" android:textColor="@color/intro_text_link" /> </LinearLayout> </LinearLayout>


And for horizontal orientation (we create the layout-land directory in which we place the identical activity_intro.xml file):

 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@drawable/intro_gradient"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal" android:background="@drawable/intro_rounded_corner" android:layout_gravity="center" android:gravity="center_vertical" android:baselineAligned="false" android:layout_marginStart="@dimen/activity_horizontal_margin" android:layout_marginEnd="@dimen/activity_horizontal_margin"> <LinearLayout android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1" android:orientation="vertical" android:layout_marginTop="@dimen/activity_vertical_margin"> <ImageView android:src="@mipmap/ic_launcher" android:contentDescription="@string/app_name" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:layout_marginBottom="@dimen/middle_margin" /> <TextView android:text="@string/app_name" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:layout_marginBottom="@dimen/bottom_text_margin" android:textAppearance="@style/TextAppearance.AppCompat.Title" /> <TextView android:id="@+id/skip_intro" android:text="@string/skip_intro" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:layout_marginBottom="@dimen/activity_vertical_margin" android:textColor="@color/intro_text_link" /> </LinearLayout> <com.google.android.youtube.player.YouTubePlayerView android:id="@+id/youtube_view" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="3" /> </LinearLayout> </LinearLayout>


6) Create the YouTubeFailureRecoveryActivity class. We take it out to a separate class, because in the case of the presence of YouTube functionality in other parts of the application, the same class is used:

 public abstract class YouTubeFailureRecoveryActivity extends YouTubeBaseActivity implements YouTubePlayer.OnInitializedListener { private static final int RECOVERY_DIALOG_REQUEST = 1; @Override public void onInitializationFailure(YouTubePlayer.Provider provider, YouTubeInitializationResult errorReason) { if (errorReason.isUserRecoverableError()) { errorReason.getErrorDialog(this, RECOVERY_DIALOG_REQUEST).show(); } else { String errorMessage = String.format(getString(R.string.error_player), errorReason.toString()); Toast.makeText(this, errorMessage, Toast.LENGTH_LONG).show(); } } @Override protected void onActivityResult(int requestCode, int resultCode, Intent data) { if (requestCode == RECOVERY_DIALOG_REQUEST) { // Retry initialization if user performed a recovery action getYouTubePlayerProvider().initialize(Config.API_KEY, this); } } protected abstract YouTubePlayer.Provider getYouTubePlayerProvider(); }


7) Create IntroActivity.java:

 public class IntroActivity extends YouTubeFailureRecoveryActivity { YouTubePlayerView youTubeView; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN); setContentView(R.layout.activity_intro); youTubeView = (YouTubePlayerView) findViewById(R.id.youtube_view); youTubeView.initialize(Config.API_KEY, this); //  Intro     Skip Intro TextView skipIntro = (TextView) findViewById(R.id.skip_intro); skipIntro.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { /*  Intro    , ,    *          Intro,  *     : intent.putExtra(EXTRA_TEXT, "MainActivity"). *   :    -  Intro    *  -     Skip Intro   Intro. *     -  Intro       - *    ,    Intro. */ Intent intent = getIntent(); String extra = intent.getStringExtra(MainActivity.EXTRA_TEXT); if (extra == null) { intent.setClass(getApplicationContext(), MainActivity.class); startActivity(intent); } finish(); } }); } @Override protected YouTubePlayer.Provider getYouTubePlayerProvider() { return youTubeView; } @Override public void onInitializationSuccess(YouTubePlayer.Provider provider, YouTubePlayer youTubePlayer, boolean b) { if (!b) { youTubePlayer.cueVideo(Config.YOUTUBE_INTRO_ID); } } }


The last step in the implementation of this functionality is the addition of permissions to the Manifest and the IntroActivity declaration:

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


This is the result of the work done in the vertical and horizontal orientation:



I have tried in this article to tell a useful thing, which I hope will be useful for you to create interesting projects and will be useful. If you have any questions, I will try to answer them.

Source: https://habr.com/ru/post/306164/

More articles:


All Articles