Android Development Steps: 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

2a) Get nineoldandroids JAR (download from https://github.com/downloads/JakeWharton/NineOldAndroids/nineoldandroids-2.4.0.jar or cached here)

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>

3.4) Add Resource Files to eliminate errors.

Download Resource Files here.

strings.xml

<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>

dimens.xml

</resources>

<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

MySplashScreen1.zip

Android Development Steps

Sunday, November 1, 2015

Splash Screen To Android Projects (nineoldandroids)

2 comments: