Geeks With Blogs
O(geek) Ryan Cain, running in time proportional to Geek.

While building our mobile app I came across a few valuable resources for some of the specific issues I was facing, I thought I'd share those in case others were looking for similar info.

Customized Color Progress Bar


iPhone

This one probably violates all UI rules defined by Apple, but we were looking to change the color of the progress bar for our app based on certain values.  As the bar filled up, we wanted it to change to red so the user could quickly see while driving that is represented a different state than when it was green.  There is no built in mechanism to do this on the iPhone, but I did come across a great free 3rd party progress bar that only requires attribution for licensed use:

http://p-development.nl/blog/colored-uiprogressview

Android

Android does have the colorization feature built into the framework.  All that is required is an XML file for your progress bar and an attribute on your progress bar itself.  The XML file should be placed in the res/drawable folder in your project and look something like:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="@android:id/background">
    <shape>
        <corners android:radius="5dip" />
        <gradient
                android:startColor="#ff9d9e9d"
                android:centerColor="#ff5a5d5a"
                android:centerY="0.75"
                android:endColor="#ff747674"
                android:angle="270"
        />
    </shape>
</item>

<item android:id="@android:id/secondaryProgress">
    <clip>
        <shape>
            <corners android:radius="5dip" />
            <gradient
                    android:startColor="#80ffd300"
                    android:centerColor="#80ffb600"
                    android:centerY="0.75"
                    android:endColor="#a0ffcb00"
                    android:angle="270"
            />
        </shape>
    </clip>
</item>
<item
    android:id="@android:id/progress"
>
    <clip>
        <shape>
            <corners
                android:radius="5dip" />
            <gradient
                android:startColor="#FF3333"
                android:endColor="#800000"
                android:angle="270" />
        </shape>
    </clip>
</item>

</layer-list>

If the above is named “redprogress.xml” then simply add an attribute to your progress bar tag in the UI of:

android:progressDrawable="@drawable/redprogress"

JSON Parsing


iPhone

All of the data we use in our app comes from a REST service that pushes out JSON formatted data.  The iPhone framework doesn't include any libraries for parsing of the JSON data, but as with the colored progress bar there is a great open source 3rd-party library that provides that parsing for you:

http://code.google.com/p/json-framework/

One gotcha though is that if you are pushing out your JSON data from a .NET REST service, apparently there is not standard representation for dates yet within JSON, so you will have to roll your own date parsing method.  A good starting point to parse the .NET formatted JSON date is at:

http://efreedom.com/Question/1-1757303/Parsing-JSON-Dates-iPhone

Android

Android has all the JSON objects and parsing already built in and accessible with no extra libraries needed.  Access your REST service is as simple as building up and HTTP connection and reading back the JSON as a string, then parsing as such:

JSONObject json = new JSONObject(result);
int myInt = json.getInt("MyJsonFormattedDataItem"));

As with iPhone though, there is no built in parsing method for the .NET date type formatted in JSON so you will have to roll your own. 

Icons & Graphics

On the iPhone side Glyphish has some great free icons at:

http://glyphish.com/

They are also raising a few dollars and building out @2X icons for the retina display and the iPad.

For Android every icon that is included on the phones are part of the SDK that you can spelunk around and find.  This is great to use the standard icons for Preferences, Refresh and such.  There is also a great starter pack from Google that you can build your own icons from:

http://developer.android.com/guide/practices/ui_guidelines/index.html

Both platforms have many other options available for icons, these are the 2 sources we used along with having an artist create some of the more important icons such as the Application icon. 

Posted on Wednesday, September 8, 2010 1:58 PM | Back to top


Comments on this post: Mobile Development Resources (iPhone & Android)

No comments posted yet.
Your comment:
 (will show your gravatar)


Copyright © Ryan Cain | Powered by: GeeksWithBlogs.net