NativeScript. How do i create a custom action bar with a png image?

Question

I'm developing a child oriented app with nativescript, i want to make a custom action bar with an image background like this:

But as you can see, on scroll, it shows a white rectangular background instead of transparent, how can i achieve this, using the Nativescript Layout?

This is what i'm doing:

<GridLayout rows="100,*">
        <app-header row="0"></app-header> //This app header it's the custom component that holds just an image tag with the source.
        
        <ScrollView row="1" orientation="vertical" class="page">
               //Scrolling content...
        </ScrollView>
</GridLayout>
       
    

Answer 1

You could use color with alpha for ActionBar.If you use opacity proprty for ActionBar, the children will be affected too. app.css

ActionBar{
    background-color: rgba(255, 0, 0, 0.0);
}