Google
Showing posts with label Android: UI. Show all posts
Showing posts with label Android: UI. Show all posts

Sunday, July 11, 2010

View-based Animation



The main activity file (AnimationViewAnimation.java) :
 package com.ava;
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.ArrayAdapter;
import android.widget.Button;
import android.widget.ListView;
public class AnimationViewAnimation extends Activity {
ListView lv;
@Override
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.list_layout);
setupListView();
this.setupButton();
}
private void setupListView()
{
String[] listItems = new String[]
{
"Item 1", "Item 2", "Item 3",
"Item 4", "Item 5", "Item 6",
};
ArrayAdapter listItemAdapter =
new ArrayAdapter(this
,android.R.layout.simple_list_item_1
,listItems);
lv = (ListView)this.findViewById(R.id.list_view_id);
lv.setAdapter(listItemAdapter);
}
private void setupButton()
{
Button b = (Button)this.findViewById(R.id.btn_animate);
b.setOnClickListener(
new Button.OnClickListener(){
public void onClick(View v)
{
animateListView();
}
});
}
private void animateListView()
{
ListView lv = (ListView)this.findViewById(R.id.list_view_id);
lv.startAnimation(new ViewAnimation(lv));
}
}

The animation class (ViewAnimation.java):

 package com.ava;
import android.app.Activity;
import android.opengl.Matrix;
import android.text.Layout;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.LinearInterpolator;
import android.view.animation.Transformation;
import android.widget.ListView;
public class ViewAnimation extends Animation
{ ListView v;
public ViewAnimation(ListView _v){v = _v;}
@Override
public void initialize(int width, int height, int parentWidth,
int parentHeight)
{
super.initialize(width, height, parentWidth, parentHeight);
setDuration(2500);
setFillAfter(true);
setInterpolator(new LinearInterpolator());
}
@Override
protected void applyTransformation(float interpolatedTime, Transformation t)
{ float centerX = (float)v.getWidth()/2, centerY = (float)v.getHeight()/2;
final android.graphics.Matrix matrix = t.getMatrix();
matrix.setScale(interpolatedTime, interpolatedTime);
matrix.preTranslate(-centerX, -centerY);
matrix.postTranslate(centerX, centerY);
}
}


The layout file (list_layout.xml):
 <?xml version="1.0" encoding="utf-8"?>
<!-- This file is at /res/layout/list_layout.xml -->
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<Button
android:id="@+id/btn_animate"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Start Animation"
/>
<ListView
android:id="@+id/list_view_id"
android:persistentDrawingCache="animation|scrolling"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
/>
</LinearLayout>



The java files put in src folder.
The layout xml file put in res/layout folder.

Layout Animation - Interpolators




The supported interpolators include:

AccelerateDecelerateInterpolator
AccelerateInterpolator
CycleInterpolator
DecelerateInterpolator
LinearInterpolator
AnticipateInterpolator
AnticipateOvershootInterpolator
BounceInterpolator
OvershootInterpolator

The example above shows bounce_interpolator in rotation animation.
Accelerate interpoloatar is accesed as: accelerator_interpolator.

Watch the video:


Layout Animation - Rotation Animation


Layout Animation - Translation + Alpha Animation


Layout Animation - Alpha Animation


Layout Animation - Scale Animation





2D animation frame-by-frame

Click on button Start Animation. The red spray will move clockwise around the screen.

Frame by frame animation





The layout for the screen in xml.



The main Activity.

Saturday, July 10, 2010

A Simpler Dialog

1. Click on Test menuitem and a simple Dialog box shows.

2. The menu xml design.


3. This is easier. Just create the Dialog box within the Activity class!

Alert boxes

1. Click on OK menuitem from Menu and Alert Window shows.

2. Create the strings in xml

3. Create the menu in xml.

4. In the main activity, do the menu and event handler that calls Alert.


5. This is the Alert class and its handler.

Putting icons in XML created Menu


Make sure to put the icons in the res/drawable folders



An icon each for the first two menu-items.







Friday, July 9, 2010

Creating Menus the XML way

When you click menu and select Test menu-item, the textview on displays the message.

Inflate (from xml) the menu and handle the menu selection event

Give an id to textview so that it can be referenced from Activity


Here's where the menu is designed in XML.

How to add icon to menu item


1. Note the icon in the append menu item.



2. To set the icon, put the append.png icon in the drawable folder, then call the seticon
method of the MenuItem.


How to changle Title Bar Label


1. Modify the AndroidManifest.xml file as shown above.



2. Note the new title "My Cool Menus"

Responding to Menu clicks


1. Respond to menu clicks by overriding Activity's onOptionsItemSelected method



2. The TextView shows the MenuItem selected

Menus


1. Add menu by overriding Activity's onCreateOptionMenus



2. The menu is accessed through the phone's MENU button.


Spinners


1. Listener for the Spinner's item state change event



2. The main Activity.


3. The UI in XML


4. Output of spinner (drop-down list)


5. Selection is displayed in TextView (top) and Toast (below).
A toast is a message box.