Free Darkmode onBoarding (intro slider) designs for android

Published by Kapil Mohan on

set NoActionbar Apptheme for activity

        <activity android:name=".StartActivity"
            android:theme="@style/AppTheme.NoActionBar">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>

Code for setting NoActionbar in manifest

android:theme="@style/AppTheme.NoActionBar"

Includes Start Activity with ViewPager and other Supporting Layouts for creating into slider.

activity_start.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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:weightSum="12"
    android:background="@color/darkModeBackground">


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

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:orientation="vertical"
        android:layout_weight="3"
        android:gravity="center">


        <LinearLayout
            android:id="@+id/layoutDots"
            android:layout_width="match_parent"
            android:layout_height="@dimen/dots_height"
            android:layout_alignParentBottom="true"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="10dp"
            android:orientation="horizontal">

            <TextView
                android:layout_width="35dp"
                android:layout_height="5dp"
                android:background="@drawable/onboarding_dotunselected"/>
            <TextView
                android:layout_width="35dp"
                android:layout_height="5dp"
                android:background="@drawable/onboarding_dotunselected"/>
            <TextView
                android:layout_width="35dp"
                android:layout_height="5dp"
                android:background="@drawable/onboarding_dotunselected"/>
        </LinearLayout>

        <Button
            android:id="@+id/loginBtn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:background="@drawable/onboarding_button"
            android:text="LOGIN"
            android:textColor="@color/whiteTextColor"
            android:textSize="20dp"
            android:layout_margin="10dp"/>

        <TextView
            android:id="@+id/btn_skip"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="SKIP INTRO"
            android:layout_gravity="center"
            android:textSize="16dp"
            android:textStyle="bold"
            android:textColor="@color/darkModeTextColor"
            android:layout_marginBottom="10dp"/>



    </LinearLayout>



</LinearLayout>

welcome_slide1.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:orientation="vertical"
    android:background="@color/darkModeBackground">

    <ImageView
        android:layout_margin="10dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:adjustViewBounds="true"
        android:cropToPadding="true"
        android:layout_centerInParent="true"
        android:src="@drawable/onboarding_welcome" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:layout_alignParentBottom="true">

        <TextView
            style="@style/onBoardingHeaderText"
            android:text="@string/onboarding_welcome_1" />

        <TextView
            style="@style/onBoardingContentText"
            android:text="@string/onboardingWelcomeContent"/>

    </LinearLayout>

</RelativeLayout>

Download drawables and insert all required files.

Files Required:

  • onboarding_button.xml
  • onboarding_welcome.png
  • onboarding_dot_selected.xml
  • onboarding_dotunselected.xml

colors.xml


      <color name="colorPrimary">#1F5BF3</color>
    <color name="colorPrimaryDark">#0947E8</color>
    <color name="colorAccent">#00A5FF</color>

    <!--colors for modern ui-->
    <color name="whiteTextColor">#fff</color>
    <color name="blackTextColor">#000</color>

    <color name="whiteCardColor">#fff</color>

    <color name="darkModeBackground">#353567</color>
    <color name="darkModeTextColor">#fff</color>>

dimens.xml

<resources>

    <dimen name="dots_height">30dp</dimen>
    <dimen name="onboardingHeaderSize">30dp</dimen>
    <dimen name="onboardingContentSize">14dp</dimen>

</resources>

strings.xml

    <!--onboarding designs-->
    <string name="onboardingWelcomeContent">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </string>
    <string name="onboardingSpinWinContent">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </string>
    <string name="onboardingRecommenderContent">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </string>
    <string name="onboarding_welcome_3">Welcome 3</string>
    <string name="onboarding_welcome_2">Welcome 2</string>
    <string name="onboarding_welcome_1">Welcome</string>

styles.xml


    
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
        <item name="android:textColorHint">@color/colorPrimary</item>
    </style>

    <style name="AppTheme.NoActionBar">
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
    </style>

    <style name="viewParent">
        <item name="android:layout_width">wrap_content</item>
        <item name="android:layout_height">wrap_content</item>
    </style>


    <!--onboarding designs-->
    <style name="onBoardingHeaderText" parent="viewParent">
        <item name="android:textSize">@dimen/onboardingHeaderSize</item>
        <item name="android:textColor">@color/darkModeTextColor</item>
        <item name="android:textStyle">bold</item>
        <item name="android:layout_marginBottom">10dp</item>
        <item name="android:layout_marginLeft">10dp</item>
        <item name="android:layout_marginRight">10dp</item>
    </style>

    <style name="onBoardingContentText" parent="viewParent">
        <item name="android:textSize">@dimen/onboardingContentSize</item>
        <item name="android:textColor">@color/darkModeTextColor</item>
        <item name="android:layout_marginBottom">15dp</item>
        <item name="android:layout_marginLeft">10dp</item>
        <item name="android:layout_marginRight">10dp</item>
    </style>

PrefManager.java

package com.appsnipp.startdesigns;

/**
 * Created by kapil on 20/01/17.
 */
import android.content.Context;
import android.content.SharedPreferences;


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 = "start_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);
    }

}

StartActivity.java

package com.appsnipp.startdesigns;

import android.content.Context;
import android.content.Intent;
import android.graphics.Color;
import android.os.Build;
import android.support.v4.content.ContextCompat;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
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;

public class StartActivity extends AppCompatActivity {

    private ViewPager viewPager;
    private MyViewPagerAdapter myViewPagerAdapter;
    private LinearLayout dotsLayout;
    private TextView[] dots;
    private int[] layouts;
    private TextView btnSkip;
    private Button loginBtn;
    private PrefManager prefManager;

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

        // Checking for first time launch - before calling setContentView()
        prefManager = new PrefManager(this);


        if (!prefManager.isFirstTimeLaunch()) {
            //TODO:- Uncomment below 2 lines
            //launchHomeScreen();
            //finish();
        }

        // Making notification bar transparent
        if (Build.VERSION.SDK_INT >= 21) {
            getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_STABLE | View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN);
        }

        setContentView(R.layout.activity_start);

        viewPager =  findViewById(R.id.view_pager);
        dotsLayout =  findViewById(R.id.layoutDots);
        btnSkip =  findViewById(R.id.btn_skip);
        loginBtn = findViewById(R.id.loginBtn);


        // layouts of all welcome sliders
        // last layout is dummy for handling exit on slide
        layouts = new int[]{
                R.layout.welcome_slide1,
                R.layout.welcome_slide2,
                R.layout.welcome_slide4};

        // 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();
            }
        });

        loginBtn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                startLoginActivity();
            }
        });
//        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];

        LinearLayout.LayoutParams textLayoutParams = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
        textLayoutParams.setMargins(5, 0, 0, 0);

        dotsLayout.removeAllViews();
        for (int i = 0; i < dots.length; i++) {
            dots[i] = new TextView(this);
            dots[i].setWidth(30);
            dots[i].setHeight(5);
            dots[i].setLayoutParams(textLayoutParams);
            dots[i].setBackground(getResources().getDrawable(R.drawable.onboarding_dotunselected));
            dots[i].setTextSize(35);
            dotsLayout.addView(dots[i]);
        }

        //hiding the last dot , as the last layout is dummy for handling exit on last page
        dots[layouts.length-1].setVisibility(View.GONE);

        if (dots.length > 0){
            dots[currentPage].setWidth(70);
            dots[currentPage].setBackground(getResources().getDrawable(R.drawable.onboarding_dot_selected));
        }
    }

    private int getItem(int i) {
        return viewPager.getCurrentItem() + i;
    }

    private void startLoginActivity(){
        prefManager.setFirstTimeLaunch(false);
//        startActivity(new Intent(this, LoginActivity.class));
        finish();
    }
    private void launchHomeScreen() {
        prefManager.setFirstTimeLaunch(false);
//        startActivity(new Intent(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(getString(R.string.start));
                btnSkip.setText("SKIP INTRO");
                launchHomeScreen();
//                btnSkip.setVisibility(View.GONE);
            } else {
                // still pages are left
//                btnNext.setText(getString(R.string.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);
        }
    }
}

Free illustrated onboarding design inspiration for android with full source code. For better results, use Vectors from freepik.com

Source code Includes full project implementation (View Pager and other layouts)

For light background:

Project Description:

  • minSDK : 16
  • targetSDK : 27

Credits:


Kapil Mohan

Like to add color to developers life and apps. Can create smile using Android, iOS, PHP, codeignitor, web technologies, etc... Feel free to contact me at [email protected] .