Blog

Author: Pranil Kanderi

We have done a lot of custom features in Blackberry, but I will be the first ones to agree that it is not the easiest platform to develop apps for. However, if you have the right approach, most of the features that can be done in iOS or Android can also be implemented in Blackberry.

We were fortunate to work on Path’s Blackberry application. The animation to drop-open the picture is probably one of the best UI features that differentiate Path from a lot of other photo-sharing apps. And I think we nailed it better than the current Android version of Path.



Here is a quick overview of the key steps to customize a Field to get this animation effect. The base class of this is the custom BitmapButtonField class provided by RIM.

Create a class that extends BitmapButtonField and use the code below along with any other customizations you need.

   public void expandToggle() {
      showExpanded = !showExpanded;      
      setFocus();
      relayoutParent();
   }
   
   public void relayoutParent() {
      UiApplication.getUiApplication().invokeLater(new Runnable() {
         public void run() {
            try {
               // In this case the Manager of this field happens to be a TwoColumnField (See above Blackberry library link)
               final TwoColumnField manager = (TwoColumnField) getManager();
               manager.relayout();
               Thread.sleep(EXPAND_TIMER); // The time value can be customized per your need
            } catch (Exception e) {
            }
         }
      });
   }
	
   protected void layout( int width, int height ) {
      setExtent( getPreferredWidth(), getPreferredHeight() );
      if (showExpanded && expandFactor < FIELD_MAX_HEIGHT          //expand
            || !showExpanded && expandFactor > FIELD_MIN_HEIGHT) { //shrink

         relayoutParent();
      }
    }
    
   public int getPreferredHeight() {
      // Use your own custom values for the below:
      // expandIncrement - how much the Field should expand for each animation
      // FIELD_MAX_HEIGHT - The maximum height of the Field to which it needs to expand
      // FIELD_MIN_HEIGHT - The minimum height of the Field to which it needs to shrink

      if (showExpanded) {
    	  expandFactor += expandIncrement;
    	  if (expandFactor > FIELD_MAX_HEIGHT) {
    	     expandFactor = FIELD_MAX_HEIGHT;
    	  }
      } else {
    	  expandFactor -= expandIncrement;
    	  if (expandFactor < FIELD_MIN_HEIGHT) {
    		  expandFactor = FIELD_MIN_HEIGHT;
    	  }
      }
      return expandFactor;         
   }


In TwoColumnField class add the below method:

   public void relayout() {
      updateLayout();
   }

Thats it!

PS::You can follow me on twitter @pranilkanderi or get updates of our work @mokriya