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
Trusted Contributor
itcraps
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
Please use plain text.
Super Contributor
Meghasanghvi
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.

Please use plain text.
Trusted Contributor
itcraps
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
Please use plain text.
Trusted Contributor
itcraps
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
Please use plain text.
Super Contributor
Meghasanghvi
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.

Please use plain text.
Developer
MFSI
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
Please use plain text.
Trusted Contributor
itcraps
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
Please use plain text.
Developer
MFSI
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
Please use plain text.