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

Web and WebWorks Development

Reply
New Developer
Posts: 13
Registered: ‎10-16-2011
My Device: 9300
My Carrier: Vodafone

Resize images according to devices

Hi All,

 

Please help me suggest what is the proper way of handling various devices.The screen resolution makes them skewed. Should i dynamically load seperate images depending on the screen size or resize the images ?

 

 

Retired
Posts: 1,382
Registered: ‎07-02-2009
My Device: BlackBerry Bold 9900
My Carrier: Bell

Re: Resize images according to devices

What types of images are you referring to - icons, background images, inline images?

 

Depending on what screen sizes you are targeting, it may make sense to package multiple resolutions for your images into your application and dynamically load them (using JavaScript - or even better CSS3 media queries).

 

Otherwise if you can get away with it, you could resize your images based on screen size.  Remember it is better to scale down than up!

Follow me on Twitter: @n_adam_stanley
-------------------------------------------------------------------------------------------------------------------------
Your app doesn't work? Use BlackBerry remote web inspector to find out why.
Trusted Contributor
Posts: 176
Registered: ‎04-12-2012
My Device: Bold 9780 & Curve 8250
My Carrier: vodacom

Re: Resize images according to devices

Hi there astanley

 

I am looking to resize my image based on the screen size, you seem to have experience in doing this. I am new to development can you please explain to me how to do this and maybe illustrate with a small code snippet please Smiley Happy

 

Thank you very much

Trusted Contributor
Posts: 176
Registered: ‎04-12-2012
My Device: Bold 9780 & Curve 8250
My Carrier: vodacom

Hi there astanley   I am looking to resize my image based...

Hi there astanley

 

I am looking to resize my image based on the screen size, you seem to have experience in doing this. I am new to development can you please explain to me how to do this and maybe illustrate with a small code snippet please Smiley Happy

 

Thank you very much

Trusted Contributor
Posts: 166
Registered: ‎12-09-2011
My Device: 9550,9300,9800,9700,9900,9850,9860

Re: Hi there astanley I am looking to resize my image based...

Hi NGeldenhuys,

Just pass the img tag dynamically and change the image size according to your device by using the below condition:

if(screen.height == "Enter the device height"){
// Your code
}

 
Here is another method:
http://stackoverflow.com/questions/1297449/change-image-size-with-javascript 

 

Thanks & Regards,
Nitish Subudhi

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.
Trusted Contributor
Posts: 176
Registered: ‎04-12-2012
My Device: Bold 9780 & Curve 8250
My Carrier: vodacom

Re: Hi there astanley I am looking to resize my image based...

Thank you but I need to to make the App's background image fit different devices screens , any advice on that?

Trusted Contributor
Posts: 166
Registered: ‎12-09-2011
My Device: 9550,9300,9800,9700,9900,9850,9860

Re: Hi there astanley I am looking to resize my image based...

I think this should work for you.

if ((screen.width == 640) && (screen.height == 480)) {
document.body.style.backgroundImage = "url(images/bg640x480.gif)";
}

else if ((screen.width == 360) && (screen.height == 480)) {
document.body.style.backgroundImage = "url(images/bg360x480.gif)";

}

else if ((screen.width == 480) && (screen.height == 360)) {
document.body.style.backgroundImage = "url(images/bg480x360.gif)";

}

else if ((screen.width == 480) && (screen.height == 640)) {
document.body.style.backgroundImage = "url(images/bg480x640.gif)";

}

else if ((screen.width == 320) && (screen.height == 240)) { 
document.body.style.backgroundImage = "url(images/bg320x240.gif)";	
}

 

Thanks & Regards,
Nitish Subudhi

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.
Trusted Contributor
Posts: 176
Registered: ‎04-12-2012
My Device: Bold 9780 & Curve 8250
My Carrier: vodacom

Re: Hi there astanley I am looking to resize my image based...

[ Edited ]

All you do Is you create an Image that is as big as the largest bb Resolution, then the image will automatically get clipped.

 

The code I used To Add a background image(that adds the Image behind all Fields) .

 

package com.Images;

import net.rim.device.api.system.Bitmap;
import net.rim.device.api.system.Display;
import net.rim.device.api.ui.Graphics;
import net.rim.device.api.ui.Manager;

import net.rim.device.api.ui.container.MainScreen;
import net.rim.device.api.ui.container.VerticalFieldManager;

public final class TestScreen extends MainScreen
{
private VerticalFieldManager mainManager;
private VerticalFieldManager subManager;
private Bitmap _backgroundBitmap = Bitmap.getBitmapResource
("12814463558610.png");
private int deviceWidth = Display.getWidth();
private int deviceHeight = Display.getHeight();

public TestScreen(){
super(NO_VERTICAL_SCROLL);
mainManager = new VerticalFieldManager(
Manager.NO_VERTICAL_SCROLL |
Manager.NO_VERTICAL_SCROLLBAR ){
public void paint(Graphics graphics)
{
graphics.clear();
graphics.drawBitmap(0, 0, deviceWidth,
deviceHeight, _backgroundBitmap, 0, 0);
super.paint(graphics);
}
};

subManager = new VerticalFieldManager(Manager.VERTICAL_SCROLL | Manager.VERTICAL_SCROLLBAR ){
protected void sublayout(int maxWidth, int maxHeight){
int displayWidth = deviceWidth;
int displayHeight = deviceHeight;

super.sublayout( displayWidth, displayHeight);
setExtent( displayWidth, displayHeight);
}
};

mainManager.add(subManager);

this.add(mainManager);
}
}

Trusted Contributor
Posts: 176
Registered: ‎04-12-2012
My Device: Bold 9780 & Curve 8250
My Carrier: vodacom

Re: Hi there astanley I am looking to resize my image based...

[ Edited ]

All you do Is you create an Image that is as big as the largest bb Resolution, then the image will automatically get clipped.

 

The code I used To Add a background image(that adds the Image behind all Fields) .

 

package com.Images;

import net.rim.device.api.system.Bitmap;
import net.rim.device.api.system.Display;
import net.rim.device.api.ui.Graphics;
import net.rim.device.api.ui.Manager;

import net.rim.device.api.ui.container.MainScreen;
import net.rim.device.api.ui.container.VerticalFieldManager;

public final class TestScreen extends MainScreen
{
private VerticalFieldManager mainManager;
private VerticalFieldManager subManager;
private Bitmap _backgroundBitmap = Bitmap.getBitmapResource
("12814463558610.png");
private int deviceWidth = Display.getWidth();
private int deviceHeight = Display.getHeight();

public TestScreen(){
super(NO_VERTICAL_SCROLL);
mainManager = new VerticalFieldManager(
Manager.NO_VERTICAL_SCROLL |
Manager.NO_VERTICAL_SCROLLBAR ){
public void paint(Graphics graphics)
{
graphics.clear();
graphics.drawBitmap(0, 0, deviceWidth,
deviceHeight, _backgroundBitmap, 0, 0);
super.paint(graphics);
}
};

subManager = new VerticalFieldManager(Manager.VERTICAL_SCROLL | Manager.VERTICAL_SCROLLBAR ){
protected void sublayout(int maxWidth, int maxHeight){
int displayWidth = deviceWidth;
int displayHeight = deviceHeight;

super.sublayout( displayWidth, displayHeight);
setExtent( displayWidth, displayHeight);
}
};

mainManager.add(subManager);

this.add(mainManager);
}
}

Trusted Contributor
Posts: 166
Registered: ‎12-09-2011
My Device: 9550,9300,9800,9700,9900,9850,9860

Resize Image...

The above code is a java code.
How are you using such code in WebWorks.
Can you explain it !!!! 

Thanks & Regards,
Nitish Subudhi

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.