Custom Like Buttons

One of the most commonly used social features is a simple “like” button. Socialize provides a way to quickly and easily create a customized like button that you can include in your app with minimal effort.

The following step-by-step guide will show you how to include a basic like button with custom images and text.

How-To Guide

Step 1 - Setup Socialize

If you haven’t already, make sure you have successfully completed the Getting Started process

Step 2 - Create a Button State Drawable

If you want your like button to match the look and feel of your app you can do this by creating a StateListDrawable as an XML configuration saved to res/drawable

images/state_list_drawable.png
<!-- 
Create a state list drawable to represent the button states then
add to res/drawable/like_button_state.xml 
-->
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:drawable="@drawable/like"
        android:state_checked="true"/>
    <item
        android:drawable="@drawable/unlike"
        android:state_checked="false"/>    
</selector>

This example is using two images from our demo app called “like” and “unlike”

images/like.png images/unlike.png

Step 3 - Create a Button

The Socialize Like Button behavior can be applied to any type of CompoundButton. This includes CheckBox, RadioButton, ToggleButton and Switch (API 11)

To turn one of these button types into a Socialize Like Button, first define a button in your layout. The following example uses a Checkbox:

<!-- Set the android:button attribute to your state list drawable -->
<CheckBox 
    android:id="@+id/btnCustomCheckBoxLike"
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"
    android:layout_gravity="left|center_vertical" 
    android:button="@drawable/like_button_state"/>

Step 4 - Transform the Button

The final step in the process is to transform your button into a Socialize Like Button.

In the onCreate method of your Activity simply call the makeLikeButton method on the LikeUtils instance.

@Override
protected void onCreate(Bundle savedInstanceState) {
	super.onCreate(savedInstanceState);
		
	// Define/obtain your entity
	Entity entity = Entity.newInstance("http://getsocialize.com", "Socialize");
	
	// Get a reference to the button you want to transform
	// This can be any type of CompoundButton (CheckBox, RadioButton, Switch, ToggleButton)
	
	CheckBox btnCustomCheckBoxLike = (CheckBox) findViewById(R.id.btnCustomCheckBoxLike);
	
	// Make the button a socialize like button!
	LikeUtils.makeLikeButton(this, btnCustomCheckBoxLike, entity, new LikeButtonListener() {
	
		@Override
		public void onClick(CompoundButton button) {
			// You can use this callback to set any loading text or display a progress dialog
			button.setText("--");
		}
	
		@Override
		public void onCheckedChanged(CompoundButton button, boolean isChecked) {
			// The like was posted successfully, change the button to reflect the change
			if(isChecked) {
				button.setText("Unlike");
			}
			else {
				button.setText("Like");
			}
		}
	
		@Override
		public void onError(CompoundButton button, Exception error) {
			// An error occurred posting the like, we need to return the button to its original state
			Log.e("Socialize", "Error on like button", error);
			if(button.isChecked()) {
				button.setText("Unlike");
			}
			else {
				button.setText("Like");
			}
		}
	});		
}

This will result in a completely custom Socialize Like Button!

images/like_button.png