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


Thank you for visiting the BlackBerry Support Community Forums.

BlackBerry will be closing the BlackBerry Support Community Forums Device Forums on April 1st (Developers, see below)

BlackBerry remains committed to providing excellent customer support to our customers. We are delighted to direct you to the CrackBerry Forums, a well-established and thorough support channel, for continued BlackBerry support. Please visit http://forums.crackberry.com or http://crackberry.com/ask. You can also continue to visit BlackBerry Support or the BlackBerry Knowledge Base for official support options available for your BlackBerry Smartphone.

"When we launched CrackBerry.com 10 years ago, we set out to make it a fun and useful destination where BlackBerry Smartphone owners could share their excitement and learn to unleash the full potential of their BlackBerry. A decade later, the CrackBerry community is as active and passionate as ever and I know our knowledgeable members and volunteers will be excited to welcome and assist more BlackBerry owners with their questions."

- Kevin Michaluk, Founder, CrackBerry.com

Developers, for more information about the BlackBerry Developer Community please review Join the Conversation on the BlackBerry Developer Community Forums found on Inside BlackBerry.


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

Set an ImageView to fill the entire screen

Hi veveryone,

I need to have the ImageView stretch to fill the screen. How do I go about it?

Should I retrieve the screen width and height? If yes, how?

 

Thank youuuuuu

 

The code below doesnt work, it only centers the image

 Page *root = new Page;

	Container *container=new Container();
	container->setLayout(DockLayout::create());
	container->setBottomPadding(0);
	container->setLeftPadding(0);
	container->setTopPadding(0);
	container->setRightPadding(0);

	container->setBottomMargin(0);
	container->setLeftMargin(0);
	container->setTopMargin(0);
	container->setRightMargin (0);

	container->setParent(root);

	ImageView* img= ImageView::create("asset:///images/image.png");
	img->setHorizontalAlignment(HorizontalAlignment::Center);
	img->setVerticalAlignment(VerticalAlignment::Center);
	img->setScalingMethod(ScalingMethod::AspectFill);

	container->add(offImageView);

    root->setContent(container);

 

www.jackdevora.com
Highlighted
Super Contributor
Posts: 306
Registered: ‎08-10-2010
My Device: Not Specified

Re: Set an ImageView to fill the entire screen

You can do this by using below method.

 

Top container of the page should have below code.

Container{

layout: DockLayout {
}
ImageView {
imageSource: "asset:///images/main_bg.png"
}

Container{

 // All the UI Component....

}

}

and now take another container and put UI component which you want to add.

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

Re: Set an ImageView to fill the entire screen

[ Edited ]

Isn't my code is the equivalent way of doing it in c++?? But it doesnt work..

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

Re: Set an ImageView to fill the entire screen

And btw I forgot to mention that my image is smaller than the screen.. I dont know if thats relevant or not

www.jackdevora.com
Super Contributor
Posts: 306
Registered: ‎08-10-2010
My Device: Not Specified

Re: Set an ImageView to fill the entire screen

If image size is small it will stread out when you set in full screen. Better to use correct dimension image.

 

In cpp you just have to change the syntax of qml. You can take help of CascadeCookbookcpp in this example all the UI element is build using cpp.

Developer
Posts: 80
Registered: ‎09-03-2012
My Device: 9810
My Carrier: Vodafone

Re: Set an ImageView to fill the entire screen

Try this


 Page *root = new Page;

    	Container *container=new Container();
    	container->setLayout(DockLayout::create());
    	container->setBottomMargin(0);
    	container->setLeftMargin(0);
    	container->setTopMargin(0);
    	container->setRightMargin (0);

    	container->setParent(root);

    	ImageView* offImageView= ImageView::create("asset:///images/image.jpg");
    	offImageView->setLayoutProperties(DockLayoutProperties::create().horizontal(HorizontalAlignment::Fill).vertical(VerticalAlignment::Fill));
    	offImageView->setScalingMethod(ScalingMethod::AspectFill);

    	container->add(offImageView);

        root->setContent(container);


    Application::setScene(root);

 

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

Re: Set an ImageView to fill the entire screen

Thanks.

 

I have instead resize the image by getting the screen width and height and set it to the ImageView preferredWidth&Height

www.jackdevora.com
Developer
Posts: 80
Registered: ‎09-03-2012
My Device: 9810
My Carrier: Vodafone

Re: Set an ImageView to fill the entire screen

Ok welcome . You mean problem solved. Then mark it solved.

Always Success