Nativescript: Border and margin for buttons on Android

[gsaadeh]

I am running into issues styling the button on android. Setting both the background and border color to transparent and the border width to 0 does not remove the border completely. I am still seeing a frame around the button.

Also setting the right and left margin to 0 with a width of 100% does not make the button occupy the full width of the screen.

Do I need to work with Styles.xml to achieve that?

Additional information:

• Platform: Android
• CLI: 2.2.1
• Cross-platform modules: tns core modules ^2.0.1
• Runtime(s): tns-android 2.2.0
• API: 22 and 23 (Does not appear on 19)
• Image: Intel x86 - Galaxy S5
• Environment: Native Android Emulator

[gsaadeh]

Update: Setting the border-width to 0.1 removed the border (Thanks to Brad Martin). Setting it to 0 does not do anything.

[enchev]

Hey @gsaadeh,

Can you post a screenshot of the current state and desired result?

[gsaadeh]

This button should not have any background as it's set to transparent:

This button should have a 100% width so setting the border width to 0 to make it so didn't work. Setting it to 0.1 fixed it.

[NickIliev]

Hey @gsaadeh

We have introduced some changes to borders - you can test them with

tns plugin remove tns-core-modules
tns plugin add tns-core-modules@next

Will greatly appreciate if you can share with us if the changes have fixed this behaviour.

[NathanWalker]

@NickIliev I have tried with next and have this in my css to reset android button borders:

Button {
  background-color: transparent;
  border-width: 0;
}

And still see pesky borders on my Android buttons:
How do I remove? The previous border-width:0.1; hack used to work. Now that hack doesn't even work and am stuck with these ugly shadows :(

[dxshindeo]

Seeing same problem over here. Them shadows successfully hide when button is disabled, but need the same hiding on enabled button as well.

[tsonevn]

Hi @NathanWalker,
Could you give some more info about the problem or to provide sample project, which could be debugged localy. I tested your case in sample project and the border seems be removed. It would also help if you could confirm, whether your are using nativescript-theme-core and to check if it is something related with this plugin.

Regards,
@tsonevn

[NathanaelA]

@tsonevn - Make sure your are testing this on Android; iOS has always worked properly. Android the hack for the longest time to fix this has been to use border-width:0.1; Using a border-width: 0 never worked...

[tsonevn]

Hi @NathanWalker , @NathanaelA .

In my further investigation I was able to reproduce this behavior with showing a shadow on the button with transparent backgroundColor. We will research, what is causing this problem and provide further information. As a temporary solution you could use android setStateListAnimator to remove the shadow. I am attaching sample project, where the issue could be reproduced.

Workaround:
main-page.xml

<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo">
  <Page.actionBar>
      <ActionBar title="Title" icon="" backgroundColor="blue">
        <StackLayout orientation="horizontal"
          ios:horizontalAlignment="center"
          android:horizontalAlignment="left">
          <Button text="Sample test" loaded="buttonLoaded" />
        </StackLayout>
      </ActionBar>
  </Page.actionBar>
  <StackLayout backgroundColor="blue">
    <Label text="Tap the button" class="title"/>
    <Button text="TAP" tap="{{ onTap }}" loaded="buttonLoaded" />
    <Label text="{{ message }}" class="message" textWrap="true"/>
  </StackLayout>
</Page>

main-page.ts

import { EventData } from 'data/observable';
import { Page } from 'ui/page';
import { HelloWorldModel } from './main-view-model';
import {isAndroid} from "platform"

// Event handler for Page "navigatingTo" event attached in main-page.xml
export function navigatingTo(args: EventData) {
  // Get the event sender
  let page = <Page>args.object;
  page.bindingContext = new HelloWorldModel();
}

export function buttonLoaded(args){
  if(isAndroid){
    args.object.android.setStateListAnimator(null);
  }

}

Hope this helps.

[NathanaelA]

@tsonevn - It is awesome that you have a work around, thanks!

JUST a FYI This is a bug/regression in 2.4! The workaround that everyone in the community is using is now broken. I would highly recommend this get fixed in 2.4.1 as you are probably going to see a serious uptick in support issues when 2.4 is released as people who deliberately disabled the border on the button are not going to be happy to see a black shadow... ;-)

[NathanWalker]

@tsonevn thank you for investigating further and look forward to a proper fix in 2.4.1 👍
Really appreciate the temporary workaround for now.

[tsonevn]

Hi @NathanWalker,
In my further research I found the right way to hide button shadow in Android.

  background-color: rgba(255, 0, 0, 0.0);
  border-color:rgba(255, 0, 0, 0.0);
  border-width: 1;

Regarding to that I think that there is no bug, which should be fix. Could you verify, whether the given suggestion will work for you.

Regards,
@tsonevn

[bnussey]

I can confirm this works for me

[NathanWalker]

Thanks @tsonevn yep, definitely fixed with that, thank you 👍 You can close this.

[ByronSS]

It would be awesome to be able to do this without removing the ripple effect. I'm essentially trying to create an "icon button" that has no border with just a background icon. I'd still like to incorporate a ripple effect when clicking a simple icon that acts as a button.

[tsonevn]

Hi @ByronSS,
For your case you could use nativescript-ripple plugin, which provides the needed functionality.

Hope this helps.

[rajasekarsp]

Nativescript Ripple only supports Android and also have lot of limatations. So this doesn't solve.

[tsonevn]

Hi @rajasekarsp,
The ripple effect is something that is specific to Android and in this case, the plugin has been recreated Firstly only for Android. I reviewed the plugin's repository and found that their similar feature request for supporting an iOS is logged and you could keep track on it for further info.

[bhavincb]

use below code to remove shadow and still keep ripple effect.

Button{
    z-index:0;
}

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.