Creating welcome screen for the first use in Android application

Creating welcome screen for the first use in Android application

Monday, May 23, 2016
    On the first use an Android application, you usually see the welcome screen. It's the short introduction about that app and moreover, some manual instructions for users. We can swipe to next/back to get information and usually, it has a "SKIP" button to finish this screen immediately.
    DEMO VIDEO:

    With ViewPager, we can make it easily. To make it more attractive, we'll use PageIndicator library for styling the page indicator at the bottom screen. Now, let's start.

Import PageIndicator library

 
    Firstly, you must go to this library Home page and download the lastest version (in zip format) to your computer. Then, extract and import it as a module in your Android project (read this post to find out the way to import non-gradle project as a library in Android Studio).
    Two modules build.gradle file should be like this:
app/build.gradle 
apply plugin: 'com.android.application'

android {
    compileSdkVersion 23
    buildToolsVersion "23.0.3"

    defaultConfig {
        applicationId "info.devexchanges.welcomescreen"
        minSdkVersion 14
        targetSdkVersion 23
        versionCode 1
        versionName "1.0"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}

dependencies {
    compile fileTree(include: ['*.jar'], dir: 'libs')
    compile 'com.android.support:appcompat-v7:23.4.0'
    compile project(':library')
}
library/build.gradle 
apply plugin: 'com.android.library'

android {
    compileSdkVersion 23
    buildToolsVersion "23.0.3"

    defaultConfig {
        minSdkVersion 14
        targetSdkVersion 23
    }

    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.txt'
        }
    }
}

dependencies {
    compile 'com.android.support:appcompat-v7:23.4.0'
}

Coding project

Seem the extra work take us quite lot of time! Now, we declaring the "welcome activity" first. It's layout contains a ViewPager object and CirclePageIndicator to show number of pages:
activity_welcome.xml 
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <android.support.v4.view.ViewPager
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="0.9" />

    <RelativeLayout
        android:id="@+id/layout"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="0.1"
        android:orientation="horizontal">

        <TextView
            android:id="@+id/skip"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_marginLeft="@dimen/activity_horizontal_margin"
            android:text="SKIP"
            android:textStyle="bold"
            android:textColor="@android:color/white" />

        <com.viewpagerindicator.CirclePageIndicator
            android:id="@+id/indicator"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:padding="10dip"
            app:fillColor="@color/colorPrimaryDark"
            app:snap="true" />

        <TextView
            android:id="@+id/done"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_marginRight="@dimen/activity_horizontal_margin"
            android:text="DONE"
            android:textStyle="bold"
            android:textColor="@android:color/white"
            android:visibility="gone" />
    </RelativeLayout>
</LinearLayout>
    Setting adapter (containing Fragments as pages) for ViewPager and handling 2 buttons event (Skip and Done) in programmatically code:
WelcomeActivity.java 
package info.devexchanges.welcomescreen;

import android.os.Bundle;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.util.Log;
import android.view.View;

import com.viewpagerindicator.CirclePageIndicator;

public class WelcomeActivity extends AppCompatActivity {

    private ViewPager viewPager;
    private View btnDone;
    private SessionManager session;
    private View skipLayout;
    private static int colors[] = {android.R.color.holo_orange_dark, android.R.color.holo_purple,
            android.R.color.holo_blue_dark, android.R.color.holo_green_dark};

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_welcome);
        session = new SessionManager(getApplicationContext());

        viewPager = (ViewPager) findViewById(R.id.pager);
        CirclePageIndicator pageIndicator = (CirclePageIndicator) findViewById(R.id.indicator);
        btnDone = findViewById(R.id.done);
        skipLayout = findViewById(R.id.layout);
        skipLayout.setBackgroundColor(getResources().getColor(colors[0]));
        final View btnSkip = findViewById(R.id.skip);

        //set viewpager adapter
        ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager());
        viewPager.setAdapter(adapter);

        //set page indicator
        pageIndicator.setViewPager(viewPager);

        //set onpage changed listener
        viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
                Log.d("Main", "pos:" + position + "  " + positionOffset + "  " + positionOffsetPixels);
            }

            @Override
            public void onPageSelected(int position) {
                if (position == viewPager.getAdapter().getCount() - 1) {
                    btnDone.setVisibility(View.VISIBLE);
                    btnSkip.setVisibility(View.GONE);
                } else {
                    btnDone.setVisibility(View.GONE);
                    btnSkip.setVisibility(View.VISIBLE);
                }

                skipLayout.setBackgroundColor(getResources().getColor(colors[position]));
            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });

        assert btnSkip != null;
        btnSkip.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                viewPager.setCurrentItem(viewPager.getAdapter().getCount() - 1);
            }
        });

        //close this screen when click "DONE"
        btnDone.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                session.setIsFirst(false);
                finish();
            }
        });
    }

    @Override
    public void onBackPressed() {
        super.onBackPressed();
        session.setIsFirst(false);
    }
}
     And this is main activity, app will launch it when start:
MainActivity.java 
package info.devexchanges.welcomescreen;

import android.content.Intent;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.Toolbar;
import android.view.View;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        View btnShow = findViewById(R.id.btn_show);
        Toolbar toolbar = (Toolbar)findViewById(R.id.toolbar);

        setSupportActionBar(toolbar);
        SessionManager session = new SessionManager(getApplicationContext());
        if (session.isFirstUse()) {
           showWelcomeScreen();
        }

        btnShow.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                showWelcomeScreen();
            }
        });
    }

    private void showWelcomeScreen() {
        Intent intent = new Intent(this, WelcomeActivity.class);
        startActivity(intent);
    }
}
And it's layout, containing only a Button:
activity_main.xml 
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="info.devexchanges.welcomescreen.MainActivity">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?attr/colorPrimary"
        android:minHeight="?attr/actionBarSize"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

    <Button
        android:id="@+id/btn_show"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:layout_margin="@dimen/activity_horizontal_margin"
        android:text="Show Welcome Screen" />
</RelativeLayout>
    The specific features of the welcome screen is launching only one time (at the first use). So, through codes above, you can see a SessionManager variable. I use SharedPreference to detect and manage it with the Application context:
SessionManager.java 
package info.devexchanges.welcomescreen;

import android.annotation.SuppressLint;
import android.content.Context;
import android.content.SharedPreferences;
import android.content.SharedPreferences.Editor;

public class SessionManager {
    private SharedPreferences pref;
    private Editor editor;
    private Context _context;
    private int PRIVATE_MODE = 0;
    private static final String PREF_NAME = "WelcomeApp";
    private static final String IS_FIRST = "isFistUse";

    @SuppressLint("CommitPrefEdits")
    public SessionManager(Context context) {
        this._context = context;
        pref = _context.getSharedPreferences(PREF_NAME, PRIVATE_MODE);
        editor = pref.edit();
    }

    public void setIsFirst(boolean userName) {
        editor.putBoolean(IS_FIRST, userName);
        editor.commit();
    }

    public boolean isFirstUse() {
        return pref.getBoolean(IS_FIRST, true);
    }
}
    And this is the Fragments code (the ViewPager pages):
ContentFragment.java 

package info.devexchanges.welcomescreen;

import android.annotation.SuppressLint;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;

public class ViewPagerFragment extends Fragment {

    public static ViewPagerFragment getInstance(int position, int bgColor) {
        ViewPagerFragment fragment = new ViewPagerFragment();
        Bundle args = new Bundle();
        args.putInt("position", position);
        args.putInt("background", bgColor);
        fragment.setArguments(args);

        return fragment;
    }

    @SuppressLint("SetTextI18n")
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {

        return inflater.inflate(R.layout.fragment_content, container, false);
    }

    @Override
    public void onViewCreated(View rootView, @Nullable Bundle savedInstanceState) {
        super.onViewCreated(rootView, savedInstanceState);
        TextView title = (TextView)rootView.findViewById(R.id.title);
        TextView content = (TextView)rootView.findViewById(R.id.content);
        View relativeLayout = rootView.findViewById(R.id.container);
        ImageView image = (ImageView)rootView.findViewById(R.id.logo);

        image.setImageResource(R.drawable.logo);
        relativeLayout.setBackgroundColor(getResources().getColor(getArguments().getInt("background")));
        title.setText("Welcome, this is Page: " + (getArguments().getInt("position") + 1));
        content.setText(getString(R.string.lorem_ipsum));
        Log.d("Fragment", "position: " + title.getText().toString());
    }
}
The Fragment layout (xml file):
fragment_content.xml 
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/holo_orange_dark">

    <ImageView
        android:id="@+id/logo"
        android:layout_width="150dp"
        android:layout_height="150dp"
        android:layout_centerInParent="true" />

    <TextView
        android:id="@+id/title"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_marginBottom="100dp"
        android:gravity="center"
        android:textColor="@android:color/white"
        android:textSize="30sp" />

    <TextView
        android:id="@+id/content"
        android:textStyle="bold"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_marginBottom="@dimen/activity_horizontal_margin"
        android:layout_marginLeft="@dimen/activity_horizontal_margin"
        android:textColor="@android:color/white"
        android:textSize="16sp" />

</RelativeLayout>
Customizing an adapter for ViewPager, there is total 4 pages in this welcome screen:
ViewPagerAdapter.java 
package info.devexchanges.welcomescreen;

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;

public class ViewPagerAdapter extends FragmentPagerAdapter {

    private static int colors[] = {android.R.color.holo_orange_dark, android.R.color.holo_purple,
            android.R.color.holo_blue_dark, android.R.color.holo_green_dark};

    public ViewPagerAdapter(FragmentManager fm) {
        super(fm);
    }

    @Override
    public Fragment getItem(int position) {
        return ViewPagerFragment.getInstance(position, colors[position]);
    }

    @Override
    public int getCount() {
        return 4;
    }
}
Important Note: To make the welcome in full screen style, you must use a "No Action Bar" theme:
styles.xml 
<resources>

    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

</resources>
Running application, we have this result:

Conclusions

When your application is so much complicated, the welcome screen is very necessary for users first use, guiding them some basic features. Through this post, you can see that making it is very easily, for more details, please view my project on @Github. Thanks for reading!
View on Github
Hong Thai

Share


Previous post
« Prev Post
Next post
Next Post »
Subscribe to: Post Comments (Atom)