Kotlin Video Slider Tutorial Android App Intro Animation Slideshow

You will learn Kotlin Video Slider Tutorial with example here.

You can use this video slider or slideshow as an animated app intro also.

We will use the circular dot navigation indicator to tell user which slide is currently being shown.

Generally, user need to show app intro only once when he is opening the app for very first time. We will also use this method.

If you want to implement this example with Java code, then visit video slider animation android example.

If you want to make image slider, then read image slideshow with circular dot navigation example.

Download Source Code For Kotlin Video Slider

[sociallocker]Download Kotlin_Video_Slider[/sociallocker]

Step 1. Update the buil.gradle file

Add following lines of code to build.gradle(Module:app) file of your android studio project.

This lines will implement necessary classes from Github Library.

Full code for build.gradle(Module:app) should look like below

Step 2. Adding raw directory

We need to add the “raw” folder under the “res” directory. We will add our videos in raw folder.

Steps to create raw directory and add videos to into it.

  • Give left click on res directory at left menu side of the android studio.
  • One Right click on res directory, various options will open
  • From that menu, follow New-> Android resource directory
app intro animation video slider android, kotlin video slider

add raw

  • When you click on Android resource directory, dialog will open as shown in the below image.
  • In Directory name, give value as “raw.“
app intro animation video slider android, kotlin video slider

Naming raw

Now save your video in the raw directory.

We have added two videos in this. You can download them by clicking following link.

[sociallocker]Download videos[/sociallocker]

Step 3. Slide Layout

We need to create one layout resource file.

This file will represent the layout for every single slide of the view pager.

Make one layout resource file named swipe_fragment.xml and add below source code

Step 4. Custom Adapter For View Pager

Now let us create a custom adapter which will set data for view pager to show.

Prepare a new kotlin class and give it a name “SlidingImage_Adapter.kt”

Following will be coding lines for it.

Replace Package name

There is a package name present in the adapter class.

Below line includes package name.

You must replace it with your app’s package name.

Two videos are there in this demo, so you need to update package name at two places.(If else loop is there in adapter class, this is where you will update package name)

Step 5. Saving Shared Preference

App intro is shown only once in app. So to implement this feature we need to store if user is opening the app for the first time or not.

For this, we will make a new class named PreferenceHelper.kt

Copy following code in it

Step 6. Welcome Activity

After user have shown app intro once, we should redirect him to welcome activity or the default activity of the app every time he opens the app.

So make a new activity named WelcomeActivity.

Copy below code into activity_welcome.xml

Paste following code into WelcomeActivity.kt class

Step 7. Change Main Activity

Finally, make some changes in Main Activity.

Add below code in activity_main.xml

Source code for MainActivity.kt is like below

Look at below method

Above method is used to remove top and bottom navigation bars.

So it will enable us to show the video on full screen of android device.

Final Output

After implementing all the above steps, you should get output like below video

So it was all about Kotlin Video Slider tutorial.

Hope you enjoyed it and also understand it!

Keep sharing DemoNuts tutorials in your social media.

Comment out your questions, We will answer you in best possible ways.

Hardik Parsania

I am mobile app developer. I am always passionate about solving complex and real world problems.I have developed many apps with great interest and superior logical skills.

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *