Free Android Walkthrough designs with source code

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

For dark mode design:

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