App Intro (Experimental)

Jetpack compose App Intro.

Jetpack compose App intro

Who’s using App Intro?

Include in your project

Gradle

Add the dependency below to your module‘s build.gradle file:

dependencies {
    implementation("io.github.androidpoet:appintro:1.0.0")
}

Create AppIntro

Create an instance of the AppIntro.

	    
  var targetScreen by remember { mutableStateOf(Screens.Screen1) }

    val transition = updateTransition(targetScreen, label = "")
    transition.AppIntro(
      modifier = Modifier
        .fillMaxSize()
        .weight(0.8f),
      transitionSpec = {
        EnterExitTransition(
          getEnterAnimation(500, Easing.LinearEasing, EnterAnimation.SharedAxisXForward),
          getExitAnimation(500, Easing.LinearEasing, ExitAnimation.SharedAxisXBackward)
        )
      }
    ) {
      when (it) {
        Screens.Screen1 -> Screen1()
        Screens.Screen2 -> Screen2()
        Screens.Screen3 -> Screen3()
      }
    }

Create Enum for Composable

Create an instance of the Screens and Composable.

enum class Screens {
  Screen1,
  Screen2,
  Screen3
}

val items = OnBoardingItem.get()

@Composable
fun Screen1() {
  OnBoardingItem(items[0])
}

@Composable
fun Screen2() {
  OnBoardingItem(items[1])
}

@Composable
fun Screen3() {
  OnBoardingItem(items[2])
}

Create Data for Composable

Create an instance of the `Composable Data.

class OnBoardingItem(
  var title: Int,
  var text: Int,
  var image: Int,
) {

  companion object {

    fun get(): List<OnBoardingItem> {
      return listOf(
        OnBoardingItem(R.string.onBoardingTitle1, R.string.onBoardingText1, R.drawable.undraw_a),
        OnBoardingItem(R.string.onBoardingTitle2, R.string.onBoardingText2, R.drawable.undraw_b),
        OnBoardingItem(R.string.onBoardingTitle3, R.string.onBoardingText3, R.drawable.undraw_c),
      )
    }
  }
}

@Composable
fun OnBoardingItem(
  item: OnBoardingItem
) {
  Column(
    horizontalAlignment = Alignment.CenterHorizontally,
    verticalArrangement = Arrangement.Center,
    modifier = Modifier.fillMaxSize()
  ) {
    Image(painter = painterResource(item.image), contentDescription = null)

    Text(
      text = stringResource(item.title),
      fontSize = 24.sp,
      color = MaterialTheme.colors.onBackground,
      fontWeight = FontWeight.Bold
    )

    Text(
      text = stringResource(item.text),
      color = MaterialTheme.colors.onBackground.copy(alpha = 0.8f),
      textAlign = TextAlign.Center
    )
  }
}

Supported Animations

Enter Animations

 EnterAnimation.FadeIn
 EnterAnimation.SharedAxisXForward
 EnterAnimation.SharedAxisYForward
 EnterAnimation.SharedAxisZForward
 EnterAnimation.ElevationScale
 EnterAnimation.SlideIn
 EnterAnimation.SlideInHorizontally
 EnterAnimation.SlideInVertically
 EnterAnimation.ScaleIn
 EnterAnimation.ExpandIn
 EnterAnimation.ExpandHorizontally
 EnterAnimation.ExpandVertically

Exit Animations

 ExitAnimation.FadeOut
 ExitAnimation.SharedAxisXBackward
 ExitAnimation.SharedAxisYBackward
 ExitAnimation.SharedAxisZBackward
 ExitAnimation.ElevationScale
 ExitAnimation.SlideOut
 ExitAnimation.SlideOutHorizontally
 ExitAnimation.SlideOutVertically
 ExitAnimation.ScaleOut
 ExitAnimation.ShrinkOut
 ExitAnimation.ShrinkHorizontally
 ExitAnimation.ShrinkVertically

Easing

Easing.FastOutSlowInEasing
Easing.LinearOutSlowInEasing
Easing.FastOutLinearInEasing
Easing.LinearEasing

Demo

Find this repository useful? ❤️

Support it by joining stargazers for this repository. ⭐ Also, follow me on GitHub for cool projects! 🤩

Inspiration

This library was inspired by Repo.

License

Copyright 2022 AndroidPoet (Ranbir Singh)

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.

GitHub

View Github