Mar 15, 2011

Hello Vibrate , an Android App


My project is named Zoom Demo, with a Build Target of Android 1.5. The Application name is also Zoom Demo, and has a package name of “com.zoomcreates.android.demo”. The activity is the name of your main class, and appropriately I named it “demo”. To set these up, choose File > New > Project…, and choose Android Project from the Android section in the Wizards box.
This will set up your source tree automagically, and include in a couple of files and directories needed to compile. The main Java code is located in the src folder, under the package name. It should be named the same as your main Activity, so in my case it is called demo.java. Here is the finished code for this app:
package com.zoomcreates.android.demo;
 
import android.app.Activity;
import android.content.Context;
import android.os.Bundle;
import android.os.Vibrator;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.ImageButton;
import android.widget.TextView;
 
public class demo extends Activity
 implements View.OnClickListener {
  /** Called when the activity is first created. */
  ImageButton atomBtn;
  TextView textWidget;
  Vibrator v;
 
  @Override
  public void onCreate(Bundle icicle) {
   super.onCreate(icicle);
 
   v = (Vibrator)getSystemService(Context.VIBRATOR_SERVICE);
 
         setContentView(R.layout.main);
 
         atomBtn = (ImageButton)findViewById(R.id.atomBtn);
         atomBtn.setOnClickListener(this);
 
         textWidget = (TextView)findViewById(R.id.textWidget); 
 
         updateText();
  }
 
  @Override
  public boolean onCreateOptionsMenu(Menu menu) {
   super.onCreateOptionsMenu(menu);
 
   MenuItem item = menu.add("Clear Zooms");
   item.setIcon(R.drawable.edit);
 
   item = menu.add("Quit App");
   item.setIcon(R.drawable.exit);
 
   return true;
  }
 
  @Override
  public boolean onOptionsItemSelected(MenuItem item) {
   if (item.getTitle() == "Clear Zooms") {
    textWidget.setText("");
   }
 
   if (item.getTitle() == "Quit App") {
    finish();
   }
   return true;
  }
 
  public void onClick(View view) {
   updateText();
  }
 
  public void updateText() {
   textWidget.setText(textWidget.getText() + "Zoom... ");
   v.vibrate(300);
  }
 
}
Let’s break that down some…
package com.zoomcreates.android.demo;
 
import android.app.Activity;
import android.content.Context;
import android.os.Bundle;
import android.os.Vibrator;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.ImageButton;
import android.widget.TextView;
Here we define our package name, and import all the android goodies that we need. The package line should have been created for you, and you shouldn’t have to touch it. A few imports have been set up for you too, but Eclipse is pretty nice and lets you know if your are trying to do something that requires an include. I added these in when Eclipse told me too, and these are all the includes needed for my app.
public class demo extends Activity
 implements View.OnClickListener {
  /** Called when the activity is first created. */
  ImageButton atomBtn;
  TextView textWidget;
  Vibrator v;
Here is where our main Activity is declared. Since I have the main Activity returning button clicks to itself, I had it implement View.OnClickListener, so it can respond to button clicks. Next are three variable declarations, atomBtn, textWidget and v.
  @Override
  public void onCreate(Bundle icicle) {
   super.onCreate(icicle);
 
   v = (Vibrator)getSystemService(Context.VIBRATOR_SERVICE);
 
   setContentView(R.layout.main);
 
   atomBtn = (ImageButton)findViewById(R.id.atomBtn);
   atomBtn.setOnClickListener(this);
 
   textWidget = (TextView)findViewById(R.id.textWidget); 
 
   updateText();
  }
Each Activity has an onCreate event, and we are overriding the default to give it some functionality. You can ignore that Bundle icicle for now, just pass it to the super.onCreate method and we can move right on.
Next I tell v to be a Vibrator System Service, so we can make the phone shake. setContentView is being passed R.layout.main which is an XML file that describes the layout of the app. atomBtn is an ImageButton, which gets its info from that same XML file and then we set its onClickListener to the app. textWidget is also found in that XML file, and the last thing that we do is call the public method updateText(). Next we have…
  @Override
  public boolean onCreateOptionsMenu(Menu menu) {
   super.onCreateOptionsMenu(menu);
 
   MenuItem item = menu.add("Clear Zooms");
   item.setIcon(R.drawable.edit);
 
   item = menu.add("Quit App");
   item.setIcon(R.drawable.exit);
 
   return true;
  }
 
  @Override
  public boolean onOptionsItemSelected(MenuItem item) {
   if (item.getTitle() == "Clear Zooms") {
    textWidget.setText("");
   }
 
   if (item.getTitle() == "Quit App") {
    finish();
   }
   return true;
  }
… two more overrides for normal android apps. Here I am building a menu. This is only one way to do this, as you can define your menu in a layout XML file, but I wanted to show both ways of building UI elements in this tutorial. So I pass menu (which is a Menu) to the onCreateOptionsMenu method. This is what Android considers to be an Application Menu, and you can see this when you tap the menu button on the phone. I then declare item as a MenuItem, and add “Clear Zooms” as the title of this item. Next line addes the icon edit.png to this menu item (R.drawable.edit). That icon is found in the drawable folder, and make sure that you don’t put the file extention when declaring the icon. Then I add another menu item titled “Quit App” and give it that icon.
The next method actually tells the app what do to when those menu items are clicked. I check against the item title, because it was easy to see what I set those as. When you click on “Clear Zooms”, the textWidget gets set back to an empty string. When you click “Quit App”, it calls finish(), which quits the program gracefully.
Because these methods are boolean methods, I return true to finish them both off.
  public void onClick(View view) {
   updateText();
  }
 
  public void updateText() {
   textWidget.setText(textWidget.getText() + "Zoom... ");
   v.vibrate(300);
  }
 
}
The last two methods are the onClick, which only calls the method updateText, and this is being called by the ImageButton. updateText both appends “Zoom… ” to our textWidget, and tells the phone to vibrate for 300 milliseconds. Then we close out the main Activity, demo, with that last curly brace.
So, that is all that we need as far as Java code goes. I mentioned an XML layout file. Every Android app uses XML layouts to figure out display items, and lay them out correctly. You can use different GUI builders to generate the XML you need, but it’s pretty easy to do by hand too. I didn’t really do that great of a job with this program’s layout, as I was more focusing on the java. I knew that my phone had an 480×800 screen, so I made a background image that was that size, and I knew that my button was 250 pixels wide, so 75 pixels of padding would put it near the center of the screen.
So, the layout XML file is located in the “res” folder of your project source tree, inside another folder called “layout”. It is named main.xml, and here is what mine looks like:
 
I used an Absolute layout so that different items could overlay each other. I have 3 elements in this xml file, the first being an ImageView that is the background image. It is delcared first, so it’s drawn on the bottom. The next element is an ImageButton with the id of atomBtn, which you hopefully remember from the Java code above. These usually come with a gray background that makes it look like a button, but I got rid of that by making a small transparent PNG and setting that to the android:background attribute. Last we have the TextView with the id textWidget, and I set the color to #333333.
Each of my PNG images for this app go inside the /res/drawable folder, and the included one called icon.png is the application icon you see on the phone. I overwrote the default to give it some extra polish.
There were only two things left that I needed to do. First, to get access to the vibration of a phone, you need to set the PERMISSIONS for that in the AndroidManifest. Also, I wanted this ap to run full screen, without the status bar or title bar, so I added a theme to the application that is set up to do just that. Here’s my AndroidManifest.xml. Note the <uses-permission> element and the android:theme attribute of the <activity> element.


final Out Put :

No comments:

Post a Comment