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">
		<!--Provide Your Action to navigate -->
	</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

GitHub

https://github.com/Mindinventory/Walk-Through-Screen