Yet another awesome Intro screen library 🔥

Overview

Compose-Intro

Yes, I'm too bad in naming my libraries : )

buildStatus latestVersion

Yet another Intro Screen library made with the love of Kotlin and Jetpack compose : ) ❤️

Demo

https://github.com/KapilYadav-dev/ComposeIntro/blob/main/demo.mp4

Screenshot

⌨️ Usage

latestVersion

1. Add dependency.

repositories {
  maven { url 'https://jitpack.io' } // Add jitpack
}

dependencies {
  implementation 'com.github.KapilYadav-dev:ComposeIntro:<latest.version>'
}

2. Use IntroScreen composable.

// These are the must fields.
IntroScreen(
    //Passing the list
    items = items,
    // Setting the Header icon
    headerIcon = Icons.Outlined.Password,
    //Left click handler
    onLeftButtonClick = { },
    //Right click handler
    onRightButtonClick = { },
    //On backpress handler
    onBackPress = { },
    //Get current Page
    currentPage = { }
)
   

3. IntroScreen composable all params.

fun IntroScreen(
    items: List<IntroData>,
    infiniteLoop: Boolean = false,
    /*
     * These are the color which will shape the color of UI
     */
    headerIconTint: Color = Color(0xfffFF6464),
    primaryColor: Color = Color(0xfffFF6464),
    secondaryColor: Color = Color(0xfffBABABA),
    /*
     * These are the fonts which will shape the fonts of UI
     */
    primaryFont: FontFamily = BebasNue(),
    secondaryFont: FontFamily = Poppins(),
    /*
     * This is the header drawable
     */
    headerIcon: ImageVector,
    /*
     * These are callbacks or high order function which will help to interact with buttons
     */
    onRightButtonClick: () -> Unit,
    onLeftButtonClick: () -> Unit,
    onBackPress: () -> Unit,
    currentPage:(Int) -> Unit,
    /*
     * These are the text of the buttons
     */
    leftButtonText: String = "REGISTER",
    rightButtonText: String = "LOGIN",
    /*
     * These are the units of various text and views
     */
    headerIconSize: Dp = 48.dp,
    primaryFontSize: TextUnit = 56.sp,
    secondaryFontSize: TextUnit = 15.sp,
    highlightFontSize: TextUnit = 40.sp,
    unhighlightFontSize: TextUnit = 20.sp,
    buttonFontSize: TextUnit = 18.sp,
)

4. Example use of IntroScreen composable.

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            IntroioTheme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colors.background
                ) {
                    val context = LocalContext.current
                    //Usage
                    IntroScreen(
                        //Passing the list
                        items = introItems(),

                        // Setting the Header icon
                        headerIcon = Icons.Outlined.Password,
                        //Left click handler
                        onLeftButtonClick = {
                            Toast.makeText(context,"Left click", Toast.LENGTH_SHORT).show()
                        },
                        //Right click handler
                        onRightButtonClick = {
                            Toast.makeText(context,"Right click", Toast.LENGTH_SHORT).show()
                        },
                        //On backpress handler
                        onBackPress = {
                            Toast.makeText(context,"BackPRess Page", Toast.LENGTH_SHORT).show()
                        },
                        //Get current Page
                        currentPage = {
                            Toast.makeText(context,"Current Page: $it", Toast.LENGTH_SHORT).show()
                        },

                    )
                }
            }
        }
    }
}


fun introItems() = listOf(
    IntroData(
        "Stop using unsecure passwords for your online accounts, level up with OnePass. Get the most secure and difficult-to-crack passwords.",
        "Generate \nSecure Passwords."
    ),
    IntroData(
        "Store and manage all of your passwords from one place. Don’t remember hundreds of passwords, just remember one.",
        "All your passwords are here"

    ),
    IntroData(
        "Don’t compromise your passwords by typing them in public, let OnePass autofill those and keep your credentials secure.",
        "Don't type,\nAutofill your credentials."
    )
)

✍️ Author

👤 mrkaydev

Feel free to ping me 😉

🤝 Contributing

Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are greatly appreciated.

  1. Open an issue first to discuss what you would like to change.
  2. Fork the Project
  3. Create your feature branch (git checkout -b feature/amazing-feature)
  4. Commit your changes (git commit -m 'Add some amazing feature')
  5. Push to the branch (git push origin feature/amazing-feature)
  6. Open a pull request

Please make sure to update tests as appropriate.

Show your support

Give a ⭐️ if this project helped you!

Buy Me A Coffee

☑️ TODO

  • Add UI tests and unit tests
  • Add Text size support and more responsive

📝 License

Copyright © 2022 - mrkaydev

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
You might also like...
GameDetailScreenCompose - Game Detail Screen Compose With Kotlin
GameDetailScreenCompose - Game Detail Screen Compose With Kotlin

GameDetailScreenCompose Домашнее задание от Podlodka Crew. "Нужно сверстать экра

Taxi - an example of how to create an introductory screen using Jetpack Compose
Taxi - an example of how to create an introductory screen using Jetpack Compose

Taxi - an example of how to create an introductory screen using Jetpack Compose

Clone of a onboarding screen📱animation originally created by @cuberto.

BubblePager Here I tried to clone an onboarding screen animation using Jetpack Compose. Download the apk file from the release page and try it yoursel

Gmail clone project, that uses Jetpack Compose to draw UI content for gmail home screen
Gmail clone project, that uses Jetpack Compose to draw UI content for gmail home screen

Gmail clone project, that uses Jetpack Compose to draw UI content for gmail home screen following Udemy course: Android 12 Jetpack Compose Developer Course - From 0 To Hero

View Navigator is a tool that allows you to inspect and validate all the views of a screen individually.
View Navigator is a tool that allows you to inspect and validate all the views of a screen individually.

🎇 View Navigator View Navigator is a tool that allows you to inspect and validate all the views of a screen individually, highlighting the margins an

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

🍂 Jetpack Compose image loading library which can fetch and display network images using Glide, Coil, and Fresco.
🍂 Jetpack Compose image loading library which can fetch and display network images using Glide, Coil, and Fresco.

Landscapist 🍂 Jetpack Compose image loading library which can fetch and display network images using Glide, Coil, Fresco Usecase You can see the use

Compose library to drag to reveal
Compose library to drag to reveal

DraggableScaffold DraggableScaffold is a library that helps stack one composable on top of another so it can be dragged to reveal the content under it

Lyricist - The missing I18N and I10N library for Jetpack Compose!

Jetpack Compose greatly improved the way we build UIs on Android, but not how we interact with strings. stringResource() works well, but doesn't benefit from the idiomatic Kotlin like Compose.

Releases(1.0.1)
Owner
Kapil Yadav
➥ Developing your needs 👨🏽‍💻 ➥ Bug Bounty Hunter 🧔🏽 ➥ Explorer 🤸🏽‍♂️ ➥ Bodybuilding isn’t 90 minutes in the gym. 🦾
Kapil Yadav
🔥 Yet another Tinder like swipeable cards, built for Jetpack Compose

twyper Yet another Tinder like swipeable card library, built for Jetpack Compose ✨ Demo Screen.Recording.2022-02-20.at.10.46.59.PM.mov ⌨️ Usage 1. Add

theapache64 88 Dec 24, 2022
Jetpack compose App Intro

App Intro (Experimental) Jetpack compose App Intro. Who's using App Intro? ?? Check out who's using App Intro Include in your project Gradle Add the d

Ranbir Singh 5 May 17, 2022
Lock Screen-Compose - Lock Screen with Jetpack Compose

Lock_Screen-Compose 此專案為Jetpack Compose練習題.

Kanneki Chen 0 Jan 26, 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
Glance Experimental Tools aims to supplement Jetpack Glance with features that are commonly required by developers but not yet available.

Glance Experimental Tools ?? Work in-progress: artifacts not available yet This project aims to supplement Jetpack Glance with features that are commo

Google 96 Dec 25, 2022
(another?) UNOFFICIAL Steam mobile client project

Jetisteam an unofficial Steam client for Android While being based on the protobuf-based WebUI-oriented RPC/API, this app will miss a lot of features

iTaysonLab 46 Jan 4, 2023
An Android Jetpack Compose library for displaying on-screen messages

InfoBar Compose An Android Jetpack Compose library for displaying on-screen messages. Unlike the built-in Snackbar from the Compose Material library,

Radu Salagean 78 Dec 20, 2022
Instagram Profile Screen UI With Jetpack Compose

Instagram Profile Screen With Jetpack Compose In this repository, i made instagram profile screen. And i used jetpack compose. While i make this app,

Adem ATİCİ 10 Mar 6, 2022
Compose-Instagram-Profile-UI - Instagram profile screen UI using android jetpack compose

Compose-Intsgram-Profile-UI Instagram profile screen UI using android jetpack co

TILLERN 1 Mar 8, 2022
ComposeLoginScreen - A sleek design of a simple login screen using Jetpack Compose

ComposeLoginScreen A sleek design of a simple login screen using Jetpack Compose

ComposeDesign 19 Dec 5, 2022