This library provides easy ways to add onboarding or pager screens with different animation and indicators.

Overview

WalkThroughAndroid

Make amazing OnBoarding Screens easily for your app with different colorful animations, fonts, styles, and many more. Customize your onboarding as per your requirements.

Indicator Animation/Indicator Style

DEFAULT CIRCLE RECTANGLE SQUARE ROUNDED_RECTANGLE VECTOR BITMAP
NONE image image image image image image image
SCALE image image image image image image image
SMOOTH_SCALE image image image image image image image
LEFT_IN image image image image image image image
RIGHT_IN image image image image image image image
FLIP image image image image image image image

Content Animation Style

Animation Type Preview
NONE image
FADE image
SLIDER image
SCALE image
TOP_IN image
BOTTOM_IN image
BOUNCE image

Key features

  • Simple implementation
  • Set Title and Description
  • Set Content Animation
  • Set Pager Indicator Animation
  • Customize Title and Description
  • Set OnBoarding image with drawable and image url
  • Support for both Activity and Fragment

Usage

Dependencies

  • Step 1. Add the JitPack repository to your build file

    Add it in your root build.gradle at the end of repositories:

        allprojects {
    	    repositories {
    		    ...
    		    maven { url 'https://jitpack.io' }
    	    }
        }
  • Step 2. Add the dependency

    Add it in your app module build.gradle:

        dependencies {
            ...
             implementation 'com.github.Mindinventory:Walk-Through-Screen:0.1.4'
        }

Implementation

  • Step 1. Prepare List for your OnBoarding screen

            val walkThroughScreens = ArrayList<WalkThroughScreenModel>().apply {
                       add(
                           WalkThroughScreenModel(
                               image = R.drawable.tasty_dish,
                               title = R.string.choose_a_tasty_dish,
                               description = R.string.order_anything
                           )
                       )
                       add(
                           WalkThroughScreenModel(
                               image = R.drawable.order,
                               title = R.string.order,
                               description = R.string.place_order
                           )
                       )
                       add(
                           WalkThroughScreenModel(
                               image = R.drawable.delivery,
                               title = R.string.pick_up_or_delivery,
                               description = R.string.we_make_food
                           )
                       )
                   }
  • Step 2. Customize title, description, indicator, animation

        val walkThroughIntent = walkThrough {
                   with { this@MainActivity } // Pass Content
                   walkThroughScreens { walkThroughScreens } // Pass Screens List
                   titleColor { R.color.black } // Title Color
                   descriptionColor { R.color.black } // Description Color
                   titleFontFamily { R.font.robotobold } // Title FontFamily
                   descriptionFontFamily { R.font.robotolight } // Description FontFamily
                   titleFontSize { 8.0F } // Title Font Size
                   descriptionFontSize { 4.0F } // Description Font Size
                   skipButtonFontFamily { R.font.robotolight } // Skip Button FontFamily
                   skipButtonColor { R.color.yellow } // Skip Button Color
                   backgroundColor { R.color.white } // Background Color for screen
                   activeIndicatorColor { R.color.yellow } // Active Indicator Color
                   inactiveIndicatorColor { R.color.light_yellow } // Inactive Indicator Color
                   indicatorStyle { IndicatorStyle.ROUNDED_RECTANGLE } // Indicator Style CIRCLE, RECTANGLE, SQUARE, ROUNDED_RECTANGLE, VECTOR, BITMAP
                   activeVectorDrawableRes { Your Vector } // Active Indicator Vector Drawable Res , Set If Indicator Style = VECTOR
                   inactiveVectorDrawableRes { Your Vector } // Inactive Indicator Vector Drawable Res , Set If Indicator Style = VECTOR
                   activeBitmapDrawableRes { R.drawable.tasty_dish } // Active Indicator Bitmap Drawable Res , Set If Indicator Style = BITMAP
                   inactiveBitmapDrawableRes { R.drawable.order } // Active Indicator Bitmap Drawable Res , Set If Indicator Style = BITMAP
                   activeVectorDrawableSize { 50 } // Active Vector Drawable Size in PX
                   inactiveVectorDrawableSize { 50 } // Inactive Vector Drawable Size in PX
                   activeBitmapDrawableSize { 50 } // Inactive Bitmap Drawable Size in PX
                   inactiveBitmapDrawableSize { 50 } // Inactive Bitmap Drawable Size in PX
                   indicatorGap { R.dimen.dp_5 } // Gap Between Indicators
                   indicatorAnimationType { IndicatorAnimationType.NONE } // Indicator Animation Type  SCALE, SMOOTH_SCALE, LEFT_IN, RIGHT_IN, FLIP
                   activeIndicatorWidth { R.dimen.dp_30 } // Active Indicator Width
                   activeIndicatorHeight { R.dimen.dp_8 } // Active Indicator Height
                   inactiveIndicatorWidth { R.dimen.dp_8 } // Inactive Indicator Width
                   inactiveIndicatorHeight { R.dimen.dp_8 } // Inactive Indicator Height
                   contentAnimationType { ContentAnimationType.FADE } // Content Animation Type   FADE, SLIDER, SCALE, TOP_IN, BOTTOM_IN, BOUNCE
                   buttonColor { R.color.yellow } // Next/Finish Button Color
                   buttonTextColor { R.color.white } // Next/Finish Button Text color
                   skipButtonFontSize { 4.0F } // Skip Button Font Size
               }

For Activity

  • Step 3. Add Launcher to start Next Activity After OnBoarding

              var resultLauncher =
                         registerForActivityResult(ActivityResultContracts.StartActivityForResult()) { result ->
                             if (result.resultCode == Activity.RESULT_OK) {
                                 startActivity(Intent(this, HomeActivity::class.java))
                                 finish()
                             }
                         }
  • Step 4. Launch Launcher using intent

             resultLauncher.launch(walkThroughIntent)

For Fragment

  • Step 3. Get Bundle from intent

                 val walkThroughBundle = walkThroughIntent.extras
  • Step 4. Add WalkThroughFragment in your navigation graph and provide your action from WalkThroughFragment to Your Fragment where you want to navigate user after OnBoarding Screens

    ">
     	 <fragment
     		android:id="@+id/walkThroughFragment"
     		android:name="com.mi.walkthroughandroid.ui.fragment.WalkThroughFragment"
     		android:label="WalkThroughFragment"
     		tools:layout="@layout/fragment_walk_through">
     		
     	fragment>
  • Step 5. Add Navigation Action from your fragment to WalkThroughFragment

  • Step 6. Navigate from your fragment(i.e, Here we have used SampleFragment) to WalkThroughFragment

     	findNavController().navigate(
     		    R.id.action_sampleFragment_to_walkThroughFragment,
     		    walkThroughBundle
     		)
  • Step 7. Implement WalkThroughFragment.WalkThroughFragmentListener in your FragmentHostingActivity

  • Step 8. Override onSkipOrFinish() method and Navigate to next fragment

              override fun onSkipOrFinish(isFromOnSkip: Boolean) {
                      findNavController(R.id.fragmentContainer).navigate(R.id.action_walkThroughFragment_to_homeFragment)
                  }

How to contribute?

Contribution towards our repository is always welcome, we request contributors to create a pull request to the develop branch only.

How to report an issue/feature request?

It would be great for us if the reporter can share the below things to understand the root cause of the issue.

  • Library version
  • Code snippet
  • Logs if applicable
  • Device specification like (Manufacturer, OS version, etc)
  • Screenshot/video with steps to reproduce the issue

Requirements

  • minSdkVersion >= 23
  • Androidx

Library used

Limitation

  • Layout support up to 4.65 inch devices

Sample for implementation

LICENSE!

WalkThroughAndroid is MIT-licensed.

Let us know!

We’d be really happy if you send us links to your projects where you use our component. Just send an email to [email protected] And do let us know if you have any questions or suggestion regarding our work.

You might also like...
Location tracking & geofencing the easy way. Supports background, killed app, rebooted device different update intervals.

Geofencer Convience library to receive user location updates and geofence events with minimal effort. Features: supports Android-Q receive updates on

An easy, flexible way to add a shimmering effect to any view in an Android app.
An easy, flexible way to add a shimmering effect to any view in an Android app.

Shimmer for Android Shimmer is an Android library that provides an easy way to add a shimmer effect to any view in your Android app. It is useful as a

ActSwitchAnimTool make the Animation easy to implements, and it compat the version of Android 4.0 or above.
ActSwitchAnimTool make the Animation easy to implements, and it compat the version of Android 4.0 or above.

ActSwitchAnimTool As well as we know, Android 5.0 has been support more Animation(just like ViewAnimationUtils~). Maybe some developers can implements

Android ripple animation helper, easy to create Circular Reveal. | Android水波动画帮助类,轻松实现View show/hide/startActivity()特效。(0.4.6)
Android ripple animation helper, easy to create Circular Reveal. | Android水波动画帮助类,轻松实现View show/hide/startActivity()特效。(0.4.6)

CircularAnim English | 中文 首先来看一个UI动效图。 效果图是是Dribbble上看到的,原作品在此。 我所实现的效果如下: Watch on YouTube Compile 最新可用版本 So,你可以如下compile该项目,也可以直接把这个类 CircularAnim 拷

[] An Android library which allows developers to easily add animations to ListView items
[] An Android library which allows developers to easily add animations to ListView items

DEPRECATED ListViewAnimations is deprecated in favor of new RecyclerView solutions. No new development will be taking place, but the existing versions

EtsyBlur is an Android library that allows developers to easily add a glass-like blur effect implemented in the  Etsy app.
EtsyBlur is an Android library that allows developers to easily add a glass-like blur effect implemented in the Etsy app.

EtsyBlur EtsyBlur is an Android library that allows developers to easily add a glass-like blur effect implemented in the past Etsy app. Try out the sa

💠Metaphor is the library to easily add Material Motion animations
💠Metaphor is the library to easily add Material Motion animations

Metaphor Metaphor is the library to easily add Material Motion animations. Who's using Metaphor? 👉 Check out who's using Metaphor Include in your pro

FadingToolbar is an animation library which fades out your footer view in a ScrollView/RecyclerView and fades in a toolbar title
FadingToolbar is an animation library which fades out your footer view in a ScrollView/RecyclerView and fades in a toolbar title

FadingToolbar is an animation library which fades out your footer view in a ScrollView/RecyclerView and fades in a toolbar title (analogue of the LargeTitle animation in iOS)

A Simple Todo app design in Flutter to keep track of your task on daily basis. Its build on BLoC Pattern. You can add a project, labels, and due-date to your task also you can sort your task on the basis of project, label, and dates
A Simple Todo app design in Flutter to keep track of your task on daily basis. Its build on BLoC Pattern. You can add a project, labels, and due-date to your task also you can sort your task on the basis of project, label, and dates

WhatTodo Life can feel overwhelming. But it doesn’t have to. A Simple To-do app design in flutter to keep track of your task on daily basis. You can a

Releases(0.1.4)
Owner
MindInventory
MindInventory works with Enterprises, Startups, and Agencies since 2011 providing web, mobile app development, enterprise mobility solutions & DevOps services.
MindInventory
User onboarding library with smooth animation of objects and background colors

SlidingTutorial Cleveroad introduces Sliding Tutorial Library for Flutter Hey guys, hope you haven’t started developing a tutorial for your Flutter ap

Cleveroad 127 Dec 31, 2022
Extended Android Tab Layout with animated indicators that have continuous feedback.

Dachshund Tab Layout Introduction Boosted Android Tab Layout with custom animated indicators including "Dachshund" animation inspired by this. Sample

Andrii 859 Nov 10, 2022
Library provides an easy way to a add shimmer effect in Android Compose project.

Add a shimmer effect to the layout in Android Compose

Valery 66 Dec 14, 2022
A pager for Android with parallax effect

ParallaxPagerTransformer A pager transformer for Android with parallax effect Installation in your build.gradle file dependencies { // ... com

Javier Gonzalez 654 Dec 29, 2022
A view pager indicator view to deal with a large amount of pages.

Attention I'm not going to support this anymore. Just use a better solution, e.g. this one Indefinite-Pager-Indicator BubblePagerIndicator A view page

Bogdan Kornev 134 Aug 18, 2022
Thirty-one different easing animation interpolators for Android.

EasingInterpolator Thirty-one different easing animation interpolators for Android. It does not use the standard 4 param ease signature. Instead it us

Masayuki Suda 1.1k Dec 28, 2022
A sample implementation Compose BottomSheet with animation different states

Compose Animated BottomSheet A sample implementation Compose BottomSheet with animation different states Medium post: https://proandroiddev.com/how-to

Yahor 40 Jan 6, 2023
Chandrasekar Kuppusamy 799 Nov 14, 2022
Android Animation Easing Functions. Let's make animation more real!

Android Easing Functions This project is originally from my another project, AndroidViewAnimation, which is an animation collection, to help you make

代码家 2.5k Jan 4, 2023
FPSAnimator is very easy animation library for Android TextureView and SurfaceView.

FPSAnimator A simple but powerful Tween / SpriteSheet / ParabolicMotion / animation library for Android TextureView and SurfaceView. Features The cont

Masayuki Suda 756 Dec 30, 2022