[Android Compose] TextField에 placeholder 넣기

How to set placeholder on TextField in Jetpack Compose

 

 

---

기존 xml을 이용한 안드로이드 코드에서는 EditText에 placeholder를 주는 건 간단했습니다.

xml 안에 android:hint 를 이용하거나 코드상에서 editText.setHint()로 원하는 placeholder값을 넣어주면 됐죠.

 

컴포즈에서는 간단하게 TextField 안에 decorationBox를 이용하여 placeholder를 넣어줄 수 있습니다.

var input by remember { mutableStateOf("") }

Box(
	contentAlignment = Alignment.Center,
	modifier = Modifier.fillMaxSize()
) {
	BasicTextField(
		value = input,
		onValueChange = { input = it },
		modifier = Modifier
			.border(width = 1.dp, color = Color.Blue),
			.decorationBox = { innerTextField ->
				androidx.compose.material3.TextFieldDefaults.TextFieldDecorationBox(
					placeholder = {
						Text(
							text = "아이디 입력",
							color = Color.Gray
						)
					},
					singleLine = true,
					visualTransformation = VisualTransformation.None,
					enabled = true,
					innerTextField = innerTextField,
					value = input,
					interactionSource = MutableInteractionSource()
				)
			}
	)
}

 

위 코드에서 참고 할 수 있는 부분은 아래와 같습니다.

decorationBox = { innerTextField ->
	TextFieldDefaults.TextFieldDecorationBox(
		placeholder = { Text (
			text = "들어갈 placeholder 값",
			color = Color.Gray // placehodler 글씨 색
			// 그 외 TestStyle
			)
		}
}

placeholder 람다함수 안에 넣어야 할 항목들을 Composable로 넣어주면 됩니다.

그 외에 파라미터들도 필수값이기 때문에 포함시켜주어야 합니다.

 

 

추가로

TextFieldDecorationBox는 material3에서 받아올 수 있기 때문에

https://developer.android.com/jetpack/androidx/releases/compose-material3

Compose Material 3  |  Android 개발자  |  Android Developers

dependencies {
	implementation "androidx.compose.material3:material3:1.0.0-alpha14"
	implementation "androidx.compose.material3:material3-window-size-class:1.0.0-alpha14"
}

TextFieldDecorationBox를 찾을 수 없다면 해당 항목을 추가해보시길 바랍니다.

 

 

---

(여담)

 

decorationBox를 알기 전에

컴포즈에는 TextField에 기본적인 placeholder가 없는 줄 알았슴다,,

그래서 value에 hint와 input을 포커스별로 나눠서 처리했었었는데요,,

그렇게 복잡하게 처리하다가 뒤늦게 알게되서

이마를 탁 쳤던,, 기억이 있네요.

 

삽질한 코드는 기록으로 남겨볼까 합니다.

방법은 여러가지니까요..!

 

var input by remember { mutableStateOf("") }
var isFocused by remember { mutableStateOf(false) }

val hintText = "아이디 입력"

Box(
	contentAlignment = Alignment.Center,
	modifier = Modifier.fillMaxSize()
) {
	BasicTextField(
		value = if (isFocused.not() && input.isEmpty()) hintText else input,
		onValueChange = { input = it },
		modifier = Modifier
			.border(width = 1.dp, color = Color.Blue)
			.onFocusChanged { _focusState ->
				isFocused = _focusState.isFocused
			},
		textStyle = TextStyle(
			color = Color.Gray
		)
	)
}