Quick Start Guide

Setup Dependencies

In your module-level build.gradle(.kts) file, add the Modo Compose dependency:

Create Your First Screen

To display UI using Modo, you need to create a Screen implementation. Let's create a simple QuickStartScreen and implement it step-by-step:

1. Create a new Kotlin file QuickStartScreen.kt:

   // TODO: provide Parcelable implementation class QuickStartScreen( // TODO: implement screenKey ) : Screen { @Composable override fun Content(modifier: Modifier) { // TODO: implement your UI } }

2. Override the Content function to provide the UI for your screen. Don't forget to use modifier in your root element:

   @Composable override fun Content(modifier: Modifier) { Box(modifier = modifier) { Text( text = "Hello, Modo!", modifier = Modifier.align(Alignment.Center) ) } }

3. Implement the Parcelable interface for your Screen. It's needed to support saving and restoring the screen's structure. You can easily do it by using the parcelable gradle plugin and the @Parcelize annotation:

   @Parcelize class QuickStartScreen( ... ) : Screen { ... }

4. Implement the screenKey property using the generateScreenKey() function. It's crucial to use this function because it generates a unique key for each screen:

   @Parcelize class QuickStartScreen( // You need to generate a unique screen key using a special function override val screenKey: ScreenKey = generateScreenKey() ) : Screen { ... }

Complete code:

Integrate the Screen into the Activity

Now that we've created QuickStartScreen, let's integrate it into an activity.

1. Create a new activity QuickStartActivity and add the following code:

   class QuickStartActivity : AppCompatActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { // TODO: integrate screen } } }

2. Integrate the QuickStartScreen into the activity. To do so, use the rememberRootScreen function to create a root screen that will manage navigation:

   setContent { val rootScreen = rememberRootScreen { QuickStartScreen() } // TODO: display the root screen }

3. Display the root screen using the Content function of the root screen:

   setContent { val rootScreen = rememberRootScreen { QuickStartScreen() } // Pass fillMaxSize modifier to display it in full screen rootScreen.Content(Modifier.fillMaxSize()) }

Complete code:

Run the Application!

Create a Custom StackScreen

Copy the DefaultStackScreen implementation and change its name to QuickStartStackScreen:

Everything is quite similar to declaring a Screen. Let's look at the differences:

• private val navModel: StackNavModel in the constructor is used to store and update the state of the navigation. Declaring it as a constructor parameter allows it to be saved and restored using the @Parcelize annotation. Don't forget to pass it to the StackScreen's constructor.

• TopScreenContent(modifier) is used to render the last screen in the stack.

• ScreenTransition(modifier) inside TopScreenContent is used to animate the transition between screens.

Custom Animation

1. Let's customize the animation a little bit. You can do it by passing transitionSpec as a ScreenTransition parameter:

   ScreenTransition( modifier = modifier, transitionSpec = {

2. Inside the transitionSpec lambda, we have access to the ComposeRendererScope that contains the old and new states. Let's use the built-in calculateStackTransitionType to determine the StackTransitionType:

   transitionSpec = { val screenTransitionType = calculateStackTransitionType()

3. Now we can use StackTransitionType to define the animation. Let's use slideInHorizontally and slideOutHorizontally with different parameters for the forward and back transitions:

   val screenTransitionType = calculateStackTransitionType() when (screenTransitionType) { StackTransitionType.Push -> { slideInHorizontally(initialOffsetX = { it }) togetherWith slideOutHorizontally(targetOffsetX = { -it }) } StackTransitionType.Pop -> { slideInHorizontally(initialOffsetX = { -it }) togetherWith slideOutHorizontally(targetOffsetX = { it }) } StackTransitionType.Replace, StackTransitionType.Idle -> fadeIn() togetherWith fadeOut() } }

Customize QuickStartStackScreen Content

You can customize Content as a regular composable function. Let's modify QuickStartStackScreen. Draw the background and make screens render with rounded corners:

1. You can pass a modifier to the TopScreenContent function to change it:

   TopScreenContent( Modifier .background(Color.Cyan) .padding(16.dp) .clip(shape = RoundedCornerShape(32.dp)) .fillMaxSize() .background(Color.White) ) { screenModifier -> }

2. You can also put the TopScreenContent inside another container to customize it. Let's put it inside a Box and add buttons to close the activity:

   Box(modifier = modifier) { TopScreenContent( ) { screenModifier -> } val context = LocalContext.current IconButton( modifier = Modifier .align(Alignment.TopEnd) .padding(8.dp) .clip(CircleShape) .background(Color.White), onClick = { context.getActivity()?.finish() } ) { Icon( painter = rememberVectorPainter(image = Icons.Default.Close), contentDescription = "Close quick start activity" ) } }

Complete code: