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 { [email protected] } // 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