Web Development: Build a 360-degree Video Player App With an Android App Template

Friday, March 27, 2020

Build a 360-degree Video Player App With an Android App Template

There's no doubt that we are living in the age of VR. VR videos and 360 videos have been popular for the last few years, and there are tons of 360-degree videos all over the internet. This popularity has been brought about by the release of some VR headsets such as Oculus Rift, HTC Vive, Google Daydream, PlayStation VR, e.t.c. A VR (Virtual reality) headset is a head-mounted device that provides virtual reality for the wearer. Virtual reality headsets are widely used with video games as well as other applications such as simulations.

Users want to enjoy the immersive virtual reality experience, and you can make this possible by building a 360-degree video player.

What are 360-degree Videos?

360-degree videos are videos that offer a full 360º by 180º panoramic field of view. They let you view up, down, left, right, and all-around complete with sound and sights, thereby providing a cinematic experience. Unlike standard videos, 360-degree videos let you view scenes from any perspective you choose.

So, in this tutorial, you are going to learn how to create a 360 video player using a template from CodeCanyon. The 360 video player will allow you to click and drag on the video and explore 360-degree videos and get a feel for what they can offer.

What is CodeCanyon?

CodeCanyon is an online marketplace that has hundreds of additional professional Android app templates and builder tools. Some of these are incredibly feature-rich and well-designed. You can sometimes save days, even months, of effort by using one of them.

CodeCanyon mobile Android app template bestsellers

Getting Started

To get started creating your Android app, you'll need to install Java and Android Studio. If this is your first Android app, you can read about how to get your computer set up in Hathibelagal's post on How to Get Started Making Android Apps.

Android SDK

How to Get Started Making Android Apps

Ashraff Hathibelagal

Get the Template and Unzip the Files

To start, download the 360 Video Player View template from CodeCanyon. You will get a link to download the files. Alternatively, you can find them in the download section of your account with your other purchased items.

Once you've downloaded the files, extract the file to a section of your computer where you can easily import them to Android Studio. You are now ready to build your Android app.

Features of the 360 Video Player View Template

This 360 player allows you to view your favorite 360-degree views and videos and gives you a better movie-watching experience. Notable features include:

ability to play and stream 360-degree videos
ability to play virtual reality videos
support for all kinds of .MP4 videos
3D viewing experience
use of device gyro sensor to navigate in the video

Import Project

To build your app, you'll need to download the project you created into Android Studio.

Extract the .zip from CodeCanyon. Now open Android Studio and you should see a display like this:

Select the Open an existing Android Studio Project option, browse the location where you extracted the project files, select the 360 Video Player .gradle files, and press OK. Wait a few minutes until the sync process is complete.

This would be a good time to explore the project code.

Gradle Configurations

The first important step is to change the application id.. Go to app > Gradle Scripts > build and change the applicationId to your id name, eg. com.yourdomainname.appname.

android {
    compileSdkVersion 23
    buildToolsVersion "23.0.3"

    defaultConfig {
        applicationId "com.videoplayer.videoview360"
        minSdkVersion 19
        targetSdkVersion 23
        versionCode 1
        versionName "1.0"
        multiDexEnabled true
    }

}

The application identifier should be unique if you wish to publish the app to the Google Play. Sync the project and wait for a few minutes until the sync process is complete.

Change the Application Name

Go to the strings.xml file and change the application name. Here my app name is "360 Video Player", you can change your app name to something like 360 Player.

<resources>
    <string name="app_name">360 Video Player</string>

</resources>

Change the App Color

Another aspect you can easily change is the color pallet of the app. To change the app color, go to res > values > colors.xml and make any changes you wish to, as shown below.

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#3F51B5</color>
    <color name="colorPrimaryDark">#303F9F</color>
    <color name="colorAccent">#FF4081</color>
</resources>

Run the App

You can now run the app on a physical device or an emulator. Connect your device to your computer with a USB cable and perform the following steps to enable USB debugging.

Go to Settings/System depending on your device
Select About phone.
Tap the Build number option seven times. The message You are now a developer should appear
Go to the settings page and tap Developer options.
In the Developer options window, enable USB debugging.

Once USB debugging is enabled, you can launch the app from Android Studio onto Your device:

On Android Studio, click Run from the toolbar.
Select the device from the drop-down menu and click OK.

Once Gradle finishes building, Android Studio should install the app on your connected device and start it.

Test the App

Finally, you can test the app.

Just open the new 360-degree app on your mobile phone. Click the OPEN GALLERY button at the bottom and choose the video you want to play from your phone. You can now explore the different ways to view your video.

Premium Android App Templates from CodeCanyon

App templates have proven to be a great way to accelerate your development project by saving both time and resources. You have seen how easy it is to use a template To build amazing Android applications. CodeCanyon offers a huge collection of Android templates ranging from delivery and ridesharing apps to news apps and games.

Be sure to check out some of the starter templates and full applications on CodeCanyon! If you have trouble deciding which template is right for you, these articles should help: