Hi. how do i increase the border outline thickness...

# compose

[Jrichards1408]

Hi. how do i increase the border outline thickness on a outline textfield?

I do not see anything from the api docs below that enables me to do so.

@Composable
fun OutlinedTextField(
    value: String,
    onValueChange: (String) -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    readOnly: Boolean = false,
    textStyle: TextStyle = LocalTextStyle.current,
    label: (@Composable () -> Unit)? = null,
    placeholder: (@Composable () -> Unit)? = null,
    leadingIcon: (@Composable () -> Unit)? = null,
    trailingIcon: (@Composable () -> Unit)? = null,
    prefix: (@Composable () -> Unit)? = null,
    suffix: (@Composable () -> Unit)? = null,
    supportingText: (@Composable () -> Unit)? = null,
    isError: Boolean = false,
    visualTransformation: VisualTransformation = VisualTransformation.None,
    keyboardOptions: KeyboardOptions = KeyboardOptions.Default,
    keyboardActions: KeyboardActions = KeyboardActions.Default,
    singleLine: Boolean = false,
    maxLines: Int = if (singleLine) 1 else Int.MAX_VALUE,
    minLines: Int = 1,
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    shape: Shape = OutlinedTextFieldDefaults.shape,
    colors: TextFieldColors = OutlinedTextFieldDefaults.colors()
): Unit

[jamshedalamqaderi]

you can add border using Modifier.border()

[Jrichards1408]

but it already has one ? its a outlinetextfield

[jamshedalamqaderi]

OutlinedButton(
                    modifier = Modifier.border(10.dp, Color.Blue, ButtonDefaults.outlinedShape),
                    onClick = {
                    }) {
                    Text("Go To Student Profile")
                }

[jamshedalamqaderi]

was it helpful?

[Jrichards1408]

thats a outline button

[Jrichards1408]

im using a outlineTextField

[jamshedalamqaderi]

same on outlinedTextField

[Jrichards1408]

i will try it anyway and see

[Jrichards1408]

\but it uses its own border though

[jamshedalamqaderi]

let me send you an example. Just give me a moment

[Jrichards1408]

just tried it and it just adds another border on top of the default on

[Jrichards1408]

i wanna increase the width of the default one

[Jrichards1408]

see here

[jamshedalamqaderi]

Ohh. Sorry you cannot edit border size in outlined text field. You need to create custom text field using BasicTextField

[Jrichards1408]

Looks like u cant as i need to overide OutlinedTextFieldDefaults.DecorationBox(

[Jrichards1408]

ok

[Jrichards1408]

will it present and do the animation part where the label text animates and moves to the top left when a user clicks to enter text?

[jamshedalamqaderi]

you need to make it through by yourself. Because OutlinedTextField is doing all the stuffs internally by wrapping up BasicTextField

[Jrichards1408]

yea

[Jrichards1408]

ist odd how google doesnt allow us to tweak the outline

[Jrichards1408]

all they need to do is expose UnfocusedBorderThickness and FocuesBorderThickness

[Jrichards1408]

absolute mental they diddnt

[jamshedalamqaderi]

all the default component is part of the material design system so, we have to follow the style

[Jrichards1408]

i hear u but should be able to change it if we want to

[jamshedalamqaderi]

you could create custom one by copying the OutlinedTextField source code and modify the necessary things

[Jrichards1408]

could do but seems overkill

[Filip Wiesner]

The reasoning is that Material is opinionated design language with strict set of rules which the material components follow. If you want to deviate from this design, you'll have to go the custom path.

[Jrichards1408]

seems like the only way though just to change the thickness of the border....

[Jrichards1408]

they gave us the ability to change the colour at least...

[Jrichards1408]

yes i mean i can push back on the designers to say that it should be 1.dp thickness

[Jrichards1408]

lets see what they say

[Filip Wiesner]

There are many things that could be customisable. The API surface would be huge if you could tweak every single thing. It's a slippery slope

[Jrichards1408]

i hear u dude but tweaking a very common visible bit of a ui should be fine

[Jrichards1408]

but tweaking say, how the cursor animates or how keyboard pops up etc , yes that should not be exposed

[Jrichards1408]

we should be able to change colors and sizes of things

[Jrichards1408]

for all material components IMO

[Jrichards1408]

Because not all graphic deisgners follow material

[Jrichards1408]

or the wider business doesnt follow it strickly

[Jrichards1408]

trust me if it was my own app, i would use default material 100%

[Jrichards1408]

Another thing is why am i able to change teh shape of the outline textfield? doesnt that have a more impactful breaking the material design then a border thickness?

[jamshedalamqaderi]

yeah. you're right @Jrichards1408. even in the flutter TextField border is editable based on event (ie: focus, active, etc)

[jamshedalamqaderi]

flutter standard library also follow material design system

[Filip Wiesner]

Yeah, I had the same problem a lot of times and I agree with you that some things are really infuriating. But with Compose the Google team made decision to be more strict with the components because making custom ones is way way easier in Compose.
You use some design language, you have to follow it's rules. It's simple as that

[jamshedalamqaderi]

I agree with you that compose is lot easier then other ui framework

[Jrichards1408]

yup yup i hear ya. i will try and push back on designers if they complain about the border thickness

[jamshedalamqaderi]

So, we could make custom things more faster

[Jrichards1408]

cool cool yes it does

[Jrichards1408]

i love compose

[Jrichards1408]

anyways thanks all and sorry for the mini rant!