KenBurnsView Splash creen

Hi Friends In this Post I will show you how to add a Splash Screen to your Android App with KenBurnsView.

This Splash Screen gives your App a Nice Intro look to your Android App.

Lets start the Tutorial:

Note: Please watch the video for better understanding.  

You can Implement KenBurnsView Splash Screen in your Existing Android Project or you can Practice by starting a New Android Project. I suggest you to practice in new Project.

Procedure:

  • Create New Android Studio Project and Name it as your Wish. And please change My Package name in code where ever needed with your package name. I will mention when it is needed.
  • Then create a New Layout file with name activity_splash.xml and paste the below code in it. Please remove any existing code in it before pasting the code.
<?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:fitsSystemWindows="true"
android:orientation="vertical">

<com.karthik.kenburnsview.KenBurnsView
android:id="@+id/ken_burns_images"
android:layout_width="match_parent"
android:layout_height="match_parent" />

<ImageView
android:id="@+id/imagelogo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="106dp"
android:src="@drawable/logo" />

<com.karthik.kenburnsview.RobotoTextView
android:id="@+id/welcome_text"
style="@style/TextViewAppearance.Headline2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/imagelogo"
android:layout_centerHorizontal="true"
android:layout_marginTop="10dp"
android:alpha="0.0"
android:text="@string/app_name"
android:textColor="@color/global_color_primary_light" />

</RelativeLayout>
  • Change com.karthik.kenburnsview with your package name in above code. You have to change it in two places.
  • Then copy two images with names logo.png (size 96 x 96 pixels) and splash_background.jpg (size 700 x 476 pixels) into drawable folder of your project.
  • Next create new directory(folder) under res directory and name the directory as anim 
  • Now under anim folder create 3 new xml files with names close_next.xml, open_next.xml & translate_top_to_center.xml and paste following codes in their respective xml files.

close_next.xml

<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="1200"
android:fromYDelta="-100%p"
android:interpolator="@android:anim/accelerate_decelerate_interpolator"
android:startOffset="500"
android:toYDelta="0%p" />

open_next.xml

<?xml version="1.0" encoding="UTF-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">

<translate
android:interpolator="@android:anim/accelerate_interpolator"
android:fromXDelta="100%"
android:toXDelta="0"
android:duration="300"/>

</set>

translate_top_to_center.xml

<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="1200"
android:fromYDelta="-100%p"
android:interpolator="@android:anim/accelerate_decelerate_interpolator"
android:startOffset="500"
android:toYDelta="0%p" />
  • Next create a attrs.xml file under values folder and paste below code into it.
<?xml version="1.0" encoding="utf-8"?>
<resources>
<declare-styleable name="RobotoTextView">
<attr name="typeface" format="enum">
<enum name="robotoBlack" value="0" />
<enum name="robotoBlackItalic" value="1" />
<enum name="robotoBold" value="2" />
<enum name="robotoBoldItalic" value="3" />
<enum name="robotoBoldCondensed" value="4" />
<enum name="robotoBoldCondensedItalic" value="5" />
<enum name="robotoCondensed" value="6" />
<enum name="robotoCondensedItalic" value="7" />
<enum name="robotoItalic" value="8" />
<enum name="robotoLight" value="9" />
<enum name="robotoLightItalic" value="10" />
<enum name="robotoMedium" value="11" />
<enum name="robotoMediumItalic" value="12" />
<enum name="robotoRegular" value="13" />
<enum name="robotoThin" value="14" />
<enum name="robotoThinItalic" value="15" />
</attr>
</declare-styleable>
</resources>
  • Next add below color values to colors.xml  file under values folder.
<color name="global_color_primary_light">#f5f5f5</color>
<color name="global_color_green_primary">#4caf50</color>
<color name="global_color_green_primary_light">#c8e6c9</color>
<color name="global_color_green_primary_dark">#388e3c</color>
<color name="global_color_green_accent">#ffc107</color>
<color name="global_color_green_control_activated">#ffc107</color>
  • Next add below code to styles.xml file under values folder.
<style name="TextViewAppearance.Headline2" parent="@style/TextViewAppearance">
<item name="typeface">robotoLight</item>
<item name="android:textSize">24sp</item>
<item name="android:textColor">@color/global_color_primary_light</item>
</style>

<style name="TextViewAppearance" parent="@android:style/TextAppearance.Widget.TextView">
<item name="android:layout_width">wrap_content</item>
<item name="android:layout_height">wrap_content</item>
<item name="typeface">robotoRegular</item>
<item name="android:paddingTop">8dp</item>
<item name="android:paddingBottom">8dp</item>
<item name="android:paddingLeft">26dp</item>
<item name="android:paddingRight">26dp</item>
<!-- Supports API Level 17+ -->
<!-- <item name="android:paddingStart">26dp</item> -->
<!-- Supports API Level 17+ -->
<!-- <item name="android:paddingEnd">26dp</item> -->
</style>
  • Next replace entire code in dimens.xml under values folder.
<resources>
<!-- Default screen margins, per the Android Design guidelines. -->
<dimen name="activity_horizontal_margin">16dp</dimen>
<dimen name="activity_vertical_margin">16dp</dimen>
<dimen name="fab_margin">16dp</dimen>
</resources>
  • Next create a folder under main folder in your project with name assets and copy contents of this zip file.

By this we have finished dealing with xml files. In Part II I will show you adding Java files.

PART II