Socialize Action Bar

The Socialize Action Bar is a single all inclusive control that can be easily added to any Android application.

images/action_bar.png

The Action Bar provides immediate access to all Socialize features including

  • Commenting
  • Sharing via Facebook, Twitter, Email and SMS
  • Liking
  • Recording Views
  • User Profile screens with recent user activity
  • User Settings to allow users to customize their experience
  • Subscribe/Unsubscribe to SmartAlerts for users

Displaying the Action Bar

The Action Bar is designed to automatically “pin” itself to the bottom of your view.

Adding the Action Bar to your app is done with a simple call to showActionBar from ActionBarUtils

public class ActionBarSample extends Activity {
	
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		
		super.onCreate(savedInstanceState);
		
		// Call Socialize in onCreate
		Socialize.onCreate(this, savedInstanceState);
		
		// Your entity key. May be passed as a Bundle parameter to your activity
		String entityKey = "http://www.getsocialize.com";
		
		// Create an entity object including a name
		// The Entity object is Serializable, so you could also store the whole object in the Intent
		Entity entity = Entity.newInstance(entityKey, "Socialize");
		
		// Wrap your existing view with the action bar.
		// your_layout refers to the resource ID of your current layout.
		View actionBarWrapped = ActionBarUtils.showActionBar(this, R.layout.actionbar, entity);
		
		// Now set the view for your activity to be the wrapped view.
		setContentView(actionBarWrapped);
	}
	

	@Override
	protected void onPause() {
		super.onPause();
		
		// Call Socialize in onPause
		Socialize.onPause(this);
	}

	@Override
	protected void onResume() {
		super.onResume();
		
		// Call Socialize in onResume
		Socialize.onResume(this);
	}

    @Override
    protected void onStart() {
        super.onStart();

        // Call Socialize in onStart
        Socialize.onStart(this);
    }

    @Override
    protected void onStop() {
        super.onStop();

        // Call Socialize in onStop
        Socialize.onStop(this);
    }

	@Override
	protected void onDestroy() {
		// Call Socialize in onDestroy before the activity is destroyed
		Socialize.onDestroy(this);
		
		super.onDestroy();
	}	
}

(Refer to the Getting Started section for details on configuring your socialize.properties file.)

Disabling the ScrollView

By default the ActionBar will create a ScrollView to house your existing content. This is typically necessary so that the ActionBar doesn’t impede the use of your existing content.

If you don’t want your content to be scrollable however, you can disable this feature by using ActionBarOptions

public class ActionBarSampleNoScroll extends Activity {
	
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		
		super.onCreate(savedInstanceState);
		
		// Your entity key. May be passed as a Bundle parameter to your activity
		String entityKey = "http://www.getsocialize.com";
		
		// Create an entity object including a name
		// The Entity object is Serializable, so you could also store the whole object in the Intent
		Entity entity = Entity.newInstance(entityKey, "Socialize");
		
		// Add more options
		ActionBarOptions options = new ActionBarOptions();
		options.setAddScrollView(false); // Disable scroll view   		
		
		// Wrap your existing view with the action bar.
		// your_layout refers to the resource ID of your current layout.
		View actionBarWrapped = ActionBarUtils.showActionBar(this, R.layout.actionbar, entity, options);
		
		// Now set the view for your activity to be the wrapped view.
		setContentView(actionBarWrapped);
	}
}

ActionBar Listener

If you need or want to obtain a reference to the ActionBar view at runtime, you can use a creation listener to listen for the “onCreate” event of the ActionBar.

If you want to attach your own events to user operations on the ActionBar you can bind an OnActionBarEventListener to capture these.

public class ActionBarSampleListener extends Activity {
	
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		
		super.onCreate(savedInstanceState);
		
		// Your entity key. May be passed as a Bundle parameter to your activity
		String entityKey = "http://www.getsocialize.com";
		
		// Create an entity object including a name
		// The Entity object is Serializable, so you could also store the whole object in the Intent
		Entity entity = Entity.newInstance(entityKey, "Socialize");
		
		// Add more options
		ActionBarOptions options = new ActionBarOptions();
		
		// Wrap your existing view with the action bar.
		// your_layout refers to the resource ID of your current layout.
		View actionBarWrapped = ActionBarUtils.showActionBar(this, R.layout.actionbar, entity, options, new ActionBarListener() {
			
			@Override
			public void onCreate(ActionBarView actionBar) {
				
				actionBar.setOnActionBarEventListener(new OnActionBarEventListener() {

					@Override
					public void onUpdate(ActionBarView actionBar) {
						// Called when the action bar has its data updated
					}

					@Override
					public void onPostUnlike(ActionBarView actionBar) {
						// Called AFTER a user has removed a like
					}

					@Override
					public void onPostShare(ActionBarView actionBar, Share share) {
						// Called AFTER a user has posted a share
					}

					@Override
					public void onPostLike(ActionBarView actionBar, Like like) {
						// Called AFTER a user has posted a like
					}

					@Override
					public void onLoad(ActionBarView actionBar) {
						// Called when the action bar is loaded
					}

					@Override
					public void onLoadFail(Exception error) {
						// Called when the action bar load failed
					}

					@Override
					public void onGetLike(ActionBarView actionBar, Like like) {
						// Called when the action bar retrieves the like for the
						// current user
					}

					@Override
					public void onGetEntity(ActionBarView actionBar, Entity entity) {
						// Called when the action bar retrieves the entity data
					}

					@Override
					public boolean onClick(ActionBarView actionBar, ActionBarEvent evt) {
						// Called when the user clicks on the action bar
						// Return true to indicate you do NOT want the action to continue
						return false;
					}
				});				
			}
		});
		
		// Now set the view for your activity to be the wrapped view.
		setContentView(actionBarWrapped);
	}
}

ActionBar Comment Listener

In addition to ActionBar events you can also register a listener to receive events triggered by the Comment List View

If you need or want to obtain a reference to the ActionBar view at runtime, you can use a creation listener to listen for the “onCreate” event of the ActionBar.

If you want to attach your own events to user operations on the ActionBar you can bind an OnCommentViewActionListener to capture these.

public class ActionBarCommentListener extends Activity {
	
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		
		super.onCreate(savedInstanceState);
		
		// Your entity key. May be passed as a Bundle parameter to your activity
		String entityKey = "http://www.getsocialize.com";
		
		// Create an entity object including a name
		// The Entity object is Serializable, so you could also store the whole object in the Intent
		Entity entity = Entity.newInstance(entityKey, "Socialize");
		
		// Add more options
		ActionBarOptions options = new ActionBarOptions();
		
		// Wrap your existing view with the action bar.
		// your_layout refers to the resource ID of your current layout.
		View actionBarWrapped = ActionBarUtils.showActionBar(this, R.layout.actionbar, entity, options, new ActionBarListener() {
			
			@Override
			public void onCreate(ActionBarView actionBar) {
				
				actionBar.setOnCommentViewActionListener(new OnCommentViewActionListener() {

					@Override
					public void onError(SocializeException error) {
						// Handle error
					}
					
					@Override
					public void onRender(CommentListView view) {
						// Called when the list view is rendered
					}
					
					@Override
					public void onReload(CommentListView view) {
						// Called when a reload event is posted to the list view.
					}
					
					@Override
					public void onPostComment(Comment comment) {
						// Called after a comment is posted.
					}
					
					@Override
					public void onCreate(CommentListView view) {
						// Called when the list view component was created (but may not be shown)
					}
					
					@Override
					public void onCommentList(CommentListView view, List<Comment> comments, int start, int end) {
						// Called when a list of comments is retrieved.
					}

					@Override
					public void onBeforeSetComment(Comment comment, CommentListItem item) {
						// Called before a single comment is set on the comment list item view
					}

					@Override
					public void onAfterSetComment(Comment comment, CommentListItem item) {
						// Called after a single comment is set on the comment list item view
					}

					@Override
					public boolean onRefreshMenuItemClick(MenuItem item) {
						// Called when the user clicks the refresh option from the menu
						// Return true to override default behavior
						return false;
					}

					@Override
					public boolean onSettingsMenuItemClick(MenuItem item) {
						// Called when the user clicks the settings option from the menu
						// Return true to override default behavior
						return false;
					}

					@Override
					public boolean onCommentItemClicked(CommentListItem item) {
						// Called when the user clicks the text portion of an entry in the comment list
						// Return true to override default behavior
						return false;
					}

					@Override
					public boolean onCommentIconClicked(CommentListItem item) {
						// Called when the user clicks the icon portion of an entry in the comment list
						// Return true to override default behavior
						return false;
					}
				});
			}
		});
		
		// Now set the view for your activity to be the wrapped view.
		setContentView(actionBarWrapped);
	}
}

ActionBar Share & Social Listener

You can also specify a more complete listener interface to capture both action bar and sharing events.

public class ActionBarShareDialogListener extends Activity {
	
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		
		super.onCreate(savedInstanceState);
		
		// Your entity key. May be passed as a Bundle parameter to your activity
		String entityKey = "http://www.getsocialize.com";
		
		// Create an entity object including a name
		// The Entity object is Serializable, so you could also store the whole object in the Intent
		Entity entity = Entity.newInstance(entityKey, "Socialize");
		
		// Add more options
		ActionBarOptions options = new ActionBarOptions();
		
		// Wrap your existing view with the action bar.
		// your_layout refers to the resource ID of your current layout.
		View actionBarWrapped = ActionBarUtils.showActionBar(this, R.layout.actionbar, entity, options, new ActionBarListener() {
			@Override
			public void onCreate(ActionBarView actionBar) {
				// Add event listener for share dialog events
				actionBar.setOnActionBarEventListener(new OnActionBarShareEventListener() {
					
					/******************************************************************
					 * Standard event listener callbacks (Optional)
					 ******************************************************************/
					
					@Override
					public void onUpdate(ActionBarView actionBar) {
						// Called when the action bar has its data updated
					}

					@Override
					public void onPostUnlike(ActionBarView actionBar) {
						// Called AFTER a user has removed a like
					}

					@Override
					public void onPostShare(ActionBarView actionBar, Share share) {
						// Called AFTER a user has posted a share
					}

					@Override
					public void onPostLike(ActionBarView actionBar, Like like) {
						// Called AFTER a user has posted a like
					}

					@Override
					public void onLoad(ActionBarView actionBar) {
						// Called when the action bar is loaded
					}
					
					@Override
					public void onLoadFail(Exception error) {
						// Called when the action bar load failed
					}					

					@Override
					public void onGetLike(ActionBarView actionBar, Like like) {
						// Called when the action bar retrieves the like for the
						// current user
					}

					@Override
					public void onGetEntity(ActionBarView actionBar, Entity entity) {
						// Called when the action bar retrieves the entity data
					}

					@Override
					public boolean onClick(ActionBarView actionBar, ActionBarEvent evt) {
						// Called when the user clicks on the action bar
						// Return true to indicate you do NOT want the action to continue
						return false;
					}

					/******************************************************************
					 * Share dialog callbacks (Optional)
					 ******************************************************************/
					
					@Override
					public void onShow(Dialog dialog, SharePanelView dialogView) {
						// The dialog was shown.
					}
					
					@Override
					public void onCancel(Dialog dialog) {
						// User cancelled.
					}
					
					@Override
					public void onSimpleShare(ShareType type) {
						// User performed a simple share operation (e.g. Email or SMS)
					}
					
					@Override
					public void onFlowInterrupted(DialogFlowController controller) {
						// This will only be called if onContinue returns true
						
						// Obtain share text (e.g. from the user via a dialog)
						String text = "Add another message here";
						
						// Call continue when you want flow to resume
						controller.onContinue(text);
					}
					
					@Override
					public boolean onContinue(Dialog dialog, boolean remember, SocialNetwork... networks) {
						// Return true if you want to interrupt the flow
						return true;
					}
					
					/******************************************************************
					 * Social Network Callbacks (Optional)
					 ******************************************************************/
					
					@Override
					public void onNetworkError(Activity context, SocialNetwork network, Exception error) {
						// Handle error
					}
					
					@Override
					public void onCancel() {
						// The user cancelled the operation.
					}
					
					@Override
					public void onAfterPost(Activity parent, SocialNetwork socialNetwork, JSONObject responseObject) {
						// Called after the post returned from the social network.
						// responseObject contains the raw JSON response from the social network.
					}
					
					@Override
					public boolean onBeforePost(Activity parent, SocialNetwork socialNetwork, PostData postData) {
						// Called just prior to the post.
						// postData contains the dictionary (map) of data to be posted.  
						// You can change this here to customize the post.
						// Return true to prevent the post from occurring.
						return false;
					}
				});
			}
		});
		
		// Now set the view for your activity to be the wrapped view.
		setContentView(actionBarWrapped);
	}
}

Reloading the Action Bar

If you want to maintain a single action bar instance shared across multiple entities you can simply use the refresh method to instruct the ActionBar to reload after you change the entity key.

// Create a class to capture the action bar reference
public class MyActionBarListener implements ActionBarListener {
	private ActionBarView actionBarView;

	@Override
	public void onCreate(ActionBarView actionBar) {
		// Store a reference to the actionBar view
		this.actionBarView = actionBar;
	}

	public ActionBarView getActionBarView() {
		return actionBarView;
	}
}
// The in the Activity which renders the ActionBar
Entity entity = Entity.newInstance("http://getsocialize.com", "Socialize");

// Setup a listener to retain a reference
MyActionBarListener listener = new MyActionBarListener();

// Use the listener when you show the action bar
// The "this" argument refers to the current Activity
ActionBarUtils.showActionBar(this, R.layout.actionbar, entity, null, listener);

// Later (After the action bar has loaded!), you can reference the view to refresh
ActionBarView view = listener.getActionBarView();

if (view != null) {
	Entity newEntity = new Entity(); // This would be your new entity
	view.setEntity(newEntity);
	view.refresh();
}	
		

Customizing the Action Bar

The Action Bar can be customized to suite the look-and-feel of your app. You can alter colors, font colors and images on the ActionBar to give it a unique appearance

Anything from a simply accent change

images/action_bar_red.png

To a complete re-imagining of the appearance

images/action_bar_autumn.png

To change the appearance of the Action Bar simply provide an ActionBarOptions instance when you display the bar

public class ActionBarCustom extends Activity {
	
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		
		super.onCreate(savedInstanceState);
		
		// Call Socialize in onCreate
		Socialize.onCreate(this, savedInstanceState);
		
		// Your entity key. May be passed as a Bundle parameter to your activity
		String entityKey = "http://www.getsocialize.com";
		
		// Create an entity object including a name
		// The Entity object is Serializable, so you could also store the whole object in the Intent
		Entity entity = Entity.newInstance(entityKey, "Socialize");
		
		
		// Create an options instance to specify your theme
		ActionBarOptions options = new ActionBarOptions();
		
		// Set the colors for the Action Bar
		options.setStrokeColor(Color.parseColor("#591100")); // The line between the buttons
		options.setAccentColor(Color.parseColor("#ffa229")); // The accent line below the buttons
		options.setFillColor(Color.parseColor("#831400")); // The main color of the buttons
		options.setBackgroundColor(Color.parseColor("#591100")); // The background color seen on the left
		options.setHighlightColor(Color.parseColor("#b05e08")); // The thin highlight line above the buttons
		options.setTextColor(Color.parseColor("#ffba00")); // The text color for all buttons
		
		// Optionally alter the images
		options.setLikeIconResourceId(R.drawable.autumn_like);
		options.setLikeIconActiveResourceId(R.drawable.autumn_like_hi);
		options.setCommentIconResourceId(R.drawable.autumn_comment);
		options.setShareIconResourceId(R.drawable.autumn_share);
		options.setViewIconResourceId(R.drawable.autumn_view);
		
		// Pass the options to the call to show
		View actionBar = ActionBarUtils.showActionBar(this, R.layout.autumn, entity, options);
		
		// Now set the view for your activity to be the wrapped view.
		setContentView(actionBar);
	}
	

	@Override
	protected void onPause() {
		super.onPause();
		
		// Call Socialize in onPause
		Socialize.onPause(this);
	}

	@Override
	protected void onResume() {
		super.onResume();
		
		// Call Socialize in onResume
		Socialize.onResume(this);
	}

    @Override
    protected void onStart() {
        super.onStart();

        // Call Socialize in onStart
        Socialize.onStart(this);
    }

    @Override
    protected void onStop() {
        super.onStop();

        // Call Socialize in onStop
        Socialize.onStop(this);
    }

	@Override
	protected void onDestroy() {
		// Call Socialize in onDestroy before the activity is destroyed
		Socialize.onDestroy(this);
		
		super.onDestroy();
	}	
}

Adding/Removing Buttons

You can also programmatically remove entire functions from the action bar. For example, the following code will remove the comment button:

public class ActionBarNoComments extends Activity {
	
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		
		super.onCreate(savedInstanceState);
		
		// Call Socialize in onCreate
		Socialize.onCreate(this, savedInstanceState);
		
		// Your entity key. May be passed as a Bundle parameter to your activity
		String entityKey = "http://www.getsocialize.com";
		
		// Create an entity object including a name
		// The Entity object is Serializable, so you could also store the whole object in the Intent
		Entity entity = Entity.newInstance(entityKey, "Socialize");
		
		// Create an options instance to disable comments
		ActionBarOptions options = new ActionBarOptions();

		// Hide comments
		options.setHideComment(true);

		// Pass the options to the call to show
		View actionBar = ActionBarUtils.showActionBar(this, R.layout.autumn, entity, options);
		
		// Now set the view for your activity to be the wrapped view.
		setContentView(actionBar);
	}
	
	@Override
	protected void onPause() {
		super.onPause();
		
		// Call Socialize in onPause
		Socialize.onPause(this);
	}

	@Override
	protected void onResume() {
		super.onResume();
		
		// Call Socialize in onResume
		Socialize.onResume(this);
	}

    @Override
    protected void onStart() {
        super.onStart();

        // Call Socialize in onStart
        Socialize.onStart(this);
    }

    @Override
    protected void onStop() {
        super.onStop();

        // Call Socialize in onStop
        Socialize.onStop(this);
    }

	@Override
	protected void onDestroy() {
		// Call Socialize in onDestroy before the activity is destroyed
		Socialize.onDestroy(this);
		
		super.onDestroy();
	}	
}

Action Bar Icon Assets

To make customization simple we have provided Photoshop PSD templates for the standard Action Bar icons used in the default Action Bar.

These can be found in the /icons folder of your SDK download.

XML Based Layout

If the “auto-pin” feature of the Action Bar is not to your liking, or doesn’t play well with your existing layout you can always just add the view manually.

Note

There are some fairly important things the Action Bar expects that you should be aware of:

  1. It MUST be included inside a RelativeLayout. This is because several of the UI features need to be able to slide “over” your existing content.
  2. It MUST be positioned at the bottom of your view.
  3. It MUST be included as the LAST element in your XML layout, otherwise you may get some strange behavior with layers sliding over/under content.

Here is the recommended way to include the Action Bar in your XML layout:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
	xmlns:android="http://schemas.android.com/apk/res/android"
	android:layout_width="fill_parent"
	android:layout_height="fill_parent">
	
	<ScrollView
		android:layout_width="fill_parent"
		android:layout_height="fill_parent"
		android:layout_above="@+id/socializeActionBar"
		android:fillViewport="true"
		android:isScrollContainer="false">
	
		<LinearLayout
		android:orientation="vertical"
		android:layout_width="fill_parent"
		android:layout_height="fill_parent">
		
		
		<!-- Your existing content goes here -->
		
		</LinearLayout>
		
	</ScrollView>
	
	<!-- The ActionBar MUST appear AFTER your content in your layout -->
	<com.socialize.ui.actionbar.ActionBarView
		android:id="@id/socializeActionBar"
		android:layout_width="fill_parent"
		android:layout_height="wrap_content"
		android:layout_alignParentBottom="true"/>
	
</RelativeLayout>

In this case you will still need to set the entity in code:

public class ActionBarSampleLayout extends Activity {
	
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		
		super.onCreate(savedInstanceState);
		
		setContentView(R.layout.main);
		ActionBarView socializeActionBarView = (ActionBarView) findViewById(R.id.socializeActionBar);
		socializeActionBarView.setEntity(Entity.newInstance("foo", "bar"));
		socializeActionBarView.refresh(); // Optional.. only if changing entity key.
	}
}