set the background transparent on android nativescript?

Question

I want to achieve this kinda transparency on my custom view as displayed by alert view for Android application. Thanks

Answer 1

@Dlucidone I had this solved by using custom overlay from css.

<GridLayout>
    <StackLayout>
        // All your page content goes here! 
    </StackLayout>
    <StackLayout class="dimmer" visibility="{{showLoading ? 'visible' : 'collapsed'}}"/>
    <GridLayout rows="*" visibility="{{showLoading ? 'visible' : 'collapsed'}}">
        <ActivityIndicator busy="true" />
    </GridLayout>
</GridLayout>

Set the dimmer class to background transparent css, with width and height to 100%

Information how to use visible and collapsed https://www.tjvantoll.com/2015/06/05/nativescript-showing-and-hiding-elements/

BTW there is a problem with android on setting isUserInteractionEnabled https://github.com/NativeScript/NativeScript/issues/3215

Answer 2

If you need this to show an activity indicator as an overlay with a dimmed background, you could use this one: https://github.com/nstudio/nativescript-loading-indicator

import {LoadingIndicator} from '@nstudio/nativescript-loading-indicator'
const loader = new LoadingIndicator()
loader.show({dimBackground: true})
loader.hide()