android illegal

Home / All posts

Android: easy trick to make beautiful background for you Android application

Posted by Unknown Rabu, 28 September 2011 0 komentar

Nice screen background, isn't it? :)
Today I will show you an easy Android design trick how to create very beautiful backgrounds for your Android applications in just 2 minutes!

For example, imagine that you have some simple form like this:

It's pretty boring, huh?

Now let's make this UI screen more attractive. ;-) What we can do with background? Yeah, we can set some fancy solid color or even gradient fill. But it doesn't change entire situation too much.

What is the solution? I recommend you to apply pattern fill for background. All you need is just an seamless pattern image and 1 minute for coding! :)

Find any seamless pattern image that you like and put it into drawable folder (or in drawable-ldpi, drawable-mdpi, etc. folders if you have several images of the same pattern for different screens).
Create new XML file and put it into drawable folder: (e.g. drawable/background_pattern_fill.xml)

<?xml version="1.0" encoding="utf-8"?>
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
android:src="@drawable/background_pattern"
android:tileMode="repeat">
</bitmap>

where is "background_pattern_image" is your favorite seamless pattern for custom background.

3. Apply created custom background to any View component:

<LinearLayout
...
android:background="@drawable/background_pattern_fill"
...>

Voilà! Now our UI screen looks much better! You can download the source code here.

More examples:

Baca Selengkapnya ....

Android: Pixel perfect user interfaces for Android applications

Posted by Unknown 0 komentar

We all know that User Interface is an extremely important part for every application that pretends to be attractive and popular among users. This is the axiom. Android mobile system is very popular and is installed on a big variety of devices: from low-tier cell phones (like HTC Hero) with small low density screens to high-tier phones (like Motorola Atrix, Samsung Galaxy S, etc.) and tablets with big high density screens. Moreover there are a lot of Android devices vendors - Samsung, HTC, Motorola, LG, Dell, etc. As a result we have so called "fragmentation" problem.

Today I want to reveal one useful feature of ADT (Android Development Tools) plug-in for Eclipse. Do you think that it will be DDMS perspective? No, man! :) I think any Android developer (from novice to expert) should know and use DDMS perspective which is so useful and powerful.

But there is also one more nice ADT feature that will help us to create better User Interfaces!

This is a "Pixel Perfect" perspective. It can be accessed from the menu:

Windows - Open Perspective - Other - Pixel Perfect

The main goal of "Pixel Perfect" perspective is to provide easy way to review user interface of our application in details. There are several useful features:

image of the screen that is currently visible on the emulator or device and
magnified image of that screen.You can move the cross-hair to inspect every detail (including color values) of your screen to make pixel perfect user interface! :)

"Pixel Perfect Tree" - to inspect visual objects hierarchy

"Load image overlay over the screen" - it's very useful for matching actual screen with the desired screen from a specification.

As you may see "Pixel Perfect" goal is similar with the Hierarchy Viewer tool (which is free standalone tool, available at android-sdk\tools\). Hierarchy Viewer tool has not only all features of the "Pixel Perfect" perspective, but also a lot of unique features: extended Tree Hierarchy view, visual indicators for measure/layout/draw performance, etc. But if you prefer doing all the stuff using IDE and you need just pixels and colors matching, then the "Pixel Perfect" ADT perspective is a good choice.

I want to believe that one day most of Android apps will be designed so well that even iOS users (who are so proud of iOS design) will be envious! ;-)

Baca Selengkapnya ....

Flex: image transformations to make realistic paper folding illusion

Posted by Unknown Selasa, 16 Agustus 2011 0 komentar

Today I want to show you a nice image manipulation trick that you can do in Flex.
Imagine that you have image of some paper object (like envelope or flyer):

and you want to transform it a little bit to get a realistic look of the folded paper. Something like this:

I will show you how to do it! ;)

Solution...

1) Slice original image into several parts:

var imageData:BitmapData = Bitmap(image.content).bitmapData;
var slicesData:Array = [];
var sliceWidth:Number = imageData.width / numSlices;
var sliceHeight:Number = imageData.height;

for (var i:int = 0; i < numSlices; i++)
{
slicesData[i] = new BitmapData(sliceWidth, sliceHeight);
   slicesData[i].copyPixels(imageData, new Rectangle(i *
   sliceWidth, 0, sliceWidth, sliceHeight), new Point(0, 0));
}

2) Apply skew transofrmation for each even part, and apply the same scew but with the opposite direction for odd parts:
for (var i:int = 0; i < slices.length; i++)
{
var skewMatrix:Matrix = new Matrix();
if (i % 2)
skewMatrix.b = skew;
else
skewMatrix.b = -skew;
slices[i].transform.matrix = skewMatrix;
}

3) In real life there are light sources, so some parts of the object are lighter, while the other parts are darker (because of the shadow). So in order to make more realistic look we will extend step 2 with color transformations:

for (var i:int = 0; i < slices.length; i++)
{
var skewMatrix:Matrix = new Matrix();
// if even: skew and make it darker
if (i % 2)
{
skewMatrix.b = skew;
slices[i].transform.colorTransform = new ColorTransform
(shadowFactor, shadowFactor, shadowFactor, 1, 0, 0, 0, 0);
}
// if odd: skew and make it lighter
else
{
skewMatrix.b = -skew;
slices[i].transform.colorTransform = new ColorTransform
(lightFactor, lightFactor, lightFactor, 1, 0, 0, 0, 0);
}

slices[i].transform.matrix = skewMatrix;
}

4) Finally, just put all slices into one container with horizontal layout and horizontal gap = 0 and you will get a nice image of the folded paper! :)

We can get a lot of different combinations by playing with 4 main parameters: number of sliced, scew factor, light factor and shadow factor.
Source code is available here.

Additional examples:

Baca Selengkapnya ....

Android: helper class for asynchronous images downloading with caching

Posted by Unknown Sabtu, 13 Agustus 2011 0 komentar

It's a common task in the Android development to display some images from the web into the ImageView widgets. Curiously enough, Android SDK doesn't have API for such a common thing, something like:

imageView.downloadFromURL(SOME_URL_HERE);

Moreover we want to have next features also:

perform data loading process in a separate thread to make User Interface responsive (while image data is loading)

caching support, to retrieve data immediately for already downloaded images

Of course, we can write some kind of helper class for this common task: private AsyncTask subclass to perform data loading process in an asynchronous manner, some HashMap or LinkedHashMap based class for cache implementation, etc.

But there is one more way to get all required features of image downloader helper class and don’t spend extra efforts for its implementation! :)

At the official Android Developers site there are a lot of different samples. And one of them is extremely useful in our case. Look at the XML Adapters sample:

http://developer.android.com/resources/samples/XmlAdapters/index.html

It has sample Activity to retrieve an RSS photo feed and displays the images and their titles. So in order to retrieve RSS photos guys form Android development team wrote ImageDownloader class. And this class exactly fits all our requirements!

Here you can grab the source code of ImageDownloader class:

http://developer.android.com/resources/samples/XmlAdapters/src/com/example/android/xmladapters/ImageDownloader.html

Baca Selengkapnya ....

Flex colorizer: using ColorTransform class to colorize objects at run-time

Posted by Unknown Senin, 18 Juli 2011 0 komentar

In this post I wanted to show you a nice trick how to colorize visual object at run-time.
Colorizing of the plain object (e.g. rectangle) is very simple:

var colorTransform:ColorTransform = new ColorTransform();
colorTransform.color = color;
target.transform.colorTransform = colorTransform;

But what if you need to colorize some complex object (e.g. image of the rooftop)?