Customizing your own Buttons for Android/Java

When you look at most professional applications you often see dozens of gadgets that don’t look anything like the normal widgets in the form widget section. As I began to work on the fourth programming assignment( music player), I remembered back to some of the skills that  I learned in my previous Java programming course.

In this tutorial, we will take a quick look into customizing the appearance of a button that you could use of an application. In my previous class, my teacher explained to me what the order of handler calls were for different swing components (Buttons, alert boxes, dialog boxes, window frames, ect.). In particular, the buttons, came to be one of my favorites because of it’s versatility.  With the right coding, you can make a button look and behave just like a normal image and user would never even know the difference.

When we take a closer look at how a normal button behaves in an application. When you touch it, it indents in to make it have an almost 3D affect. This is simply done by placing an alternate image background change into the OnTouchListener for the button. Now when the button is released, we notice that the button pushes outward, toward the user. I’ve found that this affect can be setup by setting the button’s image back to the initial image in the OnClickListener.

This method works due to the calling structure of a button, either JButton from the swing library, or Button for android. Needless to say, when a Button is touched, the OnTouch handler takes control, but once the user releases the button, the OnClick handler gets called immediately after. Since the OnClick handler has to wait until the OnTouch handler finishes its business, we can still keep that holding feature that you get from the behavior of a normal or default button.

Below I have a simplified snippet of code  from my assignment 4 to demonstrate this method.

– A few notes to point out first

  • R.drawable.wm_stop is the default image for the stop button on my music player
  • R.drawable.alt_stop is the alternate image. (Both images have to be saved in the
    drawable folder)
  • the settext(“”) function unnecessary, since you can still have text on the button, but I just wanted to let the background picture give the explanation of the functionality of the button. (You can also set the text in the xml for less coding.)
  • Lastly, I did manage to find a site that  is great for finding and even creating image icons for tasks like these. The site is called http://openclipart.org/ All clipart is released to the public domain and may be used in any project for free with no restrictions. I would strongly recommend all developers to play around with some of the features of this site.
Any other normal features that you would do with a normal button will work normally. One thing that I did realize is when you wan’t to setClickable() to false, this method only disables the OnClick handler, but the OnTouch handler will still do it’s job(Changing the button to it’s alternate  image).  The solution of fixing his problem is simple. A simple boolean member data variable inside the OnTouchListener implementation can control whether or not the handler executes or not. When you set setClickable(false), you should also set the boolean to false and vice versa.
public class ButtonPlayActivity extends Activity
{
 @Override
 public void onCreate(Bundle savedInstanceState)
 {
     super.onCreate(savedInstanceState);
     setContentView(R.layout.main);

     Button stopButton = (Button) findViewById(R.id.stopButton);

     stopButton.setText("");

     // Now, let us modify the appearance of our button by using
     // out "setOnTouch" and "setOnClick' listeners

     // First set the button background at the starting picture.
     // The picture is stored as a .png file in the drawable folder
     stopButton.setBackgroundResource(R.drawable.wm_stop);

     // When a button is clicked, I've noticed that the OnTouch handler
     // gets used right before the OnClick handler

     stopButton.setOnTouchListener(new OnTouchListener()
     {
         public boolean onTouch(View v, MotionEvent event)
         {
             // To keep the same effect as normal buttons, we
             // change the background of the button from the original
             // state to is alternate background picture

             v.setBackgroundResource(R.drawable.alt_stop);

             // return false to ensure that the listener will
             // continue to use this event and not consume it

             return false;
         }
     });

     stopButton.setOnClickListener(new OnClickListener()
     {
         public void onClick(View v)
         {
             // Simply change the background of the button
             // back to its original state

             v.setBackgroundResource(R.drawable.wm_stop);
         }
     });
    }