Author: Nicola De Nicolais
Android application built with Kotlin and Jetpack Compose that shows how to create an Onboarding screen design process in Compose.
Use an onboarding screen allow to show a first-time user how to get the most from your app, present information at app startup.
The onboarding screen can be understood as a virtual unboxing of an application. Users go through a series of screens which finally directs users to the application interface.
The purpose of Onboarding screen can have different aspects, for example:
- Welcome the user who opens the application for the first time.
- Describe the features of the application.
- Describe the features of the application.
- Allow users to register or log in.
- Allow users to customize certain aspects of the application.
- And many other customizations...
Clone this repository :
git clone https://github.com/ndenicolais/Onboarding.git
Import the project into Android Studio :
- File -> New -> Import Project
- Browse to <path_to_project>
- Click "OK"
Create a new virtual device or connect an Android device to your computer.
Click Run to start the project on the selected device.
Kotlin
Jetpack Compose
Dagger Hilt
Pager Layout
com.denicks21.onboarding # Root Package
│
├── di # DI FOLDER
│ ├── AppModule # Inject repository in the constructor.
|
├── navigation # NAVIGATION FOLDER
│ ├── NavGraph # Contains all of app destinations and actions.
│ └── NavScreens # Contains a sealed class with object corresponds to a screen and its routes.
│ └── OnBoardingScreens # Contains a sealed class with object corresponds to the onboarding's screen and its routes.
|
├── repository # REPOSITORY FOLDER
│ ├── DataStoreRepository # Repository to access Dao.
|
├── screen # SCREENS FOLDER
| │ ├── HomePage # Main page of the app. It appear after clicking the final button.
| │ ├── IntroPage # Splashscreen of the app.
| │ ├── OnBoardingPage # Page containing onboarding structure.
│
├── ui # UI FOLDER
│ ├── composables # Composable components folder
| │ ├── BackPress # Component that control and prevent back button action.
| │ ├── FinishButton # Button that completes the onboarding.
| │ ├── TopElements # Top elements of onboarding component.
|
├── theme # THEME FOLDER
| │ ├── Color # Color palette used by the app.
| │ ├── Shape # Components shapes of Compose used by the app.
| │ ├── Theme # Theme used by the app.
| │ ├── Type # Typography styles for the fonts used by the app.
|
├── viewmodels # VIEWMODELS FOLDER
| │ ├── HomeViewModel # Model that interact with repository class.
| │ ├── IntroViewModel # Model that interact with repository class.
│
├── MainActivity # Main activity
├── OnBoarding # Trigger Hilt's code generation.
