Reduce TextField padding on Android

[johnthuss]

By default on Android the TextFields have a huge amount of padding compared to iOS, as can be seen in the Showcase screenshots. How can I reduce this default padding to make the text fields on Android match their size on iOS?

[davidakoontz]

I'm a newbie with Skip... but my guess...
inside #if !SKIP
.padding(2)
#endif

[johnthuss]

Yes, that would make the iOS text fields have additional padding to try to match Android, but I'd like to actually make the padding on Android smaller instead.

If I was using Jetpack directly I would try something like this, but I don't know how to translate that to Skip.

[davidakoontz]

oh maybe I got my if !SKIP backwards ... #if SKIP // is this for Android???

Then you write the code in Swift - it will be Transpiled to Android... so...

.padding(2) // will reduce the padding - from iOS typical .padding() // default spacing to 2 on Android.... maybe!

I think you can then play around with the code...

[davidakoontz]

I'm trying to help - not real sure how ...

A key for me was realizing that to EFFECT Android Look & Feel -> I would write SwiftUI code that would be transpiled by SKIP into Android Look & Feel.

[johnthuss]

Unfortunately that does not affect the padding on android at all.

[davidakoontz]

Oh - SORRY - not the first time I'm wrong!

[aabewhite]

Sorry for the delay. Something like the following - which you could put in its own View or ViewModifier to make it easier to apply everywhere - will work:

                TextField(...)
                    .textFieldStyle(.plain)
                    #if SKIP
                    .padding(-6)
                    #endif

[davidakoontz]

Going negative - good to know!

[danielcr12]

This approach won't work because applying padding like this also removes the horizontal padding, which causes misalignment with other elements—especially if you have pickers or toggles inside your form or list. It also removes some of the default horizontal padding that the text field normally has.

In my case, this causes visual artifacts. For example, if the text field is the first element on the screen and I scroll quickly to the top, it shows a strange expanding animation. I'm not sure why, but it looks fine on iOS, whereas on Android it has this issue.

[danielcr12]

this worked for me and makes the text field look the same as the rest of elements, this is specifically to forms tho:
#if SKIP
.padding(.vertical, -5)
#endif