androidx.compose:compose-bom:2025.10.01に入っているandroidx.compose.material3:material3はバージョン1.4.0になります。
material3 1.4.0のテキストボックスOutlinedTextFieldは、枠線とテキスト入力域の間に入っているPaddingが広めで調整することができません。
調整可能なOutlinedTextFieldコンポーネントをUI共通コンポーネントとして、:core:uiモジュールのcomponentsディレクトリ(新規作成します)内にCustomOutlinedTextField.ktを作成します。
package jp.co.progress_llc.portal.core.ui.components
import androidx.compose.animation.core.animateDpAsState
import androidx.compose.animation.core.animateFloatAsState
import androidx.compose.foundation.border
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.offset
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.text.BasicTextField
import androidx.compose.material3.MaterialTheme
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.scale
import androidx.compose.ui.focus.*
import androidx.compose.ui.graphics.SolidColor
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.graphics.Shape
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
@Composable
fun CustomOutlinedTextField(
value: String,
onValueChange: (String) -> Unit,
modifier: Modifier = Modifier,
label: (@Composable (() -> Unit))? = null,
labelPadding: PaddingValues = PaddingValues(top = 4.dp, bottom = 2.dp),
textStyle: TextStyle = MaterialTheme.typography.bodySmall,
singleLine: Boolean = true,
shape: Shape = MaterialTheme.shapes.small,
contentPadding: PaddingValues = PaddingValues(start = 8.dp, end = 8.dp, top = 2.dp, bottom = 4.dp),
height: Dp = 48.dp
) {
var isFocused by remember { mutableStateOf(false) }
val focusRequester = remember { FocusRequester() }
// MaterialThemeを@Composable内で安全に参照
val colorScheme = MaterialTheme.colorScheme
// focus状態に応じて枠線色を変更
val borderColor = if (isFocused) colorScheme.primary else colorScheme.outline
// labelの移動・縮小アニメーション
val labelScale by animateFloatAsState(targetValue = if (value.isNotEmpty() || isFocused) 0.75f else 1f)
val labelOffsetY by animateDpAsState(targetValue = if (value.isNotEmpty() || isFocused) (-20).dp else 0.dp)
Box(
modifier = modifier
.height(height)
.border(1.dp, borderColor, shape)
.padding(contentPadding),
contentAlignment = Alignment.CenterStart
) {
// ラベルが指定されていれば描画
label?.let {
Box(
modifier = Modifier
.padding(labelPadding)
.scale(labelScale)
.align(Alignment.TopStart)
.offset(y = labelOffsetY)
) {
it()
}
}
// 入力フィールド
BasicTextField(
value = value,
onValueChange = onValueChange,
singleLine = singleLine,
textStyle = textStyle.copy(color = colorScheme.onSurface, fontSize = 14.sp),
cursorBrush = SolidColor(colorScheme.primary),
modifier = Modifier
.fillMaxWidth()
.onFocusChanged { focusState ->
isFocused = focusState.isFocused
}
)
}
}