Blackberry Custom Tab Fit to All Device Screen

Question

i wanna know, how to fit screen my tabulation bar on blackberry. because my tab is match with blackberry 9700 but for blackberry 9900, my tab is too small. i wanna my tab is fit to all device scree.
thanks in advance :)

this is the code, i got from other post. sorry:
BottomPanel class

public class BottomPanel extends VerticalFieldManager implements
    FieldChangeListener {

Bitmap home_bit = Bitmap.getBitmapResource("home.png");
Bitmap home_bit_hover = Bitmap.getBitmapResource("home_h.png");
Bitmap map_bit = Bitmap.getBitmapResource("map.png");
Bitmap map_bit_hover = Bitmap.getBitmapResource("map_h.png");
Bitmap contact_bit = Bitmap.getBitmapResource("contact.png");
Bitmap contact_bit_hover = Bitmap.getBitmapResource("contact_h.png");
PictureBackgroundButtonField home_pic, map_pic, contact_pic;

HorizontalFieldManager hr;
int current_index = 0;

public BottomPanel(int current_index) {
    super(FOCUSABLE);
    this.current_index = current_index;
    VerticalFieldManager ver = new VerticalFieldManager(USE_ALL_WIDTH
            | USE_ALL_HEIGHT) {
        protected void sublayout(int width, int height) {
            super.sublayout(width, home_bit.getHeight());
            setExtent(width, home_bit.getHeight());
        }
    };
    hr = new HorizontalFieldManager(FIELD_HCENTER);
    if (current_index == 1) {
        home_pic = new PictureBackgroundButtonField(home_bit.getWidth(),
                home_bit.getHeight(), Field.NON_FOCUSABLE
                        | Field.FIELD_VCENTER, home_bit_hover,
                home_bit_hover);
    } else {
        home_pic = new PictureBackgroundButtonField(home_bit.getWidth(),
                home_bit.getHeight(),
                Field.FOCUSABLE | Field.FIELD_VCENTER, home_bit,
                home_bit_hover);
    }
    home_pic.setChangeListener(this);
    hr.add(home_pic);

    if (current_index == 2) {
        map_pic = new PictureBackgroundButtonField(map_bit.getWidth(),
                map_bit.getHeight(), Field.NON_FOCUSABLE
                        | Field.FIELD_VCENTER, map_bit_hover, map_bit_hover);
    } else {
        map_pic = new PictureBackgroundButtonField(map_bit.getWidth(),
                map_bit.getHeight(), Field.FOCUSABLE | Field.FIELD_VCENTER,
                map_bit, map_bit_hover);
    }
    map_pic.setChangeListener(this);
    hr.add(map_pic);

    if (current_index == 3) {
        contact_pic = new PictureBackgroundButtonField(
                contact_bit.getWidth(), contact_bit.getHeight(),
                Field.NON_FOCUSABLE | Field.FIELD_VCENTER,
                contact_bit_hover, contact_bit_hover);
    } else {
        contact_pic = new PictureBackgroundButtonField(
                contact_bit.getWidth(), contact_bit.getHeight(),
                Field.FOCUSABLE | Field.FIELD_VCENTER, contact_bit,
                contact_bit_hover);
    }
    contact_pic.setChangeListener(this);
    hr.add(contact_pic);

    ver.add(hr);
    add(ver);
}

public void fieldChanged(Field field, int context) {
    if (field == home_pic) {
        LoadingScreen loadingScreen = new LoadingScreen(1);
        UiApplication.getUiApplication().popScreen(
                UiApplication.getUiApplication().getActiveScreen());
        UiApplication.getUiApplication().pushScreen(loadingScreen);
        loadingScreen.createGUI();
    } else if (field == map_pic) {
        LoadingScreen loadingScreen = new LoadingScreen(2);
        UiApplication.getUiApplication().popScreen(
                UiApplication.getUiApplication().getActiveScreen());
        UiApplication.getUiApplication().pushScreen(loadingScreen);
        loadingScreen.createGUI();
    } else if (field == contact_pic) {
        LoadingScreen loadingScreen = new LoadingScreen(3);
        UiApplication.getUiApplication().popScreen(
                UiApplication.getUiApplication().getActiveScreen());
        UiApplication.getUiApplication().pushScreen(loadingScreen);
        loadingScreen.createGUI();
    }
}

Loading Screen class

public class LoadingScreen extends MainScreen {
private LabelField text;
private LabelField texthasil;
private VerticalFieldManager manager;

int current_index = 0;
BottomPanel bottomPanel;

public LoadingScreen(int current_index) {

    this.current_index = current_index;
    bottomPanel = new BottomPanel(current_index);
    setStatus(bottomPanel);
}

public void createGUI() {

    manager = new VerticalFieldManager(Manager.VERTICAL_SCROLL
            | Manager.VERTICAL_SCROLLBAR);


    setStatus(bottomPanel);
}

PictureBackgroundButtonField class

public class PictureBackgroundButtonField extends Field {
private String _label;
private int _labelHeight;
private int _labelWidth;
private Font _font;

private Bitmap _currentPicture;
private Bitmap _onPicture;
private Bitmap _offPicture;

public PictureBackgroundButtonField(int width, int height, long style,
        Bitmap picture, Bitmap selectedPic) {
    super(style);

    _font = getFont();
    _label = "";
    _labelHeight = height;
    _labelWidth = width;
    _currentPicture = picture;
    _onPicture = selectedPic;
    _offPicture = picture;
}

protected void drawFocus(Graphics graphics, boolean on) {
    // Do nothing
}

public int getPreferredHeight() {
    return _labelHeight;
}

public int getPreferredWidth() {
    return _labelWidth;
}

protected void layout(int width, int height) {
    setExtent(getPreferredWidth(), getPreferredHeight());
}

protected boolean navigationClick(int status, int time) {
    fieldChangeNotify(1);
    return true;
}

protected void onFocus(int direction) {
    _currentPicture = _onPicture;
    invalidate();
}

protected void onUnfocus() {
    _currentPicture = _offPicture;
    invalidate();
}

protected void paint(Graphics graphics) {
    graphics.drawBitmap(0, 0, getPreferredWidth(), getPreferredHeight(),
            _currentPicture, 0, 0);
    graphics.setFont(_font);
    graphics.drawText(
            _label,
            4,
            2,
            (int) (getStyle() & DrawStyle.ELLIPSIS | DrawStyle.HALIGN_MASK),
            getWidth() - 6);
}

Please show the code you use to create your tab bar. The answer depends on how you've coded it so far, so we need to see that. — Nate, Feb 22 '13 at 08:14
width of BB screens are 320,360,480,and 640 so its not possible to handle with single sized image. Either you have to create separate applications for separate devices or resize images to the corresponding screen sizes. — Rince Thomas, Feb 22 '13 at 08:49
You could solve this by providing different image sets for each possible screen size, something like what Android does. You could create several subfolders inside your app's image folder, and in code detect screen size, and load images from the correct subfolder for that size. — Mister Smith, Feb 22 '13 at 13:59
You could implement Mister Smith's suggestion [with something like this code, posted by donturner](http://stackoverflow.com/a/11551148/119114). That gives you the most flexibility to tailor the look to each screen size. However, it does increase the bloat (size) of embedded images. In general, I would also recommend against this because it also doesn't protect against new screen sizes in future devices ... of course, in this case, there won't be any new Java BlackBerries, so it doesn't matter much :) — Nate, Feb 24 '13 at 03:16

score 1 · Accepted Answer · edited May 23 '17 at 11:53

You don't show us what kind of tab bar background you have, and the solution does depend a little on that. If you are happy having a tab bar that is always the same height (in pixels), but just changes width, then you could use something like this.

I create a Manager subclass called TabBarManager. It will span the whole width of your screen, with a fixed height. It can have Field objects added to it like any normal manager. It is intended to have button fields added to it, so that when you click the button field, something happens. Probably, you'd also want the appearance of the button fields to change, depending on which tab is selected. However, it wasn't clear that this question was about that problem, so I didn't show that code. All this code does is give you a Manager to add tab fields to, that will draw a full-width background.

The tab bar fields that you add to this should contain icon images and/or labels, that have transparent backgrounds. For example, a white silhouette icon of a globe, if the tab is a map view. The transparent background shows through to the TabBarManager background.

The technique is to draw (in Photoshop, or whatever) three images. A left, right, and center image. Think of drawing a full tab bar image. Then, crop off the left few pixels, and save as TabBar-left.png. Crop the right few pixels and save as TabBar-right.png, and then crop a few pixels out of the center, and save as TabBar-center.png. Example images are shown below the code:

   /**
    * A TabBarManager provides a horizontal bar of button fields, that serve as a tab bar 
    * header or footer, used to select between available subviews in a larger Screen.
    */
   private final class TabBarManager extends HorizontalFieldManager {

      private int height;
      private Bitmap left;
      private Bitmap center;
      private Bitmap right;

      public TabBarManager() {
         super(HorizontalFieldManager.NO_VERTICAL_SCROLL);  // tab bar itself doesn't scroll
         left = Bitmap.getBitmapResource("TabBar-left.png");
         right = Bitmap.getBitmapResource("TabBar-right.png");
         center = Bitmap.getBitmapResource("TabBar-center.png");
         height = left.getHeight();
      }

      public void sublayout(int width, int h) {
         super.sublayout(width, height);
         setExtent(width, height);   // restrict height to a fixed value
      }

      public int getPreferredHeight() {
         return height;
      }

      public void paint(Graphics g) {
         // draw the background image for the tab bar with two sides and a center section, 
         //  to account for the fact that different devices have different widths
         int width = Display.getWidth();         
         g.drawBitmap(0, 0, left.getWidth(), height, left, 0, 0);

         // fill in the center by repeating the center image as many times as needed
         int x = left.getWidth();
         int centerWidth = center.getWidth();
         int leftEdgeOfRightBitmap = width - right.getWidth();
         while (x < leftEdgeOfRightBitmap) {
            g.drawBitmap(x, 0, centerWidth, height, center, 0, 0);
            x += centerWidth;
         }

         // draw right side
         g.drawBitmap(leftEdgeOfRightBitmap, 0, right.getWidth(), height, right, 0, 0);

         // use super.paint() to draw the icons/labels on top of our background
         super.paint(g);
      }
   }

Left, center, and right PNGs (must be same height ... width doesn't matter):

enter image description here , ,

How You Use It

In the code you show, you can either replace your hr variable with an instance of my TabBarManager. Or you can rename my TabBarManager class to BottomPanel, and add the additional code you need to it ... things like the current index, and the field change listener callback.

Limitations

The above implementation will only stretch the tab bar's width. The height is fixed. For a fully stretchable tab bar, you could either mimic a 9-patch image by drawing 9 images (top-left, top-center, top-right, left, center, right, bottom-left, bottom-center, bottom-right). Or use something like this to get 9-patch stretchable images for BlackBerry

References

http://supportforums.blackberry.com/t5/Java-Development/Create-tabbed-view-screens/ta-p/444969

umm verry good writing and easy to understand, thank. i'll try :) — nubitol, Feb 27 '13 at 06:38

Blackberry Custom Tab Fit to All Device Screen

1 Answers1

How You Use It

Limitations

References