Creating easy custom buttons in Android
Wouldn’t it be cool if you could make your own buttons? Well, I’ve done a bunch of hax here and there where I use ImageViews for buttons and switching the image on press and such, and sure, that works. But it isn’t as clean, and well coded as this implementation here.
What this is going to involve is putting an XML layout in your drawables folder. I know, you’re scared. I was too at first. But now, I’m creating custom buttons like its going out of style (which it probably is).
The essence here is we are going to take the style of the original Android button, and override its image resources with our own, while leaving the rest of the functionality alone. Lets start with putting the images for the button you want to use. This example just uses an up and a down state.
Just right click and save as for these images. Copy them into your drawables folder.
Now, the magic happens. Create a new file in your drawables folder and call it “new_button.xml”
Paste the following code into this file
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_window_focused="false" android:state_enabled="true" android:drawable="@drawable/custom_button_up" /> <item android:state_window_focused="false" android:state_enabled="false" android:drawable="@drawable/custom_button_up" /> <item android:state_pressed="true" android:drawable="@drawable/custom_button_down" /> <item android:state_focused="true" android:state_enabled="true" android:drawable="@drawable/custom_button_down" /> <item android:state_enabled="true" android:drawable="@drawable/custom_button_up" /> <item android:state_focused="true" android:drawable="@drawable/custom_button_up" /> <item android:drawable="@drawable/custom_button_up" /> </selector>
Excellent. For now, we are just dealing with 2 states, pressed and unpressed. The variables you see above make it clear the different button states you could have if you wanted.
Now, we need to make a “styles.xml” file, this is where your program will look for styles that you have declared. Where do I put this styles.xml you wonder? In that folder you probably never use, the “values” folder. So, go to your values folder, and create a file called “styles.xml” and paste this code into it:
<?xml version="1.0" encoding="utf-8"?> <resources> <style name="NewButton.Button" parent="@android:style/Widget.Button"> <item name="android:background">@drawable/new_button</item> </style> </resources>
Excellent! Now you’re ready to use your custom buttons! In your main layout, or whereever you want to use this button, call this in the code
<Button android:id="@+id/custombutton" style="@style/NewButton.Button" android:layout_width="wrap_content" android:layout_height="wrap_content" />
If all goes well, this is what it should look like!
If you just skimmed to the bottom looking for source code, youre in luck. Download below. Helpful?
http://www.inphamous.com/code/examples/Custom_Buttons.zip
Somthing extra…
Try this- Since its still a button, you can add text on top of this bad boy. Keep that in mind when designing your own custom buttons. Someday, I will enlighten you on how button images properly stretch using the 9 patch tool. Heres the guide from google if you don’t want to wait for me
http://developer.android.com/guide/developing/tools/draw9patch.html
-inph