[Android] Compose Dialog Full Screen (Full Width Screen)

 

Compose 에서 Dialog 를 사용하면 아래와 같이 양 옆에 기본 마진이 생긴다.

하지만 디자인에 따라 양옆의 마진이없어야 하는 경우가 발생한다.

 

양옆의 마진을 없애기 위해선 아래와 같이 properties = DialogProperties(usePlatformDefaultWidth = false) 해주면 된다.

Dialog(
            onDismissRequest = onDismissRequest,
            properties = DialogProperties(usePlatformDefaultWidth = false)
) {
    .......... 내용 ........
}

 

아래와 같이 양 옆의 마진이 없어진 채로 나오게 된다.

 

padding을 8.dp 넣은 상태

 

 

예제 코드

@Composable
fun ListDialog(
    items: List<String>,
    textColor: Color = MaterialTheme.colorScheme.onSurface,
    isDivider: Boolean = true,
    onItemSelected: (index: Int, value: String) -> Unit = { _, _ -> },
    onDismissRequest: () -> Unit = {}
) {

    Dialog(
                 onDismissRequest = onDismissRequest,
                properties = DialogProperties(usePlatformDefaultWidth = false)
   ) {
        ListDialogContents(
            items = items,
            textColor = textColor,
            isDivider = isDivider,
            onItemSelected = onItemSelected
        )
    }
}

@Composable
fun ListDialogContents(
    items: List<String>,
    textColor: Color,
    isDivider: Boolean = true,
    onItemSelected: (index: Int, value: String) -> Unit = { _, _ -> }
) {
    Card(
        modifier = Modifier
            .padding(8.dp)
            .fillMaxWidth()
            .wrapContentHeight()
    ) {
        LazyColumn {
            itemsIndexed(items) { index, value ->
                Column(Modifier.fillMaxWidth()) {
                    TextButton(
                        modifier = Modifier
                            .heightIn(max = MAX_LIST_DIALOG_HEIGHT)
                            .fillMaxWidth(),
                        onClick = { onItemSelected(index, value) }
                    ) {
                        Text(
                            text = value,
                            color = textColor,
                            maxLines = 1,
                            overflow = TextOverflow.Ellipsis,
                            textAlign = TextAlign.Center
                        )
                    }

                    if (isDivider) {
                        Divider(Modifier.fillMaxWidth())
                    }
                }
            }
        }
    }
}