WalkThroughAndroid

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

Description

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

Programming language: Kotlin

License: MIT License

Tags: Kotlin     Android     Android-library     Kotlin For Android    

README

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 { [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

• 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.