NOTE:

NOTE: Of late, I have been getting requests for very trivial problems that many of you are facing in your day-to-day work. This blog is not to solve your "project" problems - surely not a "Support" site.
I just love to share my knowledge in my spare time and would appreciate any questions or feedback on the articles and code I have shared. I also do appreciate thought-provoking questions that would lead me to write more articles and share.
But please do not put your day-to-day trivial problems here. Even if you do, you most probably would not get a response here.
Thanks

Search This Blog

x

Thursday 20 May 2010

Image Switcher View | Android Developer Tutorial


Now we will explore ImageSwitcher View. It is a view useful to switch smoothly between two images and thus provides ways of transitioning from one to another through appropriate animations.

We will implement the same concept of showing a gallery of images that scrolls at the top of the android screen landscape and upon selection of one image, it gets displayed as a larger image in the lower part through the use of an ImageSwitcher. This is what I had done earlier in the GalleryView tutorial but now instead of showing the selected picture through an ImageView, I will show it using a ImageSwitcher. Though the output may seem very similar, lot of other methods are available on the ImageSwitcher that can be used, if required.

Here is how the output would look (NOTE that I have not used the default gallery background provided by Android in the Gallery images)


So, to begin with, first we need to declare the layout xml to have a gallery and the ImageSwitcher:

<Gallery
      android:id="@+id/Gallery01"
      android:layout_width="fill_parent"
      android:layout_height="wrap_content"></Gallery>
<ImageSwitcher
      android:id="@+id/ImageSwitcher01"
      android:layout_width="fill_parent"
      android:layout_height="fill_parent">
</ImageSwitcher>

The next thing that we need to do is create a class that not only extends Activity but also implements ViewFactory. The ViewFactory is a Interface that creates views that need to be shown in the ImageSwitcher. So it has one method makeView() which we need to implement. It is here that we can set the attributes of the ImageView that would be shown within the ImageSwitcher -  like its background, it scale, its layout parameters etc. – typically those attributes that we would have otherwise statically set through a layout xml.

Here is the class declaration and the method makeView():

public class ImageSwitcherView extends Activity implements ViewFactory {

and
      @Override
      public View makeView() {
            ImageView iView = new ImageView(this);
            iView.setScaleType(ImageView.ScaleType.FIT_CENTER);
            iView.setLayoutParams(new
                        ImageSwitcher.LayoutParams(
                                    LayoutParams.FILL_PARENT,LayoutParams.FILL_PARENT));
            iView.setBackgroundColor(0xFF000000);
            return iView;
      }
This alone is the real difference from the Gallery example.

Other smaller things we need to do is get a handle to the ImageSwitcher in the onCreate() method:

            iSwitcher = (ImageSwitcher) findViewById(R.id.ImageSwitcher01);
            iSwitcher.setFactory(this);
            iSwitcher.setInAnimation(AnimationUtils.loadAnimation(this,
                        android.R.anim.fade_in));
            iSwitcher.setOutAnimation(AnimationUtils.loadAnimation(this,
                        android.R.anim.fade_out));

Here we also set the animation on how the image should fly in and fly out of the area. Then, we get a handle to the gallery and set an ImageAdapter to it. The ImageAdpater is as described in my Gallery Example. If you have not seen that, please go through that and then try this example, as I would not want to repeat myself here.
Now on the click of a gallery image, we would want to pass the selected image to the ImageSwitcher and this is what we do here:

            gallery.setOnItemClickListener(new OnItemClickListener() {

                  @Override
                  public void onItemClick(AdapterView<?> arg0, View arg1, int arg2, long arg3) {
                        iSwitcher.setImageResource(pics[arg2]);
                  }
            });
      }

Tuesday 18 May 2010

Gallery View | Android Developer Tutorial

Continuing on the Views, I have taken up the Gallery View that helps in showing Images as in a gallery. As per the android documentation, this is the definition: “A Gallery is a View commonly used to display items in a horizontally scrolling list that locks the current selection at the center.”


For this the layout xml in this case, the main.xml will have a ‘Gallery’ element as shown below:

<Gallery
    android:id="@+id/Gallery01"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"></Gallery>
<ImageView android:id="@+id/ImageView01"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"></ImageView>

It also has an ImageView element which is used to show the selected Image in a larger ImageView. Here is how it would look when executed.

Now, I create a GalleryView Activity. To view a set of images of Antartica, I have created small sized images of antartica and stored them in the res/drawable-ldpi folder starting form antartica1.png to antartica10.png.

I create an array of these resources/images in my activity with the following code:

Integer[] pics = {
R.drawable.antartica1,
R.drawable.antartica2,
R.drawable.antartica3,
R.drawable.antartica4,
R.drawable.antartica5,
R.drawable.antartica6,
R.drawable.antartica7,
R.drawable.antartica8,
R.drawable.antartica9,
R.drawable.antartica10
};

As we have seen with all the other views so far, we need to have an adapter that associates the view with the data. Here the view is Gallery and the data is the above mentioned 10 images. An Adapter plays the role of linking the two as shown below:

Gallery ga = (Gallery)findViewById(R.id.Gallery01);
ga.setAdapter(new ImageAdapter(this));

However, we do not have a readymade implementation of the ImageAdapter. We have to create our own implementation of the same by extending the BaseAdapter class. This is the core of the code in this example. The moment we extend the BaseAdapter, we have to override 4 methods. They are getCount(), getItem(), getItemId() and getView().

Before we go to each of them, let us see the constructor of the ImageAdpater:

public class ImageAdapter extends BaseAdapter {


private Context ctx;
int imageBackground;


public ImageAdapter(Context c) {
    ctx = c;
    TypedArray ta = obtainStyledAttributes(R.styleable.Gallery1);
    imageBackground = ta.getResourceId(R.styleable.Gallery1_android_galleryItemBackground, 1);
    ta.recycle();
}

}

It takes the context that is passed to the constructor. We need to examine this code a little. First, we can define our own resources or attributes in an XML file. Those attributes can be retrieved through the method obtainStyledAttributes. This is a method on the Context object. The returned value needs to be stored in a TypedArray object. A TypedArray is nothing but a container for an array of values that are returned by obtainStyledAttributes.

So, in my example, I have created an xml file by name attributes.xml in the res/values folder with the following content:

<resources>
     <declare-styleable name="Gallery1">
    <attr name="android:galleryItemBackground"/>
     </declare-styleable>
</resources>

Here Gallery1 is a custom name for a style defined by us. In this style, we are trying to say what should be the background of our images. For that we are using a pre-defined backgournd in R.attr class as galleryItemBackground.

So, this is accessed in the ImageAdapter contructor through the line

ta.getResourceId(R.styleable.Gallery1_android_galleryItemBackground, 1);
ta.recycle();

The number 1 is to say that it is the first element in the attributes.xml file under the styelable Gallery1.

The rest of the over ridden methods are simple:

@Override
public int getCount() {
    return pics.length;
}


@Override
public Object getItem(int arg0) {
    return arg0;
}

@Override
public long getItemId(int arg0) {
    return arg0;
}


@Override
public View getView(int arg0, View arg1, ViewGroup arg2) {
    ImageView iv = new ImageView(ctx);
    iv.setImageResource(pics[arg0]);
    iv.setScaleType(ImageView.ScaleType.FIT_XY);
    iv.setLayoutParams(new Gallery.LayoutParams(150,120));
    iv.setBackgroundResource(imageBackground);
    return iv;
}

The getView actually returns a View object when called. Here I have overridden it to return a ImageView object with the selected image inside it alosn with some scale, layout paramaters and the image background set.

Finally in the onCreate() method of the activity I have captured the onClick event on a Gallery item and within that I have toasted a message as well as displayed the image in a bigger manner below the gallery:

ga.setOnItemClickListener(new OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> arg0, View arg1, int arg2, long arg3) {
    Toast.makeText(getBaseContext(), "You have selected picture " + (arg2+1) + " of Antartica",
        Toast.LENGTH_SHORT).show();
    imageView.setImageResource(pics[arg2]);
}
});

That is it. You may download the complete code from here.

Table of contents

Table of Contents:
  1. Android Fundamentals - Jargon Explained
  2. Preliminary Step: Eclipse set up / Create Android Project
  3. Android Explicit Intent Example
  4. Android Implicit Intent Example
  5. Invoking Android Pre-packaged Applications
  6. Fetching a result from a called activity
  7. Android Notifications Example
  8. Android Local Service Example
  9. Android Service and Notification Combined Example
  10. Android Remote Service Example
  11. Android Content Provider Example
  12. Android Broadcast Receiver Example
  13. Android SQLite DB Example
  14. Shared Preferences on Android
  15. Google Maps on Android
  16. Location Manager on Android
  17. Simple List View
  18. Custom List View
  19. Android Threads and Handlers
  20. Http Connection Using Threads
  21. Date Time Picker Views
  22. Auto Complete Text View
  23. Spinner View
  24. Gallery View
  25. Image Switcher View
  26. Creating Android UI Programmatically
  27. Android UI - Inflate from XML (Dynamic UI Creation)
  28. ListView of Data from SQLiteDatabase
  29. TabLayout or Tabbed View
  30. Options Menu
  31. Context Menu
  32. New Contacts Content Provider
Titbits
  1. Simulating an incoming call on the Emulator
  2. Obtain Google Maps API Key
  3. Simulate Location Change in Android Emulator
  4. Updating to Android SDK 2.1
  5. Delete / Remove Applications deployed on the Android Emulator
  6. Disable Chinese / Japanese Characters on Emulator Keyboard
  7. Android Eclipse link Error - New Project
All Sample code at One place / Alternate Download site for Code

Wednesday 12 May 2010

Spinner View | Android Beginner Dev Tutorial

This is again another very simple tutorial on using a Spinner View provided by Android SDK. A spinner is supposed to be a view that displays one child at a time (Whatever that means).


This example is very similar to the previous one on AutoCompleteTextView.

Jumping right into the code, here is the layout xml file:

<Spinner
android:id="@+id/Spinner01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawSelectorOnTop = "true"></Spinner>


Nothing special. It just consists of one element.

Now in the main activity, I create an array of android books:

String[] androidBooks =
{
"Hello, Android - Ed Burnette",
"Professional Android 2 App Dev - Reto Meier",
"Unlocking Android - Frank Ableson",
"Android App Development - Blake Meike",
"Pro Android 2 - Dave MacLean",
"Beginning Android 2 - Mark Murphy",
"Android Programming Tutorials - Mark Murphy",
"Android Wireless App Development - Lauren Darcey",
"Pro Android Games - Vladimir Silva",
};

Then in the onCreate() method, I create an ArrayAdapter that I can pass to this Spinner as the data Source.

ArrayAdapter<String> adapter =
        new ArrayAdapter<String> (this,
        android.R.layout.simple_spinner_item,androidBooks);

Then, I get a handle to the Spinner, and set the ArrayAdapter to it

sp = (Spinner)findViewById(R.id.Spinner01);
sp.setAdapter(adapter);

Now, on selecting one of the items in the spinner, I want to be able to toast a message on the book that was selected. It is done as follows:

sp.setOnItemSelectedListener(new OnItemSelectedListener() {
    @Override
    public void onItemSelected(AdapterView<?> arg0, View arg1, int arg2, long arg3) {
        int item = sp.getSelectedItemPosition();
        Toast.makeText(getBaseContext(),
            "You have selected the book: " + androidBooks[item],
            Toast.LENGTH_SHORT).show();
    }


    @Override
    public void onNothingSelected(AdapterView<?> arg0) {
    }
});

That is it. Now execute and see it work. Here is how it would look:

The example code can be downloaded here.

Monday 10 May 2010

Auto Complete Text View | Android Beginner Dev Tutorial

This is a very simple tutorial on using Auto Complete Text View provided by Android SDK.


It consists of a single text box which can show suggestions based on a list of data that I provide as a source for this field. Just like Google Suggest, this also shows the nearest matches to the string that is being input by the end user.

So, here is the layout xml file:

<AutoCompleteTextView
android:id="@+id/AndroidBooks"
android:layout_width="fill_parent"
android:layout_height="wrap_content"></AutoCompleteTextView>

Nothing special. It just consists of one element.

Now in the main activity, I create an array of android books:

String[] androidBooks =
{
"Hello, Android - Ed Burnette",
"Professional Android 2 App Dev - Reto Meier",
"Unlocking Android - Frank Ableson",
"Android App Development - Blake Meike",
"Pro Android 2 - Dave MacLean",
"Beginning Android 2 - Mark Murphy",
"Android Programming Tutorials - Mark Murphy",
"Android Wireless App Development - Lauren Darcey",
"Pro Android Games - Vladimir Silva",
};

Then in the onCreate(..) method, I create an ArrayAdapter that I can pass to this AutoCompleteTextView as the data Source.

ArrayAdapter<String> adapter = new ArrayAdapter<String>(this,android.R.layout.simple_dropdown_item_1line,androidBooks);

Then, I get a handle to the AutocompleteTextView, and set the arrayAdapter to it along with the Threshold. The Threshold defines the number of charaters a user should type before the suggestions start showing up.

AutoCompleteTextView acTextView = (AutoCompleteTextView)findViewById(R.id.AndroidBooks);
acTextView.setThreshold(3);
acTextView.setAdapter(adapter);

That is it. Now execute and see it work. 
This is the way it would look:

The example code can be downloaded here.

To disable Chinese / Japanese auto-Characters – Android Emulator

Sometimes, when you are using the emulator, even if you type English characters, the emulator will be suggesting based on some Chinese /Japanese characters (I do not know the difference between the two). To disable this you need to go to Phone Settings in the emulator menus and remove the Japanese IME Settings. The path to that is in the main screen, click on the up-arrow (seen at the bottom) to see the menu. Select “settings”, navigate to “Language & Keyboard Settings”, and uncheck “Japanese IME”. You will be back to English suggestions / keyboard.

Date and Time Picker Views | Android Developer Tutorial (Part 20)

Continuing my tutorials on some UI related stuff… In Part 16 & 17, I spoke about Simple ListView and Custom ListView. In Part 18, though it seems like a tutorial on Threads and Handlers, I have touched upon ProgressDialog, another view.


Here I would like to talk on the DatePicker and TimePicker that are bundled with the SDK. Both are very similar. So, I will talk only about DatePicker, but the sample code will have both.

Typically, we would want an end user to be able to set a date though a DatePickerDialog that pops-up on some user action. So, I have a button “Set Date” on the click of which a DatePickerDialog pops-up. Once the user selects a date and “sets” it, it is displayed back in a TextView field.

So, the code associated with the button is:

pickDate.setOnClickListener( new OnClickListener() {
@Override
    public void onClick(View v) {
        showDialog(DATE_DIALOG_ID);
    }
});

showDialog(…) is a method available on an Activity Itself. It just takes an integer to help decide which dialog should actually be shown. This is decided in the onCreateDialog(…) method that gets automatically invoked when showDialog(…) is called.

Here is the code for the same:

protected Dialog onCreateDialog(int id){
    switch(id) {
        case DATE_DIALOG_ID:
            return new DatePickerDialog(this, dateListener, year, month, day);
        case ….
    }
    return null;
}

In this method, when the int passed is DATE_DIALOG_ID, a new DatePickerDialog is passed along with the values for year, month and day. Where did I set values for these? In the onCreate(…) method itself, I have done this:

final Calendar cal = Calendar.getInstance();
year = cal.get(Calendar.YEAR);
month = cal.get(Calendar.MONTH);
day = cal.get(Calendar.DAY_OF_MONTH);

Also note that a handle to a listener is expected to be given to the DatePickerDialog. I will come to this listener a little later.

I have also updated the Date - TextView with these values in the updateDate() method which is invoked in the onCreate(…) method itself.

private void updateTime() {
    timeDisplay.setText(new StringBuilder().append(hours).append(':')
    .append(min));
}

So far, what I have done is shown how to create a Dialog and set the date.

Once the dialog shows up, when a user sets the date and clicks ‘set’, the listener that is invoked in on the DatePickerDialog. The method is onDateSetListener whose handle is passed during the creation of the DatePickerDialog itself.

private DatePickerDialog.OnDateSetListener dateListener =
    new DatePickerDialog.OnDateSetListener() {
        @Override
        public void onDateSet(DatePicker view, int yr, int monthOfYear, int dayOfMonth) {
            year = yr;
            month = monthOfYear;
            day = dayOfMonth;
            updateDate();
     }
};

In this method, on the click on the dialog, we are setting the day, month, year values to the new values that the user selected and also calling the updateDate() method to refresh the TextView with what the user selected.

It is this simple.

Same thing can be done with the TimePicker as well. The only difference is that you can pass a Boolean variable to say whether you want the time in 24 hour or 12 hour pattern.

Here is the complete code for the same.



Wednesday 5 May 2010

Http Connection Using Threads & Handlers in Android (Part 19)

This is about how to invoke an Http Url from an android activity. If you have already written such a program in core java, you will not find anything new in the HTTP connectivity part. However, this tutorial also shows how to communicate between thread using the Message object.


In this tutorial, I plan to download 1 image and 1 text from the internet on the click of respective buttons on the android phone.

NOTE: I have also incidentally used Absolute Layout so that the buttons, the text and the image are all seen on the same screen even after being fetched.

Since fetching data from the internet can be a time-consuming task and a very unpredictable one at that, so, it would best be done in a separate thread rather than the UI/main thread. The basics of this have been discussed in the previous tutorial on Handlers and Threads.

To go to the application code directly, on the click of a button “Get Image”, I want to get an image whose URL is hard-coded in the program. For that first, I must open an HTTP connection to the server and then request for the image.

Hence is the code for opening and making an HTTP Connection:

private InputStream openHttpConnection(String urlStr) {
InputStream in = null;
int resCode = -1;
try {


URL url = new URL(urlStr);
URLConnection urlConn = url.openConnection();

if (!(urlConn instanceof HttpURLConnection)) {
throw new IOException ("URL is not an Http URL");
}

HttpURLConnection httpConn = (HttpURLConnection)urlConn;
httpConn.setAllowUserInteraction(false);
httpConn.setInstanceFollowRedirects(true);
httpConn.setRequestMethod("GET");
httpConn.connect();
resCode = httpConn.getResponseCode();


if (resCode == HttpURLConnection.HTTP_OK) {
in = httpConn.getInputStream();
}
} catch (MalformedURLException e) {
e.printStackTrace();
} catch (IOException e) {
e.printStackTrace();
}
return in;
}
I will not be explaining this code much as most of this is based on the java.net package. This code would be exactly same even if we were to write this in regular java code, not meant for android usage. In brief, I have opened a URLConnection, checked if it is an instance of HttpURLConnection, set the parameters required and made the ‘connection’ finally by calling the connect() method. Then, I check if the response code is OK and I get a handle to the input stream.


So, this is a utility method that I will use for fetching image as well as text.

Now, coming to fetching the image. I want to fetch it when the end user clicks on a button “Get Image”. So the code associated with the button click is here:

getImageButton = (Button)findViewById(R.id.Button01);
getImageButton.setOnClickListener( new OnClickListener() {
Override
public void onClick(View v) {
downloadImage(http://www.android.com/media/wallpaper/gif/android_logo.gif);
                              }
               });

So the fetching of the image is in the downloadImage() method, which is given the URL of the android logo. Here is the method:

private void downloadImage(String urlStr) {
progressDialog = ProgressDialog.show(this, "", "Fetching Image...");
final String url = urlStr;
new Thread() {
public void run() {
InputStream in = null;
Message msg = Message.obtain();
msg.what = 1;
try {
in = openHttpConnection(url);
bitmap = BitmapFactory.decodeStream(in);
Bundle b = new Bundle();
b.putParcelable("bitmap", bitmap);
msg.setData(b);
in.close();
} catch (IOException e1) {
e1.printStackTrace();
}
messageHandler.sendMessage(msg);

}
}.start();
This method looks a bit complicated. First, let us look at the basics. If I were not fetching this in a separate thread, I would have just the 3 lines of code that is in Bold and highlighted. Open a connection, fetch the bitmap and close the connection. However, since this is a typical task that is unpredictable in its response time, it is best done in a separate thread of its own. So, before I start a new thread, I let the UI thread to show a ProgressDialog as shown in

progressDialog = ProgressDialog.show(this, "", "Fetching Image...");

Then, I start a new thread. I make the URL string accessible within the new thread by making it a final variable. Since message is an object that I can use for communication between threads, I create a Message object in the thread. Then, I set the message number to 1, so that I can use it later.
Message msg = Message.obtain();
msg.what = 1;
Then, I bundle my bitmap already fetched into a Bundle object that can be sent back in the Message object.
Bundle b = new Bundle();
b.putParcelable("bitmap", bitmap);
msg.setData(b);

Once I close the input stream as in:
 in.close();
the thread has completed the job. So, I notify the main / UI thread through this method and also pass on the Message object:
messageHandler.sendMessage(msg);
This completes the fetching of the image in a separate thread. Now, how do I retrieve the image from the Message object in the main thread?
As soon as the child thread notifies, the method called back in the main thread is the handleMessage(msg) method. It is in this method that I retrieve the bitmap and set it to the ImageView in the UI. Here it goes:


private Handler messageHandler = new Handler() {
public void handleMessage(Message msg) {
super.handleMessage(msg);
switch (msg.what) {
case 1:
ImageView img = (ImageView) findViewById(R.id.imageview01);
img.setImageBitmap((Bitmap)(msg.getData().getParcelable("bitmap")));
break;
case 2:
    ……….
}
progressDialog.dismiss();
}
        };

Within this method, first I check the msg.what variable to see what the type of message I am expecting is. If it is 1, which I had set in downloadImage(..) method, then, I do the required things to get a handle to the ImageView object and then give the bitmap to it.

How do I fetch the data from the msg object? Through getData(). Then I use the key “bitmap” to retrieve the bitmap and cast it to Bitmap before setting it to the ImageView. Finally, I dismiss the progress dialog.

I hope this is clear. This example not only shows HTTP Connection from Android but also the Thread-to-thread communication through handler, message exchange.

In a very similar fashion, I also fetch the text. On click of the Get Text button, here is the code that gets invoked:
getTextButton.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
downloadText(http://saigeethamn.blogspot.com/feeds/posts/default);
}
         });

The downloadText() code is here:

private void downloadText(String urlStr) {
progressDialog = ProgressDialog.show(this, "", "Fetching Text...");
final String url = urlStr;
new Thread () {
public void run() {
int BUFFER_SIZE = 2000;
InputStream in = null;
Message msg = Message.obtain();
msg.what=2;
try {
in = openHttpConnection(url);
InputStreamReader isr = new InputStreamReader(in);
int charRead;
text = "";
char[] inputBuffer = new char[BUFFER_SIZE];
while ((charRead = isr.read(inputBuffer))>0)
{
//---convert the chars to a String---
String readString =
String.copyValueOf(inputBuffer, 0, charRead);
text += readString;
inputBuffer = new char[BUFFER_SIZE];
}
Bundle b = new Bundle();
b.putString("text", text);
msg.setData(b);
in.close();
} catch (IOException e) {
e.printStackTrace();
}
messageHandler.sendMessage(msg);
}
}.start();
}

And the way the text is handled in the main thread handleMessage(..) method is here:
case 2:
TextView text = (TextView) findViewById(R.id.textview01);
text.setText(msg.getData().getString("text"));
break;
The complete code can be downloaded here

 NOTE: the blog editor is posing major problems in editing - it is jumbling up the whole post esp. when I use the " feature. So, please bear with me if somethings look garbled. I have tried my best to work around the editor problem. This has been noticed only in the last 3 posts of mine. Hope it gets fixed soon.
Thanks for your understanding.