Onboarding - Jetpack Compose Onboarding Library

Overview

Jetpack Compose Onboarding Library

license

SVID_20220205_221448_1.mp4

Implementation

  1. Add the dependency to build.gradle (app-level):
implementation 'com.github.cyeksan:onboarding:1.1.0'
  1. Add jitpack.io maven to settings.gradle:
pluginManagement {
    repositories {
        ..
        maven { url 'https://jitpack.io' }
    }
}
dependencyResolutionManagement {
    repositories {
        ..
        maven { url 'https://jitpack.io' }
    }
}

How to use:

OnboardingScreen(
	imageIdList = imageIdList,
	navController = navController,
	lifecycleCoroutineScope = lifecycleScope,
	pageNum = pageNum, // It must be between 3 and 5 (both inclusive)
	titleList = titleList,
	descriptionList = descriptionList,
	skipTo = Screen.HomeScreen.route,
	properties = OnboardingProperties(
		titleColorList = titleColorList,
		descriptionColorList = descriptionColorList,
		backgroundColorStartList = backgroundColorStartList,
		backgroundColorEndList = backgroundColorEndList,
		buttonColor = Color.White,
		selectedDotColor = Color.White,
		unselectedDotColor = UnselectedDot,
		imageContentScale = ContentScale.Crop,
		titleFontSize = 24.sp,
		descriptionFontSize = 16.sp,
		titleFontFamily = FontFamily.Default,
		descriptionFontFamily = FontFamily.Default,
		skipButtonName = "SKIP",
		nextButtonName = "NEXT",
		nextArrowIconDrawableId = R.drawable.next_arrow)

Params

Name Description
navController common navController between onboarding and the screen transitioned (e.g. home page)
lifecycleCoroutineScope lifecycleScope - CoroutineScope tied to this LifecycleOwner's Lifecycle
pageNum Onboarding page number. It must be between 3 and 5 (both inclusive)
imageIdList Image id list of the main images on the onboarding pages. You can set the ith item to 0 if you do not want image at the ith page
titleList Title texts of the onboarding pages
descriptionList Description texts on the onboarding pages
skipTo The route string that onboarding screen will end up with (in the end or with Skip Button click)

Params of Onboarding Properties

Name Description Default Value
buttonColor Color of Skip and Next Buttons DarkGray
selectedDotColor Color of dot of the selected item DarkGray
unselectedDotColor Color of dot of the unselected item Gray
imageContentScale Content scale param of main image on the onboarding pages ContentScale.Crop
titleFontSize Font size of title on the onboarding pages 24sp
descriptionFontSize Font size of description on the onboarding pages 16sp
titleFontFamily Font family of title on the onboarding pages FontFamily.Default
descriptionFontFamily Font family of description on the onboarding pages FontFamily.Default
skipButtonName Text of the Skip button (at left). You can localize text of the Skip Button SKIP
nextButtonName Text of the Next button (at right). You can localize text of the Next Button NEXT
nextArrowIconDrawableId Icon item next to the Next button. You can add an icon to Next button, like arrow 0
titleColorList List of title color on each page DarkGray (all)
descriptionColorList List of description color on each page DarkGray (all)
backgroundColorStartList Start color for a gradient background for each page White (all)
backgroundColorEndList End color for a gradient background for each page White (all)
You might also like...
Compose-Ratingbar-library - A simple implementation for rating bar in Jetpack Compose

Compose-Ratingbar-library - A simple implementation for rating bar in Jetpack Compose

Compose Curved-Scroll is an Android Jetpack Compose library made with ❤️
Compose Curved-Scroll is an Android Jetpack Compose library made with ❤️

Compose-Curved-Scroll-library Compose Curved-Scroll is an Android Jetpack Compos

Android.compose.squircle - Android LightWeight Squircle Library for JetPack Compose

Android LightWeight Squircle Library for JetPack Compose Usage Based on Compose

Compose-html - An Android library which provides HTML support for Jetpack Compose texts
Compose-html - An Android library which provides HTML support for Jetpack Compose texts

HtmlCompose An Android library which provides HTML support for Jetpack Compose t

An application that i developed with a aim of learning Jetpack compose and many other jetpack libraries
An application that i developed with a aim of learning Jetpack compose and many other jetpack libraries

An application that i developed with a aim of learning Jetpack compose and many other jetpack libraries, The application make use of jikan Api which displays a list of animations,there more details and even trailers of the animations.

Lightweight library to tweak the fling behaviour in Android. This library is only compatible with Jetpack-Compose.
Lightweight library to tweak the fling behaviour in Android. This library is only compatible with Jetpack-Compose.

Flinger (Only compatible with compose) What is Flinger? Flinger is a plugin that is made on top of jetpack compose that will help the developer to twe

K5-compose is a sketchy port of p5.js for Jetpack Compose
K5-compose is a sketchy port of p5.js for Jetpack Compose

k5-compose k5-compose is a sketchy port of P5.js for Jetpack Compose Desktop. This library provides you a playground to play with your sketches so you

Jetpack Compose based project, used to stress-testing compose features / integrations and explore non-trivial functionality

Project containing Jetpack Compose samples For pagination & network images it uses CATAAS. Known issues Navigation-Compose Issue with fast tapping on

Pokedex Compose is an independent re-write of a demo application by the name of Pokedex, but written in jetpack compose.
Pokedex Compose is an independent re-write of a demo application by the name of Pokedex, but written in jetpack compose.

Pokedex Compose Pokedex Compose is an independent re-write of a similar project by the name of Pokedex. I am recreating the UI but I am doing it using

Owner
Cansu Aktaş
Cansu Aktaş
Jetpack Compose Boids | Flocking Insect 🐜. bird or Fish simulation using Jetpack Compose Desktop 🚀, using Canvas API 🎨

?? ?? ?? Compose flocking Ants(boids) ?? ?? ?? Jetpack compose Boids | Flocking Insect. bird or Fish simulation using Jetpack Compose Desktop ?? , usi

Chetan Gupta 38 Sep 25, 2022
A collection of animations, compositions, UIs using Jetpack Compose. You can say Jetpack Compose cookbook or play-ground if you want!

Why Not Compose! A collection of animations, compositions, UIs using Jetpack Compose. You can say Jetpack Compose cookbook or play-ground if you want!

Md. Mahmudul Hasan Shohag 186 Jan 1, 2023
Learn Jetpack Compose for Android by Examples. Learn how to use Jetpack Compose for Android App Development. Android’s modern toolkit for building native UI.

Learn Jetpack Compose for Android by Examples. Learn how to use Jetpack Compose for Android App Development. Android’s modern toolkit for building native UI.

MindOrks 382 Jan 5, 2023
This is a sample app(For beginners - App #2) built using Jetpack Compose. It demonstrates the concept of State Hoisting in Jetpack Compose.

JetBMICalculator This is a sample app(For beginners - App #2) built using Jetpack Compose. It demonstrates the concept of State Hoisting in Jetpack Co

BHAVNA THACKER 3 Dec 31, 2022
Jetpack-Compose-Demo - Instagram Profile UI using Jetpack Compose

Jetpack-Compose-Demo Instagram Profile UI using Jetpack Compose

omar 1 Aug 11, 2022
Jetpack-compose-animations-examples - Cool animations implemented with Jetpack compose

Jetpack-compose-animations-examples This repository consists of 4 animations: St

Canopas Software 180 Jan 2, 2023
Compose-navigation - Set of utils to help with integrating Jetpack Compose and Jetpack's Navigation

Jetpack Compose Navigation Set of utils to help with integrating Jetpack Compose

Adam Kobus 5 Apr 5, 2022
Jetpack-compose-uis - A collection of some UIs using Jetpack Compose. built using Katalog

Jetpack Compose UIs This is a collection of some UIs using Jetpack Compose. It i

Mori Atsushi 3 Dec 15, 2022
A simple authentication application using Jetpack compose to illustrate signin and sign up using Mvvm, Kotlin and jetpack compose

Authentication A simple authentication application using Jetpack compose to illustrate signin and sign up using Mvvm, Kotlin and jetpack compose Scree

Felix Kariuki 5 Dec 29, 2022
A Kotlin library to use Jetpack Compose in Android and iOS. Allow to write UI for both in Kotin. Still experimental as many compose features are not yet available.

Multiplatform Compose A Kotlin library to use Jetpack Compose in Android and iOS. Allow to write UI for both in Kotin. Still experimental as many comp

Clément Beffa 548 Jan 7, 2023