Tuesday, April 7, 2009

Android's Image ContentProvider and Directories

One of the things to which I didn't find and easy answer on Google is how to work with the Images ContentProvider per directory. It's easy to reference all images the ContentProvider knows, but here's how to work with images in a specific directory.

Saving an image file and updating the ContentProvider
When you save an image file to the SD card, it will not automatically show in the 'Pictures' app. To have it appear there, you have to notify the ContentProvider that is responsible for images that a new image file has been created. Here's how it's done:


private void downloadImage(String imageUrl) throws InterruptedException {
InputStream inputStream = null;
OutputStream outStream = null;
try {
URL url = new URL(imageUrl);
inputStream = url.openStream();
String filepath = getFilePath(imageUrl);
String filename = getFileName(imageUrl);
File imageDirectory = new File(filepath);
File file = new File(filepath + filename);
if (file.exists() == false) {
String path = imageDirectory.toString().toLowerCase();
String name = imageDirectory.getName().toLowerCase();
ContentValues values = new ContentValues(7);
values.put(Images.Media.TITLE, filename);
values.put(Images.Media.DISPLAY_NAME, filename);
values.put(Images.Media.DATE_TAKEN, new Date().getTime());
values.put(Images.Media.MIME_TYPE, "image/jpeg");
values.put(Images.ImageColumns.BUCKET_ID, path.hashCode());
values.put(Images.ImageColumns.BUCKET_DISPLAY_NAME, name);
values.put("_data", filepath + filename);
ContentResolver contentResolver = getApplicationContext().getContentResolver();
Uri uri = contentResolver.insert(Images.Media.EXTERNAL_CONTENT_URI, values);
outStream = contentResolver.openOutputStream(uri);
byte[] buffer = new byte[1024];
int count;
while ((count = inputStream.read(buffer)) != -1) {
if (Thread.interrupted() == true) {
String functionName = Thread.currentThread().getStackTrace()[2].getMethodName() + "()";
throw new InterruptedException("The function " + functionName + " was interrupted.");
}
outStream.write(buffer, 0, count);
}
}
}
catch (IOException e) {
}
finally {
if (inputStream != null) {
try {
inputStream.close();
}
catch (IOException e) {
}
}
if (outStream != null) {
try {
outStream.close();
}
catch (IOException e) {
}
}
}
}


The magic piece here is that the ContentProvider is aware of each image file's directory through the BUCKET_ID field. We create a File object that points to the desired directory and we populate the BUCKET_ID with the hashCode() value of the path returned by the toString() function of the File object. Also note, that you have to drop this path to lowercase before obtaining the hashCode().

Choosing an image from one directory
If in your app, you need the user to pick an image from a directory, you can launch the 'Pictures' app to provide that functionality for you. You can start the 'Pictures' app using an 'android.intent.action.PICK' Intent. This will easily let you choose an image from all images across the SD card, but if you need to limit it to a single directory, you again have to work with the BUCKET_ID. Here's the code:

final int CHOOSE_AN_IMAGE_REQUEST = 2910;
String directory = "/sdcard/someDirectory/";
Uri uri = Images.Media.INTERNAL_CONTENT_URI.buildUpon().appendQueryParameter("bucketId", getBucketId(directory)).build();
Intent intent = getIntent();
intent.setData(uri);
intent.setAction(Intent.ACTION_PICK);
startActivityForResult(Intent.createChooser(intent, "Choose a Viewer"), CHOOSE_AN_IMAGE_REQUEST);


public static String getBucketId(String bucketName) {
bucketName = bucketName.toLowerCase();
if (bucketName.charAt(bucketName.length() - 1) == '/') {
bucketName = bucketName.substring(0, bucketName.length() - 1);
}
return Integer.toString(bucketName.hashCode());
}


Once the user chooses an image, your Activity's onActivityResult() function will be called. You can get the chosen image's uri in the following way:


protected void onActivityResult(int requestCode, int resultCode, Intent data) {
super.onActivityResult(requestCode, resultCode, data);
if (resultCode == RESULT_OK) {
if (requestCode == CHOOSE_AN_IMAGE_REQUEST) {
Uri chosenImageUri = data.getData();
...
}
}
}

Monday, April 6, 2009

Android's StateListDrawable and RadioButton Example

A radio button on the Android platform is drawn based on a label and a set of images contained in a StateListDrawable. You can create an image radio button by setting the text label to empty and setting your own images. There is no need to override the class or implement your own.

You can create your own radio buttons either via xml declaration or via code. You can see this in the Android source code but I will describe both methods in the rest of this post.

In the Android source code, you want to have a look at the following files:
StateListDrawable.java
DrawableContainer.java

RadioButton.java
CompoundButton.java

btn_radio.xml


XML DECLARATION:
When you declare your radio button, add the tag android:button="@drawable/resize_button". In your res/drawable/ directory, you must now have a resize_button.xml file that looks like this:

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

<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:state_checked="true"
android:state_window_focused="false"
android:drawable="@drawable/resize_button_on" />
<item
android:state_checked="false"
android:state_window_focused="false"
android:drawable="@drawable/resize_button_off" />
<item
android:state_checked="true"
android:state_pressed="true"
android:drawable="@drawable/resize_button_on_pressed" />
<item
android:state_checked="false"
android:state_pressed="true"
android:drawable="@drawable/resize_button_off_pressed" />
<item
android:state_checked="true"
android:state_focused="true"
android:drawable="@drawable/resize_button_on_selected" />
<item
android:state_checked="false"
android:state_focused="true"
android:drawable="@drawable/resize_button_off_selected" />
<item
android:state_checked="true"
android:drawable="@drawable/resize_button_on" />
<item
android:state_checked="false"
android:drawable="@drawable/resize_button_off" />
</selector>


The order of these items seems to matter, but I haven't had the time to delve into the details. It looks like it's caused by the matching algorithm that picks a drawable from the list based on the current state. You'll notice that each image that represents a radio button state has one or more state values associated with it. The radio button class sets the state flags and the Drawable picks the best matching image to display.

By declaring the xml code just shown, I now have a graphical resize radio button that can be checked off. It won't have a label and it will have it's own icon with the usual radio button states.

VIA CODE:

 StateListDrawable drawables = new StateListDrawable();
int stateChecked = android.R.attr.state_checked;
int stateFocused = android.R.attr.state_focused;
int statePressed = android.R.attr.state_pressed;
int stateWindowFocused = android.R.attr.state_window_focused;
drawables.addState(new int[]{ stateChecked, -stateWindowFocused}, getButtonWithThumbnail(R.drawable.button_on , thumbnailBitmap));
drawables.addState(new int[]{-stateChecked, -stateWindowFocused}, getButtonWithThumbnail(R.drawable.button_off , thumbnailBitmap));
drawables.addState(new int[]{ stateChecked, statePressed }, getButtonWithThumbnail(R.drawable.button_on_pressed , thumbnailBitmap));
drawables.addState(new int[]{-stateChecked, statePressed }, getButtonWithThumbnail(R.drawable.button_off_pressed , thumbnailBitmap));
drawables.addState(new int[]{ stateChecked, stateFocused }, getButtonWithThumbnail(R.drawable.button_on_selected , thumbnailBitmap));
drawables.addState(new int[]{-stateChecked, stateFocused }, getButtonWithThumbnail(R.drawable.button_off_selected, thumbnailBitmap));
drawables.addState(new int[]{ stateChecked }, getButtonWithThumbnail(R.drawable.button_on , thumbnailBitmap));
drawables.addState(new int[]{-stateChecked }, getButtonWithThumbnail(R.drawable.button_off , thumbnailBitmap));
thumbnailBitmap.recycle();
thumbnailBitmap = null;
thumbnailButton.setButtonDrawable(drawables);
thumbnailButton.setId(viewId);
layerThumbnails.addView(thumbnailButton);
layerThumbnails.check(thumbnailButton.getId());


The selector tag in the xml file corresponds to the StateListDrawable class. Items are added with addState(). Here, I've copied the basic button drawables from android's jar file, such as R.drawable.button_off and R.drawable.button_off_pressed. I created my own function, getButtonWithThumbnail(), that takes a bitmap and combines it with the basic button image to create a custom radio button on the fly.

Notice that the true and false values of the states are specified in code using positive and negative values of the android.R.attr.state_<*> integer variables and the order in which the images are added to the drawable is the same as in the xml declaration earlier. Finally, I add the StateListDrawable to my radio button, give it an id, add it to a radio group, and simulate a click on the button by calling the check() function on the button's radio group.