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">
 		<!--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

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.

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Mindinventory / Walk-Through-Screen

Programming Languages

Labels

Projects that are alternatives of or similar to Walk-Through-Screen