Align field to right in grid layout in blackberry

Question

I want my application to align two field, one to left and other to extreme left of the screen. For that i am using GridLayoutManager class. Here is my code

GridFieldManager gridFieldManager = new GridFieldManager(2,2, GridFieldManager.PREFERRED_SIZE_WITH_MAXIMUM); 

gridFieldManager.add(new ButtonField("Button One"), Field.FIELD_HCENTER);  
gridFieldManager.add(new ButtonField("Button Two"), Field.FIELD_RIGHT);  

gridFieldManager.add(new ButtonField("HC", Field.FIELD_HCENTER)); 
gridFieldManager.add(new ButtonField("RT", Field.FIELD_RIGHT));

add(gridFieldManager);

And, here is my output in simulator

Can anyone please help me to align the Button Two to the extreme right of the screen ? Any help will be appreciated.

Answer 1

Basically it's all a matter of alignment flags and grid's column properties.

Changing the GridFieldManager style to Manager.USE_ALL_WIDTH and setting column properties to GridFieldManager.AUTO_SIZE makes all the available space to be divided evently among the two columns.

gridFieldManager.setColumnProperty(0, GridFieldManager.AUTO_SIZE, 0);
gridFieldManager.setColumnProperty(1, GridFieldManager.AUTO_SIZE, 0);

---

The following code snippet

GridFieldManager gridFieldManager = new GridFieldManager(2,2, Manager.USE_ALL_WIDTH); 
gridFieldManager.setColumnProperty(0, GridFieldManager.AUTO_SIZE, 0);
gridFieldManager.setColumnProperty(1, GridFieldManager.AUTO_SIZE, 0);

gridFieldManager.add(new ButtonField("Button One"), Field.FIELD_LEFT);  
gridFieldManager.add(new ButtonField("Button Two"), Field.FIELD_RIGHT);  
gridFieldManager.add(new ButtonField("HC"), Field.FIELD_LEFT); 
gridFieldManager.add(new ButtonField("RT"), Field.FIELD_RIGHT);

add(gridFieldManager);

produces

---

This slightly modified code snippet

GridFieldManager gridFieldManager = new GridFieldManager(1,2, Manager.USE_ALL_WIDTH); 
gridFieldManager.setColumnProperty(0, GridFieldManager.AUTO_SIZE, 0);
gridFieldManager.setColumnProperty(1, GridFieldManager.AUTO_SIZE, 0);

VerticalFieldManager vfmLeft = new VerticalFieldManager();
vfmLeft.add(new ButtonField("Button One", Field.FIELD_HCENTER));  
vfmLeft.add(new ButtonField("HC", Field.FIELD_HCENTER)); 
gridFieldManager.add(vfmLeft, Field.FIELD_LEFT);  

VerticalFieldManager vfmRight = new VerticalFieldManager();
vfmRight.add(new ButtonField("Button Two", Field.FIELD_HCENTER));  
vfmRight.add(new ButtonField("RT", Field.FIELD_HCENTER));
gridFieldManager.add(vfmRight, Field.FIELD_RIGHT);  

add(gridFieldManager); 

produces

---

Finally, to illustrate what I said previously about the available space being divided evently among the two columns, the following code snippet

GridFieldManager gridFieldManager = new GridFieldManager(1,2, Manager.USE_ALL_WIDTH | Manager.USE_ALL_HEIGHT); 
gridFieldManager.setColumnProperty(0, GridFieldManager.AUTO_SIZE, 0);
gridFieldManager.setColumnProperty(1, GridFieldManager.AUTO_SIZE, 0);
gridFieldManager.setRowProperty(0, GridFieldManager.AUTO_SIZE, 0);

VerticalFieldManager vfmLeft = new VerticalFieldManager(Manager.USE_ALL_WIDTH | Manager.USE_ALL_HEIGHT);
vfmLeft.setBackground(BackgroundFactory.createSolidBackground(Color.CYAN));
gridFieldManager.add(vfmLeft);  

VerticalFieldManager vfmRight = new VerticalFieldManager(Manager.USE_ALL_WIDTH | Manager.USE_ALL_HEIGHT);
vfmRight.setBackground(BackgroundFactory.createSolidBackground(Color.GRAY));
gridFieldManager.add(vfmRight);  

add(gridFieldManager);    

produces two columns of equal size.

Answer 2

Please use this following class.

import net.rim.device.api.ui.Field;
import net.rim.device.api.ui.container.HorizontalFieldManager;

public class HFMLeftFieldRightField extends HorizontalFieldManager {

 private Field leftField;
 private Field rightField;

 private final static int TOP_MARGIN = 0;
 private final static int LEFT_MARGIN = 30;

 public HFMLeftFieldRightField() {
  super(USE_ALL_WIDTH);
 }

 public HFMLeftFieldRightField(boolean isQatari) {
  super(USE_ALL_WIDTH | Field.FIELD_LEFT);
 }

 public void sublayout(int maxWidth, int maxHeight) {

  super.sublayout(maxWidth, maxHeight);
  int width = getWidth();

  if (rightField != null) {
   int x = width - rightField.getWidth() - LEFT_MARGIN;
   int y = TOP_MARGIN;
   setPositionChild(rightField, x, y);
  }
  if (leftField != null) {
   int y = TOP_MARGIN+rightField.getHeight()/5;
   int x = LEFT_MARGIN;
   setPositionChild(leftField, 0, y);
  }

  setExtent(maxWidth, rightField.getHeight() + TOP_MARGIN * 2);
 }

 public void setLeftButton(Field leftField) {
  this.leftField = leftField;
super.add(leftField);
 }

 public void setRightButton(Field rightField) {
  this.rightField = rightField;
  super.add(rightField);
 }


}

And add field this way.

HFMLeftFieldRightField hfm = new HFMLeftFieldRightField();
hfm.setLeftButton(new EditField("Left"));
hfm.setRightButton(new EditField("Right"));
add(hfm);

More detail http://keraisureshvblackberry.blogspot.in/2012/02/there-are-very-common-there-there-are.html

Hope helpfull..

Answer 3

It seems like you should use JustifiedHorizontalFieldManager instead of GridFieldManager. JustifiedHorizontalFieldManager is not a standard manager included in BlackBerry SDK, but a member of a set of UI components released by RIM later to help developers build more rich UI Interfaces. You have to download the code from here, add it to your proyect and then include the following line:

JustifiedHorizontalFieldManager justifiedManager = new JustifiedHorizontalFieldManager(buttonOne, buttonTwo, false, USE_ALL_WIDTH );

Answer 4

Change the style parameter of your gridFieldManager constructor to GridFieldManager.USE_ALL_WIDTH

It should be like this

GridFieldManager gridFieldManager = new GridFieldManager(2,2,GridFieldManager.USE_ALL_WIDTH );