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
Posts: 238
Registered: ‎12-26-2010
My Device: BlackBerry Z10
My Carrier: Telus

Keep ImageButton'ss Image Aspect Ratio Regardless of the ImageButton's width

I have a horizontal StackLayout consist of 4 ImageButtons.

 

First, I need all the buttons to share an equal space, so I set width of each button to DisplayWidth/4.

 

This resulted in Stretched(widened) image.

 

Is there anyway to keep ImageButton's Image Aspect Ratio ? Thanksss

Keep ImageButton'ss Image Aspect Ratio

www.jackdevora.com
Regular Contributor
Posts: 56
Registered: ‎08-21-2012
My Device: BB10
My Carrier: RIM

Re: Keep ImageButton'ss Image Aspect Ratio Regardless of the ImageButton's width

[ Edited ]

Hi,

 

First you should use spaceQuota property of Stack layout for all 4 ImageButtons. set spaceQuota for all of them equal ..say for e.g 1.0

 

import bb.cascades 1.0

// creates one page with a label

Page {
    Container {
        layout: StackLayout {
            orientation: LayoutOrientation.LeftToRight
        }
        ImageButton {
            defaultImageSource: "asset:///search_btn_big.png"
            layoutProperties: StackLayoutProperties {
                spaceQuota: 1.0
            }
        }
        ImageButton {
            defaultImageSource: "asset:///search_btn_small.png"
            layoutProperties: StackLayoutProperties {
                spaceQuota: 1.0
            }
        }
        ImageButton {
            defaultImageSource: "asset:///search_btn_big.png"
            layoutProperties: StackLayoutProperties {
                spaceQuota: 1.0
            }
        }
        ImageButton {
            defaultImageSource: "asset:///search_btn_small.png"
            layoutProperties: StackLayoutProperties {
                spaceQuota: 1.0
            }
        }
    }
}

 

 

And next, If your Images are getting shrinked..you have to change your Images having desired size Because even if you use preferred height & width for ImageButtons or go with spaceQuota, even if you use ImageView , In all cases this will happen.

Developer
Posts: 238
Registered: ‎12-26-2010
My Device: BlackBerry Z10
My Carrier: Telus

Re: Keep ImageButton'ss Image Aspect Ratio Regardless of the ImageButton's width

I tried that before and it resulted in stretched image.

 

So there's no other way eh?

www.jackdevora.com
Regular Contributor
Posts: 56
Registered: ‎08-21-2012
My Device: BB10
My Carrier: RIM

Re: Keep ImageButton'ss Image Aspect Ratio Regardless of the ImageButton's width

Did you try changing Image size? You need to re-size the Image manually (and not programmatic-ally) give a try to MS picture manager. But I feel you need wider Image so editing won't help.
Developer
Posts: 238
Registered: ‎12-26-2010
My Device: BlackBerry Z10
My Carrier: Telus

Re: Keep ImageButton'ss Image Aspect Ratio Regardless of the ImageButton's width

I need the app to show up well in all screen sizes. So i guess manually changing the image is not good.

 

Thanks though..

www.jackdevora.com
Highlighted
Regular Contributor
Posts: 76
Registered: ‎07-31-2012
My Device: Blackberry
My Carrier: Vodafone

Re: Keep ImageButton'ss Image Aspect Ratio Regardless of the ImageButton's width

Try this:

 

import bb.cascades 1.0

Page {
Container {
layout: StackLayout {
orientation: LayoutOrientation.LeftToRight
}
Container {
layoutProperties: StackLayoutProperties {
spaceQuota: 1.0
}
ImageButton {
horizontalAlignment: HorizontalAlignment.Center
defaultImageSource: "asset:///images/photogallery_icn.png"
}
}
Container {
layoutProperties: StackLayoutProperties {
spaceQuota: 1.0
}
ImageButton {
horizontalAlignment: HorizontalAlignment.Center
defaultImageSource: "asset:///images/photogallery_icn.png"
}
}
Container {
layoutProperties: StackLayoutProperties {
spaceQuota: 1.0
}
ImageButton {
horizontalAlignment: HorizontalAlignment.Center
defaultImageSource: "asset:///images/photogallery_icn.png"
}
}
Container {
layoutProperties: StackLayoutProperties {
spaceQuota: 1.0
}
ImageButton {
horizontalAlignment: HorizontalAlignment.Center
defaultImageSource: "asset:///images/photogallery_icn.png"
}
}
}
}

 

This won't stretch the images.

 

Regards,

Nishant Shah