Creating a custom Android button with a resizable skin Android Published on August 2, 2011 by Andrea Bresolin Add comments

Creating a custom Android button with a resizable skin

Android Published on August 2, 2011 by Andrea Bresolin Add comments

Source code

If you are developing your own Android application, maybe you would like to give it a custom skin with a defined set of colors for all the interface elements. Here I’m going to show how to customize Android buttons. This is the same kind of customization I made for my own app which is called FWebLauncher and you can download for free from the Android Market. In this post I’m going to quickly describe the steps that have to be performed to obtain our result, but I recommend you to download the whole example application with all the resource images through the link on top of this post.

First of all, you need to decide how your buttons will look in different states, so you’ve got to define the corresponding skin images for the Normal, Pressed, Focused and Disabled states. Of course, if you don’t need all the states, you can just define some of them. In the following image you can see how our buttons will look like:

We want the skin to be resizable, so the button can adapt its size depending on the content (i.e. the text) without making the skin look weird. To do this, we need to define a 9-patch for each image. There’s a tool installed with the Android SDK that you can find in ${ANDROID_SDK_INSTALL_DIRECTORY}\tools\draw9patch.bat. Execute that batch file and you’ll have the following application running:

As you can see I’ve already loaded the PNG file for the Normal state of our buttons and I’ve defined the 9-patch with the black lines that you can see on every side of the image. As written in the Android developer’s documentation, the top and left lines define the stretchable area used to resize the image, while the bottom and right lines define the area where the content must be placed. With the 9-patch tool, I created a new file for each image of the button skin, so for example, if the skin image for the Normal state of the button is called button_normal.png, then the corresponding 9-patch file will be button_normal.9.png and we need only this inside the resources folders of our application.
The next thing to do is creating a selector that tells Android how it should deal with the skin images depending on the button state. The selector is just an XML file that looks like this:

1	<?xml version="1.0" encoding="utf-8"?>

2	<selector xmlns:android="http://schemas.android.com/apk/res/android">

3	<item android:drawable="@drawable/button_disabled" android:state_enabled="false"/>

4	<item android:drawable="@drawable/button_pressed" android:state_pressed="true"/>

5	<item android:drawable="@drawable/button_focused" android:state_focused="true"/>

6	<item android:drawable="@drawable/button_normal"/>

7	</selector>

In the selector you define which skin image should be used to render each button state. So if the selector XML file is called button.xml, you can just write something like this to have your button skin working:

1	<Button android:id="@+id/textBtn"

2	android:layout_width="wrap_content"

3	android:layout_height="wrap_content"

4	android:text="Text in the button"

5	android:background="@drawable/button"

6	android:textColor="#ffffffff"/>

This is just a simple button with some text in it. In case you need a button with an image, like an icon, and you want it to resize proportionally, then you don’t need to define a 9-patch and you need to use something different like an ImageButton:

1	<ImageButton android:id="@+id/iconBtn"

2	android:layout_width="64dip"

3	android:layout_height="64dip"

4	android:src="@drawable/icon_button"

5	android:scaleType="fitCenter"

6	android:background="#00000000"/>

These are the possible states for iconBtn:

I set the scaleType attribute to make the image resize correctly and I set the background to #00000000 because I want to make it completely transparent (remember that the format for that attribute is ARGB where A is the alpha value). I don’t need the background because I already have an image for each state of the button with its own trasparency correctly set on the borders to have a custom shape for the button if I need it. The src attribute specifies the selector to use for this button:

1	<?xml version="1.0" encoding="utf-8"?>

2	<selector xmlns:android="http://schemas.android.com/apk/res/android">

3	<item android:drawable="@drawable/icon_button_disabled" android:state_enabled="false"/>

4	<item android:drawable="@drawable/icon_button_pressed" android:state_pressed="true"/>

5	<item android:drawable="@drawable/icon_button_focused" android:state_focused="true"/>

6	<item android:drawable="@drawable/icon_button_normal"/>

7	</selector>

What if you want a button with both an icon and the text? Well, you can do it with something like this:

1	<?xml version="1.0" encoding="utf-8"?>

2	<Button android:id="@+id/textAndIconBtn"

3	android:layout_width="wrap_content"

4	android:layout_height="wrap_content"

5	android:text="Text in the button"

6	android:background="@drawable/button"

7	android:drawableLeft="@drawable/star_icon"

8	android:drawablePadding="5dip"

9	android:textColor="#ffffffff"/>

The icon is specified in the drawableLeft attribute and you can set also a padding to use between the icon and the text through the drawablePadding attribute. In this case the button.xml selector makes it possible to change only the background image depending on the button state, but not the icon itself. To do that, you need to act programmatically in the source code.
To see the final result of what I explained, take a look at the example application downloadable from the top of this post:

For each kind of button, you can try to make it pressed, focused or disabled to see how it changes. The layout of the main activity is defined as follows:

001	<?xml version="1.0" encoding="utf-8"?>

002	<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

003	android:orientation="vertical"

004	android:layout_width="fill_parent"

005	android:layout_height="fill_parent">

006

007

<TextView

008	android:layout_width="wrap_content"

009	android:layout_height="wrap_content"

010	android:text="Button with text:"/>

011

012	<LinearLayout

013	android:orientation="horizontal"

014	android:layout_width="wrap_content"

015	android:layout_height="wrap_content"

016	android:layout_marginTop="3dip"

017	android:layout_marginBottom="3dip">

018

019	<Button android:id="@+id/textBtn"

020	android:layout_width="wrap_content"

021	android:layout_height="wrap_content"

022	android:text="Text in the button"

023	android:background="@drawable/button"

024	android:textColor="#ffffffff"

025	android:layout_gravity="center_vertical"/>

026

027	<CheckBox android:id="@+id/textBtnEnabledCheck"

028	android:layout_width="wrap_content"

029	android:layout_height="wrap_content"

030	android:layout_marginLeft="10dip"

031	android:checked="true"

032	android:text="Enabled"

033	android:layout_gravity="center_vertical"/>

034

035	</LinearLayout>

036

037

<TextView

038	android:layout_width="wrap_content"

039	android:layout_height="wrap_content"

040	android:text="Button with icon:"

041	android:layout_marginTop="6dip"/>

042

043	<LinearLayout

044	android:orientation="horizontal"

045	android:layout_width="wrap_content"

046	android:layout_height="wrap_content"

047	android:layout_marginTop="3dip"

048	android:layout_marginBottom="3dip">

049

050	<ImageButton android:id="@+id/iconBtn"

051	android:layout_width="64dip"

052	android:layout_height="64dip"

053	android:src="@drawable/icon_button"

054	android:scaleType="fitCenter"

055	android:background="#00000000"

056	android:layout_gravity="center_vertical"/>

057

058	<CheckBox android:id="@+id/iconBtnEnabledCheck"

059	android:layout_width="wrap_content"

060	android:layout_height="wrap_content"

061	android:layout_marginLeft="10dip"

062	android:checked="true"

063	android:text="Enabled"

064	android:layout_gravity="center_vertical"/>

065

066	</LinearLayout>

067

068

<TextView

069	android:layout_width="wrap_content"

070	android:layout_height="wrap_content"

071	android:text="Button with text and icon:"

072	android:layout_marginTop="6dip"/>

073

074	<LinearLayout

075	android:orientation="horizontal"

076	android:layout_width="wrap_content"

077	android:layout_height="wrap_content"

078	android:layout_marginTop="3dip"

079	android:layout_marginBottom="3dip">

080

081	<Button android:id="@+id/textAndIconBtn"

082	android:layout_width="wrap_content"

083	android:layout_height="wrap_content"

084	android:text="Text in the button"

085	android:background="@drawable/button"

086	android:drawableLeft="@drawable/star_icon"

087	android:drawablePadding="5dip"

088	android:textColor="#ffffffff"

089	android:layout_gravity="center_vertical"/>

090

091	<CheckBox android:id="@+id/textAndIconBtnEnabledCheck"

092	android:layout_width="wrap_content"

093	android:layout_height="wrap_content"

094	android:layout_marginLeft="10dip"

095	android:checked="true"

096	android:text="Enabled"

097	android:layout_gravity="center_vertical"/>

098

099	</LinearLayout>

100

101	</LinearLayout>

In the MainActivity class we just define the listeners to make the buttons enabled or disabled depending on the checkboxes. Note that you need to set the value also for the clickable property of the ImageButton to make it actually enabled or disabled.

01	package com.devahead.customandroidbuttonwithresizableskin;

02

03	import android.app.Activity;

04	import android.os.Bundle;

05	import android.widget.Button;

06	import android.widget.CheckBox;

07	import android.widget.CompoundButton;

08	import android.widget.CompoundButton.OnCheckedChangeListener;

09	import android.widget.ImageButton;

10

11	public class MainActivity extends Activity implements OnCheckedChangeListener

12

{

13	// Interface elements

14	protected Button textBtn;

15	protected CheckBox textBtnEnabledCheck;

16	protected ImageButton iconBtn;

17	protected CheckBox iconBtnEnabledCheck;

18	protected Button textAndIconBtn;

19	protected CheckBox textAndIconBtnEnabledCheck;

20

21

@Override

22	public void onCreate(Bundle savedInstanceState)

23

{

24	super.onCreate(savedInstanceState);

25	setContentView(R.layout.main);

26

27	// Retrieve interface elements

28	textBtn = (Button)findViewById(R.id.textBtn);

29	textBtnEnabledCheck = (CheckBox)findViewById(R.id.textBtnEnabledCheck);

30	iconBtn = (ImageButton)findViewById(R.id.iconBtn);

31	iconBtnEnabledCheck = (CheckBox)findViewById(R.id.iconBtnEnabledCheck);

32	textAndIconBtn = (Button)findViewById(R.id.textAndIconBtn);

33	textAndIconBtnEnabledCheck = (CheckBox)findViewById(R.id.textAndIconBtnEnabledCheck);

34

35	// Add listeners

36	textBtnEnabledCheck.setOnCheckedChangeListener(this);

37	iconBtnEnabledCheck.setOnCheckedChangeListener(this);

38	textAndIconBtnEnabledCheck.setOnCheckedChangeListener(this);

39

}

40

41

@Override

42	public void onCheckedChanged(CompoundButton buttonView, boolean isChecked)

43

{

44	if (buttonView == textBtnEnabledCheck)

45

{

46	textBtn.setEnabled(isChecked);

47

}

48	else if (buttonView == iconBtnEnabledCheck)

49

{

50	iconBtn.setEnabled(isChecked);

51	iconBtn.setClickable(isChecked);

52

}

53	else if (buttonView == textAndIconBtnEnabledCheck)

54

{

55	textAndIconBtn.setEnabled(isChecked);

56

}

57

}

58

}

That’s it. I hope you can find something useful in this post and if you want to see some custom buttons in action in a real application, you could give a try to FWebLauncher.

From : http://www.devahead.com/blog/2011/08/creating-a-custom-android-button-with-a-resizable-skin/

Android RelativeLayout Example

In Android, RelativeLayout let you position your component base on the nearby (relative or sibling) component’s position. It’s the most flexible layout, that allow you to position your component to display in anywhere you want (if you know how to “relative” it).

In RelativeLayout, you can use “above, below, left and right” to arrange the component position, for example, display a “button1″ below “button2″, or display “button3″ on right of the “button1″.

Note
The RelativeLayout is very flexible, but hard to master it. Suggest you use Eclipse IDE to drag the component, then view study the Eclipse generated XML layout code to understand how to code “relative” components.

In this tutorial, we show you how to arrange / position button, textview and editbox via “RelativeLayout“.

P.S This project is developed in Eclipse 3.7, and tested with Android 2.3.3.

1. RelativeLayout

Open “res/layout/main.xml” file, add components and position it via “RelativeLayout“. Read below XML code, quite verbose to tell you where to display the component.

File : res/layout/main.xml

<?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" >
 
    <Button
        android:id="@+id/btnButton1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button 1"/>
 
    <Button
        android:id="@+id/btnButton2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button 2"
        android:layout_toRightOf="@+id/btnButton1"/>
 
     <Button
        android:id="@+id/btnButton3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button 3"
        android:layout_below="@+id/btnButton1"/>
 
     <TextView
         android:id="@+id/textView1"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_below="@+id/btnButton3"
         android:layout_marginTop="94dp"
         android:text="User :"
         android:textAppearance="?android:attr/textAppearanceLarge" />
 
     <EditText
         android:id="@+id/editText1"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_alignParentRight="true"
         android:layout_alignTop="@+id/textView1"
         android:layout_toRightOf="@+id/btnButton3" />
 
     <Button
         android:id="@+id/btnSubmit"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_alignParentRight="true"
         android:layout_below="@+id/editText1"
         android:text="Submit" />
 
</RelativeLayout>

2. Demo

See result, above XML code will generate following output.

Download Source Code

Download it – Android-RelativeLayout-Example.zip (15 KB)

How to build Android App with HTML5/CSS/JavaScript

If you are interested in Android Development from the perspective of having an application made for you, please visit our home page and then use the contact form; in SEO terms if this has been  'do' user intent when searching. If you want to know more about android devevelopment, please read this page.

This article discusses how the emergence of HTML5 is revolutionizing iphone, android development, and mobile apps for the Blackberry and also Windows Mobile. Since each of these systems has its own proprietary operating system, up until now, development has been a costly affair, and often keeping an app updated even more costly if the original development team are no longer available.

So step up to the plate HTML5. This is the one standard that is consistent on all of these smart phones. It is such a powerful construct, it is capable of delivering full scale applications that do almost anything a native app could do, barring 3D graphics. 

With a little clever trickery behind the scenes, we can make all the native functions such as accelerometer and geolocation available to an HTML5 app and when all these factors are brought together we have a very effective, quick and low cost way of building Apps and Mobile sites for smart phones.

It is the standard designed to replace HTML4, a standard that has guided internet browser implementation since the beginning of the millennium. Combined with CSS 2 and JavaScript, these three foundation pillars have shaped websites over the last ten years.

One key failing of the HTML4 CSS JavaScript holy trinity is lack of animation and multimedia integration. Mootools, jquery and JavaScript libraries do partially correct these (animation) issues, video has (as a rule) only been easily cross platform / cross browser achievable with Flash.

So step aside the old and welcome the new. It introduces many extensions to the current standards including 

• a far more powerful set of style rules in CSS3
• in built video and media handling
• the canvas object to handle drawing, and display requirements

In addition to sorting out the missing bit currently 'patched' by Adobe Flash , it also brings in a whole new set of features of its own.

• session storage
• local data storage
• SQL data storage

This combination of tools firmly sets it up as an application development platform, although even with the addition of this enormous client side toolset, a server side platform of some description (php, .net or java) will almost certainly be needed to create a complete application.

So if all this sounds great is there a catch. Well unfortunately there is. Most of the older browsers, do not use the standard, and so a site coded in HTML5 will only function on the latest versions of Safari, Opera or Firefox 4. Internet explorer 9 has partial implementation of the new standards.

But wait, before you stop reading this article and close your browser, there is a world where HTML5 is fully working. That is the world of smartphone such as IOS, blackberry and Android based phones.

Perhaps even more importantly it is the one standard that binds these disparate technologies together. Thus mobile sites coded in this, can enjoy many of the new features and work on different handsets.

Mobile websites are all well and good, but the technology does not end there. With the use of compilers such as adAPPt, Titanium and Phonegap. HTML5 applications can be cross compiled into IOS (iPhone), Android, Blackberry and Windows mobile, allowing easy Android Development.

So whilst it may not be taking the desktop browsing world by storm, it has completely revolutionised the world of mobile app development. Not only does it provide a very cost effective method to develop cross platform, it also dramatically reduces the cost of maintaining apps in the future. 

In writing this article, we would like to credit the amazingly wonderful android developers at www.adappt.co.uk  who have helped us with technical information and contributed jointly to the Drupal phonegap opensource module. What these guys do not know about mobile development is not worth knowing, and we would highly recommend them for any complex mobile development.