Free Darkmode onBoarding (intro slider) designs for android
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:
- Hero Vector from freepik.com
- Start Activity Java Source from AndroidHive