Not working with borders or clip-path

[vcooley]

Adding a border or clip path appears to make the gradient fail. My use case for this is creating circular icons similar to the contact icons found on iOS (where you see initials if you don't have a picture for that contact).

I have not been able to test this on iOS yet, but have not gotten any combination of gradients and borders to work on Android.

[EddyVerbruggen]

Can you wrap it in another layout that has the border instead?

[vcooley]

Unfortunately, that causes the Gradient to be on top of the layout with the border. I've also tried wrapping Gradient and using a z-index, but I can't seem to get that CSS property to work.

[jevenson]

I've found that I'm not able to use the CSS property for border-radius. I have to specify the border radius on the element.

Works fine on iOS with border-radius in css, but Android is does not. Might be related to this issue.

[Hesamp]

@jevenson Use the border-radius directly on the xml element for android <Gradient:Gradient android:borderRadius="10" direction="to bottom right" colors="#02fce6,#0dede7" id="wrapper"> <Button text="SignIn" tap="signIn" class="signin" width="150%" horizontalAlignment="center" /> </Gradient:Gradient>

[jevenson]

Yes, that's exactly what I'm doing now. I should be able to specify that in CSS though, which is why I mentioned it.

[cfoulkes]

The original post also mentioned clip-path.

I can't get clip path to work on a gradient element in android. It works fine on iOS. The clip path is in the css file. I've tried applying it as an attribute on the gradient element (as clipPath="..." or clip-path="...") but neither work in android or iOS. Is there another way?

Thanks Colin