1. 배경 그라데이션

디자인 요구사항

전체 화면의 배경색에 그라데이션을 설정해야 한다.

구현 방법

배경색상에 brush로 Gradient를 만들 수 있다.

앞에 있는 Float 값은 해당 색을 표시하는 영역의 퍼센트를 의미한다.

Box(
  modifier = Modifier
      .fillMaxSize()
      .background(
          brush = Brush.verticalGradient(
              colorStops = arrayOf(
                  0.0f to dynamicBackgroundColor,
                  0.47f to Black
              )
          )
      )
      .padding(innerPadding)
) 

2. top bar 색상

디자인 요구사항에 따르면 상단부터 그라데이션으로 이어져야 했으므로 topbar의 색상을 투명하게 설정해야 한다.

문제 상황

Scaffold로 topBor과 content를 지정했다.

topbar에는 배경 색상이 적용되지 않았다.

해결 방법

topbar의 색상을 투명하게 바꿔준다.

CenterAlignedTopAppBar(
    title = { Text(name) },
    colors = TopAppBarDefaults.centerAlignedTopAppBarColors(
        containerColor = Color.Transparent
    )
)

3. status bar의 색상 동적으로 바꾸기

문제 상황

status bar가 기본 색상으로 지정되었다.