Monday 28 February 2011

Android: Fading between two Activities

Here's the code to do a nice smooth fade between two Activities..

Create a file called fadein.xml in res/anim
<?xml version="1.0" encoding="utf-8"?>
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
   android:interpolator="@android:anim/accelerate_interpolator"
   android:fromAlpha="0.0" android:toAlpha="1.0" android:duration="2000" />



Create a file called fadeout.xml in res/anim
<?xml version="1.0" encoding="utf-8"?>
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
   android:interpolator="@android:anim/accelerate_interpolator"
   android:fromAlpha="1.0" android:toAlpha="0.0" android:duration="2000" />


If you want to fade from Activity A to Activity B, put the following in the onCreate method for Activity B before setContentView.
overridePendingTransition(R.anim.fadein, R.anim.fadeout);

If the fades are too slow for you, change android:duration in the xml files above to something smaller

Sunday 27 February 2011

iPhone-Style Buttons for Android

I recently started work on apps for android and quickly tired of the default buttons that Android provide - especially the nasty default flashes of green and orange when the button is tapped. Eurgh.

Happily, the Android SDK provides a neat way to build custom buttons, and to use them throughout your application. Here I present some vaguely iPhone-style gradient-filled buttons I created using this method.



Background Images
First up you need to create the button background images themselves. You need separate images for at least the normal and selected states, and optionally the 'highlighted' state too. Highlighted is when the user selects the button using the (in my opinion entirely pointless) trackpad. Here I've been a bit lazy and used the selected state for highlighted rather than making a whole new image.

You need to make versions of the image for hi-res devices like the Nexus One or HTC Desire (hdpi), and medium res versions for other devices like the HTC Legend (mdpi). So far I've used the same images for medium res and low res, and it seems fine.

Here are the images I created (right-click to download).



Hi-res png. Normal and Tapped




Medium res png. Normal and tapped



Making the images stretchable using draw9patch
Next you need to tell Android how these images can be stretched to make buttons of different sizes.

Run the draw9patch.jar application (in your android sdk's tools/lib folder).
The official instructions for the draw9patch tool are rather vague, so here's what I did.
  • Drag-and-drop one of the button images onto the tool.
  • The image will appear in the left panel.
  • Choose an edge. I start with the top.
  • Decide on which part of the image should contain the button content. For a button like this one you'd choose the largest possible straight bit of the edge you're currently working on.
  • The image is displayed with an extra one-pixel gap around the edge. You're going to be drawing in the one-pixel gap to mark up the edges.
  • Click and drag the mouse over the one-pixel gap to draw in black pixels to mark the largest possible straight part - make sure you don't miss any pixels.
  • In the image above I've coloured in roughly the middle third of the top edge. If you make a mistake, hold shift and click to erase pixels.
  • Repeat with the other edges.
  • If all has gone well, you'll see a preview on the right of what the button looks like stretched.
  • Repeat for each edge.
  • Save the file. When you give it a name, don't provide the extension. The file will be saved as a 'name.9.png' file.
  • Repeat for each image.
  • My filenames were button_black.9.png and button_black_tap.9.png. Make sure you give the medium and high res images the equivalent names. This is important later!
Copy the .9.png files to your project
Copy the high-res .9.png images into your res/drawable-hdpi folder (make it if it doesn't exist), and the medium-res into res/drawable-mdpi AND res/drawable-ldpi. If you omit the ldpi image Android appears to use the high-res image on low-res devices.

Create the drawable to define normal, tapped, and highlighted states
Now we can create our custom button style. We're going to define a 'drawable' called black_button that will use the black_button and black_button_tap images we made above.

Put this in an xml file called 'black_button.xml' inside the res/drawable folder.
<?xml version="1.0" encoding="utf-8"?>
<selector android="http://schemas.android.com/apk/res/android">
<item state_focused="true" state_pressed="false" drawable="@drawable/button_black_tap">
<item state_focused="true" state_pressed="true" drawable="@drawable/button_black_tap">
<item state_focused="false" state_pressed="true" drawable="@drawable/button_black_tap">
<item drawable="@drawable/button_black">
</item></item></item></item></selector>
This document tells android to use the tap image for the focused and pressed states when you use the drawable called 'black_button'.

Create the style
Next we need to define a style which we can use for the button. Android styles are a powerful way to collect together images, font, and layout settings that are common to widgets in your app. Making a style now will make it super-simple to make 'black_button' styled buttons later on.

Place this in the res/values folder in a file called styles.xml (or add the 'style' part to your existing styles if you have them). Note that we've set the background property to point to the drawable 'button_black' we just defined.
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="button_black">
<item name="android:background">@drawable/black_button</item>
<item name="android:textColor">#FFFFFF</item>
<item name="android:typeface">sans</item>
<item name="android:textStyle">bold</item>
<item name="android:textSize">20sp</item>
<item name="android:gravity">center</item>
<item name="android:layout_margin">3sp</item>
</style>
</resources>
Using the style on your buttons
Now we are ready to apply this style to buttons in our app. All you need to do is to set the 'style' attribute on the Button definition in your layout.xml files to point to the style we just defined.

Here's an example.
<Button android:text="Add from URL" android:id="@+id/addButton"
android:layout_height="wrap_content" android:layout_width="fill_parent"
android:drawableLeft="@drawable/menu_add"
style="@style/button_black"
></Button>

Thursday 17 February 2011

How to hide .svn folders from file search in Eclipse

By default, whenever you do a file search in Eclipse, it'll search inside .svn folders too. This is obviously very irrititating!

Here's how to turn it off:
  • Click on the root of your project in the Package Explorer window
  • On the main manu, select Project / Properties / resource / Resource Filters
  • Click Add..
  • Set 'Filter Type' to 'Exclude all'
  • Set 'Applies to' to 'Folders'
  • Check 'All Children (recursive)' (this is essential!)
  • Under File and Folder Attributes, type .svn. This should work for CVS folders too (type .cvs)
  • Click OK
  • Repeat for all projects in your workspace


Apparently installing subclipse (subversion plugin for eclipse) will also solve this problem but I haven't tried it myself.

Wednesday 16 February 2011

Android: Adding a new Activity using Eclipse

To add a new screen to your android app you'll want to add a new activity. This is a slightly manual process however, so I've noted down here for future reference.

This example will add a new activity called 'Foo'.

Step 1 - Add the activity class
  • In the Package Explorer, right click your main package (e.g. com.calvium.myApp) and select New / Class
  • Set the new class Name (e.g. Foo.java), and set it the superclass to android.app.Activity
  • Add an override for the onCreate method.
  • Easy method: Open the new file and place your cursor inside the main { } block. Press CTRL-SPACE and up pops a list of possibilities. Type 'onCreate' and hit enter to generate the method stub.
  • After super.onCreate add:

setContentView(R.layout.foo);

Step 2 - Create the Activity Layout File
  • Back in the package explorer, right-click res / layout.
  • Select New / Other / Android / Android XML File
  • Call the new file foo.xml
  • Add whatever controls you want to the xml file using the designer tool in eclipse, or by typing stuff manually.
Step 3 - Register the new activity in the AndroidManifest.xml file
  • Open AndroidManifest.xml
  • Just before the closing tag insert:

<activity android:name=".Foo">activity>