: Beginning Android

Get the Picture?

Get the Picture?

Android supports images in the PNG, JPEG, and GIF formats. GIF is officially discouraged, however; PNG is the overall preferred format. Images can be used anywhere that requires a Drawable, such as the image and background of an ImageView.

Using images is simply a matter of putting your image files in res/drawable/ and then referencing them as a resource. Within layout files, images are referenced as @drawable/... where the ellipsis is the base name of the file (e.g., for res/drawable/foo.png, the resource name is @drawable/foo). In Java, where you need an image resource ID, use R.drawable. plus the base name (e.g., R.drawable.foo).

If you need a Uri to an image resource, you can use one of two different string formats for the path:

android.resource://com.example.app/..., where com.example.app is the name of the Java package used by your application in AndroidManifest.xml and ... is the numeric resource ID for the resource in question (e.g., the value of R.drawable.foo)

android.resource://com.example.app/raw/..., where com.example.app is the name of the Java package used by your application in AndroidManifest.xml and ... is the textual name of the raw resource (e.g., foo for res/drawable/foo.png)

Note that Android ships with some image resources built in. Those are addressed in Java with an android.R.drawable prefix to distinguish them from application-specific resources (e.g., android.R.drawable.picture_frame).

Lets update the previous example to use an icon for the button instead of the string resource. This can be found as Resources/Images. First, we slightly adjust the layout file, using an ImageButton and referencing a drawable named @drawable/icon:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
>
<ImageButton android:id="@+id/format"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/icon"
/>
<EditText android:id="@+id/name"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
/>
</LinearLayout>
<TextView android:id="@+id/result"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
/>
</LinearLayout>

Next, we need to put an image file in res/drawable with a base name of icon. In this case, we use a 32?32 PNG file from the Nuvola[16] icon set. Finally, we twiddle the Java source, replacing our Button with an ImageButton:

package com.commonsware.android.resources;
import android.app.Activity;
import android.os.Bundle;
import android.text.TextUtils;
import android.text.Html;
import android.view.View;
import android.widget.Button;
import android.widget.ImageButton;
import android.widget.EditText;
import android.widget.TextView;
publicclass ImagesDemoextends Activity {
EditText name;
TextView result;
@Override
public voidonCreate(Bundle icicle) {
super.onCreate(icicle);
setContentView(R.layout.main);
name = (EditText)findViewById(R.id.name);
result = (TextView)findViewById(R.id.result);
ImageButton btn = (ImageButton)findViewById(R.id.format);
btn.setOnClickListener(new Button.OnClickListener() {
public voidonClick(View v) {
applyFormat();
}
});
}
private voidapplyFormat() {
String format =getString(R.string.funky_format);
String simpleResult = String.format(format,
TextUtils.htmlEncode(name.getText().toString()));
result.setText(Html.fromHtml(simpleResult));
}
}

Now, our button has the desired icon (see Figure 19-3).


Figure 19-3.The ImagesDemo sample application


: 0.382. /Cache: 3 / 1