LFK mobile DevPods

Presenting the latest mobile development and life of Engineers in LINE Fukuoka, Japan

  • Po
  • Kelvin
Published: 2021/06/24 290 views

About this episode

Po has recently built an app fully in Jetpack compose during his 1-month bootcamp training and is here to share his impression. And we've invited Kelvin, who is originally from Hong Kong and been working in LINE Fukuoka for the past 4 years, to share his experience about work and life in Fukuoka.

Opening

  • About the Host
    • Po, originally from Taiwan, current Android Developer of LINE Client team, Wallet part
    • Kelvin, originally from Hong Kong, current Android Developer of LINE Client team, Shop part

About Jetpack Compose UI

  • A new UI toolkit for Android
  • Declarative UI, State-based
  • What problem does Compose UI solves?
    • No more switching between XML mindset and Kotlin mindset
    • Organizable components with packages
    • Fast prototyping
    • Straightforward Animation API
    • Access to Kotlin language feature and compile time checking

Animation in Jetpack Compose

  • A series of Animation API have been introduced along with Compose UI

  • Compare to legacy Android animation API

    • We used to have different API for different animation use cases and often required setting up resources file in xml or manage the animation lifecycle
    • This results into quite a high learning cost and implementation overhead
  • A Quick Example of one of the animation API in Compose

@Preview
@Composable
fun PreviewOpenCloseButton() {
    var uiState: UiState by remember { mutableStateOf(UiState.Closed) }
    // delegate rotation value to animateFloatAsState() and depends on uiState for its value
    val rotation by animateFloatAsState(
        targetValue = when (uiState) {
            UiState.Closed -> 0f
            UiState.Opened -> 225f // 180 + 45
        }
    )
    Column(
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        IconButton(
            onClick = {
                uiState = uiState.toggle()
            }
        ) {
            Icon(
                Icons.Rounded.Add,
                "switch button",
                modifier = Modifier.graphicsLayer {
                    // assing the rotation to the icon's graphic layer
                    rotationZ = rotation
                }
            )
        }
        Text(text = uiState.label)
    }
}
  
sealed class UiState(val label: String) {
    object Closed : UiState("Open")
    object Opened : UiState("Close")
    fun toggle(): UiState = when(this) {
        Closed -> Opened
        Opened -> Closed
    }
}
  • The underlying Compose Runtime handles the recomposition of UI node once the state changes, so that developers do not have to managed the launch and terminate of animation
  • An Example that combine multiple animated values, such as alpha, rotation, into one transition
  • Hopefully we will soon be able to use Compose in our daily development :)

Kelvin’s Journey from Hong Kong to Fukuoka

  • How did he find the position?
  • Previously worked in a startup company in HK as an android developer

Comparing the Engineering Culture

  • Engineering culture in Fukuoka overall
    • Active community
    • Various of interest driven technical meetup
  • Engineering culture in LINE Fukuoka
    • Frequently host public meetup at the office
    • Self-Study Project during golden week

How’s Living in Fukuoka in General

  • Difficulties faced when coming to Japan and how the company support us

Ending

  • Left your comments on twitter with #LFK_DEVPODS !!
10秒前へ 10秒次へ