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: 163
Registered: ‎01-30-2013
My Device: Blackberry 10 Simulator
Accepted Solution

Custom button with icon alignment

[ Edited ]

Hi, I have created a custom button in QML which has a possibility to add a background image,

and icon to the left of the text, and a text itself.

However, I have following issue. If both text and icon are set, then the button is correctly

displayed, if however only text is set and no icon, the text doesn't get positioned in the

center as I would like, however, it leaves some space for the ImageView (which is empty).

Can please someone provide me with hints how to solve this issue? i.e., when no icon is

set I want the text to be positioned in the ceter. Is it possible to achieve this? Thanks.

ps. here is the code:

Container
{
//elsewhere I set the background of my button   
....
     // text and the icon on the left
     Container {
         verticalAlignment: VerticalAlignment.Center
         horizontalAlignment: HorizontalAlignment.Center
        
         layout: StackLayout {
                 orientation: LayoutOrientation.LeftToRight
             }
         
          // Button Icon        
         ImageView {          
             verticalAlignment: VerticalAlignment.Center    
             id: btnIconID
             imageSource: btnIcon
             minWidth: 50.0
             minHeight: 50.0
        }  
          
        // Button Title        
        Label {
           id: label
           text: "Add your text here"
           textStyle.base: SystemDefaults.TextStyles.smallText
           
           verticalAlignment: VerticalAlignment.Center
           horizontalAlignment: HorizontalAlignment.Center
           
           textStyle.color: Color.create("#ffffffff")
           textStyle.fontWeight: FontWeight.Bold
        }
    }
...
}

 this is how I use this button somewhere else:

      
       // on this button text and icon are correctly positioned
       CustomButton {
                   text: "Button 1"
                   btnBackground: "asset:///btn-default.png"
                   btnSelected: "asset:///btn-selected.png"
                   btnIcon: "asset:///someicon.png"
           }
      
       // here not; because there is no icon, and the text is
       // not centered anymore as I explained above
       CustomButton {
                   text: "Button 1"
                   btnBackground: "asset:///btn-default.png"
                   btnSelected: "asset:///btn-green.png"
           }

 

Developer
Posts: 1,524
Registered: ‎12-18-2012
My Device: Z30, Z10 LE, DevAlpha C, PlayBook

Re: Custom button with icon alignment

Hi,

Use 'visible' property to hide the ImageView.
I'm not sure if this will work:

ImageView
{
visible: imageSource.length != 0
...
}

If it doesn't, try setting this property on initialization:
btnIconID.visible = false;

Andrey Fidrya, @zmeyc on twitter
Developer
Posts: 163
Registered: ‎01-30-2013
My Device: Blackberry 10 Simulator

Re: Custom button with icon alignment

[ Edited ]

Thanks it's working. I had implemented something like this:
ImageView
{
...
visible: btnIconSet.
}
Finally, can you please look at the code above (my initial post). The ImageView I have there (middle of code, with id: btnIcon), it seems to be transparent somewhat because I can see what is happening behind it. Could you please tell me how to restrict this?? I don't need it to be transparent.

Developer
Posts: 1,524
Registered: ‎12-18-2012
My Device: Z30, Z10 LE, DevAlpha C, PlayBook

Re: Custom button with icon alignment

Could it be that the icon itself is semi-transparent? In the code I didn't spot anything which might cause this.

Andrey Fidrya, @zmeyc on twitter
Developer
Posts: 163
Registered: ‎01-30-2013
My Device: Blackberry 10 Simulator

Re: Custom button with icon alignment

[ Edited ]

hm.. I don't know. You know, it may not be in the code above, but as one can see my ImageView has a parent Container right? That container on the other hand also has an parent Container, whose opacity=0.7. Can this be causing this??? Thanks. And how to avoid this problem if that is the case.

Developer
Posts: 1,524
Registered: ‎12-18-2012
My Device: Z30, Z10 LE, DevAlpha C, PlayBook

Re: Custom button with icon alignment

[ Edited ]

Opacity 0.7 in container affects child objects too.

A possible workaround is creating two similar containers and placing them in StackDockLayout . Put all items which should be semi-transparent into the bottom container and put the image into the top container. This might require some experimenting.

A simpler option is to use a semi-transparent image for background instead of opacity property, but this is not applicable to all use cases.

 


Andrey Fidrya, @zmeyc on twitter
Developer
Posts: 163
Registered: ‎01-30-2013
My Device: Blackberry 10 Simulator

Re: Custom button with icon alignment

HI, yes problem was that parent opacity affected child objects too. I have solved it by putting different Containers on each other using DockLayout(). The transparent one was of course at the bottom, and this solved my issue. Thanks for your help anyway on this and other posts too.