Example Animation
In this tutorial, we are going to learn how to add a video as a background in our android app with a slider that changes information when we scroll left and right on our app screen.
Adding video into app may increase the size of your application but it will definitely provide a premium and professional feel to your application,
It can also be used as a demo screen of your app
Step 1:
First, we add an XML file that contains our video view, add a XML file and names it – ” video_background.xml”
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <VideoView android:id="@+id/mVideoView" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_alignParentBottom="true" android:layout_alignParentTop="true" android:layout_gravity="center" /> </RelativeLayout>
Step 2:
Create our initial app launch screen and name it “activity_initial_launch.xml”
and we include our video_background.xml inside it
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#29000000"> <include layout="@layout/video_background" /> <LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentTop="true" android:layout_alignParentLeft="true" android:layout_alignParentStart="true"> <ImageView android:layout_width="50dp" android:layout_height="50dp" android:layout_marginTop="39dp" android:src="@drawable/siteicon" android:layout_marginLeft="100dp" android:layout_marginStart="100dp" /> <TextView android:layout_width="wrap_content" android:text=" App name" android:layout_marginTop="52dp" android:layout_height="wrap_content" android:textSize="25dp" android:textColor="#FFFFFF" android:id="@+id/textView5" /> </LinearLayout> <android.support.v4.view.ViewPager android:id="@+id/view_pager" android:layout_width="match_parent" android:layout_height="match_parent" /> <LinearLayout android:id="@+id/layoutDots" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_alignParentBottom="true" android:layout_marginBottom="100dp" android:gravity="center" android:orientation="horizontal"> </LinearLayout> <View android:layout_width="match_parent" android:layout_height="1dp" android:alpha=".5" android:layout_above="@id/layoutDots" android:background="@android:color/white" /> <LinearLayout android:layout_width="wrap_content" android:layout_above="@+id/button" android:layout_height="wrap_content"> <Button android:id="@+id/btn_next" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_alignParentRight="true" android:background="@null" android:visibility="gone" android:text="next" android:textColor="@android:color/white" /> <Button android:id="@+id/btn_skip" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_alignParentLeft="true" android:visibility="gone" android:background="@null" android:text="" android:textColor="@android:color/white" /> </LinearLayout> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:id="@+id/button" android:layout_alignParentBottom="true" android:orientation="horizontal"> <Button android:id="@+id/login" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="0.5" android:background="#FF2D2D2D" android:text="LOG IN" android:textColor="@android:color/white" /> <Button android:id="@+id/signUp" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="0.5" android:background="#2196F3" android:text="SIGN IN" android:textColor="@android:color/white" /> </LinearLayout> </RelativeLayout>
Step 3:
Add these color values in your color.xml file
<?xml version="1.0" encoding="utf-8"?> <resources> <!-- Screens background color--> <color name="bg_screen1">#f64c73</color> <color name="bg_screen2">#20d2bb</color> <color name="bg_screen3">#3395ff</color> <color name="bg_screen4">#c873f4</color> <!-- dots inactive colors --> <color name="dot_dark_screen1">#d1395c</color> <color name="dot_dark_screen2">#14a895</color> <color name="dot_dark_screen3">#2278d4</color> <color name="dot_dark_screen4">#a854d4</color> <!-- dots active colors --> <color name="dot_light_screen1">#f98da5</color> <color name="dot_light_screen2">#8cf9eb</color> <color name="dot_light_screen3">#93c6fd</color> <color name="dot_light_screen4">#e4b5fc</color> <array name="array_dot_active"> <item>@color/dot_light_screen1</item> <item>@color/dot_light_screen2</item> <item>@color/dot_light_screen3</item> <item>@color/dot_light_screen4</item> </array> <array name="array_dot_inactive"> <item>@color/dot_dark_screen1</item> <item>@color/dot_dark_screen2</item> <item>@color/dot_dark_screen3</item> <item>@color/dot_dark_screen4</item> </array> </resources>
Now we are going to create 2 slides XML s which help us to display different text messages when we swipe on app screen.
Note : make as any number of them according to you need
slider1.xml
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@android:color/transparent" > <LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:gravity="center_horizontal" android:orientation="vertical" android:layout_marginBottom="181dp" android:layout_alignParentBottom="true" android:layout_centerHorizontal="true"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Your Fitness Partner" android:textColor="@android:color/white" android:textSize="20dp" android:textStyle="bold" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="20dp" android:paddingLeft="20dp" android:paddingRight="20dp" android:text="Help you to chart and schedule your workouts" android:textAlignment="center" android:textColor="@android:color/white" android:textSize="15dp" /> </LinearLayout> </RelativeLayout>
slider2.xml
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@android:color/transparent" > <LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:gravity="center_horizontal" android:orientation="vertical" android:layout_marginBottom="181dp" android:layout_alignParentBottom="true" android:layout_centerHorizontal="true"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Keep track body index" android:textColor="@android:color/white" android:textSize="20dp" android:textStyle="bold" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="20dp" android:paddingLeft="20dp" android:paddingRight="20dp" android:text="Help you to chart and schedule your workouts" android:textAlignment="center" android:textColor="@android:color/white" android:textSize="15dp" /> </LinearLayout> </RelativeLayout>
Step 4:
Now add a “raw” folder on your project (right click on “res” folder —> New —>Android resource directory —>set resource type as “raw” —>OK)
copy your video file into “raw” folder name it as “bg_video” (Recommended format – .mp4, with resolution according to your needs (708*704 in the example video))
Step 5:
We finished with designs and resources now we can move on to our code.
Create a java class and name it as PrefManager
package com.test.fitnessapp; /** * Created by Sarun on 05-04-2017. */ import android.content.Context; import android.content.SharedPreferences; /** * Created by Lincoln on 05/05/16. */ public class PrefManager { SharedPreferences pref; SharedPreferences.Editor editor; Context _context; // shared pref mode int PRIVATE_MODE = 0; // Shared preferences file name private static final String PREF_NAME = "welcome"; private static final String IS_FIRST_TIME_LAUNCH = "IsFirstTimeLaunch"; public PrefManager(Context context) { this._context = context; pref = _context.getSharedPreferences(PREF_NAME, PRIVATE_MODE); editor = pref.edit(); } public void setFirstTimeLaunch(boolean isFirstTime) { editor.putBoolean(IS_FIRST_TIME_LAUNCH, isFirstTime); editor.commit(); } public boolean isFirstTimeLaunch() { return pref.getBoolean(IS_FIRST_TIME_LAUNCH, true); } }
Step 6:
We finished with designs now we can move on to our activity code.
Create an activity called “Launch_Activity”
package com.test.fitnessapp; import android.content.Context; import android.content.Intent; import android.graphics.Color; import android.media.MediaPlayer; import android.net.Uri; import android.os.Build; import android.os.Bundle; import android.support.v4.view.PagerAdapter; import android.support.v4.view.ViewPager; import android.support.v7.app.AppCompatActivity; import android.text.Html; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.view.Window; import android.view.WindowManager; import android.widget.Button; import android.widget.LinearLayout; import android.widget.TextView; import android.widget.VideoView; import com.test.fitnessapp.R; import com.test.fitnessapp.PrefManager; /** * Created by Sarun on 05-04-2017. */ public class Launch_Activity extends AppCompatActivity { private VideoView mVideoView; private ViewPager viewPager; private MyViewPagerAdapter myViewPagerAdapter; private LinearLayout dotsLayout; private TextView[] dots; private int[] layouts; private Button btnSkip, btnNext; private PrefManager prefManager; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); prefManager = new PrefManager(this); if (!prefManager.isFirstTimeLaunch()) { launchHomeScreen(); finish(); } requestWindowFeature(Window.FEATURE_NO_TITLE); getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN ); setContentView(R.layout.activity_initial_launch); mVideoView = (VideoView) findViewById(R.id.mVideoView); Uri uri = Uri.parse("android.resource://"+getPackageName()+"/"+R.raw.bg_video); mVideoView.setVideoURI(uri); mVideoView.start(); mVideoView.setOnPreparedListener(new MediaPlayer.OnPreparedListener() { @Override public void onPrepared(MediaPlayer mediaPlayer) { mediaPlayer.setLooping(true); } }); viewPager = (ViewPager) findViewById(R.id.view_pager); dotsLayout = (LinearLayout) findViewById(R.id.layoutDots); btnSkip = (Button) findViewById(R.id.btn_skip); btnNext = (Button) findViewById(R.id.btn_next); // layouts of all welcome sliders // add few more layouts if you want layouts = new int[]{ R.layout.slider1, R.layout.slider2, R.layout.slider1, R.layout.slider2, }; // adding bottom dots addBottomDots(0); // making notification bar transparent changeStatusBarColor(); myViewPagerAdapter = new MyViewPagerAdapter(); viewPager.setAdapter(myViewPagerAdapter); viewPager.addOnPageChangeListener(viewPagerPageChangeListener); btnSkip.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { launchHomeScreen(); } }); btnNext.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { // checking for last page // if last page home screen will be launched int current = getItem(+1); if (current < layouts.length) { // move to next screen viewPager.setCurrentItem(current); } else { launchHomeScreen(); } } }); } private void addBottomDots(int currentPage) { dots = new TextView[layouts.length]; int[] colorsActive = getResources().getIntArray(R.array.array_dot_active); int[] colorsInactive = getResources().getIntArray(R.array.array_dot_inactive); dotsLayout.removeAllViews(); for (int i = 0; i < dots.length; i++) { dots[i] = new TextView(this); dots[i].setText(Html.fromHtml("•")); dots[i].setTextSize(35); dots[i].setTextColor(colorsInactive[currentPage]); dotsLayout.addView(dots[i]); } if (dots.length > 0) dots[currentPage].setTextColor(colorsActive[currentPage]); } private int getItem(int i) { return viewPager.getCurrentItem() + i; } private void launchHomeScreen() { prefManager.setFirstTimeLaunch(false); startActivity(new Intent(Launch_Activity.this, MainActivity.class)); finish(); } // viewpager change listener ViewPager.OnPageChangeListener viewPagerPageChangeListener = new ViewPager.OnPageChangeListener() { @Override public void onPageSelected(int position) { addBottomDots(position); // changing the next button text 'NEXT' / 'GOT IT' if (position == layouts.length - 1) { // last page. make button text to GOT IT btnNext.setText("GOT IT"); btnSkip.setVisibility(View.GONE); } else { // still pages are left btnNext.setText("NEXT"); btnSkip.setVisibility(View.VISIBLE); } } @Override public void onPageScrolled(int arg0, float arg1, int arg2) { } @Override public void onPageScrollStateChanged(int arg0) { } }; /** * Making notification bar transparent */ private void changeStatusBarColor() { if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) { Window window = getWindow(); window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS); window.setStatusBarColor(Color.TRANSPARENT); } } /** * View pager adapter */ public class MyViewPagerAdapter extends PagerAdapter { private LayoutInflater layoutInflater; public MyViewPagerAdapter() { } @Override public Object instantiateItem(ViewGroup container, int position) { layoutInflater = (LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE); View view = layoutInflater.inflate(layouts[position], container, false); container.addView(view); return view; } @Override public int getCount() { return layouts.length; } @Override public boolean isViewFromObject(View view, Object obj) { return view == obj; } @Override public void destroyItem(ViewGroup container, int position, Object object) { View view = (View) object; container.removeView(view); } } }
Add your activity in Android manifest and build your project.
If you got any errors or have any doubts feel free to ask in the comment section