Using Custom Colors

The comment tag for customizing colors is BLACKBERRY_CUSTOMIZATION_POINT_COLORS. There are a few places where you can change colors. 

These steps provide an example of how to change the colors of different Hybrid Web Container components.

  1. To change the highlight color of the selected Hybrid App in the Hybrid App list:
    1. Open the AppScreen.java file for editing.
    2. Make these modifications to the drawListRow method, found in the ListFieldCallback (the changes are in bold). 
      The changes in this example make the highlighted color orange and the unhighlighted color black (by default, they are blue and white, respectively).
      public void drawListRow(ListField listField, Graphics graphics, int index, int y, int width) {   
      // y parameter is already offset to center text   
      int iOffset = (listField.getRowHeight() - getFont().getHeight()) >> 1;                           
      
      HybridApp oApp = ( HybridApp ) m_oApps.elementAt( index );   
                                 
      if( listField.getSelectedIndex() == index )   
                             
      {   
      graphics.setColor( Color.ORANGE );   
                             
      }   
                             
      else   
                             
      {   
                                
      graphics.setColor( Color.BLACK );   
                             
      }   
                             
      graphics.fillRect( 0, y - iOffset, width, listField.getRowHeight() + y - iOffset );   
                                 
      final int iMargin = 2;   
                                 
      // Draw image   
                             
      EncodedImage oImage = EncodedImage.getEncodedImageResource( "ampicon" + oApp.getIconIndex() + ".png");   
      Bitmap oBitmap = oImage.getBitmap();   
                             
      graphics.drawBitmap( iMargin, y - iOffset + ( listField.getRowHeight() -oBitmap.getHeight() ) / 2, oBitmap.getWidth(), oBitmap.getHeight(), oBitmap, 0, 0);   
                                 
      // Draw text 
      graphics.drawText( oApp.getDisplayName(), 2 * iMargin + oBitmap.getWidth(), y );   
      } 
  2. To change the text color of the Hybrid App names in the Hybrid App list:
    1. In the AppScreen.java file, go to the drawListRow method, which is in the ListFieldCallback.
      The color of the text is set by the code below. The first color (white, by default) is used when the field is in focus.  The second color is used when the field is not in focus.  This example coordinates these colors with the colors used in step 1. The changed code is in bold.
    2. Modify the code. For example:
      // Draw text   
      if( listField.getSelectedIndex() == index )   
      {      
      graphics.setColor( Color.BLACK );   
      }   
      else   
      {      
      graphics.setColor( Color.WHITE );   
      }   
      graphics.drawText( oApp.getDisplayName(), 2 * iMargin + oBitmap.getWidth(), y ); 
  3. To change the background color of the Hybrid Web Container:
    1. Add these import statements to the AppScreen.java file:
       import net.rim.device.api.ui.decor.Background;   
      import net.rim.device.api.ui.decor.BackgroundFactory; 
    2. In the AppScreen.java file, go to the constructer method and add these lines after the setTitle( … ); line:
      Background bg = BackgroundFactory.createSolidBackground( Color.BLACK );   
      this.getMainManager().setBackground( bg ); 
  4. Change the background color and text color of label and edit fields. 
    To change the background and text colors of a label or edit field, you must override its paint method. This is done when you create the label. Below is an example of how to set the background color to black and the text color to white for a label. You can also do this, similarly, for edit fields.
    1. Open the HWCSettingsScreen.java file for editing.
    2. Make the following modifications (changes in bold).  These changes make the background of the label black, and the text white. To use the same background color as the rest of the screen, you can leave out the first two lines in the paint method below:
      // Connection Header   
      m_oConnection = null;   
      m_oConnection = new LabelField( m_res.getString( HybridWebContainerResource.IDS_CONNECTION ), 
                                                       Field.FIELD_HCENTER )   
      {   
         public void paint(Graphics g){   
           g.setColor( Color.BLACK );   
           g.fillRect( 0, 0, getWidth(), getHeight() );   
           g.setColor( Color.WHITE );   
           super.paint( g );   
        }   
      }; 
  5. Save the file and rebuild the project.