Nativescript: [Android]: How can I remove the top/bottom padding of a button?

[NickIliev]

_From @relez on June 6, 2018 14:13_

Hi guys, I would like to remove the top/bottom padding of a Button in Android, but I have tried all CSS styles and no luck :frowning:
I have no idea about how to configure buttons in the styles.xml file.

Any idea please? Thanks!

_Copied from original issue: NativeScript/android-runtime#1080_

[NickIliev]

@relez there are some native specifics that lead to this default behavior. On Android, most of the default application themes are applying several predefined conditions that are causing that all buttons to be rendered with a "padding". The workaround is to remove the minHeight and minWidth of your button.

For example (using the loaded event of the Button to overwrite its default minHeight and minWidth):

onBtnLoaded(args) {
    let btn = <Button>args.object;
    let nativeButton = btn.nativeView;

    if (isAndroid) {
        nativeButton.setMinHeight(0);
        nativeButton.setMinWidth(0);
    }
}

Now padding: 0 will actually remove all the paddings.

Full demo application demonstrating the above can be found in this Playground.

[topclaudy]

@NickIliev Imagine having to do this is for all buttons in an app. Is there another solution?

[NickIliev]

@topclaudy well the thing is that we wanted to preserve the native look'n'feel for the Button element. So I guess if you want a fully custom button that has no default padding you could use Label with tap event.

[topclaudy]

@NickIliev The problem is not preserving the native look'n'feel (that's fine). The problem is that consumers are unable to remove the padding via CSS. I ended up using labels but I'm not happy with this workaround.

[sanved77]

@relez there are some native specifics that lead to this default behavior. On Android, most of the default application themes are applying several predefined conditions that are causing that all buttons to be rendered with a "padding". The workaround is to remove the minHeight and minWidth of your button.

For example (using the loaded event of the Button to overwrite its default minHeight and minWidth):

onBtnLoaded(args) {
    let btn = <Button>args.object;
    let nativeButton = btn.nativeView;

    if (isAndroid) {
        nativeButton.setMinHeight(0);
        nativeButton.setMinWidth(0);
    }
}

Now padding: 0 will actually remove all the paddings.

Full demo application demonstrating the above can be found in this Playground.

This is a good way to handle this particular thing. I just feel there should've been internal implementation to make sure that there aren't two different snippets for the two platforms. Seems a little tedious to write it specifically for Android.

[relez]

Hi @sanved77, thanks for the answer. I ended up using labels which is not a nice solution but it works. I was researching and I believe there is a way to remove setting up a new style in the manifest file, overriding the default native theme or something like that, that would be a nice solution.

According to your solution, Do I have to add the loaded event to the button and then paste the event every time I use a button? If so, that would be very annoying, I will try to look for a global solution.
Thanks!

[devbali]

android:minWidth = "0px" in xml?

[sanved77]

Hi @sanved77, thanks for the answer. I ended up using labels which is not a nice solution but it works. I was researching and I believe there is a way to remove setting up a new style in the manifest file, overriding the default native theme or something like that, that would be a nice solution.

According to your solution, Do I have to add the loaded event to the button and then paste the event every time I use a button? If so, that would be very annoying, I will try to look for a global solution.
Thanks!

Unfortunately yes, you have to add that to the label every possible time. I ended up finding a more intrinsic way to get it centered rather than the pixels. I have made it this way --

<Label @loaded="$onLabelLoaded" </Label>

And the prototype -->

Vue.prototype.$onLabelLoaded = function (args) {
if (platform.isAndroid) {
args.object.android.setGravity(17)
}
}

[fgutteridge]

Don't think this issue should be closed if it's still present in 6.1+... a hack-y workaround isn't a proper fix