Discovering Jetpack Compose

Jetpack Compose will be the new declarative UI to build Android apps. Based on this new paradigm, let's see how we can use it with some simple samples!

Transcript

1. @GerardPaligot
   DISCOVERING
   JETPACK COMPOSE
   

   View Slide

2. WHAT’S JETPACK COMPOSE?
   100% Kotlin
   Compiler Open Source
   Declarative UI toolkit
   Android Team
   

   View Slide

3. THINK DIFFERENT.
   

   View Slide

4. View Slide

5. View Slide

6. MovieMetadata
   Rating
   TopAppBar
   Poster
   PosterNoted
   MovieItem
   

   View Slide

7. View Slide

8. View Slide

9. View Slide

10. View Slide

11. App
    MovieHome
    Home
    Section
    Home
    Section
    Home
    Section
    Data
    Events
    

    View Slide

12. App
    MovieHome
    Home
    Section
    Home
    Section
    Home
    Section
    Data
    Events
    

    View Slide

13. PLACING ELEMENTS
    

    View Slide

14. @Composable
    fun MovieMetadata(
    title: String,
    genres: List,
    releaseDate: String,
    runtime: Int
    ) {
    }
    

    View Slide

15. @Composable
    fun MovieMetadata(
    title: String,
    genres: List,
    releaseDate: String,
    runtime: Int
    ) {
    Text(
    text = title
    )
    }
    

    View Slide

16. @Composable
    fun MovieMetadata(
    title: String,
    genres: List,
    releaseDate: String,
    runtime: Int
    ) {
    Text(
    text = title,
    style = MaterialTheme.typography.h6
    )
    }
    

    View Slide

17. @Composable
    fun MovieMetadata(
    title: String,
    genres: List,
    releaseDate: String,
    runtime: Int
    ) {
    Text(
    text = title,
    style = MaterialTheme.typography.h6,
    maxLines = 2,
    overflow = TextOverflow.Ellipsis
    )
    }
    

    View Slide

18. @Composable
    fun MovieMetadata(
    title: String,
    genres: List,
    releaseDate: String,
    runtime: Int
    ) {
    Column {
    Text(
    text = title,
    style = MaterialTheme.typography.h6,
    maxLines = 2,
    overflow = TextOverflow.Ellipsis
    )
    }
    }
    

    View Slide

19. @Composable
    fun MovieMetadata(
    title: String,
    genres: List,
    releaseDate: String,
    runtime: Int
    ) {
    Column {
    Text(...)
    }
    }
    

    View Slide

20. @Composable
    fun MovieMetadata(
    title: String,
    genres: List,
    releaseDate: String,
    runtime: Int
    ) {
    Column {
    Text(...)
    genres.forEach {
    Tag(text = it)
    }
    }
    }
    

    View Slide

21. @Composable
    fun MovieMetadata(
    title: String,
    genres: List,
    releaseDate: String,
    runtime: Int
    ) {
    Column {
    Text(...)
    Row {
    genres.forEach {
    Tag(text = it)
    }
    }
    }
    }
    

    View Slide

22. @Composable
    fun MovieMetadata(
    title: String,
    genres: List,
    releaseDate: String,
    runtime: Int
    ) {
    Column {
    Text(...)
    Row(modifier = Modifier.padding(top = 5.dp)) {
    genres.forEach {
    Tag(text = it)
    }
    }
    }
    }
    

    View Slide

23. @Composable
    fun MovieMetadata(
    title: String,
    genres: List,
    releaseDate: String,
    runtime: Int
    ) {
    Column {
    Text(...)
    Row(modifier = Modifier.padding(top = 5.dp)) {
    ...
    }
    }
    }
    

    View Slide

24. @Composable
    fun MovieMetadata(
    title: String,
    genres: List,
    releaseDate: String,
    runtime: Int
    ) {
    Column {
    Text(...)
    Row(modifier = Modifier.padding(top = 5.dp)) {
    ...
    }
    val year = releaseDate.getCalendar().get(Calendar.YEAR)
    val time = "${runtime / 60}h ${runtime % 60}min"
    Text(
    text ="$year - $time",
    modifier = Modifier.padding(top = 5.dp)
    )
    }
    }
    

    View Slide

25. @Composable
    fun MovieMetadata(
    title: String,
    genres: List,
    releaseDate: String,
    runtime: Int
    ) {
    Column {
    Text(...)
    Row(modifier = Modifier.padding(top = 5.dp)) {
    ...
    }
    val year = releaseDate.getCalendar().get(Calendar.YEAR)
    val time = "${runtime / 60}h ${runtime % 60}min"
    Text(
    text = if (runtime != 0) "$year - $time" else "$year",
    modifier = Modifier.padding(top = 5.dp)
    )
    }
    }
    

    View Slide

26. @Composable
    fun MovieMetadata(
    title: String,
    genres: List,
    releaseDate: String,
    runtime: Int
    ) {
    Column {
    Text(...)
    Row(modifier = Modifier.padding(top = 5.dp)) {
    ...
    }
    CompositionLocalProvider(
    LocalContentAlpha provides ContentAlpha.medium
    ) {
    val year = releaseDate.getCalendar().get(Calendar.YEAR)
    val time = "${runtime / 60}h ${runtime % 60}min"
    Text(
    text = if (runtime != 0) "$year - $time" else "$year",
    modifier = Modifier.padding(top = 5.dp)
    )
    }
    }
    }
    

    View Slide

27. @Composable
    fun MovieMetadata(
    title: String,
    genres: List,
    releaseDate: String,
    runtime: Int
    ) {
    Column {
    Text(...)
    Row(modifier = Modifier.padding(top = 5.dp)) {
    ...
    }
    CompositionLocalProvider(
    LocalContentAlpha provides ContentAlpha.medium
    ) {
    ...
    }
    }
    }
    

    View Slide

28. @Composable
    fun MovieMetadata(
    title: String,
    genres: List,
    releaseDate: String,
    runtime: Int,
    modifier: Modifier = Modifier
    ) {
    Column(modifier = modifier) {
    Text(...)
    Row(modifier = Modifier.padding(top = 5.dp)) {
    ...
    }
    CompositionLocalProvider(
    LocalContentAlpha provides ContentAlpha.medium
    ) {
    ...
    }
    }
    }
    

    View Slide

29. LET’S CODE A LIST
    

    View Slide

30. @Composable
    fun PosterNoted(
    posterUrl: String,
    voteAverage: Int,
    ratingSize: Dp,
    ratingAlignment: Alignment,
    onClick: () -> Unit = {}
    )
    

    View Slide

31. @Composable
    fun MovieItem(
    movie: Movie,
    modifier: Modifier = Modifier,
    onClick: (movie: Movie) -> Unit
    ) {
    }
    

    View Slide

32. @Composable
    fun MovieItem(
    movie: Movie,
    modifier: Modifier = Modifier,
    onClick: (movie: Movie) -> Unit
    ) {
    PosterNoted(
    posterUrl = movie.pictureUrl,
    voteAverage = movie.percentage,
    ratingSize = 50.dp,
    ratingAlignment = Alignment.TopEnd
    )
    }
    

    View Slide

33. @Composable
    fun MovieItem(
    movie: Movie,
    modifier: Modifier = Modifier,
    onClick: (movie: Movie) -> Unit
    ) {
    Box(
    modifier = Modifier
    .width(130.dp)
    .aspectRatio(0.7f)
    ) {
    PosterNoted(
    posterUrl = movie.pictureUrl,
    voteAverage = movie.percentage,
    ratingSize = 50.dp,
    ratingAlignment = Alignment.TopEnd
    )
    }
    }
    

    View Slide

34. @Composable
    fun MovieItem(
    movie: Movie,
    modifier: Modifier = Modifier,
    onClick: (movie: Movie) -> Unit
    ) {
    Box(
    modifier = Modifier
    .width(130.dp)
    .aspectRatio(0.7f)
    ) {
    …
    }
    }
    

    View Slide

35. @Composable
    fun MovieItem(
    movie: Movie,
    modifier: Modifier = Modifier,
    onClick: (movie: Movie) -> Unit
    ) {
    Box(modifier = modifier) {
    Box(
    modifier = Modifier
    .width(130.dp)
    .aspectRatio(0.7f)
    ) {
    ...
    }
    }
    }
    

    View Slide

36. @Composable
    fun MovieItem(
    movie: Movie,
    modifier: Modifier = Modifier,
    onClick: (movie: Movie) -> Unit
    ) {
    val posterWidth = 130
    val height = (posterWidth / 0.7f).roundToInt()
    Box(modifier = modifier) {
    Surface(
    modifier = Modifier
    .fillMaxWidth()
    .preferredHeight((height - 30).dp)
    ) {
    }
    Box(
    modifier = Modifier
    .width(posterWidth.dp)
    .aspectRatio(0.7f)
    ) {
    ...
    }
    }
    }
    

    View Slide

37. @Composable
    fun MovieItem(
    movie: Movie,
    modifier: Modifier = Modifier,
    onClick: (movie: Movie) -> Unit
    ) {
    val posterWidth = 130
    val height = (posterWidth / 0.7f).roundToInt()
    Box(modifier = modifier) {
    Surface(
    modifier = Modifier
    .padding(top = 60.dp)
    .fillMaxWidth()
    .preferredHeight((height - 30).dp)
    ) {
    }
    Box(
    modifier = Modifier
    .width(posterWidth.dp)
    .aspectRatio(0.7f)
    ) {
    ...
    }
    }
    }
    

    View Slide

38. @Composable
    fun MovieItem(
    movie: Movie,
    modifier: Modifier = Modifier,
    onClick: (movie: Movie) -> Unit
    ) {
    val posterWidth = 130
    val height = (posterWidth / 0.7f).roundToInt()
    Box(modifier = modifier) {
    Surface(
    modifier = Modifier
    .padding(top = 60.dp)
    .fillMaxWidth()
    .preferredHeight((height - 30).dp)
    .clickable(onClick = { onClick(movie) })
    ) {
    }
    Box(
    modifier = Modifier
    .width(posterWidth.dp)
    .aspectRatio(0.7f)
    ) {
    ...
    }
    }
    }
    

    View Slide

39. @Composable
    fun MovieItem(
    movie: Movie,
    modifier: Modifier = Modifier,
    onClick: (movie: Movie) -> Unit
    ) {
    val posterWidth = 130
    val height = (posterWidth / 0.7f).roundToInt()
    Box(modifier = modifier) {
    Surface(
    modifier = Modifier
    .padding(top = 60.dp)
    .fillMaxWidth()
    .preferredHeight((height - 30).dp)
    .clickable(onClick = { onClick(movie) }),
    shape = RoundedCornerShape(8.dp)
    ) {
    }
    Box(
    modifier = Modifier
    .width(posterWidth.dp)
    .aspectRatio(0.7f)
    ) {
    ...
    }
    }
    }
    

    View Slide

40. @Composable
    fun MovieItem(
    movie: Movie,
    modifier: Modifier = Modifier,
    onClick: (movie: Movie) -> Unit
    ) {
    val posterWidth = 130
    val height = (posterWidth / 0.7f).roundToInt()
    Box(modifier = modifier) {
    Surface(
    modifier = Modifier
    .padding(top = 60.dp)
    .fillMaxWidth()
    .preferredHeight((height - 30).dp)
    .clickable(onClick = { onClick(movie) }),
    shape = RoundedCornerShape(8.dp),
    elevation = 5.dp
    ) {
    }
    Box(
    modifier = Modifier
    .width(posterWidth.dp)
    .aspectRatio(0.7f)
    ) {
    ...
    }
    }
    }
    

    View Slide

41. val posterWidth = 130
    val height = (posterWidth / 0.7f).roundToInt()
    Box(modifier = modifier) {
    Surface(
    modifier = Modifier
    .padding(top = 60.dp)
    .fillMaxWidth()
    .preferredHeight((height - 30).dp)
    .clickable(onClick = { onClick(movie) }),
    shape = RoundedCornerShape(8.dp),
    elevation = 5.dp
    ) {
    }
    Box(
    modifier = Modifier
    .width(posterWidth.dp)
    .aspectRatio(0.7f)
    ) {
    ...
    }
    }
    }
    

    View Slide

42. val posterWidth = 130
    val height = (posterWidth / 0.7f).roundToInt()
    Box(modifier = modifier) {
    Surface(
    modifier = Modifier
    .padding(top = 60.dp)
    .fillMaxWidth()
    .preferredHeight((height - 30).dp)
    .clickable(onClick = { onClick(movie) }),
    shape = RoundedCornerShape(8.dp),
    elevation = 5.dp
    ) {
    }
    Box(
    modifier = Modifier
    .padding(start = 30.dp)
    .width(posterWidth.dp)
    .aspectRatio(0.7f)
    ) {
    ...
    }
    }
    }
    

    View Slide

43. val posterWidth = 130
    val height = (posterWidth / 0.7f).roundToInt()
    Box(modifier = modifier) {
    Surface(
    modifier = Modifier
    .padding(top = 60.dp)
    .fillMaxWidth()
    .preferredHeight((height - 30).dp)
    .clickable(onClick = { onClick(movie) }),
    shape = RoundedCornerShape(8.dp),
    elevation = 5.dp
    ) {
    MovieMetadata(
    title = movie.title, genres = movie.genres,
    releaseDate = movie.releaseDate, runtime = movie.runtime,
    modifier = Modifier.padding(start = (posterWidth + 15).dp)
    .align(alignment = Alignment.CenterStart)
    )
    }
    Box(
    modifier = Modifier
    .padding(start = 30.dp)
    .width(posterWidth.dp)
    .aspectRatio(0.7f)
    ) {
    ...
    }
    }
    

    View Slide

44. @Composable
    fun MovieList(
    title: String,
    movies: List,
    onClick: (movie: Movie) -> Unit
    ) {
    }
    

    View Slide

45. @Composable
    fun MovieList(
    title: String,
    movies: List,
    onClick: (movie: Movie) -> Unit
    ) {
    val state = rememberScrollState()
    Column(modifier = Modifier.verticalScroll(state = state)) {
    movies.forEach {
    MovieItem(
    movie = it,
    modifier = Modifier
    .padding(start = 10.dp, top = 10.dp, end = 10.dp),
    onClick = onClick
    )
    }
    }
    }
    

    View Slide

46. @Composable
    fun MovieList(
    title: String,
    movies: List,
    onClick: (movie: Movie) -> Unit
    ) {
    LazyColumn {
    items(movies) { movie ->
    MovieItem(
    movie = movie,
    modifier = Modifier
    .padding(start = 10.dp, top = 10.dp, end = 10.dp),
    onClick = onClick
    )
    }
    }
    }
    

    View Slide

47. @Composable
    fun MovieList(
    title: String,
    movies: List,
    onClick: (movie: Movie) -> Unit
    ) {
    MovieScaffold(title = title) {
    LazyColumn {
    items(movies) { movie ->
    MovieItem(
    movie = it,
    modifier = Modifier
    .padding(start = 10.dp, top = 10.dp, end = 10.dp),
    onClick = onClick
    )
    }
    }
    }
    }
    

    View Slide

48. @Composable
    fun Scaffold(
    modifier: Modifier = Modifier,
    scaffoldState: ScaffoldState = rememberScaffoldState(),
    topBar: @Composable () -> Unit = emptyContent(),
    bottomBar: @Composable () -> Unit = emptyContent(),
    snackbarHost: @Composable (SnackbarHostState) -> Unit = { SnackbarHost(it) },
    floatingActionButton: @Composable () -> Unit = emptyContent(),
    floatingActionButtonPosition: FabPosition = FabPosition.End,
    isFloatingActionButtonDocked: Boolean = false,
    drawerContent: @Composable (ColumnScope.() -> Unit)? = null,
    drawerGesturesEnabled: Boolean = true,
    drawerShape: Shape = MaterialTheme.shapes.large,
    drawerElevation: Dp = DrawerConstants.DefaultElevation,
    drawerBackgroundColor: Color = MaterialTheme.colors.surface,
    drawerContentColor: Color = contentColorFor(drawerBackgroundColor),
    drawerScrimColor: Color = DrawerConstants.defaultScrimColor,
    backgroundColor: Color = MaterialTheme.colors.background,
    contentColor: Color = contentColorFor(backgroundColor),
    bodyContent: @Composable (PaddingValues) -> Unit
    )
    

    View Slide

49. LET’S CODE A LIST
    WITH ACTUAL FRAMEWORK UI
    

    View Slide

50. 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/list"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" />
    

    View Slide

51. 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent" android:layout_height="80dp">
    android:layout_width="match_parent" android:layout_height="match_parent">
    android:layout_width="50dp" android:layout_height="50dp" android:layout_marginStart="20dp"
    app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" tools:srcCompat="@tools:sample/avatars" />
    android:layout_width="wrap_content" android:layout_height="wrap_content"
    android:orientation="vertical" app:layout_constraintGuide_begin="100dp" />
    

    View Slide

52. android:layout_width="0dp" android:layout_height="wrap_content"
    android:layout_marginEnd="20dp" android:orientation="vertical"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toStartOf="@+id/price"
    app:layout_constraintStart_toStartOf="@+id/guideline3"
    app:layout_constraintTop_toTopOf="parent">
    android:layout_width="wrap_content" android:layout_height="wrap_content"
    android:textAppearance="@style/TextAppearance.Decathlon.Subtitle2"
    android:textColor="@color/colorOnSurface" />
    android:layout_width="wrap_content" android:layout_height="wrap_content"
    android:textAppearance="@style/TextAppearance.Decathlon.Subtitle2"
    android:textColor="@color/grey" />
    
    

    View Slide

53. android:id="@+id/price"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginEnd="20dp"
    android:textAppearance="@style/TextAppearance.Decathlon.Subtitle2"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    tools:text="50$" />
    
    
    

    View Slide

54. data class Activity(
    @DrawableRes val picture: Int,
    val displayName: String,
    val type: String,
    val price: Int
    )
    class ActivityListAdapter(val items: MutableList) :
    RecyclerView.Adapter() {
    val onClick: LiveData
    get() = this._onClick
    private val _onClick: MutableLiveData by lazy {
    return@lazy MutableLiveData()
    }
    

    View Slide

55. override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ActivityViewHolder =
    ActivityViewHolder(LayoutInflater.from(parent.context).inflate(R.layout.item_activity, parent, false))
    override fun getItemCount(): Int = items.size
    override fun onBindViewHolder(holder: ActivityViewHolder, position: Int) {
    val activity = items[position]
    holder.bind(activity, View.OnClickListener {
    _onClick.value = activity
    })
    }
    fun update(items: List) {
    this.items.clear()
    this.items.addAll(items)
    notifyDataSetChanged()
    }
    

    View Slide

56. class ActivityViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
    fun bind(activity: Activity, onClickListener: View.OnClickListener) {
    itemView.setOnClickListener(onClickListener)
    itemView.picture.setImageDrawable(ContextCompat.getDrawable(itemView.context,
    activity.picture))
    itemView.name.text = activity.displayName
    itemView.type.text = activity.type
    val color = if (activity.price > 0)
    ContextCompat.getColor(itemView.context, R.color.green)
    else
    ContextCompat.getColor(itemView.context, R.color.red)
    itemView.price.setTextColor(color)
    }
    }
    }
    

    View Slide

57. LIGHT DARK
    

    View Slide

58. val orange800 = Color(255, 150, 29)
    val orange900 = Color(255, 118, 26)
    val blue400 = Color(26, 163, 255)
    private val LightColorPalette = lightColors(
    primary = orange900,
    primaryVariant = orange800,
    secondary = blue400,
    background = Color.White,
    surface = Color.White,
    onPrimary = Color.White,
    onSecondary = Color.Black,
    onBackground = Color.Black,
    onSurface = Color.Black,
    )
    

    View Slide

59. val orange400 = Color(255, 205, 56)
    val blue800 = Color(0, 98, 203)
    val blue900 = Color(0, 68, 171)
    val grayDark = Color(45, 47, 49)
    private val DarkColorPalette = darkColors(
    primary = blue900,
    primaryVariant = blue800,
    secondary = orange400,
    background = grayDark,
    surface = grayDark,
    onPrimary = Color.White,
    onSecondary = Color.Black,
    onBackground = Color.White,
    onSurface = Color.White
    )
    

    View Slide

60. val typography = Typography(
    h5 = TextStyle(
    fontFamily = FontFamily.Default,
    fontWeight = FontWeight.W700,
    fontSize = 24.sp
    ),
    subtitle1 = TextStyle(
    fontFamily = FontFamily.Default,
    fontWeight = FontWeight.W700,
    fontSize = 16.sp
    ),
    body1 = TextStyle(
    fontFamily = FontFamily.Default,
    fontWeight = FontWeight.Normal,
    fontSize = 16.sp
    ),
    caption = TextStyle(
    fontFamily = FontFamily.Default,
    fontWeight = FontWeight.W400,
    fontSize = 10.sp
    )
    )
    

    View Slide

61. val shapes = Shapes(
    small = RoundedCornerShape(2.dp),
    medium = RoundedCornerShape(4.dp),
    large = RoundedCornerShape(8.dp)
    )
    

    View Slide

62. @Composable
    fun MaterialTheme(
    colors: Colors = MaterialTheme.colors,
    typography: Typography = MaterialTheme.typography,
    shapes: Shapes = MaterialTheme.shapes,
    content: @Composable () -> Unit
    )
    

    View Slide

63. @Composable
    fun ExploringMoviesTheme(
    isDarkMode: Boolean = isSystemInDarkTheme(),
    content: @Composable() () -> Unit
    ) {
    }
    

    View Slide

64. @Composable
    fun ExploringMoviesTheme(
    isDarkMode: Boolean = isSystemInDarkTheme(),
    content: @Composable() () -> Unit
    ) {
    MaterialTheme(
    content = content
    )
    }
    

    View Slide

65. @Composable
    fun ExploringMoviesTheme(
    isDarkMode: Boolean = isSystemInDarkTheme(),
    content: @Composable() () -> Unit
    ) {
    MaterialTheme(
    colors =
    if (isDarkMode) DarkColorPalette else LightColorPalette,
    content = content
    )
    }
    

    View Slide

66. @Composable
    fun ExploringMoviesTheme(
    isDarkMode: Boolean = isSystemInDarkTheme(),
    content: @Composable() () -> Unit
    ) {
    MaterialTheme(
    colors =
    if (isDarkMode) DarkColorPalette else LightColorPalette,
    typography = typography,
    content = content
    )
    }
    

    View Slide

67. @Composable
    fun ExploringMoviesTheme(
    isDarkMode: Boolean = isSystemInDarkTheme(),
    content: @Composable() () -> Unit
    ) {
    MaterialTheme(
    colors =
    if (isDarkMode) DarkColorPalette else LightColorPalette,
    typography = typography,
    shapes = shapes,
    content = content
    )
    }
    

    View Slide

68. @Composable
    fun MovieList(
    title: String,
    movies: List,
    onClick: (movie: Movie) -> Unit
    ) {
    MovieScaffold(
    title = title
    ){
    LazyColumnFor(items = movies) {
    MovieItem(
    movie = it,
    modifier = Modifier
    .padding(start = 10.dp, top = 10.dp, end = 10.dp),
    onClick = onClick
    )
    }
    }
    }
    

    View Slide

69. @Composable
    fun MovieList(
    title: String,
    movies: List,
    isDarkModeActive: Boolean,
    switchDarkMode: () -> Unit = {},
    onClick: (movie: Movie) -> Unit
    ) {
    MovieScaffold(
    title = title,
    isDarkModeActive = isDarkModeActive,
    switchDarkMode = switchDarkMode
    ){
    LazyColumnFor(items = movies) {
    MovieItem(
    movie = it,
    modifier = Modifier
    .padding(start = 10.dp, top = 10.dp, end = 10.dp),
    onClick = onClick
    )
    }
    }
    }
    

    View Slide

70. setContent {
    val isSystemDark = isSystemInDarkTheme()
    }
    

    View Slide

71. setContent {
    val isSystemDark = isSystemInDarkTheme()
    val isDarkModeState = remember { mutableStateOf(isSystemDark) }
    }
    

    View Slide

72. setContent {
    val isSystemDark = isSystemInDarkTheme()
    val isDarkModeState = remember { mutableStateOf(isSystemDark) }
    ExploringMoviesTheme(isDarkMode = isDarkModeState.value) {
    }
    }
    

    View Slide

73. setContent {
    val isSystemDark = isSystemInDarkTheme()
    val isDarkModeState = remember { mutableStateOf(isSystemDark) }
    ExploringMoviesTheme(isDarkMode = isDarkModeState.value) {
    App(
    isDarkModeActive = isDarkModeState.value
    )
    }
    }
    

    View Slide

74. setContent {
    val isSystemDark = isSystemInDarkTheme()
    val isDarkModeState = remember { mutableStateOf(isSystemDark) }
    ExploringMoviesTheme(isDarkMode = isDarkModeState.value) {
    App(
    isDarkModeActive = isDarkModeState.value,
    switchDarkMode = {
    isDarkModeState.value = !isDarkModeState.value
    }
    )
    }
    }
    

    View Slide

75. OBSERVING DATA WITH
    VIEWMODEL
    

    View Slide

76. class MovieViewModel : ViewModel() {
    fun getPopulars() = flow {
    ...
    }
    fun getDailyTrending() = flow {
    ...
    }
    fun getUpComing() = flow {
    ...
    }
    fun getMovieDetail(movieId: Int) = flow {
    ...
    }
    }
    

    View Slide

77. ▸ LiveData.observeAsState()
    ▸ Flow.collectAsState()
    ▸ Observable.subscribeAsState()
    

    View Slide

78. @Composable
    fun MyExample() {
    // Returns the same instance as long as the activity is alive,
    // just as if you grabbed the instance from an Activity or
    // Fragment
    val viewModel: MovieViewModel = viewModel()
    }
    @Composable
    fun MyExample2() {
    // Same instance as in MyExample
    val viewModel: MovieViewModel = viewModel()
    }
    

    View Slide

79. @Composable
    fun MovieListViewModel(
    movieSection: MovieSection,
    isDarkModeActive: Boolean,
    switchDarkMode: () -> Unit = {},
    onClick: (movie: Movie) -> Unit
    ) {
    MovieList(
    title = title,
    movies = movies.value,
    isDarkModeActive = isDarkModeActive,
    switchDarkMode = switchDarkMode,
    onClick = onClick
    )
    }
    

    View Slide

80. @Composable
    fun MovieListViewModel(
    movieSection: MovieSection,
    isDarkModeActive: Boolean,
    switchDarkMode: () -> Unit = {},
    onClick: (movie: Movie) -> Unit
    ) {
    val viewModel: MovieViewModel = viewModel()
    MovieList(
    title = title,
    movies = movies.value,
    isDarkModeActive = isDarkModeActive,
    switchDarkMode = switchDarkMode,
    onClick = onClick
    )
    }
    

    View Slide

81. @Composable
    fun MovieListViewModel(
    movieSection: MovieSection,
    isDarkModeActive: Boolean,
    switchDarkMode: () -> Unit = {},
    onClick: (movie: Movie) -> Unit
    ) {
    val viewModel: MovieViewModel = viewModel()
    val movies = when (movieSection) {
    MovieSection.UPCOMING -> viewModel.getUpComing()
    .collectAsState(initial = emptyList())
    MovieSection.POPULAR -> viewModel.getPopulars()
    .collectAsState(initial = emptyList())
    MovieSection.TRENDING -> viewModel.getDailyTrending()
    .collectAsState(initial = emptyList())
    }
    MovieList(
    movies = movies.value,
    isDarkModeActive = isDarkModeActive,
    switchDarkMode = switchDarkMode,
    onClick = onClick
    )
    }
    

    View Slide

82. @GerardPaligot
    DISCOVERING
    JETPACK COMPOSE
    

    View Slide

83. @GerardPaligot
    DISCOVERING
    COMPOSE MULTIPLATFORM
    

    View Slide

84. UI/UX UI/UX UI/UX
    BUSINESS LOGIC AND CORE
    

    View Slide

85. UI/UX UI/UX UI/UX
    BUSINESS LOGIC AND CORE
    ACTUAL ACTUAL ACTUAL
    

    View Slide

86. BUSINESS LOGIC AND CORE
    ACTUAL ACTUAL ACTUAL
    COMPOSE MULTIPLATFORM
    

    View Slide

87. View Slide

88. BUSINESS LOGIC AND CORE
    ACTUAL ACTUAL ACTUAL
    COMPOSE MULTIPLATFORM
    

    View Slide

89. UX UX UX
    BUSINESS LOGIC AND CORE
    ACTUAL ACTUAL ACTUAL
    COMPOSE MULTIPLATFORM
    

    View Slide

90. COMPILER
    RUNTIME
    UI
    FOUNDATION-LAYOUT
    ANIMATION
    FOUNDATION
    MATERIAL 3
    Transf m @C posable functi s Pro amming model, state
    management and runtime f
    the c pose c pil plugin
    Fundamental c p ents
    Basics lay ts like B , R
    and C umn
    C p ents animati s
    Basics c p ents and int acti s
    Implementati of Mat ial Design
    specificati s
    Implementati of Mat ial Y
    

    View Slide

91. COMPILER
    RUNTIME
    UI
    FOUNDATION-LAYOUT
    ANIMATION
    FOUNDATION
    MATERIAL 3
    Transf m @C posable functi s Pro amming model, state
    management and runtime f
    the c pose c pil plugin
    

    View Slide

92. COMPILER
    RUNTIME
    UI
    FOUNDATION-LAYOUT
    ANIMATION
    FOUNDATION
    MATERIAL 3
    Transf m @C posable functi s Pro amming model, state
    management and runtime f
    the c pose c pil plugin
    WEB-CORE-RUNTIME
    WEB-CORE
    WIDGETS
    Runtime dedicated to web apps
    to gen ate DOM tags
    Basics native web c p ents
    Modifi s and lay ts
    

    View Slide

93. UX UX UX
    BUSINESS LOGIC AND CORE
    ACTUAL ACTUAL ACTUAL
    COMPOSE MULTIPLATFORM
    

    View Slide

94. UX UX UX
    BUSINESS LOGIC AND CORE
    ACTUAL ACTUAL ACTUAL
    COMPOSE MULTIPLATFORM COMPOSE WEB
    

    View Slide

95. WHY COMPOSE WEB?
    ▸ Compose Canvas rendering not compatible (yet) with web technologies
    ▸ Compose Web emit DOM UI for NPM librairies compatibility and SEO
    

    View Slide

96. :android-app :desktop-app
    :data
    

    View Slide

97. :android-app :desktop-app
    :data
    

    View Slide

98. :android-app :desktop-app
    :data :components
    :theming
    

    View Slide

99. :android-app :desktop-app
    :data :components
    :theming
    

    View Slide

100. plugins {
     id("com.android.library")
     }
     android {
     ...
     }
     

     View Slide

101. plugins {
     id("com.android.library")
     kotlin("multiplatform")
     id("org.jetbrains.compose")
     }
     android {
     ...
     }
     

     View Slide

102. plugins {
     id("com.android.library")
     kotlin("multiplatform")
     id("org.jetbrains.compose")
     }
     android {
     ...
     }
     kotlin {
     android()
     jvm("desktop")
     }
     

     View Slide

103. import org.jetbrains.compose.compose
     plugins {
     id("com.android.library")
     kotlin("multiplatform")
     id("org.jetbrains.compose")
     }
     android {
     ...
     }
     kotlin {
     android()
     jvm("desktop")
     sourceSets {
     named("commonMain") {
     dependencies {
     implementation(compose.runtime)
     implementation(compose.foundation)
     implementation(compose.material)
     }
     }
     }
     }
     

     View Slide

104. SOURCE SET
     desktopMain
     SOURCE SET
     androidMain
     SOURCE SET
     commonMain
     

     View Slide

105. @Composable
     expect fun Font(
     fontName: String,
     weight: FontWeight,
     style: FontStyle
     ): Font
     SOURCE SET
     commonMain
     

     View Slide

106. @Composable
     actual fun Font(
     fontName: String,
     weight: FontWeight,
     style: FontStyle
     ): Font {
     val context = LocalContext.current
     val id = context.resources
     .getIdentifier(fontName, "font", context.packageName)
     return Font(id, weight, style)
     }
     SOURCE SET
     androidMain
     

     View Slide

107. @Composable
     actual fun Font(
     fontName: String,
     weight: FontWeight,
     style: FontStyle
     ): Font {
     return androidx.compose.ui.text.platform.Font(
     "font/${fontName}.ttf",
     weight,
     style
     )
     }
     SOURCE SET
     desktopMain
     

     View Slide

108. object Fonts {
     val roboto: FontFamily
     @Composable
     get() = FontFamily(
     Font(
     "roboto_bold",
     FontWeight.Bold,
     FontStyle.Normal
     ),
     Font(
     "roboto_italic",
     FontWeight.Normal,
     FontStyle.Italic
     ),
     Font(
     "roboto_regular",
     FontWeight.Normal,
     FontStyle.Normal
     )
     )
     }
     SOURCE SET
     commonMain
     

     View Slide

109. object Fonts {
     val roboto: FontFamily
     @Composable
     get() = ...
     }
     SOURCE SET
     commonMain
     

     View Slide

110. object Fonts {
     val roboto: FontFamily
     @Composable
     get() = ...
     }
     object Typographies {
     val roboto: Typography
     @Composable
     get() = Typography(defaultFontFamily = Fonts.roboto)
     }
     SOURCE SET
     commonMain
     

     View Slide

111. object Fonts {
     val roboto: FontFamily
     @Composable
     get() = ...
     }
     object Typographies {
     val roboto: Typography
     @Composable
     get() = Typography(defaultFontFamily = Fonts.roboto)
     }
     @Composable
     fun ExploringMoviesTheme(
     isDarkMode: Boolean = isSystemInDarkTheme(),
     content: @Composable () -> Unit
     ) {
     MaterialTheme(
     colors =
     if (isDarkMode) DarkColorPalette else LightColorPalette,
     typography = Typographies.roboto,
     shapes = shapes,
     content = content
     )
     }
     SOURCE SET
     commonMain
     

     View Slide

112. :android-app :desktop-app
     :data :components
     :theming
     

     View Slide

113. @Composable
     expect fun RemoteImage(
     url: String,
     contentDescription: String?,
     modifier: Modifier = Modifier,
     contentScale: ContentScale = ContentScale.Fit
     )
     SOURCE SET
     commonMain
     

     View Slide

114. import org.jetbrains.compose.compose
     plugins {
     ...
     }
     android {
     ...
     }
     kotlin {
     android()
     jvm("desktop")
     sourceSets {
     named("commonMain") {
     ...
     }
     named("androidMain") {
     dependencies {
     implementation(Dependencies.Accompanist.coil)
     }
     }
     }
     }
     

     View Slide

115. @Composable
     actual fun CrossRemoteImage(
     url: String,
     contentDescription: String?,
     modifier: Modifier,
     contentScale: ContentScale
     ) {
     Image(
     painter = rememberAsyncImagePainter(model = url),
     modifier = modifier,
     contentDescription = contentDescription,
     contentScale = ContentScale.Crop,
     )
     }
     SOURCE SET
     androidMain
     

     View Slide

116. import org.jetbrains.compose.compose
     plugins {
     ...
     }
     android {
     ...
     }
     kotlin {
     android()
     jvm("desktop")
     sourceSets {
     named("commonMain") {
     ...
     }
     named("androidMain") {
     ...
     }
     named("desktopMain") {
     dependencies {
     implementation(Dependencies.okhttp)
     }
     }
     }
     }
     

     View Slide

117. @Composable
     actual fun CrossRemoteImage(
     url: String,
     contentDescription: String?,
     modifier: Modifier,
     contentScale: ContentScale
     ) {
     val image = remember { mutableStateOf(null) }
     if (image.value != null) {
     Image(
     bitmap = image.value!!,
     contentDescription = contentDescription,
     modifier = modifier,
     contentScale = contentScale
     )
     }
     }
     SOURCE SET
     desktopMain
     

     View Slide

118. @Composable
     actual fun CrossRemoteImage(
     url: String,
     contentDescription: String?,
     modifier: Modifier,
     contentScale: ContentScale
     ) {
     val image = remember { mutableStateOf(null) }
     LaunchedEffect(url) {
     }
     if (image.value != null) {
     Image(
     bitmap = image.value!!,
     contentDescription = contentDescription,
     modifier = modifier,
     contentScale = contentScale
     )
     }
     }
     SOURCE SET
     desktopMain
     

     View Slide

119. @Composable
     actual fun CrossRemoteImage(
     url: String,
     contentDescription: String?,
     modifier: Modifier,
     contentScale: ContentScale
     ) {
     val image = remember { mutableStateOf(null) }
     LaunchedEffect(url) {
     ImageLoader.load(url)?.let {
     }
     }
     if (image.value != null) {
     Image(
     bitmap = image.value!!,
     contentDescription = contentDescription,
     modifier = modifier,
     contentScale = contentScale
     )
     }
     }
     SOURCE SET
     desktopMain
     

     View Slide

120. @Composable
     actual fun CrossRemoteImage(
     url: String,
     contentDescription: String?,
     modifier: Modifier,
     contentScale: ContentScale
     ) {
     val image = remember { mutableStateOf(null) }
     LaunchedEffect(url) {
     ImageLoader.load(url)?.let {
     image.value = org.jetbrains.skia.Image.makeFromEncoded(it)
     .toComposeImageBitmap()
     }
     }
     if (image.value != null) {
     Image(
     bitmap = image.value!!,
     contentDescription = contentDescription,
     modifier = modifier,
     contentScale = contentScale
     )
     }
     }
     SOURCE SET
     desktopMain
     

     View Slide

121. WHY SHOULD CARE
     ABOUT COMPOSE?
     

     View Slide

122. WHY SHOULD CARE ABOUT COMPOSE?
     ▸ Android UI framework never
     changed since 2008
     ▸ Need to wait very long time before
     bug fixes deployed in production
     ▸ Need to worry about keeping the
     View hierarchy as flat as possible
     ▸ Unbundled from OS
     ▸ Exit View and Fragment
     ▸ Clarify state ownership
     and event handling
     ▸ Writing less code
     

     View Slide

123. slack.kotlinlang.org
     #compose
     Open Source Project
     github.com/androidx/androidx
     

     View Slide

124. REFERENCES
     ▸ Discovering Movies, GitHub Repository of Gerard Paligot
     https://github.com/GerardPaligot/discovering-movies
     ▸ Official documentation about Jetpack Compose, Developer Android Website
     https://developer.android.com/jetpack/compose/documentation
     ▸ Pathways Compose
     https://developer.android.com/courses/pathways/compose
     ▸ Compose Academy
     https://compose.academy/
     ▸ Samples Compose app by community
     https://jetpackcompose.app/
     

     View Slide

125. THANK YOU!
     @GerardPaligot
     

     View Slide