[Compose/Course] Tutorial: Jetpack Compose basics - #3 Material Design

Android Compose 튜토리얼  |  Android 개발자  |  Android Developers

Lesson 3: Material Design

Compose는 Material Design 원칙 지원
Compose의 많은 UI 요소가 Material Design을 즉시 사용 가능하도록 구현

Use Material Design

function을 Material theme와 Surface로 감싸 구현
이것은 composable이 앱 테마에 명시된 스타일을 상속하여 앱 전체에 일관성을 갖게 함

Matieral Design은 3가지 주요 요소인 Color, Typography, Shape로 구성

// ...

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            ComposeTutorialTheme {
                Surface(modifier = Modifier.fillMaxSize()) {
                    MessageCard(Message("Android", "Jetpack Compose"))
                }
            }
        }
    }
}

@Preview
@Composable
fun PreviewMessageCard() {
    ComposeTutorialTheme {
        Surface {
            MessageCard(
                msg = Message("Colleague", "Take a look at Jetpack Compose, it's great!")
            )
        }
    }
}

Color

MaterialTheme.colors를 사용하여 감싸진 테마의 색상으로 스타일 지정 가능
색상이 필요한 곳에 값 사용 가능

// ...
import androidx.compose.foundation.border
import androidx.compose.material.MaterialTheme

@Composable
fun MessageCard(msg: Message) {
   Row(modifier = Modifier.padding(all = 8.dp)) {
       Image(
           painter = painterResource(R.drawable.profile_picture),
           contentDescription = null,
           modifier = Modifier
               .size(40.dp)
               .clip(CircleShape)
               .border(1.5.dp, MaterialTheme.colors.secondary, CircleShape)
       )

       Spacer(modifier = Modifier.width(8.dp))

       Column {
           Text(
               text = msg.author,
               color = MaterialTheme.colors.secondaryVariant
           )

           Spacer(modifier = Modifier.height(4.dp))
           Text(text = msg.body)
       }
   }
}

Typography

Mateiral Typography 스타일은 MaterialTheme 안에서 사용 가능

// ...

@Composable
fun MessageCard(msg: Message) {
   Row(modifier = Modifier.padding(all = 8.dp)) {
       Image(
           painter = painterResource(R.drawable.profile_picture),
           contentDescription = null,
           modifier = Modifier
               .size(40.dp)
               .clip(CircleShape)
               .border(1.5.dp, MaterialTheme.colors.secondary, CircleShape)
       )
       Spacer(modifier = Modifier.width(8.dp))

       Column {
           Text(
               text = msg.author,
               color = MaterialTheme.colors.secondaryVariant,
               style = MaterialTheme.typography.subtitle2
           )

           Spacer(modifier = Modifier.height(4.dp))

           Text(
               text = msg.body,
               style = MaterialTheme.typography.body2
           )
       }
   }
}

Shape

Surface Composable로 감싼 후 Shape를 설정하여 도형과 높이 맞춤 설정 가능

// ...
import androidx.compose.material.Surface

@Composable
fun MessageCard(msg: Message) {
   Row(modifier = Modifier.padding(all = 8.dp)) {
       Image(
           painter = painterResource(R.drawable.profile_picture),
           contentDescription = null,
           modifier = Modifier
               .size(40.dp)
               .clip(CircleShape)
               .border(1.5.dp, MaterialTheme.colors.secondary, CircleShape)
       )
       Spacer(modifier = Modifier.width(8.dp))

       Column {
           Text(
               text = msg.author,
               color = MaterialTheme.colors.secondaryVariant,
               style = MaterialTheme.typography.subtitle2
           )

           Spacer(modifier = Modifier.height(4.dp))

           Surface(shape = MaterialTheme.shapes.medium, elevation = 1.dp) {
               Text(
                   text = msg.body,
                   modifier = Modifier.padding(all = 4.dp),
                   style = MaterialTheme.typography.body2
               )
           }
       }
   }
}​

Enable dark theme

Dark Theme는 밤에 특별히 밝은 디스플레이를 피할 수 있게 하거나 디바이스의 배터리를 절약할 수 있게 함
Material Design의 지원으로, Jetpack Compose는 기본적으로 dark theme를 다룰 수 있음
Material Design 색상을 사용하여, 글씨와 배경을 어두운 배경에 맞게 자동으로 맞춰줌

여러 개의 function으로 분리하거나, 같은 function에 여러 어노테이션을 추가하여 여러 개의 preview를 생성 가능

light theme와 dark theme를 위한 색상 선택은 IDE가 생성한 Theme.kt 파일에 정의 되어 있음

// ...
import android.content.res.Configuration

@Preview(name = "Light Mode")
@Preview(
    uiMode = Configuration.UI_MODE_NIGHT_YES,
    showBackground = true,
    name = "Dark Mode"
)
@Composable
fun PreviewMessageCard() {
   ComposeTutorialTheme {
    Surface {
      MessageCard(
        msg = Message("Colleague", "Hey, take a look at Jetpack Compose, it's great!")
      )
    }
   }
}