Sunday, November 1, 2015

Splash Screen To Android Projects (nineoldandroids)


.

How To Add Splash Screen To Android Projects (Based on nineoldandroids library)
This tutorial is based on the tutorial http://www.androidsources.com/index.php/2015/08/06/android-splash-screen-and-welcome-screen-tutorial-using-android-studio/ . It is implemented on Android Studio 1.4
1) Create a New Blank Activity Project, e.g. MySplashScreen1
2) Import nineoldandroids library
Module is added to the project.
2b) Add dependencies statement to build file: build.gradle (Module: app)
dependencies {
   compile fileTree(dir: 'libs', include: ['*.jar'])
   testCompile 'junit:junit:4.12'
   compile 'com.android.support:appcompat-v7:23.1.0'
   compile 'com.android.support:design:23.1.0'
   compile project(':nineoldandroids-2.4.0')
}
2c) Clean and Build project.
3) Create a SplashScreen Controller
3.1) Create a new Empty Activity and name it as WelcomeScreen.java
3.2) Add the following codes to the file
File Name: WelcomeScreen.java

package com.notarazi.mydrawer1;



 import android.graphics.Color;

 import android.os.Bundle;

 import android.support.v4.app.Fragment;

 import android.support.v4.app.FragmentManager;

 import android.support.v4.app.FragmentStatePagerAdapter;

 import android.support.v4.view.PagerAdapter;

 import android.support.v4.view.ViewPager;

 import android.support.v7.app.AppCompatActivity;

 import android.view.View;

 import android.view.ViewGroup;

 import android.view.Window;

 import android.view.WindowManager;

 import android.widget.Button;

 import android.widget.ImageButton;

 import android.widget.ImageView;

 import android.widget.LinearLayout;


 import com.nineoldandroids.view.ViewHelper;



 public class WelcomeScreen extends AppCompatActivity {


        static final int TOTAL_PAGES = 4;


        ViewPager pager;

        PagerAdapter pagerAdapter;

        LinearLayout circles;

        Button btnSkip;

        Button btnDone;

        ImageButton btnNext;

        boolean isOpaque = true;


        @Override

        protected void onCreate(Bundle savedInstanceState) {

           super.onCreate(savedInstanceState);

           Window window = getWindow();

           window.setFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS, WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);


           setContentView(R.layout.activity_welcome_screen);

           btnSkip = Button.class.cast(findViewById(R.id.btn_skip));

           btnSkip.setOnClickListener(new View.OnClickListener() {

               @Override

               public void onClick(View v) {

                   endTutorial();

               }

           });


           btnNext = ImageButton.class.cast(findViewById(R.id.btn_next));

           btnNext.setOnClickListener(new View.OnClickListener() {

               @Override

               public void onClick(View v) {

                   pager.setCurrentItem(pager.getCurrentItem() + 1, true);

               }

           });


           btnDone = Button.class.cast(findViewById(R.id.done));

           btnDone.setOnClickListener(new View.OnClickListener() {

               @Override

               public void onClick(View v) {

                   endTutorial();

               }

           });


           pager = (ViewPager) findViewById(R.id.pager);

           pagerAdapter = new ScreenSlideAdapter(getSupportFragmentManager());

           pager.setAdapter(pagerAdapter);

           pager.setPageTransformer(true, new CrossfadePageTransformer());

           pager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {

               @Override

               public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

                   if (position == TOTAL_PAGES - 2 && positionOffset > 0) {

                       if (isOpaque) {

                           pager.setBackgroundColor(Color.TRANSPARENT);

                           isOpaque = false;

                       }

                   } else {

                       if (!isOpaque) {

                           pager.setBackgroundColor(getResources().getColor(R.color.primary_material_light));

                           isOpaque = true;

                       }

                   }

               }


               @Override

               public void onPageSelected(int position) {

                   setIndicator(position);

                   if (position == TOTAL_PAGES - 2) {

                       btnSkip.setVisibility(View.GONE);

                       btnNext.setVisibility(View.GONE);

                       btnDone.setVisibility(View.VISIBLE);

                   } else if (position < TOTAL_PAGES - 2) {

                       btnSkip.setVisibility(View.VISIBLE);

                       btnNext.setVisibility(View.VISIBLE);

                       btnDone.setVisibility(View.GONE);

                   } else if (position == TOTAL_PAGES - 1) {

                       endTutorial();

                   }

               }


               @Override

               public void onPageScrollStateChanged(int state) {


               }

           });


           buildCircles();

        }


        @Override

        protected void onDestroy() {

           super.onDestroy();

           if (pager != null) {

               pager.clearOnPageChangeListeners();

           }

        }


        private void buildCircles() {

           circles = LinearLayout.class.cast(findViewById(R.id.circles));


           float scale = getResources().getDisplayMetrics().density;

           int padding = (int) (5 * scale + 0.5f);


           for (int i = 0; i < TOTAL_PAGES - 1; i++) {

           ImageView circle = new ImageView(this);

               circle.setImageResource(R.drawable.ic_checkbox_blank_circle_white_18dp);

               circle.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT));

               circle.setAdjustViewBounds(true);

               circle.setPadding(padding, 0, padding, 0);

               circles.addView(circle);

           }


           setIndicator(0);

        }


        private void setIndicator(int index) {

           if (index < TOTAL_PAGES) {

               for (int i = 0; i < TOTAL_PAGES - 1; i++) {

                   ImageView circle = (ImageView) circles.getChildAt(i);

                   if (i == index) {

                       circle.setColorFilter(getResources().getColor(R.color.text_selected));

                   } else {

                       circle.setColorFilter(getResources().getColor(R.color.transparent_bg));

                   }

               }

           }

        }


        private void endTutorial() {

           finish();

           overridePendingTransition(R.anim.abc_fade_in, R.anim.abc_fade_out);

        }


        @Override

        public void onBackPressed() {

           if (pager.getCurrentItem() == 0) {

               super.onBackPressed();

           } else {

               pager.setCurrentItem(pager.getCurrentItem() - 1);

           }

        }


        private class ScreenSlideAdapter extends FragmentStatePagerAdapter {


           public ScreenSlideAdapter(FragmentManager fm) {

               super(fm);

           }


           @Override

           public Fragment getItem(int position) {

               WelcomeScreenFragment welcomeScreenFragment = null;

               switch (position) {

                   case 0:

                       welcomeScreenFragment = WelcomeScreenFragment.newInstance(R.layout.welcome_screen1);

                       break;

                   case 1:

                       welcomeScreenFragment = WelcomeScreenFragment.newInstance(R.layout.welcome_screen2);

                       break;

                   case 2:

                       welcomeScreenFragment = WelcomeScreenFragment.newInstance(R.layout.welcome_screen3);

                       break;

                   case 3:

                       welcomeScreenFragment = WelcomeScreenFragment.newInstance(R.layout.welcome_screen4);

                       break;

               }


               return welcomeScreenFragment;

           }


           @Override

           public int getCount() {

               return TOTAL_PAGES;

           }

        }


        public class CrossfadePageTransformer implements ViewPager.PageTransformer {


           @Override

           public void transformPage(View page, float position) {

               int pageWidth = page.getWidth();


               View backgroundView = page.findViewById(R.id.welcome_fragment);

               View text_head = page.findViewById(R.id.screen_heading);

               View text_content = page.findViewById(R.id.screen_desc);


               if (0 <= position && position < 1) {

                   ViewHelper.setTranslationX(page, pageWidth * -position);

               }

               if (-1 < position && position < 0) {

                   ViewHelper.setTranslationX(page, pageWidth * -position);

               }


               if (position <= -1.0f || position >= 1.0f) {


               } else if (position == 0.0f) {

               } else {

                   if (backgroundView != null) {

                       ViewHelper.setAlpha(backgroundView, 1.0f - Math.abs(position));


                   }


                   if (text_head != null) {

                       ViewHelper.setTranslationX(text_head, pageWidth * position);

                       ViewHelper.setAlpha(text_head, 1.0f - Math.abs(position));

                   }


                   if (text_content != null) {

                       ViewHelper.setTranslationX(text_content, pageWidth * position);

                       ViewHelper.setAlpha(text_content, 1.0f - Math.abs(position));

                   }

               }

           }

        }

}


3.3) Edit XML file (activity_welcome_screen.xml)
<RelativeLayout
   xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:tools="http://schemas.android.com/tools"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:background="@android:color/transparent">
   <android.support.v4.view.ViewPager
       android:id="@+id/pager"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:background="@color/dim_foreground_disabled_material_dark"/>
   <View
       android:layout_width="fill_parent"
       android:layout_height="1dp"
       android:layout_above="@+id/button_layout"
       android:background="#33ffffff"/>
   <RelativeLayout
       android:id="@+id/button_layout"
       android:layout_width="fill_parent"
       android:layout_height="wrap_content"
       android:layout_alignParentBottom="true"
       android:background="@android:color/transparent"
       >
       <Button
           android:id="@+id/btn_skip"
           android:layout_width="80dp"
           android:layout_height="48dp"
           android:gravity="center"
           android:layout_alignParentLeft="true"
           android:text="SKIP"
           android:textSize="18sp"
           android:textColor="@color/abc_primary_text_material_dark"
           android:background="@drawable/selectable_item_background_general"/>
       <LinearLayout
           android:id="@+id/circles"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:orientation="horizontal"
           android:layout_centerInParent="true">
       </LinearLayout>
       <Button
           android:id="@+id/done"
           android:layout_width="80dp"
           android:layout_height="48dp"
           android:gravity="center"
           android:layout_alignParentRight="true"
           android:text="DONE"
           android:textSize="18sp"
           android:textColor="@color/abc_primary_text_material_dark"
           android:background="@drawable/selectable_item_background_general"
           android:visibility="gone"/>
       <ImageButton
           android:id="@+id/btn_next"
           android:layout_width="80dp"
           android:layout_height="48dp"
           android:gravity="center"
           android:paddingTop="12dp"
           android:paddingBottom="12dp"
           android:src="@drawable/ic_action_next"
           android:layout_alignParentRight="true"
           android:background="@drawable/selectable_item_background_general"
           android:scaleType="fitCenter"
           />
   </RelativeLayout>
</RelativeLayout>
3.4) Add Resource Files to eliminate errors.
strings.xml
<resources>
   <string name="app_name">MySplashScreen1</string>
   <string name="action_settings">Settings</string>
   <string name="title_activity_welcome_screen">WelcomeScreen</string>
   <string name="screen1_title">Unlimited Calls For You</string>
   <string name="screen1_desc">Call your friends, family, Relatives free of cost anytime anywhere.</string>
   <string name="screen2_title">Group Conversations</string>
   <string name="screen2_desc">Create your own own group and share Photos, Videos etc. </string>
   <string name="screen3_title">Synchronize with your laptop</string>
   <string name="screen3_desc">Get notified with your calls and messages to your laptop</string>
</resources>
colors.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
   <color name="colorPrimary">#3F51B5</color>
   <color name="colorPrimaryDark">#303F9F</color>
   <color name="colorAccent">#FF4081</color>
   <color name="text_selected">#888</color>
   <color name="transparent_bg">#fff</color>
</resources>
dimens.xml
<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>
   <!--Welcome sliding page  -->
   <dimen name="welcome_images_size">360dp</dimen>
   <dimen name="welcome_images_margin_top">0dp</dimen>
   <dimen name="welcome_heading_margin_bottom">12dp</dimen>
   <dimen name="welcome_text_margin">48dp</dimen>
   <dimen name="welcome_heading">24sp</dimen>
   <dimen name="welcome_text_margin_bottom">12dp</dimen>
   <dimen name="welcome_content_min_height">96dp</dimen>
   <dimen name="welcome_content">16.0sp</dimen>
</resources>
menu
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools" tools:context=".MainActivity">
<item android:id="@+id/action_settings" android:title="@string/action_settings"
   android:orderInCategory="100" app:showAsAction="never" />
<item android:id="@+id/action_welcomeScreen" android:title="@string/action_welcomeScreen"
   android:orderInCategory="100" app:showAsAction="never" />
</menu>
4) Add Fragment Layout Files
Add fragment layout file: welcome_screen1.xml
<?xml version=”1.0” encoding=”utf-8”?>

 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

        android:id="@+id/welcome_fragment"

        android:layout_width="match_parent"

        android:layout_height="match_parent"

        android:orientation="vertical"

        android:clipChildren="false"

        android:background="#5C6BC0"

        android:weightSum="6"

        android:paddingTop="48dp">


        <FrameLayout

           android:id="@+id/image_container"

           android:layout_width="match_parent"

           android:layout_height="0dp"

           android:layout_weight="4"

           android:clipChildren="false">


           <ImageView

               android:id="@+id/img"

               android:layout_width="wrap_content"

               android:layout_height="wrap_content"

               android:scaleType="centerInside"

               android:src="@drawable/ic_phone_white_48dp"

               android:paddingLeft="16dp"

               android:paddingRight="16dp"

               android:layout_gravity="center"/>


        </FrameLayout>


        <TextView

           android:id="@+id/screen_heading"

           android:layout_width="match_parent"

           android:layout_height="0dp"

           android:layout_weight="1"

           android:paddingLeft="24dp"

           android:paddingRight="24dp"

           android:textSize="24sp"

           android:textColor="#ffffff"

           android:gravity="bottom|center_horizontal"

           android:text="@string/screen1_title" />


        <TextView

           android:id="@+id/screen_desc"

           android:text="@string/screen1_desc"

           android:layout_width="match_parent"

           android:layout_height="0dp"

           android:layout_weight="1"

           android:paddingLeft="24dp"

           android:paddingRight="24dp"

           android:textSize="16sp"

           android:textColor="#ffffff"

           android:gravity="top|center_horizontal"

           android:minHeight="@dimen/welcome_content_min_height"/>

        <View

           android:layout_width="match_parent"

           android:layout_height="48dp"

           android:background="@android:color/transparent"/>


</LinearLayout>



Add fragment layout file: welcome_screen2.xml
<?xml version="1.0" encoding="utf-8"?>

 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

        android:id="@+id/welcome_fragment"

        android:layout_width="match_parent"

        android:layout_height="match_parent"

        android:clipChildren="false"

        android:background="#00AE76"

        android:orientation="vertical"

        android:layout_weight="6"

        android:paddingTop="48dp">


        <FrameLayout

           android:id="@id/image_container"

           android:layout_width="match_parent"

           android:layout_height="0dp"

           android:layout_weight="4"

           android:clipChildren="false">


           <ImageView

               android:id="@+id/img"

               android:layout_width="wrap_content"

               android:layout_height="wrap_content"

               android:scaleType="centerInside"

               android:src="@drawable/ic_account_multiple_white_48dp"

               android:paddingLeft="18dp"

               android:paddingRight="18dp"

               android:layout_gravity="center"/>


        </FrameLayout>


        <TextView

           android:id="@id/screen_heading"

           android:text="@string/screen2_title"

           android:layout_width="match_parent"

           android:layout_height="0dp"

           android:layout_weight="1"

           android:textSize="24sp"

           android:textColor="#ffffff"

           android:paddingLeft="24dp"

           android:paddingRight="24dp"

           android:gravity="bottom|center_horizontal"/>


        <TextView

           android:id="@id/screen_desc"

           android:text="@string/screen2_desc"

           android:layout_width="fill_parent"

           android:layout_height="0dp"

           android:layout_weight="1"

           android:paddingLeft="24dp"

           android:paddingRight="24dp"

           android:textSize="16sp"

           android:textColor="#ffffff"

           android:gravity="top|center_horizontal"

           android:minHeight="@dimen/welcome_content_min_height" />


        <View

           android:layout_width="match_parent"

           android:layout_height="48dp"

           android:background="@android:color/transparent"/>


</LinearLayout>


Add fragment layout file: welcome_screen3.xml
<?xml version="1.0" encoding="utf-8"?>

 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

        android:id="@+id/welcome_fragment"

        android:layout_width="match_parent"

        android:layout_height="match_parent"

        android:clipChildren="false"

        android:background="#00bcd4"

        android:orientation="vertical"

        android:layout_weight="6"

        android:paddingTop="48dp">


        <FrameLayout

           android:id="@+id/image_container"

           android:layout_width="match_parent"

           android:layout_height="0dp"

           android:layout_weight="4"

           android:clipChildren="false">


           <ImageView

               android:id="@+id/img"

               android:layout_width="wrap_content"

               android:layout_height="wrap_content"

               android:scaleType="centerInside"

               android:src="@drawable/ic_laptop_white_36dp"

               android:paddingLeft="16dp"

               android:paddingRight="16dp"

               android:gravity="center"

               android:layout_gravity="center"/>


        </FrameLayout>


        <TextView

           android:id="@+id/screen_heading"

           android:text="@string/screen3_title"

           android:layout_width="match_parent"

           android:layout_height="0dp"

           android:layout_weight="1"

           android:textSize="24sp"

           android:textColor="#ffffff"

           android:paddingLeft="24dp"

           android:paddingRight="24dp"

           android:gravity="bottom|center_horizontal" />


        <TextView

           android:id="@+id/screen_desc"

           android:text="@string/screen3_desc"

           android:layout_width="match_parent"

           android:layout_height="0dp"

           android:layout_weight="1"

           android:textSize="16sp"

           android:textColor="#ffffff"

           android:paddingLeft="24dp"

           android:paddingRight="24dp"

           android:gravity="top|center_horizontal"

           android:minHeight="@dimen/welcome_content_min_height"/>


        <View

           android:layout_width="match_parent"

           android:layout_height="48dp"

           android:background="@android:color/transparent"/>


</LinearLayout>



Add fragment layout file: welcome_screen4.xml
<?xml version="1.0" encoding="utf-8"?>

 <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"

        android:layout_width="fill_parent"

        android:layout_height="fill_parent"

        android:background="@android:color/transparent" />


5) RUN
6) DOWNLOAD

.

2 comments:

  1. Good Tutorial , but how to make splashscreen show once time when app start ?

    ReplyDelete
  2. How to show splashscreen when the apps start - http://android-steps.blogspot.my/2015/03/101-mysuperhero-android-splashscreen.html

    ReplyDelete