Custom Buttons

In this post, we'll make custom buttons for our app. Its actually pretty simple. We just need to make use of few xml tags to handle images. What happens when we press a button ( a normal button ) ? There is a change in its.... Lets say, it responds to our touch. What actually happens is an animation. When we press a button, the background image of the button changes in such a way that it seems the button responds to our touch. So there are 2 images; one when not pressed and one when pressed. Which image for what and how to set them? We'll be doing it now. At first, lets just make a button with custom background and it doesn't change its background when pressed. We need an image for that. Download the buttons i used, from the link below:

---------------------------> Download button images <---------------------------

Copy all the images to the drawable folder (-hdpi ). Lets use the quit button for now. Create a new project. Open up main.xml and create a button ( How to create a button?). Add the tag android:background="@drawable/quit" and position the button wherever you want to, in the graphical layout. Thats it, a simple custom button is ready. Run the project and look at the button, click on the button and notice there is no change in it. Here is a code snippet of main.xml:

OK.. Now, lets jump to step 2. Create an android xml file named "quit_button.xml" (any name). In this file, we specify which image to display when button is pressed or not. Check out mine below:

Go to the layout file ( main.xml ); change the background to "@drawable/quit_button". Check it out below:

Run the project and notice the change when the quit button is pressed. Now you can do the same using btn_1.png and btn_2.png. Here are code snippets to displays btn_1 and btn_2....

Check out the snaps:
1. When button is not pressed...

2. When button is pressed...

3. A sample layout from an old project...

--------------> Download Project here <--------------

Thats it for now guys! In the next post, we'll learn about layouts in android and how to customize them. See ya!!!

Building an Image Editor 1

This post is made to help/support the members of the ADI community who are attending the event Image Editor for Android. The event description is as follows:

Yeah! We are gonna do it step by step. As Step1, we'll try to create an Image Viewer app. The app will call the default inbuilt camera application which lets us capture a pic and then shows the pic in the base/home screen of our app. thats it. simple right?... Lets make an outline of our app.





So, how exactly do we access the default camera application? We'll use an intent to trigger it using the parameter "android.provider.MediaStore.ACTION_IMAGE_CAPTURE". An activity is started with this intent. When this activity ends, the image associated with the intent is obtained. This image is set to the ImageView already created in our layout and displayed in our base screen. We'll start the activity by using StartActivityForResult() method, so that we can fetch the image from the resulting intent. Thats enough about it, lets jump to the code. The layout file consists of just an ImageView component and is embedded below:





Now lets look at our Activity:







Check out some of the snaps below:


1. The problem with AVD:

* Note: Click on the picture to view in high resolution.


2. Camera doesn't seem to work:

* Note: Click on the picture to view in high resolution.




3. When uploaded and started in my phone:

------------> Download Project here <---------------




There are a number of problems in this app like, the picture captured is not saved anywhere, there are no buttons for capturing, no quit button and the image displayed is just a thumbnail of the image captured (low resolution). In the next post, we'll try to capture an image, save it anywhere we want, access it using the file path and we do all this using buttons. Thats it for now. See ya!!!!.....

Editing Base Layout

An android project is basically divided into 2 categories. They are * Source code and * Resources. Lets keep it that simple for now. The resources are classified into text(strings), images, sound, layout etc.. Images are placed under the folder "drawable". Layout is placed under "layout" folder. Colors and Strings are placed under the folder "values". These resources are defined using XML files. The layout of the base screen (the screen that appears when an app is opened) is defined in the file "main.xml" under layout folder. Check out the main.xml file of my project.







Check out the colors.xml file mentioned in the main.xml file...



strings.xml is given below....





Check out some of the snaps below:

1. Our App with red background (#ffff0000) in the AVD:

2. Our App with background as "pic.jpg":

3. A snapshot of main.xml in Graphic Layout mode:

------------> Download Project here <---------------


Thats all for now guys! This post explains how to create the components in a layout and how to customize it. In the next post, we'll try to make these components (buttons, text fields, etc.) to work by adding event listeners to them. Stay tuned for more....