1

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

Kue
  • 29
  • 1
  • 7

1 Answers1

2

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.

Vikas Acharya
  • 3,550
  • 4
  • 19
  • 52
  • Thank you @Vikas, I updated the question to better explain what I want to achieve: the webview itself should have rounded corners. With your solution I get a container with rounded corners around the webview (and this adds a margin I don't want around the webview). This is what I get with your solution: https://i.stack.imgur.com/RT0eS.png – Kue Nov 30 '20 at 09:45
  • @Kue why can't you remove margin. I just added that for visual appeal ! just remove it or add negative margin and go. – Vikas Acharya Dec 01 '20 at 13:56
  • Because if I remove the margin, the borderRadius on the GridLayout disappears, so no rounded corners. I checked in iOS: the code i wrote in my question works (setting borderRadius on the webview element). There is probably some problem with Android, as you can see in some threads in stackoverflow (eg: https://stackoverflow.com/questions/11675436/android-give-a-webview-rounded-corners) but I don't know how to solve the problem in NativeScript – Kue Dec 01 '20 at 18:21
  • @Kue I'm working on this problem. once I got it I'll update – Vikas Acharya Dec 02 '20 at 06:09
  • @Kue Hey buddy ! I have updated a workaround. Have a look at it and if it works mark as answer. – Vikas Acharya Dec 02 '20 at 14:05
  • Yes, it works! The only cons is that I need to have rounded corners just on top, but it seems that just a generic "radius" directive is supported. Anyway this is a good workaround. Thank you very much! – Kue Dec 02 '20 at 16:34
  • @Kue There are so many libraries on card view. But most of the will work only for ios or android. You can choose any library as per the features you are looking. – Vikas Acharya Dec 03 '20 at 06:10