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
SCALE
SMOOTH_SCALE
LEFT_IN
RIGHT_IN
FLIP

Content Animation Style

Animation Type	Preview
NONE
FADE
SLIDER
SCALE
TOP_IN
BOTTOM_IN
BOUNCE

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

• Glide
• Activity Ktx
• ViewBinding

Limitation

• Layout support up to 4.65 inch devices

Sample for implementation

• With Activity
• With Fragment

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.