Code for Food

AS3 Luxe Preloader pack

2013-08-24T14:43:00.001+03:00

Customizable and easy to use AS3 preloader component.

Visit Activeden for more info and a live example!

Have fun!

Flash AS3 Brush Drawing application - source code

2013-08-21T21:08:00.002+03:00

Highly customizable and very smooth AS3 Brush Drawing application source code. Now available for just $8.

Visit Activeden for more info and a live example!

Have fun!

Flash AS3 Platform Jump game engine - soure code

2013-08-20T18:40:00.000+03:00

Highly customizable and ridiculously easy to implement game engine for platform jumping game genre. Now available for just $8.

Visit Activeden for more info and a live example!

Have fun!

Flash AS3 Match 3 game engine - source code

2013-07-22T17:24:00.001+03:00

Ever wanted to make a game like Bejeweled and other similar Match 3 genre-type games? Well, now you can.

With my engine you'll be able to easily tweak the settings to create that jewel matching game you ever wanted in minutes. If you're a skilled coder, you'll find it helpful that the whole code is commented and explained in the documentation, so you can edit this powerful engine to make it even more customized.

Take a look at the official Activeden page for more info, and if you think it's what you need - you can get it for just 10 bucks.

Have fun!

Hiatus

2013-03-01T21:24:00.002+02:00

Today my blog is going on a (temporary?) hiatus. Read more for details.

For over 2 and a half years I have been updating the site daily with new handwritten tutorials on ActionScript 3, Flex, Adobe AIR, Android SDK and a few other technologies. It has been a good run, but, unfortunately, today it comes to an end.

This means that the blog will not be updated daily anymore. I don't know when or what I will post here, but I still have a few things to talk about on Android so chances are I'm still going to be publishing tutorials here. Just not every day.

When I start learning a new language in the future, I might begin posting here daily again. But it is unknown when will that happen.

Now, here are some statistics that the site has gotten over the 2 and a half years of daily updates:

985 posts
602,380 all-time hits
74 followers
650 comments
average daily pageviews: over 1000

Thanks to everyone who has followed my blog and read my tutorials! It is truly great to know that my work actually helped some people.

See you later!

Android beginner tutorial: Part 96 - Frame Animation using code

2013-02-28T10:00:00.000+02:00

In this tutorial we will learn how to create a Frame Animation using Java code instead of an XML file.

We'll be using the same 3 drawable resources (images) as frames in this tutorial as we did last time. But instead of creating the sequence in an XML file, we'll do that in the MainActivity.java class of our project.

The acitivty_main.xml layout file remains like this:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">
    
    <LinearLayout android:layout_width="match_parent"
        android:layout_height="wrap_content"
        >
        <Button android:text="Start"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:id="@+id/btn_start"
            />
        <Button android:text="Stop"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:id="@+id/btn_stop"
            />
    </LinearLayout>
    
    <ImageView
        android:id="@+id/image"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        />
    
</LinearLayout>

In MainActivity class, we first declare an AnimationDrawable and ImageView instances:

AnimationDrawable animation;
ImageView image;

We then add 2 clicks listeners to the two buttons on the screen. When the Start button is pressed, create 3 BitmapDrawable instances that refer to the 3 drawable resources we have. Then set the value of the animation object to a new AnimationDrawable() instance, set its oneShot property to false using setOneShot() method. Add each frame to it using addFrame() method, which has 2 parameters - reference to the drawable used in this frame and the duration of the frame.

Then we set the content of the image to this animation using setImageDrawable() method and start the animation after making it visible using the setVisible() method:

final Button btnStart = (Button)findViewById(R.id.btn_start);
btnStart.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
BitmapDrawable frame1 = (BitmapDrawable)getResources().getDrawable(R.drawable.sample1);
BitmapDrawable frame2 = (BitmapDrawable)getResources().getDrawable(R.drawable.sample2);
BitmapDrawable frame3 = (BitmapDrawable)getResources().getDrawable(R.drawable.sample3);

animation = new AnimationDrawable();
animation.setOneShot(false);
animation.addFrame(frame1, 500);
animation.addFrame(frame2, 500);
animation.addFrame(frame3, 500);

image = (ImageView)findViewById(R.id.image);
image.setImageDrawable(animation);
animation.setVisible(true, true);
animation.start();
}
});

When the Stop button is pressed, stop the animation:

final Button btnStop = (Button)findViewById(R.id.btn_stop);
btnStop.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
animation.stop();
animation.setVisible(false, false);
}
});

Full code:

package com.example.codeforfoodtest_two;

import android.app.Activity;
import android.graphics.drawable.AnimationDrawable;
import android.graphics.drawable.BitmapDrawable;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.ImageView;

public class MainActivity extends Activity{

AnimationDrawable animation;
ImageView image;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

final Button btnStart = (Button)findViewById(R.id.btn_start);
btnStart.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
BitmapDrawable frame1 = (BitmapDrawable)getResources().getDrawable(R.drawable.sample1);
BitmapDrawable frame2 = (BitmapDrawable)getResources().getDrawable(R.drawable.sample2);
BitmapDrawable frame3 = (BitmapDrawable)getResources().getDrawable(R.drawable.sample3);

animation = new AnimationDrawable();
animation.setOneShot(false);
animation.addFrame(frame1, 500);
animation.addFrame(frame2, 500);
animation.addFrame(frame3, 500);

image = (ImageView)findViewById(R.id.image);
image.setImageDrawable(animation);
animation.setVisible(true, true);
animation.start();
}
});

final Button btnStop = (Button)findViewById(R.id.btn_stop);
btnStop.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
animation.stop();
animation.setVisible(false, false);
}
});

}
}

Thanks for reading!

Android beginner tutorial: Part 95 - Frame Animation

2013-02-27T10:00:00.000+02:00

In this tutorial we will learn about Frame Animation.

A Frame Animation is a classic type of animation where the animation consists of multiple still images displayed in order.

To make a Frame animation in Android, you need to create an xml file with animation-list root node, containing item nodes, which have 2 attributes - drawable and duration. The drawable attribute is set to a drawable resource and represents the image to display, the duration value is the time in milliseconds that this item is displayed for.

Let's create such xml file now. Go to res/drawable/ directory and add a new xml file. Call it frame_anim.xml. Here are the contents:

<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android" android:oneshot="false">
    <item android:drawable="@drawable/sample1"
        android:duration="300" />
    <item android:drawable="@drawable/sample2"
        android:duration="300" />
    <item android:drawable="@drawable/sample3"
        android:duration="300" />
</animation-list>

Now go to activity_main.xml layout file of your project. Add 2 buttons - labeled Start and Stop, as well as an ImageView.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">
    
    <LinearLayout android:layout_width="match_parent"
        android:layout_height="wrap_content"
        >
        <Button android:text="Start"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:id="@+id/btn_start"
            />
        <Button android:text="Stop"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:id="@+id/btn_stop"
            />
    </LinearLayout>
    
    <ImageView
        android:id="@+id/image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        />
    
</LinearLayout>

Go to the MainActivity.java class now. In the onCreate() function, declare an ImageView instance, which is a reference to the ImageView we have in our layout. Set its background to the frame_anim drawable using setBackgroundResource() method. Then declare an AnimationDrawable instance, set its value to the background of our image, which was set to the frame_anim drawable. Add click listeners for the two buttons, use the animation's start() and stop() methods to start and stop animation:

package com.example.codeforfoodtest_two;

import android.app.Activity;
import android.graphics.drawable.AnimationDrawable;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.ImageView;

public class MainActivity extends Activity{


@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

ImageView image = (ImageView)findViewById(R.id.image);
image.setBackgroundResource(R.drawable.frame_anim);
final AnimationDrawable animation = (AnimationDrawable)image.getBackground();

final Button btnStart = (Button)findViewById(R.id.btn_start);
btnStart.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
animation.start();
}
});

final Button btnStop = (Button)findViewById(R.id.btn_stop);
btnStop.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
animation.stop();
}
});

}
}

Easy as that!

Test your application and you'll see a frame animation that can be started and stopped using the provided buttons.

Thanks for reading!

Android beginner tutorial: Part 94 - Applying XML animations

2013-02-26T10:00:00.000+02:00

In this tutorial we'll make a demo application that applies scale, rotate and translate animations to a shape on the screen.

First of all we need to create the animation XML files.

Go to the res/anim/ directory of your project. The first file we'll add is rotate.xml:

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:shareInterpolator="false">
    <rotate android:fromDegrees="0"
        android:toDegrees="360"
        android:pivotX="50%"
        android:pivotY="50%"
        android:startOffset="0"
        android:duration="3000"/>
</set>

Then goes scale.xml:

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:shareInterpolator="false">
    <scale android:fromXScale="1"
        android:fromYScale="1"
        android:toXScale="0.5"
        android:toYScale="0.5"
        android:pivotX="50%"
        android:pivotY="50%"
        android:startOffset="0"
        android:duration="1500"/>
</set>

Then we add translate.xml animation, which is a set containing two translate animations that are executed in order:

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:shareInterpolator="false">
    <translate android:toYDelta="-100"
        android:startOffset="0"
        android:duration="1500"/>
    <translate android:toYDelta="100"
        android:startOffset="1500"
        android:duration="1500"/>
</set>

Now go to activity_main.xml file. Add an ImageView there, set its layout_width and layout_height values to wrap_content. Set the gravity of the parent to center.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity"
    android:gravity="center">
    
    <ImageView
        android:id="@+id/image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        />
    
</LinearLayout>

Now go to MainActivity.java class. First we declare the image and draw a red square onto it:

private ImageView image;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

image = (ImageView)findViewById(R.id.image);
ShapeDrawable shape = new ShapeDrawable(new RectShape());
shape.setIntrinsicHeight(100);
shape.setIntrinsicWidth(100);
shape.getPaint().setColor(Color.RED);
image.setImageDrawable(shape);
}

Add an onCreateOptionsMenu() function, which adds 3 buttons to the menu. Set the IDs of the menu items to the IDs of the animations:

@Override
public boolean onCreateOptionsMenu(Menu menu){
menu.add(Menu.NONE, R.anim.rotate, Menu.NONE, "Rotate");
menu.add(Menu.NONE, R.anim.scale, Menu.NONE, "Scale");
menu.add(Menu.NONE, R.anim.translate, Menu.NONE, "Translate");
return(super.onCreateOptionsMenu(menu));
}

In the onOptionsItemSelected() function, we get the animation out of the selected item using the id. Then we apply it to the image using startAnimation() method:

@Override
public boolean onOptionsItemSelected(MenuItem item){
Animation animation = AnimationUtils.loadAnimation(this, item.getItemId());
image.startAnimation(animation);
return true;
}

Simple as that. Full code:

package com.example.codeforfoodtest_two;

import android.app.Activity;
import android.graphics.Color;
import android.graphics.drawable.ShapeDrawable;
import android.graphics.drawable.shapes.RectShape;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.ImageView;

public class MainActivity extends Activity{

private ImageView image;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

image = (ImageView)findViewById(R.id.image);
ShapeDrawable shape = new ShapeDrawable(new RectShape());
shape.setIntrinsicHeight(100);
shape.setIntrinsicWidth(100);
shape.getPaint().setColor(Color.RED);
image.setImageDrawable(shape);
}

@Override
public boolean onCreateOptionsMenu(Menu menu){
menu.add(Menu.NONE, R.anim.rotate, Menu.NONE, "Rotate");
menu.add(Menu.NONE, R.anim.scale, Menu.NONE, "Scale");
menu.add(Menu.NONE, R.anim.translate, Menu.NONE, "Translate");
return(super.onCreateOptionsMenu(menu));
}

@Override
public boolean onOptionsItemSelected(MenuItem item){
Animation animation = AnimationUtils.loadAnimation(this, item.getItemId());
image.startAnimation(animation);
return true;
}
}

That's all for today.

Thanks for reading!

Android beginner tutorial: Part 93 - XML animation files

2013-02-25T10:00:00.000+02:00

In this tutorial we'll learn about the structure of XML files that are used for defining animations in Android.

The XML files for animation are put into the res/anim/ directory of the Android project. The file has to have a single root node, which can be either of the possible elements: , , , or .

The node can act as a container for all of the elements, including other elements.

Even though the elements are put in a sequence, the animations play at the same time. But you can use the startOffset property to set delay before each animation start.

There are attributes that can be applied to all the listed elements, as well as attributes that can only be applied to a specific type of animation element.

First, let's take a look at the global ones - duration, startOffset, fillBefore, fillAfter, repeatCount, repeatMode, zAdjustment, interpolator.

The duration value is basically the duration time of the animation in milliseconds.

The startOffset value is the time delay before the animation starts.

The fillBefore is a boolean value, which, if set to true, makes sure that the animation transformation is applied before the beginning of the animation (during the startOffset period).

The fillAfter is a boolean value, which, if set to true, makes sure that the animation transformation is applied after the animation ends.

The repeatCount value determines how many times the animation repeats.

The repeatMode can be set to "restart" or "reverse" to make the animation start over or play in reverse when it ends.

The zAdjustment value sets the adjustment of the Z ordering (depth) of the content. Can be set to "normal" to be treated normally and kept in its current Z order, to "top" to put it on top of everything else and "bottom" to put it behind everything else.

The interpolator value holds a reference to an interpolator, which is an animation modifier that can affect the rate of change in your animation. There is a number of pre-defined interpolators that you can use, or you can create custom ones. Example: @android:anim/accelerate_interpolator.

Now let's take a look at the exclusive attributes.

The set container supports a shareInterpolator attribute, which can be used for setting one interpolator for use by all the children of the set.

The alpha element has 2 attributes - fromAlpha and toAlpha, which determine the initial and destination alpha values for the object. Values range from 0 to 1.

The scale element is used for scaling objects. It has 6 new attributes - fromXScale, toXScale, fromYScale, toYScale, pivotX and pivotY. The first four simply determine the initial and destination scaling values on both axes. The pivotX and pivotY determine the coordinates of the anchor position, relative to which the scaling will ocur. This is similar to registration point in DisplayObjects in Flash.

The translate element lets us move an object across the screen. Possible new attributes are fromXDelta, toXDelta, fromYDelta and toYDelta. Possible values can be in 3 formats - an absolute numeric value, a relative value in percentages (from -100% to 100%) and value in percentages relative to the size of the object's parent (-100%p to 100%p).

The rotate element is used for rotating objects and has 4 attributes - fromDegrees, toDegrees, pivotX, pivotY. The first two determine the initial and destination rotation degrees, the second pair detemine the coordinates of the anchor.

That's all for today.

Thanks for reading!

Android beginner tutorial: Part 92 - Animation

2013-02-24T10:00:00.000+02:00

Today we'll begin learning about Animations in Android.

In Android, just like in Flash, there are two animation types - Tween Animation and Frame Animation.

Any View in Android can be transformed in more than one ways - you can move, rotate, resize and change the alpha channel of them.

The animation transformations are all provided by android.view.animationpackages package. The main animation classes are AnimationSet, AlphaAnimation, RotateAnimation, ScaleAnimation and TranslateAnimation.

The AnimationSet class is used to group together other animations that are supposed to be played at the same time. If there are any properties set to an AnimationSet class, all the animations that belong to this set also inherit the properties.

The AlphaAnimation class is used for animations that change the alpha of the object. The RotateAnimation, ScaleAnimation and TranslateAnimation classes are used for rotating, scaling, and translating (moving) objects.

All animation transformations can be executed in a sequence or at once. Each transformation can have a set of parameters that are suitable only for its type of animation as well as global parameters that can be applied to all types of animations.

For example, all animations have start time as well as animation length time that you can set. If you want two animations to start at the same time, you set their start time to the same value.

Sequence of these animation commands can be created in Java or in an XML file, which might sound weird and inconvenient at first (especially if you are used to animations in Flash), but it's actually pretty easy to use. Moreover, it's really flexible, as by creating one animation XML file you can reuse it multiple times. Animating using an XML file is even more preferred than programmatically.

We'll take a closer look at these XML files used for animating in the next part.

Thanks for reading!

Android beginner tutorial: Part 91 - Drawing on Canvas

2013-02-23T10:00:00.000+02:00

Today we'll see how to draw on Canvas in Android.

As I mentioned before, drawing on Canvas is usually done in performance intensive applications like video games.

There are 2 ways to draw things on a canvas in Android - the first one is to draw on a View, the second way is to draw on a SurfaceView.

Drawing on a View is more suitable when your application does not need to update the screen really fast. It can be used for a game of chess or a similar slow-paced application. The Android system provides a Canvas object that will display our graphics in a View.

To use this method, you need to create a custom class that extends View and has the onDraw() callback method. The onDraw() method is called by Android to tell your View to update its graphics. This is where you can put all the code that draws things using the Canvas type object that is passed as the parameter to this function. The class has a set of methods for drawing that you can use, which include drawBitmap(), drawRect(), drawText() and others.

Note, however, that Android will only call onDraw() of your View if it is necessary. If you decide your application is ready to be drawn, you need to call the View's invalidate() method. This tells Android that the contents should be redrawn. However, using this method does not guarantee that the redraw will occur instantly.

What's interesting is that other classes also have draw() method, which lets you take those Drawables and pass them onto the Canvas to be drawn there.

The other way to draw on a canvas is using the SurfaceView class.

This subclass of View lets us create a dedicated drawing surface inside a View, which is treated just like any other View in the application. This surface is offered a separate thread where all the drawing happens, so our main application thread does not hold it back from updating.

In this case you will also need to create a custom class. This time it extends SurfaceView. It should also implement SurfaceHolder.Callback class. This subclass is used to inform you when the underlying Surface dispatches an event, for example, when it is created or changed.

The secondary thread should be defined inside your SurfaceView class. You shouldn't handle the Surface object directly - it can be done using SurfaceHandler. When the SurfaceView object is initialized, you can access the SurfaceHolder object using getHolder() method. Then you tell SurfaceHolder that you want to receive SurfaceHolder callbacks from SurfaceHolder.Callback by calling addCallback(this).

You can then override all the SurfaceHolder.Callback methods inside your SurfaceView class. Those methods are surfaceChanged, surfaceCreated and surfaceDestroyed.

To draw to the SurfaceCanvas from withing your secondary thread, pass the SurfaceHandler object to the thread and retrieve the Canvas with lockCanvas(). You can then take and use the Canvas to draw on it. When you're done drawing, call unlockCanvasAndPost(), passing it your Canvas object. The Surface then draws the Canvas. You need to lock and unlock every time you want to update the screen.

That's all for today. We haven't written a single line of code today but hopefully you now understand the basic mechanism behind drawing graphics in Android. The code itself is pretty self explanatory and will be shown in future tutorials as practical examples.

Thanks for reading!

Android beginner tutorial: Part 90 - Path and ArcShape

2013-02-22T10:00:00.000+02:00

In this tutorial we will learn about drawing primitive shapes in Android using Path and ArcShape classes.

The Path class is similar in usage to the way shapes are drawn using AS3. It has the moveTo() and lineTo() methods that you've probably worked with before if you ever tried drawing graphics using Actionscript3.

Using this class it is possible to draw unordinary primitive shapes, like, for example, a star.

First we set up the path for the lines to follow:

Path p = new Path();
p.moveTo(50, 0);
p.lineTo(25, 100);
p.lineTo(100, 50);
p.lineTo(0, 50);
p.lineTo(75, 100);
p.lineTo(50, 0);

You can then apply the drawing to a ShapeDrawable object.

ShapeDrawable shape = new ShapeDrawable(new PathShape(p, 100, 100));
shape.setIntrinsicHeight(100);
shape.setIntrinsicWidth(100);
shape.getPaint().setColor(Color.RED);
shape.getPaint().setStyle(Paint.Style.STROKE);

Next class is ArcShape. This one lets us draw arcs, basically. There are two values you need to pass to the ArcShape constructor - float startAngle and float sweepAngle.

Example:

ShapeDrawable shape = new ShapeDrawable(new ArcShape(0, 250));
shape.setIntrinsicHeight(100);
shape.setIntrinsicWidth(100);
shape.getPaint().setColor(Color.RED);

Now we've covered all the primitive shape drawing classes.

Thanks for reading!

Android beginner tutorial: Part 89 - ShapeDrawable shapes

2013-02-21T10:00:00.000+02:00

Today we'll learn about drawing shapes in Android using the ShapeDrawable class.

If you want to dynamically draw 2d shapes, the ShapeDrawable class might be what you're looking for. Similar to the Flash Drawing API used in Actionscript 3, this Android gives us the ability to draw and stylize simple primitive shapes.

There is a set of classes extended from Shape, which we can use to create different shapes. These classes are PathShape, RectShape, ArcShape, OvalShape and RoundRectShape.

The ShapeDrawable class is an extension of Drawable, so it can be used just like any other Drawable object. When drawing in a ShapeDrawable - remember to set the color and the boundaries of the object. If the color is not specified - black will be used by default. If the boundaries are not set - the drawing will not be visible.

Firstly, let's see how to draw lines with this. There isn't a separate class for displaying lines, but there's RectShape, which can work as lines too if we make them thing enough.

Example:

ShapeDrawable shape = new ShapeDrawable(new RectShape());
shape.setIntrinsicHeight(2);
shape.setIntrinsicWidth(200);
shape.getPaint().setColor(Color.RED);

An oval is drawn similarly to a rectangle. Simply set the width and height:

ShapeDrawable shape = new ShapeDrawable(new OvalShape());
shape.setIntrinsicHeight(100);
shape.setIntrinsicWidth(200);
shape.getPaint().setColor(Color.RED);

Drawing rounded rectangles is a little bit more complex, but not hard at all. The RoundRectShape constructor has 3 parameters - outerRadii, inset and innerRadii.

The outerRadii value is an array of float values that represent the radii of each corner. Each corner has 2 radii, so there are 8 values in total. The first 2 values are the radii of the top left corner, each next 2 correspond to the next corner clockwise. If you don't want rounded corners, pass null.

The inset value is a RectF class object, which represents the distance between the inner rectangle and the outer one. The constructor of the RectF class has 4 parameters - pairs of coordinates (x and y) of top left corner and bottom right corner of the inner rectangle. If there's no inner rectangle, pass null.

The innerRadii value is an array of radii for the corners of the inner rectangle. Works the same way as outerRadii.

A simple example:

float[] outR = new float[] {6, 6, 6, 6, 6, 6, 6, 6};
RectF rectF = nwe RectF(8, 8, 8, 8);
float[] inR = new float[] {6, 6, 6, 6, 6, 6, 6, 6};

ShapeDrawable shape = new ShapeDrawable(new RoundRectShape(outR, rectF, inR));
shape.setIntrinsicHeight(100);
shape.setIntrinsicWidth(200);
shape.getPaint().setColor(Color.RED);

That's all for today. Next time we'll look at more shapes to draw.

Thanks for reading!

Android beginner tutorial: Part 88 - TransitionDrawable

2013-02-20T10:00:00.000+02:00

In this tutorial we will take a look at the TransitionDrawable class, which lets us display a smooth cross-fade effect between two pictures.

Firstly, we'll need to add 2 pictures to the drawable directory of the project. In my case, they are sample1.jpg and sample2.jpg, and I put both of them in res/drawable-hdpi/ directory.

Add an xml file in the same directory, call it transition.xml. Here we will add a transition node with 2 item nodes inside, each representing an image:

<?xml version="1.0" encoding="utf-8"?>
<transition xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/sample1"/>
    <item android:drawable="@drawable/sample2"/>
</transition>

Now go to activity_main.xml layout file. Add an ImageView, set its source to the first image:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity" >
    
    <ImageView
        android:id="@+id/image"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/sample1"
        />
    
</LinearLayout>

When that's done, go to MainActivity.java class.

Declare 2 variables - instances of ImageView and TransitionDrawable.

private ImageView image;
private TransitionDrawable trans;

In the onCreate() function of the Activity, set the image value to the ImageView we declared in activity_main.xml. Set trans value to the transition resource we created in the drawable directory:

image = (ImageView)findViewById(R.id.image);
Resources res = this.getResources();
trans = (TransitionDrawable)res.getDrawable(R.drawable.transition);

Now add a click listener to the ImageView object. In the event of a click, use the setImageDrawable() method to apply the transition resource to the image.

Then we call the reverseTransition() method of the transition, passing 1000 as the parameter, which is the effect time.

image.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
image.setImageDrawable(trans);
trans.reverseTransition(1000);
}
});

Instead of reverseTransition(), you can call startTransition(), which always starts with the first layer fading out and the second layer fading it. The reverseTransition() method handles the transition both ways.

Full code:

package com.example.codeforfoodtest_two;

import android.app.Activity;
import android.content.res.Resources;
import android.graphics.drawable.TransitionDrawable;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.ImageView;

public class MainActivity extends Activity{

private ImageView image;
private TransitionDrawable trans;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

image = (ImageView)findViewById(R.id.image);
Resources res = this.getResources();
trans = (TransitionDrawable)res.getDrawable(R.drawable.transition);

image.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
image.setImageDrawable(trans);
trans.reverseTransition(1000);
}
});
}
}

If you run your application now, you'll see that tapping the image smoothly changes the displayed image.

Thanks for reading!

Android beginner tutorial: Part 87 - 2D Graphics in Android

2013-02-19T10:00:00.000+02:00

In this part we will talk about drawing graphics in Android.

The Android SDK provides a set of drawing APIs for rendering 2D graphics. There are two ways to draw in Android: directly into a View object, or into a Canvas.

Drawing inside a View object means simply giving the View a picture to display from your layout. The drawing of the graphics is done using the system's normal View hierarchy drawing process. This method is perfect for drawing simple graphics that aren't changed dynamically in real time and shouldn't be used in performance intentsive video games, but can be used to display an animation in a static application.

Drawing to a Canvas means using the appropriate class' onDraw() callback method (with your Canvas object passed as the parameter) or using one of the Canvas draw..() methods (for example, drawPicture() or drawBitmap()). This method is used when the application redraws the graphics regularly (for example, in a video game). But there are more than one ways to draw using the Canvas.

The first option is to handle the drawing in the same thread as the main Activity of your application, calling invalidate() each time the graphics need to be redrawn and handling the onDraw() callback function.

The second option is to draw in a separate thread, where you can manage a SurfaceView object and draw graphics in the Canvas as fast as it is possible in that thread.

Android SDK provides a library for drawing 2D shapes and images - Drawables. The Drawable class is extended by multiple subclasses, such as BitmapDrawable, NinePatchDrawable, PictureDrawable, ShapeDrawable, etc.

There are 3 ways to instantiate a Drawable object - using an image that is stored in res/drawable/ directory (which we already did in some of the previous tutorials), using an XML file, which contains properties of the Drawable object,or using the normal class constructors.

The easiest way to add graphics to an application is to use an external image stored in the resources. The supported file formats are PNG, JPEG and GIF, where PNG is the most preferable one and GIF is the least preferable.

Using images from the resources is suitable for displaying icons, images and other graphics in an application.

All the image resources located in res/drawable/ are optimized using aapt utility during compilation of the project. The quality of the pictures remain the game, but the file size is less. If you need to load bitmap images without compressing them, store them in res/raw/ directory, where they won't be reached by aapt. In that case you'll have to manually load and read the image data and display it, though.

That is all for today. Next time we'll take a closer look at Drawables.

Thanks for reading!

Android beginner tutorial: Part 86 - Localization

2013-02-18T10:00:00.000+02:00

In this part we will talk about application localization.

After deployment, your application may be used on Android devices in many regions. To get the most users, you should think about making your application suitable for people speaking different languages - in other words, you should localize it.

Localization is actually fairly easy to implement. Up until now, when we set labels to buttons and text values to textviews and other components, we stored those values in strings.xml file (except some individual cases where we simply hard-coded the text in the xml files for testing purposes). Localization system lets us create multiple string, audio, visual, etc. files for different regions.

By using the res/values/strings.xml file, you're setting the default values for all regions. When told to look for a resource, the Android system picks the one that suits the region of the user. If no such item exists, the default value is picked. That's why if you're using resources in your application, you should always include all of the used values that would be used by default.

The default values stored in res/values/ directory should be using the most common language you expect your application users to speak. Normally, it's English.

To set resources for other regions, use the values-<qualifiers> pattern to create new directories and store your resources there. The <qualifiers> can be replaced by one or a group of qualifiers (for example, we know we can store images for different pixel density using qualifiers such as mdpi, hdpi, etc.).

As the Android official docs state: the language is defined by a two-letter ISO 639-1 language code, optionally followed by a two letter ISO 3166-1-alpha-2 region code (preceded by lowercase "r").

Examples of such language codes are "en", "fr", "ca", as well as "en-rUS", "fr-rFR" and "fr-rCA".

This means that we can store values in directories like res/values/strings.xml, res/values-fr/strings.xml, res/values-ja/strings.xml, etc.

And that is pretty much it. Using this information you'll be able to make a flexible Android application which adapts to the user's region.

Thanks for reading!

Android beginner tutorial: Part 85 - Embedding fonts using Assets

2013-02-17T10:00:00.000+02:00

In this tutorial we will learn how to load and use a font from an asset.

Assets are somewhat similar to resources, yet different. While resources are embedded into the application and can be referred to using the R class, assets are raw files that are stored in the assets directory and require us to manually read them to use them in our applications.

Today we'll learn how to embed and use a raw .ttf font file as an asset in our application.

First of all you need to find the ttf file. You can download fonts online, I use fontsquirrel.com - all the fonts there are free and pretty good.

Once you have the .ttf file, put it in the assets directory of your project.

Then go to activity_main.xml of your application and add a TextView there:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity" >
    
    <TextView android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/myText"
        android:textSize="36sp"
        android:text="Hello world!"
        />
    
</LinearLayout>

Now go to MainActivity.java class and load the font using Typeface.createFromAsset() static method. Once the font is extracted, apply it to the text using setTypeface() method:

TextView mytext = (TextView)findViewById(R.id.myText);
Typeface face = Typeface.createFromAsset(getAssets(), "yukarimobil.ttf");
mytext.setTypeface(face);

Here's the full code:

package com.example.codeforfoodtest_two;

import android.app.Activity;
import android.graphics.Typeface;
import android.os.Bundle;
import android.widget.TextView;

public class MainActivity extends Activity{

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

TextView mytext = (TextView)findViewById(R.id.myText);
Typeface face = Typeface.createFromAsset(getAssets(), "yukarimobil.ttf");
mytext.setTypeface(face);
}
}

It is that easy!

You can use assets to store all sorts of files and read them byte by byte or using what's provided by the Android SDK, like the Typeface.createFromAsset() method just now.

That's all for today.

Thanks for reading!

Android beginner tutorial: Part 84 - Styles and Themes

2013-02-16T10:00:00.000+02:00

Today we will learn about styles and themes in Android.

A Style is a collection of properties that set the appearance of a single View or window. The idea behind styles is similar to CSS - you define styles of an object somewhere outside of the layout code and then just apply the style to one or multiple elements.

A Theme is a style that is applied to an entire Activity or all Activities of an application.

The process for creating styles and themes is the same.

Create a new XML style in res/values/ directory, you can use whatever name you want.

Add this code inside:

<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="SpecialText" parent="@android:style/TextAppearance.Medium">
    <item name="android:layout_width">fill_parent</item>
    <item name="android:layout_height">wrap_content</item>
    <item name="android:textColor">#FF0000</item>
</style>
</resources>

As you can see, it's a simple XML containing a style node which has 3 items. Each item represents an attribute and its value. The style node also has a "name" attribute and a "parent" one.

The name is the unique identificator for this style, this is the name that you will later use to refer to this style.

The parent is an optional vattribute that specifies the resource ID of another style from which this style should inherit properties. This way you can override the inherited style properties if needed. The resource can be of any type as long as it contains the needed style. It is recommended that you always inherit the default styles for the specific views - directly or indirectly.

After the style is created, you can use it by simply setting the style property of a View.

<TextView
    style="@style/SpecialText"
    android:text="Special text!" />

Note that the style attribute does not need an android: prefix.

If you apply a style to a ViewGroup container, the style will NOT be inherited by its children. To make it inheritable, set the style as a theme.

To set a theme to the whole application (all of its Activities), go to the AndroidManifest XML file and set the android:theme property of the application node:

<application android:theme="@style/MyTheme">

If you want to set it to a single Activity, just do the same with the activity tag.

There are also a few pre-built themes that you can use. Theme.Dialog, for instance, displays an Activity like a dialog window:

<activity android:theme="@android:style/Theme.Dialog">

If you want to create a new theme based on an existing one, you can add the base theme as the parent of the style.

That's all for today.

Thanks for reading!

Android beginner tutorial: Part 83 - Parsing XML

2013-02-15T10:00:00.000+02:00

In this tutorial we will learn how to read and parse an XML file in Android.

Firstly, create an XML file and put it in res/xml/ directory of the project.

My XML file is called products.xml and looks like this:

<?xml version="1.0" encoding="utf-8"?>
<catalog>
  <product name="Chair" description="Something to sit on" price="50" />
  <product name="Sofa" description="Something soft to sit on" price="100" />
  <product name="Table" description="Something to put stuff on" price="70" />
</catalog>

Now go to activity_main.xml layout file of your main Activity and add a List, which will display the items from the xml:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity" >
    
    <ListView android:id="@+id/listview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        />
    
</LinearLayout>

Now go to MainActivity.java class. This is where the magic starts - we need to load and parse the data from the XML file using a XmlPullParser object. This part is very different from AS3 or anything else I have worked with. Android's xml parser creates a row of Events which we can read and parse to create a data set of our own.

Firstly let's declare an ArrayList of Strings in the onCreate() function:

ArrayList<String> list = new ArrayList<String>();

Then we add a try...catch statement, displaying an error message using a Toast in case of an error. We try to create a new XmlPullParser object and use it to load our xml file. Using a while loop, we check each event of the parser using getEventType() to see if it doesn't equal XmlPullParser.END_DOCUMENT, which means that we're parsing until we reach the end of the document. Then we check if the event equals XmlPullParser.START_TAG and the name of the tag equals "product".

We can then add items to our list object using the add() method.

try{
XmlPullParser parser = getResources().getXml(R.xml.products);

while(parser.getEventType()!=XmlPullParser.END_DOCUMENT){
if(parser.getEventType() == XmlPullParser.START_TAG && parser.getName().equals("product")){
list.add(parser.getAttributeValue(0) + " (" + parser.getAttributeValue(2) + ")\n" + parser.getAttributeValue(1));
}
parser.next();
}
}catch(Throwable t){
Toast.makeText(this, "Error loading XML.", Toast.LENGTH_SHORT).show();
}

After the try...catch statement, set the adapter of the list view to list.

ListView listView = (ListView)findViewById(R.id.listview);
listView.setAdapter(new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, list));

Full code:

package com.example.codeforfoodtest_two;

import java.util.ArrayList;

import org.xmlpull.v1.XmlPullParser;

import android.app.Activity;
import android.os.Bundle;
import android.widget.ArrayAdapter;
import android.widget.ListView;
import android.widget.Toast;

public class MainActivity extends Activity{

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

ArrayList<String> list = new ArrayList<String>();

try{
XmlPullParser parser = getResources().getXml(R.xml.products);

while(parser.getEventType()!=XmlPullParser.END_DOCUMENT){
if(parser.getEventType() == XmlPullParser.START_TAG && parser.getName().equals("product")){
list.add(parser.getAttributeValue(0) + " (" + parser.getAttributeValue(2) + ")\n" + parser.getAttributeValue(1));
}
parser.next();
}
}catch(Throwable t){
Toast.makeText(this, "Error loading XML.", Toast.LENGTH_SHORT).show();
}

ListView listView = (ListView)findViewById(R.id.listview);
listView.setAdapter(new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, list));
}
}

Those are the basics!

Thanks for reading!

Android beginner tutorial: Part 82 - PreferenceCategory and PreferenceScreen

2013-02-14T10:00:00.000+02:00

In this tutorial we'll learn about grouping preferences in categories and screens.

In some cases you might find that our settings screen is clustered with lots of preference items. You'll want to find a way to group them all nice and tidy, so that the user doesn't have trouble finding the settings he is looking for.

The first way to do so is group preferences of the same topic under PreferenceCategories. By doing this, the grouped preferences will have a title over them, which explains the role of the grouped components.

Example:

<?xml version="1.0" encoding="utf-8"?>
<PreferenceScreen xmlns:android="http://schemas.android.com/apk/res/android">

    <PreferenceCategory 
        android:title="@string/pref_visual"
        android:key="pref_visual">
    <EditTextPreference
        android:key="pref_textsize"
        android:title="@string/pref_textsize"
        android:dialogTitle="@string/pref_textsize_descr"
        android:summary="@string/pref_textsize_summ"
        android:defaultValue="14" />
    <ListPreference
        android:key="pref_theme"
        android:title="@string/pref_theme"
        android:dialogTitle="@string/pref_theme_descr"
        android:summary="@string/pref_theme_summ"
        android:entries="@array/theme_colors"
        android:entryValues="@array/theme_colors"
        android:defaultValue="Blue" />
    </PreferenceCategory>
    <PreferenceCategory 
        android:title="@string/pref_sound"
        android:key="pref_sound">
    <RingtonePreference
        android:key="pref_tone"
        android:title="@string/pref_tone"
        android:summary="@string/pref_tone_summ"
        android:showDefault="true"
        android:showSilent="true"/>
    <CheckBoxPreference
        android:key="pref_mute"
        android:title="@string/pref_mute"
        android:summary="@string/pref_mute_summ"
        android:defaultValue="false" />
    </PreferenceCategory>
</PreferenceScreen>

You can see that I grouped all the visual-related preferences and all sound-related ones in different categories. Their titles are stored in strings.xml:

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

    <string name="app_name">CodeForFood Test Two</string>
    <string name="pref_mute">Mute</string>
    <string name="pref_mute_summ">Disable all the sound in the application</string>
    <string name="pref_textsize">Text size</string>
    <string name="pref_textsize_descr">Enter text size</string>
    <string name="pref_textsize_summ">Set text size of the interface</string>
    <string name="pref_theme">Theme</string>
    <string name="pref_theme_descr">Pick a color</string>
    <string name="pref_theme_summ">Set the application\'s color theme</string>
    <string name="pref_tone">Ringtone</string>
    <string name="pref_tone_summ">Set ringtone</string>
    <string name="pref_visual">Visual settings</string>
    <string name="pref_sound">Sound settings</string>
    <string name="menu_settings">Settings</string>
    <string name="clear_settings">Reset settings</string>

</resources>

The second way to group preferences is using PreferenceScreen nodes.

<?xml version="1.0" encoding="utf-8"?>
<PreferenceScreen xmlns:android="http://schemas.android.com/apk/res/android">

    <PreferenceScreen
        android:title="@string/pref_visual"
        android:key="pref_visual">
    <EditTextPreference
        android:key="pref_textsize"
        android:title="@string/pref_textsize"
        android:dialogTitle="@string/pref_textsize_descr"
        android:summary="@string/pref_textsize_summ"
        android:defaultValue="14" />
    <ListPreference
        android:key="pref_theme"
        android:title="@string/pref_theme"
        android:dialogTitle="@string/pref_theme_descr"
        android:summary="@string/pref_theme_summ"
        android:entries="@array/theme_colors"
        android:entryValues="@array/theme_colors"
        android:defaultValue="Blue" />
    </PreferenceScreen>
    <PreferenceScreen 
        android:title="@string/pref_sound"
        android:key="pref_sound">
    <RingtonePreference
        android:key="pref_tone"
        android:title="@string/pref_tone"
        android:summary="@string/pref_tone_summ"
        android:showDefault="true"
        android:showSilent="true"/>
    <CheckBoxPreference
        android:key="pref_mute"
        android:title="@string/pref_mute"
        android:summary="@string/pref_mute_summ"
        android:defaultValue="false" />
    </PreferenceScreen>
</PreferenceScreen>

By including PreferenceScreens inside a PreferenceScreen, the parent displays a clickable item for each PreferenceScreen, which opens that screen with all its contents as a separate Activity.

That's all for today.

Thanks for reading!

Android beginner tutorial: Part 81 - RingtonePreference

2013-02-13T10:00:00.000+02:00

In this part we will learn how to create and handle a RingtonePreference object.

A RingtonePreference is a settings item that lets the user pick a ringtone from their system. The selected ringtone's URI address is saved in the preferences file, which can then be used by the application.

Firstly go to preferences.xml file and add a new RingtonePreference object. The attributes we're going to set are android:key, android:title, android:summary, android:showDefault and android:showSilent. The first 3 were already used and explained in the previous tutorials, the last 2 are boolean values that determine whether the ringtone list should display the options to select default ringtone or set ringtone to silent.

    <RingtonePreference
        android:key="pref_tone"
        android:title="@string/pref_tone"
        android:summary="@string/pref_tone_summ"
        android:showDefault="true"
        android:showSilent="true"/>

So far the preferences.xml file looks like this:

<?xml version="1.0" encoding="utf-8"?>
<PreferenceScreen xmlns:android="http://schemas.android.com/apk/res/android">
    <CheckBoxPreference
        android:key="pref_mute"
        android:title="@string/pref_mute"
        android:summary="@string/pref_mute_summ"
        android:defaultValue="false" />
    <EditTextPreference
        android:key="pref_textsize"
        android:title="@string/pref_textsize"
        android:dialogTitle="@string/pref_textsize_descr"
        android:summary="@string/pref_textsize_summ"
        android:defaultValue="14" />
    <ListPreference
        android:key="pref_theme"
        android:title="@string/pref_theme"
        android:dialogTitle="@string/pref_theme_descr"
        android:summary="@string/pref_theme_summ"
        android:entries="@array/theme_colors"
        android:entryValues="@array/theme_colors"
        android:defaultValue="Blue" />
    <RingtonePreference
        android:key="pref_tone"
        android:title="@string/pref_tone"
        android:summary="@string/pref_tone_summ"
        android:showDefault="true"
        android:showSilent="true"/>
</PreferenceScreen>

Here's the updated strings.xml file with the new string values:

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

    <string name="app_name">CodeForFood Test Two</string>
    <string name="pref_mute">Mute</string>
    <string name="pref_mute_summ">Disable all the sound in the application</string>
    <string name="pref_textsize">Text size</string>
    <string name="pref_textsize_descr">Enter text size</string>
    <string name="pref_textsize_summ">Set text size of the interface</string>
    <string name="pref_theme">Theme</string>
    <string name="pref_theme_descr">Pick a color</string>
    <string name="pref_theme_summ">Set the application\'s color theme</string>
    <string name="pref_tone">Ringtone</string>
    <string name="pref_tone_summ">Set ringtone</string>
    <string name="menu_settings">Settings</string>
    <string name="clear_settings">Reset settings</string>

</resources>

In the onResume() function of MainActivity.java, add a line that displays the URI of the ringtone:

Toast.makeText(this, "Ringtone: " + prefs.getString("pref_tone", "none"), Toast.LENGTH_SHORT).show();

Full class code looks like this:

package com.example.codeforfoodtest_two;

import android.app.Activity;
import android.content.Intent;
import android.content.SharedPreferences;
import android.content.SharedPreferences.Editor;
import android.os.Bundle;
import android.preference.PreferenceManager;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.Toast;

public class MainActivity extends Activity{

static final int IDM_SETTINGS = 101;
public SharedPreferences prefs;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

Button btn_clear = (Button)findViewById(R.id.clearButton);
btn_clear.setOnClickListener(new OnClickListener() {

@Override
public void onClick(View arg0) {
Editor editor = prefs.edit();
editor.clear();
editor.commit();
onResume();
}
});
}

@Override
public void onResume(){
prefs = PreferenceManager.getDefaultSharedPreferences(this);
if(prefs.getBoolean("pref_mute", false)){
Toast.makeText(this, "Muted!", Toast.LENGTH_SHORT).show();
}else{
Toast.makeText(this, "Not muted!", Toast.LENGTH_SHORT).show();
}
Toast.makeText(this, "Text size: " + prefs.getString("pref_textsize", "14"), Toast.LENGTH_SHORT).show();
Toast.makeText(this, "Theme color: " + prefs.getString("pref_theme", "Blue"), Toast.LENGTH_SHORT).show();
Toast.makeText(this, "Ringtone: " + prefs.getString("pref_tone", "none"), Toast.LENGTH_SHORT).show();

super.onResume();
}

@Override
public boolean onCreateOptionsMenu(Menu menu){
menu.add(Menu.NONE, IDM_SETTINGS, Menu.NONE, R.string.menu_settings);
return(super.onCreateOptionsMenu(menu));
}

@Override
public boolean onOptionsItemSelected(MenuItem item){
if(item.getItemId()==IDM_SETTINGS){
Intent intent = new Intent();
intent.setClass(this, TestPreferences.class);
startActivity(intent);
}
return true;
}
}

And that's it. If you test your application now, you'll see that there's a new preference item in the settings of your application.

The ringtone list lets you preview and select from default ringtones as well as the music library.

That's all for today!

Thanks for reading!

Android beginner tutorial: Part 80 - ListPreference and resetting settings

2013-02-12T10:00:00.000+02:00

In this tutorial we are going to add a ListPreference item to our Settings, as well as the ability to reset preferences.

A ListPreference is a settings item which displays a list of choices when selected. The choices are all radio-buttons so there can be 0 or 1 choices selected at the same time.

We can supply choice labels and their values to a ListPreference by first declaring them in an array. Create a new xml file in res/values/ directory called arrays.xml.

Inside, we create a single-array named theme_colors with 4 possible choices:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string-array name="theme_colors">
        <item>Blue</item>
        <item>Red</item>
        <item>Green</item>
        <item>Yellow</item>
    </string-array>
</resources>

Now go to preferences.xml file and add a new ListPreference item:

<?xml version="1.0" encoding="utf-8"?>
<PreferenceScreen xmlns:android="http://schemas.android.com/apk/res/android">
    <CheckBoxPreference
        android:key="pref_mute"
        android:title="@string/pref_mute"
        android:summary="@string/pref_mute_summ"
        android:defaultValue="false" />
    <EditTextPreference
        android:key="pref_textsize"
        android:title="@string/pref_textsize"
        android:dialogTitle="@string/pref_textsize_descr"
        android:summary="@string/pref_textsize_summ"
        android:defaultValue="14" />
    <ListPreference
        android:key="pref_theme"
        android:title="@string/pref_theme"
        android:dialogTitle="@string/pref_theme_descr"
        android:summary="@string/pref_theme_summ"
        android:entries="@array/theme_colors"
        android:entryValues="@array/theme_colors"
        android:defaultValue="Blue" />
</PreferenceScreen>

You can see 2 new attributes used in that item - entries and entryValues. They both have the same value of theme_colors array we've just defined in arrays.xml. Of course, they don't need to be the same. The difference between the two is that "entries" is an array of labels of the items in the list, while "entryValues" is an array of the values that are not visible to the user but can be used by the programmer to determine which item was selected.

Go to MainActivity.java class. You can read and display the selected item's value using a Toast like this:

@Override
public void onResume(){
prefs = PreferenceManager.getDefaultSharedPreferences(this);
if(prefs.getBoolean("pref_mute", false)){
Toast.makeText(this, "Muted!", Toast.LENGTH_SHORT).show();
}else{
Toast.makeText(this, "Not muted!", Toast.LENGTH_SHORT).show();
}
Toast.makeText(this, "Text size: " + prefs.getString("pref_textsize", "14"), Toast.LENGTH_SHORT).show();
Toast.makeText(this, "Theme color: " + prefs.getString("pref_theme", "Blue"), Toast.LENGTH_SHORT).show();

super.onResume();
}

Note how the "prefs" variable is not declared in this function. That is because I made it public in the beginning of the class:

public SharedPreferences prefs;

Now let's also add the ability to reset preferences. Go to activity_main.xml and add a button:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity" >
    
    <Button android:id="@+id/clearButton"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/clear_settings"
        />
    
</LinearLayout>

Back in MainActivity.java class, we add a click listener to that button and reset the settings by retreiving an Editor object from the preferences and calling its clear() and commit() methods:

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

Button btn_clear = (Button)findViewById(R.id.clearButton);
btn_clear.setOnClickListener(new OnClickListener() {

@Override
public void onClick(View arg0) {
Editor editor = prefs.edit();
editor.clear();
editor.commit();
onResume();
}
});
}

Full class code:

package com.example.codeforfoodtest_two;

import android.app.Activity;
import android.content.Intent;
import android.content.SharedPreferences;
import android.content.SharedPreferences.Editor;
import android.os.Bundle;
import android.preference.PreferenceManager;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.Toast;

public class MainActivity extends Activity{

static final int IDM_SETTINGS = 101;
public SharedPreferences prefs;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

Button btn_clear = (Button)findViewById(R.id.clearButton);
btn_clear.setOnClickListener(new OnClickListener() {

@Override
public void onClick(View arg0) {
Editor editor = prefs.edit();
editor.clear();
editor.commit();
onResume();
}
});
}

@Override
public void onResume(){
prefs = PreferenceManager.getDefaultSharedPreferences(this);
if(prefs.getBoolean("pref_mute", false)){
Toast.makeText(this, "Muted!", Toast.LENGTH_SHORT).show();
}else{
Toast.makeText(this, "Not muted!", Toast.LENGTH_SHORT).show();
}
Toast.makeText(this, "Text size: " + prefs.getString("pref_textsize", "14"), Toast.LENGTH_SHORT).show();
Toast.makeText(this, "Theme color: " + prefs.getString("pref_theme", "Blue"), Toast.LENGTH_SHORT).show();

super.onResume();
}

@Override
public boolean onCreateOptionsMenu(Menu menu){
menu.add(Menu.NONE, IDM_SETTINGS, Menu.NONE, R.string.menu_settings);
return(super.onCreateOptionsMenu(menu));
}

@Override
public boolean onOptionsItemSelected(MenuItem item){
if(item.getItemId()==IDM_SETTINGS){
Intent intent = new Intent();
intent.setClass(this, TestPreferences.class);
startActivity(intent);
}
return true;
}
}

You also need to declare all the string values that were used in the application in strings.xml:

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

    <string name="app_name">CodeForFood Test Two</string>
    <string name="pref_mute">Mute</string>
    <string name="pref_mute_summ">Disable all the sound in the application</string>
    <string name="pref_textsize">Text size</string>
    <string name="pref_textsize_descr">Enter text size</string>
    <string name="pref_textsize_summ">Set text size of the interface</string>
    <string name="pref_theme">Theme</string>
    <string name="pref_theme_descr">Pick a color</string>
    <string name="pref_theme_summ">Set the application\'s color theme</string>
    <string name="menu_settings">Settings</string>
    <string name="clear_settings">Reset settings</string>

</resources>

That's all for today.

Thanks for reading!

Android beginner tutorial: Part 79 - EditTextPreference, Reading Preferences

2013-02-11T10:00:00.000+02:00

In this tutorial we'll add an EditTextPreference setting to our settings, as well as read and display saved preferences data in the application.

First of all, go to the preferences.xml file and edit the contents to add a new EditTextPreference object. Just like the existing CheckBoxPreference item that we have, we'll give this one key, title, summary and defaultValues attributes. We'll also give it a dialogTitle attribute, which represents the text that's displayed in the dialog window that opens when the item is clicked by the user.

<?xml version="1.0" encoding="utf-8"?>
<PreferenceScreen xmlns:android="http://schemas.android.com/apk/res/android">
    <CheckBoxPreference
        android:key="pref_mute"
        android:title="@string/pref_mute"
        android:summary="@string/pref_mute_summ"
        android:defaultValue="false" />
    <EditTextPreference
        android:key="pref_textsize"
        android:title="@string/pref_textsize"
        android:dialogTitle="@string/pref_textsize_descr"
        android:summary="@string/pref_textsize_summ"
        android:defaultValue="14" />
</PreferenceScreen>

Go to strings.xml file and add the new string values:

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

    <string name="app_name">CodeForFood Test Two</string>
    <string name="pref_mute">Mute</string>
    <string name="pref_mute_summ">Disable all the sound in the application</string>
    <string name="pref_textsize">Text size</string>
    <string name="pref_textsize_descr">Enter text size</string>
    <string name="pref_textsize_summ">Set text size of the interface</string>
    <string name="menu_settings">Settings</string>

</resources>

Now go to MainActivity.java class. Here we will read the values of the preferences when the application is resumed - in the onResume() callback function. Doing it there will make sure that the data is updated from the saved settings file every time the application is launched or resumed if it was paused.

In the onResume() function, load preferences like this:

SharedPreferences prefs = PreferenceManager.getDefaultSharedPreferences(this);

Then read the values and handle them by simply displaying them in a Toast:

if(prefs.getBoolean("pref_mute", false)){
Toast.makeText(this, "Muted!", Toast.LENGTH_SHORT).show();
}else{
Toast.makeText(this, "Not muted!", Toast.LENGTH_SHORT).show();
}
Toast.makeText(this, "Text size: " + prefs.getString("pref_textsize", ""), Toast.LENGTH_SHORT).show();

Full MainActivity.java class code:

package com.example.codeforfoodtest_two;

import android.app.Activity;
import android.content.Intent;
import android.content.SharedPreferences;
import android.os.Bundle;
import android.preference.PreferenceManager;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.Toast;

public class MainActivity extends Activity{

static final int IDM_SETTINGS = 101;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}

@Override
public void onResume(){
SharedPreferences prefs = PreferenceManager.getDefaultSharedPreferences(this);
if(prefs.getBoolean("pref_mute", false)){
Toast.makeText(this, "Muted!", Toast.LENGTH_SHORT).show();
}else{
Toast.makeText(this, "Not muted!", Toast.LENGTH_SHORT).show();
}
Toast.makeText(this, "Text size: " + prefs.getString("pref_textsize", ""), Toast.LENGTH_SHORT).show();

super.onResume();
}

@Override
public boolean onCreateOptionsMenu(Menu menu){
menu.add(Menu.NONE, IDM_SETTINGS, Menu.NONE, R.string.menu_settings);
return(super.onCreateOptionsMenu(menu));
}

@Override
public boolean onOptionsItemSelected(MenuItem item){
if(item.getItemId()==IDM_SETTINGS){
Intent intent = new Intent();
intent.setClass(this, TestPreferences.class);
startActivity(intent);
}
return true;
}
}

That's all for today!

Thanks for reading!

Android beginner tutorial: Part 78 - Creating Preferences Activity

2013-02-10T10:00:00.000+02:00

In this tutorial we will create a preferences activity that can be invoked using the application menu.

First of all we'll need to create the xml that contains all the preferences in the settings menu. Go to the layout directory of your application's project and add a new file preferences.xml.

Add this code:

<?xml version="1.0" encoding="utf-8"?>
<PreferenceScreen xmlns:android="http://schemas.android.com/apk/res/android">
    <CheckBoxPreference
        android:key="pref_mute"
        android:title="@string/pref_mute"
        android:summary="@string/pref_mute_summ"
        android:defaultValue="false" />

</PreferenceScreen>

The key property is used as an identificator for this setting. It has to be a unique string. The title value is the text representation of the setting, and summary is the description of the setting item.

Go to strings.xml file to set the missing string values:

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

    <string name="app_name">CodeForFood Test Two</string>
    <string name="pref_mute">Mute</string>
    <string name="pref_mute_summ">Disable all the sound in the application</string>
    <string name="menu_settings">Settings</string>

</resources>

Create a new Activity in the same directory as the MainActivity.java class, call it TestPreferences.java.

Here's the code that applies the xml layout of the preferences page:

package com.example.codeforfoodtest_two;

import android.os.Bundle;
import android.preference.PreferenceActivity;

public class TestPreferences extends PreferenceActivity {

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    addPreferencesFromResource(R.layout.preferences);
}

}

Now go to AndroidManifest.file of the application and add this line to the application node:

<activity android:name="TestPreferences"></activity>

Doing so will tell Android that there's an Activity with that name in our application.

Now go to MainActivity.java class, add some code that creates an options menu and handles item selection in the menu. When the Settings item is selected, the preferences screen pops up:

package com.example.codeforfoodtest_two;

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;

public class MainActivity extends Activity{

static final int IDM_SETTINGS = 101;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}

@Override
public boolean onCreateOptionsMenu(Menu menu){
menu.add(Menu.NONE, IDM_SETTINGS, Menu.NONE, R.string.menu_settings);
return(super.onCreateOptionsMenu(menu));
}

@Override
public boolean onOptionsItemSelected(MenuItem item){
if(item.getItemId()==IDM_SETTINGS){
Intent intent = new Intent();
intent.setClass(this, TestPreferences.class);
startActivity(intent);
}
return true;
}
}

And that's all for today! Changing the preference doesn't really do anything yet, but we'll work on that next time.

Thanks for reading!

Android beginner tutorial: Part 77 - Settings

2013-02-09T10:00:00.000+02:00

Today we start learning about settings and preferences in Android.

Settings can be an important part of some Android applications. They allow users to change the behavior of the application using a list of components that let the user control their preferences.

There is a native way of providing modifiable settings for your application using the Android's Preference APIs.

To create a settings Activity for your application, you don't need to display and handle all the Views on your own. The whole process can be done by providing an XML file which is built using subclasses of the Preference class.

Each Preference is an item in a list and provides an approporiate native way to modify a setting. Each Preference that you add has a key-value pair that is used to save the respective setting in a SharedPreferences file for your application's settings. The file is used to read the setting values in your application to modify its behaviour.

The values stored in that file for each setting can be one of the following types: Boolean, Float, Int, Long, String or Set of Strings.

The class used for building the settings Activity is PreferenceActivity. It is supported by all Android versions. There is another way to display the settings screen for Android versions 3.0 and higher - that is to create a normal Activity and use a PreferenceFragment inside of it that displays the settings.

As I said before, each setting in the application is represented by an instance of a Preferences subclass. Some of the most commonly used ones are CheckBoxPreference, ListPreference and EditTextPreference.

The CheckBoxPreference component is an item with a checkbox and works like a switch - possible values are true and false, so the data type is Boolean.

The ListPreference class is an item that opens a dialog with a list of radio buttons that the user can select. The saved data type can be any type listed above.

The EditTextPreference preference opens a dialog that lets the user input their text, saved data type is a String.

And that will be all for today. Next time we'll try creating a preference screen ourselves.

Thanks for reading!