Graphics for Mobile Apps or Mobile Websites

Recently I started playing with Inkscape.  It's a great FREE software that is similar to CorelDraw or Illustrator.  I've used to create a few simple cliparts.  I've also discovered that inkscape provides a gallery of FREE copyright/royalty free cliparts that people can contribute to or download from.

I'm pretty happy with it, so if anyone wants to explore their graphic artists side, check out their site.

http://inkscape.org/

I wanted to share my creations via a mobile app or maybe a mobile website.  And that got my wondering about what size and resolution these cliparts and pictures should be saved at for optimal display and download speed onto a mobile device?  Do I need to save different sizes of each picture to display correctly on my motorola cliq and my samsung galaxy tab?  

So here's some notes (mainly for my own future reference.

1. I found this article about designing for mobile web to be educational in covering the basics.  It's written in 2008, so maybe there's new stuff to know about html5 and what not.   But I'm sure the basics of mobile web design has not changed.  Summary, keep your SIMPLE and LINEAR.  Not everyone has a 4G or even a 3G connection =P.  http://www.sitepoint.com/designing-for-mobile-web/ 
2. Both android and ios prefers *.png over *.jpg. However, jpegs are much smaller than png. So for web images, stick with jpegs.  further information found HERE.
3. For android development worry more about screen densities than screen size when it comes to your bitmaps.  There are 4 screen densities: low, medium, high and extra-high density.  

• To generate these images, you should start with your raw resource in vector format and generate the images for each density using the following size scale:
• xhdpi: 2.0
• hdpi: 1.5
• mdpi: 1.0 (baseline)
• ldpi: 0.75
• This means that if you generate a 200x200 image for xhdpi devices, you should generate the same resource in 150x150 for hdpi, 100x100 for mdpi and finally a 75x75 image for ldpi devices.
• Further information found on the android developer website HERE

Android ShapeDrawable Tutorial - RoundRectShape()

I want to draw rectangles in my android application and discovered that ShapeDrawable is the tool I need to do it.  If you look through the provided Android demo's that come with your Android SDK you will find a ShapeDrawable demonstration.   .../ApiDemos/src/com/example/android/apis/graphics/ShapeDrawable1.java


I looked at it and played around with it to better understand the ShapeDrawable library.


Below is the code snippet pulled from ShapeDrawable1.java

float[] outerR = new float[] { 35, 35, 35, 35, 0, 0, 0, 0 };
RectF   inset = new RectF(6, 6, 6, 6);
float[] innerR = new float[] { 12, 12, 0, 0, 12, 12, 0, 0 };

mDrawables[4] = new ShapeDrawable(new RoundRectShape(outerR, inset, innerR));


So let's focus on the parameters on RoundRectShape().

1. inset defines the shape of the rectangle that will be inside our RoundRectShape.  It basically defines where the left side, right side, top and bottom of the rectangle will be.
2. outerR defines the the radius of the outer corner of the RoundRectShape.  So in this case, we've defined the top left and top right corners of RoundRectShape to have a rounded corner of 35.  The larger the numbers, the curvier your corner will look.
3. innerR defines the radius of the inner corner of the RoundRectShape.  Once more, the larger the numbers, the curvier your corner will look.

I recommend you try changing the numbers on your own to get a better feel for what the numbers of outerR and innerR do.  

I still haven't figured out how the PathShape works. When I do, I'll add it this blog.