Free Android Walkthrough designs with source code

Published by Kapil Mohan on March 12, 2019March 12, 2019

Preview
Manifest
Layouts
Drawables
Res

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_slider.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.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="#0747F9"
            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">

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

Download drawables and insert all required files.

Files Required:

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

colors.xml


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

    <!--colros for recomend a course-->
    <color name="whiteCardColor">#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


    <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/blackTextColor</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/blackTextColor</item>
        <item name="android:layout_marginBottom">15dp</item>
        <item name="android:layout_marginLeft">10dp</item>
        <item name="android:layout_marginRight">10dp</item>
    </style>

Free illustrated onboarding or walkthrough 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)

Download Source Code

For dark mode design: