Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Native Development

Reply
Developer
gdev001
Posts: 163
Registered: ‎01-30-2013
My Device: Blackberry 10 Simulator
Accepted Solution

Container with Rounded Corners

Hello, I just have a Container with Black background color.

I want to set its borders, round.

How can I do it? Any help? Thanks.

Please use plain text.
Developer
ankur_siwach
Posts: 142
Registered: ‎09-28-2012
My Device: Blackberry Developer
My Carrier: Aircel

Re: Container with Rounded Corners

XYEdges padding = new XYEdges(5, 5, 5, 5);
int color = Color.BLACK;
int lineStyle = Border.STYLE_SOLID;
Border roundedBorder = BorderFactory.createRoundedBorder(padding, color, lineStyle);
editField.setBorder(roundedBorder);

add(editField);


----------------------------------------------------------
Feel free to press the like button on the right side to thank the user that helped you.
please mark posts as solved if you found a solution.
Please use plain text.
Developer
gdev001
Posts: 163
Registered: ‎01-30-2013
My Device: Blackberry 10 Simulator

Re: Container with Rounded Corners

Could you please add a QML version of this solution??? Thanks.
Please use plain text.
Developer
Curahee
Posts: 219
Registered: ‎01-12-2013
My Device: z30
My Carrier: Mobile Vikings

Re: Container with Rounded Corners

I always do this with a nine-sliced image. Although if it's possible with just code, that would be probably best practice.

 

How I do it (https://developer.blackberry.com/cascades/documentation/ui/image_resources/nine_slicing.html):

Create an image with roundedcorners. I called mine border.png

 

Create a file border.amd:

 

#RimCascadesAssetMetaData version=1.0
source: "border.png"
sliceMargins: 10 10 10 10

 In my qml, I set this border as an imageView in a docklayout

 

Container {
    topPadding: 20
    leftPadding: 20
    rightPadding: 20
    bottomPadding: 20
    layout: DockLayout { }
    
    ImageView {
        imageSource: "asset:///images/border.amd"
        horizontalAlignment: HorizontalAlignment.Fill
        verticalAlignment: VerticalAlignment.Fill
    }
    
    ListView {
        id: delayList
        leftPadding: 10
        rightPadding: 10
        dataModel: XmlDataModel { }
    }
    
    ActivityIndicator {
        objectName: "indicator"
        verticalAlignment: VerticalAlignment.Center
        horizontalAlignment: HorizontalAlignment.Center
        preferredWidth: 200    
        preferredHeight: 200   
    }
}   

 Hopefully this helped you a little. But as said before, using code to do this is probably better. 1 asset less to copy to the device.

______________________________________________________
beRail: BlackBerry World - GitHub
Mobile Vikings: BlackBerry World - GitHub
Park in Brussels: BlackBerry World
Please use plain text.
Developer
gdev001
Posts: 163
Registered: ‎01-30-2013
My Device: Blackberry 10 Simulator

Re: Container with Rounded Corners

So basically you suggest I use an image which has rounded corners????

ps. In my code, I needed an black background for example, however, transparent a bit... I'd need to see how to achieve this with an image... thanks.
Please use plain text.
Developer
Curahee
Posts: 219
Registered: ‎01-12-2013
My Device: z30
My Carrier: Mobile Vikings

Re: Container with Rounded Corners

I'm saying that that is also a possibility.

 

Just use a semi-transparant png image?

 

Look at this page for more information

https://developer.blackberry.com/cascades/documentation/ui/image_resources/nine_slicing.html

______________________________________________________
beRail: BlackBerry World - GitHub
Mobile Vikings: BlackBerry World - GitHub
Park in Brussels: BlackBerry World
Please use plain text.
Developer
gdev001
Posts: 163
Registered: ‎01-30-2013
My Device: Blackberry 10 Simulator

Re: Container with Rounded Corners

[ Edited ]

I have implemented the solution as you mentioned, seems to work fine. thanks; actually, I didn't use the 9 slice thing yet, just created a image with rounded corners, and in the image view had set it to semi trasnparent ...

Please use plain text.
Developer
Curahee
Posts: 219
Registered: ‎01-12-2013
My Device: z30
My Carrier: Mobile Vikings

Re: Container with Rounded Corners

With nine-slicing your asset will become less big in filesize. You can just create a 20x20 image with roundedcorners, and use nine-slicing to divide everything. Then the file is also reusable for other components. It scales well when the component becomes bigger or smaller. For instance on the Q10.

______________________________________________________
beRail: BlackBerry World - GitHub
Mobile Vikings: BlackBerry World - GitHub
Park in Brussels: BlackBerry World
Please use plain text.