Event Handling

What are events? Why do we need to handle them? Events occur when an user interact with the UI components of our app like buttons. When these events occurs, a function/method is called. As a programmer, it is our responsibility to dump a block of code inside that method/function and make the UI respond to the user, like closing the application when the user presses the "quit" button. Seems like a good idea. Lets do just that.


Create a project. First, we need to include a button in our layout and id it. I do the same in the following code:

	<?xml version="1.0" encoding="utf-8"?>
	<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
	android:layout_width="fill_parent"
	android:layout_height="fill_parent"
	android:orientation="vertical" >
	<TextView
	android:layout_width="fill_parent"
	android:layout_height="wrap_content"
	android:layout_weight="0.60"
	android:text="@string/t_some_text"
	/>
	<Button
	android:id="@+id/quit_button_id"
	android:layout_width="match_parent"
	android:layout_height="wrap_content"
	android:text="@string/b_quit" />
	</LinearLayout>

view raw main.xml hosted with ❤ by GitHub

In our source code ( java file ), we need to add a variable for this button and add a listener to it, which is done in the following code:

	package com.android.sample.events;
	import android.app.Activity;
	import android.os.Bundle;
	import android.view.View;
	import android.widget.Button;
	public class BaseActivity extends Activity
	{
	// declare variable to represent our components...
	Button quitButton;
	/** Called when the activity is first created. */
	@Override
	public void onCreate(Bundle savedInstanceState)
	{
	super.onCreate(savedInstanceState);
	setContentView(R.layout.main);
	// inside this method we reference our button and add event listener...
	setupViews();
	}
	private void setupViews()
	{
	// quitButton is linked to our button created in the layout...
	// using the id...
	quitButton=(Button)findViewById(R.id.quit_button_id);
	// on-click listener is added to the button...
	// the method onClick() is called whenever the button is pressed...
	quitButton.setOnClickListener(new View.OnClickListener()
	{
	@Override
	public void onClick(View v)
	{
	// this will close our activity ...
	// since there are no other activities running..
	// this will quit our app...
	finish();
	}
	});
	}
	}

view raw BaseActivity.java hosted with ❤ by GitHub

This can also be done another way. Instead of adding OnClickListener on the java file, we can handle events by addding the tag android:onClick="myOnClickMethod". "myOnClickMethod" is a method defined inside our activity class(java file). Any name can be given to the method but it must have an argument of type "View". Take a look at my button in layout and the method myOnClickMethod() in my activity class:

A code snippet for button:

	<Button
	android:id="@+id/quit_button_id "
	android:layout_width="match_parent"
	android:layout_height="wrap_content"
	android:text="@string/b_quit"
	android:onClick="myOnClickMethod"
	/>

view raw buttonSample.xml hosted with ❤ by GitHub

The Activity:

	package com.android.sample.events;
	import android.app.Activity;
	import android.os.Bundle;
	import android.view.View;
	import android.widget.Button;
	public class BaseActivity extends Activity
	{
	// declare variable to represent our components...
	Button quitButton;
	/** Called when the activity is first created. */
	@Override
	public void onCreate(Bundle savedInstanceState)
	{
	super.onCreate(savedInstanceState);
	setContentView(R.layout.main);
	// inside this method we reference our button...
	setupViews();
	}
	private void setupViews()
	{
	// quitButton is linked to our button created in the layout...
	// using the id...
	quitButton=(Button)findViewById(R.id.quit_button_id);
	}
	// this method is called when the quit button is pressed...
	// note that it has an argument of type "View" which is mandatory...
	public void myOnClickMethod(View v)
	{
	finish();
	}
	}

view raw BaseActivity.java hosted with ❤ by GitHub

These methods are enough to implement event listeners for 2 or 3 buttons. But what if we need to handle the events of 10 buttons. For this situation, there is a special way of implementing listeners. Lets say we have 4 buttons and a text view as in the layout below. We need to print the event occurred like printing "Button 1 is pressed" when button1 is pressed. What we do is that, we make our activity to implement a class "View.OnClickListener" and then, we implement the common method onClick(), in which we differentiate events occurred by using id of the buttons. This is done in the code given below.


main.xml

	<?xml version="1.0" encoding="utf-8"?>
	<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
	android:layout_width="fill_parent"
	android:layout_height="fill_parent"
	android:orientation="vertical" >
	<TextView
	android:id="@+id/t_id"
	android:layout_width="fill_parent"
	android:layout_height="wrap_content"
	android:layout_weight="0.54"
	android:text="@string/t_some_text" />
	<Button
	android:id="@+id/b_1_id "
	android:layout_width="fill_parent"
	android:layout_height="wrap_content"
	android:text="@string/b_1" />
	<Button
	android:id="@+id/b_2_id "
	android:layout_width="fill_parent"
	android:layout_height="wrap_content"
	android:text="@string/b_2" />
	<Button
	android:id="@+id/b_3_id "
	android:layout_width="fill_parent"
	android:layout_height="wrap_content"
	android:text="@string/b_3" />
	<Button
	android:id="@+id/b_4_id"
	android:layout_width="fill_parent"
	android:layout_height="wrap_content"
	android:text="@string/b_4" />
	</LinearLayout>

view raw main.xml hosted with ❤ by GitHub

BaseActivity.java

	package com.android.sample.events;
	import android.app.Activity;
	import android.os.Bundle;
	import android.view.View;
	import android.widget.Button;
	import android.widget.TextView;
	public class BaseActivity extends Activity implements View.OnClickListener
	{
	// declare variable to represent our components...
	Button b1,b2,b3,b4;
	TextView t1;
	/** Called when the activity is first created. */
	@Override
	public void onCreate(Bundle savedInstanceState)
	{
	super.onCreate(savedInstanceState);
	setContentView(R.layout.main);
	// inside this method we reference our buttons, textview and add event listeners...
	setupViews();
	}
	private void setupViews()
	{
	b1=(Button)findViewById(R.id.b_1_id);
	b2=(Button)findViewById(R.id.b_2_id);
	b3=(Button)findViewById(R.id.b_3_id);
	b4=(Button)findViewById(R.id.b_4_id);
	t1=(TextView)findViewById(R.id.t_id);
	b1.setOnClickListener(this);
	b2.setOnClickListener(this);
	b3.setOnClickListener(this);
	b4.setOnClickListener(this);
	}
	// this method is called when any of the buttons is clicked...
	// the text on the TextView is set according the button pressed...
	@Override
	public void onClick(View v)
	{
	switch(v.getId())
	{
	case R.id.b_1_id:
	t1.setText("Button 1 is pressed");
	break;
	case R.id.b_2_id:
	t1.setText("Button 2 is pressed");
	break;
	case R.id.b_3_id:
	t1.setText("Button 3 is pressed");
	break;
	case R.id.b_4_id:
	t1.setText("Button 4 is pressed");
	break;
	}
	}
	}

view raw BaseActivity.java hosted with ❤ by GitHub

Some snaps:


1. The quit button:

2. Button2 event:

3. Button4 event:

--------------> Download Project Here <-------------

OK... thats it for now guys!!! See ya later with more.....

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:

	<?xml version="1.0" encoding="utf-8"?>
	<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
	android:layout_width="fill_parent"
	android:layout_height="fill_parent"
	android:orientation="vertical" >
	<!--
	a simple button is created with background as the image "quit.png"....
	and the button is positioned according to our need in the graphical layout....
	-->
	<Button
	android:id="@+id/b_quit_id"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:layout_alignParentBottom="true"
	android:layout_alignParentRight="true"
	android:layout_marginBottom="25dp"
	android:layout_marginRight="66dp"
	android:background="@drawable/quit"
	android:gravity="center" />
	</RelativeLayout>

view raw main.xml hosted with ❤ by GitHub

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:

	<?xml version="1.0" encoding="utf-8" ?>
	<selector xmlns:android="http://schemas.android.com/apk/res/android">
	<!--
	the image "quit.png" will be displayed when the button is not pressed...
	the image "about1.png" will be displayed when the button is pressed...
	-->
	<item android:drawable="@drawable/about1" android:state_pressed="true" />
	<item android:drawable="@drawable/quit" />
	</selector>

view raw quit_button.xml hosted with ❤ by GitHub

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

	<?xml version="1.0" encoding="utf-8"?>
	<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
	android:layout_width="fill_parent"
	android:layout_height="fill_parent"
	android:orientation="vertical" >
	<!--
	button states are defined in quit_button.xml ...
	-->
	<Button
	android:id="@+id/b_quit_id"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:layout_alignParentBottom="true"
	android:layout_alignParentRight="true"
	android:layout_marginBottom="25dp"
	android:layout_marginRight="66dp"
	android:background="@drawable/quit_button"
	android:gravity="center" />
	</RelativeLayout>

view raw main.xml hosted with ❤ by GitHub

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....

	<?xml version="1.0" encoding="utf-8" ?>
	<selector xmlns:android="http://schemas.android.com/apk/res/android">
	<item android:drawable="@drawable/btn_2" android:state_pressed="true" />
	<item android:drawable="@drawable/btn_1" />
	</selector>

view raw new_button.xml hosted with ❤ by GitHub

	<?xml version="1.0" encoding="utf-8"?>
	<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
	android:layout_width="fill_parent"
	android:layout_height="fill_parent"
	android:orientation="vertical" >
	<!--
	two buttons are create quit and click me...
	button states are defined in quit_button.xml and new_button.xml...
	-->
	<Button
	android:id="@+id/b_quit_id"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:layout_alignParentBottom="true"
	android:layout_alignParentRight="true"
	android:layout_marginBottom="25dp"
	android:layout_marginRight="66dp"
	android:background="@drawable/quit_button"
	android:gravity="center" />
	<Button
	android:layout_width="wrap_content"
	android:text="@string/click_me"
	android:layout_height="wrap_content"
	android:layout_alignParentTop="true"
	android:layout_marginRight="34dp"
	android:layout_marginTop="124dp"
	android:layout_toLeftOf="@+id/b_quit_id"
	android:background="@drawable/new_btn" />
	</RelativeLayout>

view raw main.xml hosted with ❤ by GitHub

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!!!

Join Us...

Wanna develop cool apps for Android smart-phones and tablets? Cant find a place where u can learn the basics step by step? This is the right place for you to start. All you have to know is the basics of Java. Join us on Facebook and participate in exciting events and learn stuff....

****************  Join ADI  *****************

Here... Check out our Group description....

*****************  ADI  *******************

Join us to make cool creative custom apps....

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:

	<?xml version="1.0" encoding="utf-8"?>
	<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
	android:layout_width="fill_parent"
	android:layout_height="fill_parent"
	android:orientation="vertical" >
	<!--
	ImageView is an in-built android component used for displaying images in our app...
	its width and height are set as "fill_parent", so that it'll fill the full window...
	its given an unique id
	-->
	<ImageView
	android:id="@+id/returned_image_view"
	android:layout_width="fill_parent"
	android:layout_height="fill_parent"
	></ImageView>
	</LinearLayout>

view raw main.xml hosted with ❤ by GitHub

Now lets look at our Activity:

	package com.android.imageProcessing.imageViewer;
	import android.app.Activity;
	import android.content.Intent;
	import android.graphics.Bitmap;
	import android.os.Bundle;
	import android.widget.ImageView;
	public class ImgViewerV1Activity extends Activity
	{
	ImageView imgView;
	// ImageView for displaying an image in our app...
	private static final int CAMERA_RESULT = 0;
	/** Called when the activity is first created. */
	@Override
	public void onCreate(Bundle savedInstanceState)
	{
	super.onCreate(savedInstanceState);
	setContentView(R.layout.main);
	Intent imageOpen=new Intent(android.provider.MediaStore.ACTION_IMAGE_CAPTURE);
	// an intent is created for capturing an image...
	startActivityForResult(imageOpen,CAMERA_RESULT);
	// the activity is started by passing an intent...
	// startActivityForResult() is used whenever an activity return something...
	// in this case it returns an image...
	}// end of onCreate()
	protected void onActivityResult(int requestCode,int resultCode, Intent i)
	{
	super.onActivityResult(requestCode, resultCode, i);
	// if the result is ok...
	if(resultCode==RESULT_OK)
	{
	Bundle extras=i.getExtras();
	// the extras associated with the intent is obtained...
	Bitmap bm=(Bitmap)extras.get("data");
	// The bitmap of the "data" in extras is obtained...
	imgView=(ImageView)findViewById(R.id.returned_image_view);
	// the ImageView created in the main.xml file is referenced to the variable
	// imgView...
	imgView.setImageBitmap(bm);
	// the bitmap obtained from the intent is assigned to the ImageView...
	// in other words the image returned by the intent is copied to imgView...
	}
	}
	}

view raw ImgViewerV1Activity.java hosted with ❤ by GitHub

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.

	<?xml version="1.0" encoding="utf-8"?>
	<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
	android:layout_width="fill_parent"
	android:layout_height="fill_parent"
	android:orientation="vertical"
	android:background="@color/red"
	>
	<!--
	The background can also be set as an image by replacing @color/red by @drawable/pic.jpg...
	where pic.jpg is an image file stored inside drawable folder...
	This is how we comment in .xml file...
	The layout of a screen in an android app can be customized by editing this main.xml
	file...
	As you can see below, u can edit it either by editing the text or thro' Graphical
	layout...
	TEXTVIEW is like a label in java swing...
	we kno about the BUTTON...
	EDITTEXT is like a textfield in swing...
	width and height can be adjusted using layout_width, layout_height...
	android:id is the unique id assigned to that particular component...
	@+id/id_name => for generating a new id
	@id/id_name => for accessing the component based on its id
	text can be set by using a string defined in values -> strings.xml
	similarly, colors are defined in values -> colors.xml
	take a look at colors.xml and strings.xml
	(colors.xml is manually created)
	images to be displayed are placed in any of the drawable folders...
	-->
	<TextView
	android:id="@+id/label"
	android:layout_width="fill_parent"
	android:layout_height="wrap_content"
	android:text="@string/some_text"
	android:layout_alignParentTop="true"
	/>
	<EditText
	android:id="@+id/textfield1"
	android:layout_width="fill_parent"
	android:layout_height="wrap_content"
	android:layout_alignParentBottom="true"
	android:inputType="text"
	android:text="@string/text_field_string" />
	<Button
	android:id="@+id/button1"
	android:layout_width="fill_parent"
	android:layout_height="wrap_content"
	android:layout_alignParentLeft="true"
	android:layout_centerVertical="true"
	android:text="@string/button_text" />
	</RelativeLayout>

view raw main.xml hosted with ❤ by GitHub

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

	<?xml version="1.0" encoding="utf-8"?>
	<!--
	colors are defined here...
	#abcdefgh
	ab-> transparency (ff => zero transparency; 00 => 100% transparency)...
	cd-> Red (R)
	ef-> Green (G)
	gh-> Blue (B)
	-->
	<resources>
	<color name="red">#ffff0000</color>
	</resources>

view raw colors.xml hosted with ❤ by GitHub

strings.xml is given below....

	<?xml version="1.0" encoding="utf-8"?>
	<!--
	here, strings are defined...
	a name and value and assigned to them here...
	-->
	<resources>
	<string name="hello">Hello World, SampleActivity!</string>
	<string name="app_name">Sample</string>
	<string name="some_text">A Sample App</string>
	<string name="button_text">Click me</string>
	<string name="text_field_string">This is a text field</string>
	</resources>

view raw strings.xml hosted with ❤ by GitHub

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....

Setting up the Environment

hi again guys!!!

In this post, I'll provide step by step instructions on how to setup the environment for developing Android apps. The 2 softwares you need to download are *Eclipse IDE and *Android SDK. Lets deal with one at a time. Firstly lets try to understand something about Eclipse. What is Eclipse? Eclipse is an IDE which means an Integrated Development Environment where we have various supporting perspectives and components for making our task(developing android apps) easier. Eclipse consists of different plugins and perspectives for different languages like java, JavaScript, C, C++ etc.. So, this is where(Eclipse) we write the code for our app and debug it. I guess thats enough about eclipse. Lets go to Android SDK(Software Development Kit). This kit consists of various api's (Application Programming Interfaces) for various versions of Android OS like gingerbread, Honeycomb, Ice cream Sandwich etc..,  and it also provides an AVD manager. AVD--> Android Virtual Device. This is an emulator that runs our program. Having said that lets move on to installation.


Android SDK:


Download android SDK from here. Install it and open the SDK manager available in the installed directory. This is a time consuming process. It shows the available packages and updates. Install only what is required. Now open the AVD manager available in the same folder. Create a new AVD (Android virtual device) with your custom settings. We are done with it now.


Eclipse IDE:

   Eclipse has a number of stable versions. Go to the website and take a look around. Many developers strongly recommend Eclipse Classic 3.7.2 (Indigo version) , which can be downloaded from here. Choose 32bit or 64bit version based on your OS. It will be downloaded as a zip file. Extract it somewhere, anywhere. Open Eclipse. You are not yet finished with eclipse. You need to install the ADT plugin for eclipse for making android apps.

ADT plugin for Eclipse:


The ADT plugin should be installed as follows:


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






Step1:   Help --> Install New Software

Step2: Go to the textfield next to "Works with" label

Step3: Enter https://dl-ssl.google.com/android/eclipse/

Step4: Check Developer tools, click next, and finish the installation.

Step5: After installation is over, restart Eclipse. Now go to Window--> preferences--> Android and select  

            the folder where android SDK is installed and click apply and close the window.

Step6: Go to file--> new --> Android Project. Give a Project name and click next.

Step7: Select the target Android OS version and click next.

Step8: Give a package name as i did in this picture and click finish.

Step9: Now a sample android project is ready. Lets run it. Right click our sample project in project 
            explorer and select run as --> android application.

Step10: The AVD takes some time to load, so wait and watch. When it finishes loading, our app will be 
              opened. You can see that in the picture.

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

Thats it for now guys. In the next post we'll look at the structure of our project and make some modifications to the sample project and see the result. Stay tuned , more is coming......

Started Blogging...

Hi! guys....


this blog is for the convenience of members of the Facebook group "ADI"....


tutorials can be posted here for the benefit of new members...


Lets get busy guys!!!!