Search code examples
webviewnativescriptnativescript-vue

NativeScript: WebView with rounded corners (Android Only)

I want to have rounded corners in my WebView, but apparently the borderRadius directive is ignored in Android

<GridLayout rows="*">
     <WebView row="0" id="webView" borderRadius="20 20 0 0"/>
</GridLayout>

Any idea?

This is the desired result:

enter image description here

Solution

  • I solved this problem by using cardview which has top preference on view hierarchy(I don't know what they call officially, I just telling you as view hierarchy to make some sense).

    If you know how FAB will get placed on a view. You can understand how this works. For more info you need to dig into these developing-hierarchy (This might be a wrong tutorial, but I got only this)

    solution

    <Page xmlns:Card="@nstudio/nativescript-cardview">
<StackLayout>

    <Card:CardView margin="10" radius="50">
        <StackLayout height="500">
            <WebView src="https://i.ytimg.com/vi/xRZB5KBLdOA/maxresdefault.jpg" />
        </StackLayout>
    </Card:CardView>

</StackLayout>
</Page>

    For more info on this plugin nativescript-cardview

    If you get more info on this share here.