Create ActionBar using XML

In the article "Show Action Item with icon and text", it was shown how to create ActionBar using Java code. The items of ActionBar can be defined using XML also.



Modify from the article "Show Action Item with icon and text".

- Create a XML file /res/menu/menu.xml to define the menu items of the ActionBar.

<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@+id/itemid_0"
        android:title="Action Item 0"
        android:icon="@drawable/ic_launcher"
        android:orderInCategory="0"
        android:showAsAction="ifRoom|withText" />
    <item android:id="@+id/itemid_1"
        android:title="Action Item 1"
        android:orderInCategory="0" />
    <item android:id="@+id/itemid_2"
        android:title="Action Item 2"
        android:orderInCategory="0" />
    <item android:id="@+id/itemid_3"
        android:title="Action Item 3"
        android:orderInCategory="0" />
</menu>

- Modify onCreateOptionsMenu() to inflate the XML file. Also modify onOptionsItemSelected() to change the itemId(s) accordingly.

package com.exercise.AndroidActionBar;

import android.app.ActionBar;
import android.app.Activity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuInflater;
import android.view.MenuItem;
import android.view.View;
import android.widget.Button;
import android.widget.Toast;

public class AndroidActionBarActivity extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        
        Button showActionBar = (Button)findViewById(R.id.showactionbar);
        Button hideActionBar = (Button)findViewById(R.id.hideactionbar);
        
        showActionBar.setOnClickListener(new Button.OnClickListener(){

   @Override
   public void onClick(View arg0) {
    ActionBar actionBar = getActionBar();
    actionBar.show();
   }});
        
        hideActionBar.setOnClickListener(new Button.OnClickListener(){

   @Override
   public void onClick(View arg0) {
    ActionBar actionBar = getActionBar();
    actionBar.hide();
   }});
        
        
    }

 @Override
 public boolean onCreateOptionsMenu(Menu menu) {
  MenuInflater menuInflater = getMenuInflater();
        menuInflater.inflate(R.menu.menu, menu);

        return super.onCreateOptionsMenu(menu);
 }

 @Override
 public boolean onOptionsItemSelected(MenuItem item) {
  
  switch(item.getItemId()){
  case R.id.itemid_0:
   Toast.makeText(AndroidActionBarActivity.this, 
     "Action Item 0 selected!", 
     Toast.LENGTH_LONG).show();
   return true;
  case R.id.itemid_1:
   Toast.makeText(AndroidActionBarActivity.this, 
     "Action Item 1 selected!", 
     Toast.LENGTH_LONG).show();
   return true;
  case R.id.itemid_2:
   Toast.makeText(AndroidActionBarActivity.this, 
     "Action Item 2 selected!", 
     Toast.LENGTH_LONG).show();
   return true;
  case R.id.itemid_3:
   Toast.makeText(AndroidActionBarActivity.this, 
     "Action Item 3 selected!", 
     Toast.LENGTH_LONG).show();
   return true;
  default:
   return false;
  
  }
  
 }
}

Download the files.

Beginning Android 4 Games Development

Beginning Android 4 Games Development offers everything you need to join the ranks of successful Android game developers. You'll start with game design fundamentals and programming basics, and then progress toward creating your own basic game engine and playable game that works on Android 4.0 and earlier devices. This will give you everything you need to branch out and write your own Android games.

The potential user base and the wide array of available high-performance devices makes Android an attractive target for aspiring game developers. Do you have an awesome idea for the next break-through mobile gaming title? Beginning Android 4 Games Development will help you kick-start your project.

The book will guide you through the process of making several example games for the Android platform, and involves a wide range of topics:

• The fundamentals of Android game development targeting Android 1.5-4.0+ devices
• The Android platform basics to apply those fundamentals in the context of making a game
• The design of 2D and 3D games and their successful implementation on the Android platform

Implement Fade-Out transition effect using TransitionDrawable.reverseTransition()

Modify from last exercise "Implement Fade-In transition effect" to add Fade-Out transition effect when button pressed.



Modify main.xml to add a button to start reverse transition.

<?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:text="@string/hello" />
 <Button 
     android:id="@+id/starttransition"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:text="Start Transition" />
 <Button 
     android:id="@+id/reversetransition"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:text="Reverse Transition" />
 <ImageView
     android:id="@+id/mytransition"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:src="@anim/fadein" />
</LinearLayout>

Modify activity java code to call myTransitionDrawable.reverseTransition(1000) when button pressed.

package com.exercise.AndroidFadeInFadeOut;

import android.app.Activity;
import android.graphics.drawable.TransitionDrawable;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.ImageView;

public class AndroidFadeInFadeOutActivity extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        
        ImageView myImage = (ImageView)findViewById(R.id.mytransition);
        final TransitionDrawable myTransitionDrawable = (TransitionDrawable)myImage.getDrawable();
        
        Button startTransition = (Button)findViewById(R.id.starttransition);
        startTransition.setOnClickListener(new Button.OnClickListener(){

   @Override
   public void onClick(View arg0) {
    // TODO Auto-generated method stub
    myTransitionDrawable.startTransition(1000);
   }});
        
        Button reverseTransition = (Button)findViewById(R.id.reversetransition);
        reverseTransition.setOnClickListener(new Button.OnClickListener(){

   @Override
   public void onClick(View arg0) {
    // TODO Auto-generated method stub
    myTransitionDrawable.reverseTransition(1000);
   }});
        
    }
}

Download the files.

Implement Fade-In transition effect

- Download and copy the graphs to /res/drawable.

Create /res/anim/fadein.xml

<?xml version="1.0" encoding="utf-8"?>
<transition
 xmlns:android="http://schemas.android.com/apk/res/android">
 <item android:drawable="@drawable/android" />
 <item android:drawable="@drawable/developer" />
</transition>

Modify 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:layout_width="fill_parent"
     android:layout_height="wrap_content"
     android:text="@string/hello" />
<Button
  android:id="@+id/starttransition"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:text="Start Transition" />
<ImageView
  android:id="@+id/mytransition"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:src="@anim/fadein" />
</LinearLayout>

AndroidFadeInFadeOutActivity.java

package com.exercise.AndroidFadeInFadeOut;

import android.app.Activity;
import android.graphics.drawable.TransitionDrawable;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.ImageView;

public class AndroidFadeInFadeOutActivity extends Activity {
 /** Called when the activity is first created. */
 @Override
 public void onCreate(Bundle savedInstanceState) {
     super.onCreate(savedInstanceState);
     setContentView(R.layout.main);
  
     ImageView myImage = (ImageView)findViewById(R.id.mytransition);
     final TransitionDrawable myTransitionDrawable = (TransitionDrawable)myImage.getDrawable();
  
     Button startTransition = (Button)findViewById(R.id.starttransition);
     startTransition.setOnClickListener(new Button.OnClickListener(){

@Override
public void onClick(View arg0) {
 // TODO Auto-generated method stub
 myTransitionDrawable.startTransition(1000);
}});
 }
}

Download the files.

next:
- Implement Fade-Out transition effect using TransitionDrawable.reverseTransition()

Create AnimationDrawable using Java code

In previous exercises, the AnimationDrawable was created using XML. It can be created using Java code also.



Same as previous exercise, you have to copy some graphic in /res/drawable folder, refer to the post "Create frame animation with AnimationDrawable".

Modify main.xml, add a ImageView with predefined layout_width and android:layout_height.

<?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:text="@string/hello" />
  <TextView
      android:layout_width="fill_parent"
      android:layout_height="wrap_content"
      android:text="Set Alpha" />
  <SeekBar
      android:id="@+id/setalpha"
      android:layout_width="fill_parent"
      android:layout_height="wrap_content"
      android:progress="255"
      android:max="255" />
  <Button
      android:id="@+id/startanimation"
      android:layout_width="fill_parent"
      android:layout_height="wrap_content"
      android:text="Start Animation" />
  <Button
      android:id="@+id/stopanimation"
      android:layout_width="fill_parent"
      android:layout_height="wrap_content"
      android:text="Stop Animation" />
  <ImageView
      android:id="@+id/myanimation"
      android:layout_width="114dp"
      android:layout_height="16dp"
      />
</LinearLayout>

Modify the code of the activity.

package com.exercise.AndroidAnimation;

import android.app.Activity;
import android.graphics.drawable.AnimationDrawable;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.SeekBar;

public class AndroidAnimationActivity extends Activity {
  /** Called when the activity is first created. */
  @Override
  public void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.main);
    
      ImageView myAnimation = (ImageView)findViewById(R.id.myanimation);

      //Create a new AnimationDrawable
      final AnimationDrawable myAnimationDrawable
       = createAnimationDrawable();

      //apply the new AnimationDrawable
      myAnimation.setImageDrawable(myAnimationDrawable);
    
      SeekBar setAnimationAlpha = (SeekBar)findViewById(R.id.setalpha);
      Button startAnimation = (Button)findViewById(R.id.startanimation);
      Button stopAnimation = (Button)findViewById(R.id.stopanimation);
    
      startAnimation.setOnClickListener(new Button.OnClickListener(){

   @Override
   public void onClick(View arg0) {
    // TODO Auto-generated method stub
    if(!myAnimationDrawable.isRunning()){
     myAnimationDrawable.start();
    }
   }});
    
      stopAnimation.setOnClickListener(new Button.OnClickListener(){

   @Override
   public void onClick(View arg0) {
    // TODO Auto-generated method stub
    if(myAnimationDrawable.isRunning()){
     myAnimationDrawable.stop();
    }
   }});
    
      setAnimationAlpha.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener(){

   @Override
   public void onProgressChanged(SeekBar seekBar, int progress,
     boolean fromUser) {
    myAnimationDrawable.setAlpha(progress);
   }

   @Override
   public void onStartTrackingTouch(SeekBar seekBar) {
    // TODO Auto-generated method stub
    
   }

   @Override
   public void onStopTrackingTouch(SeekBar seekBar) {
    // TODO Auto-generated method stub
    
   }});

  }

  private AnimationDrawable createAnimationDrawable(){
   
   AnimationDrawable newAnim = new AnimationDrawable();
   
   newAnim.addFrame(getResources().getDrawable(R.drawable.android_1), 500);
   newAnim.addFrame(getResources().getDrawable(R.drawable.android_2), 500);
   newAnim.addFrame(getResources().getDrawable(R.drawable.android_3), 500);
   newAnim.addFrame(getResources().getDrawable(R.drawable.android_4), 500);
   newAnim.addFrame(getResources().getDrawable(R.drawable.android_5), 500);
   newAnim.addFrame(getResources().getDrawable(R.drawable.android_6), 500);
   newAnim.addFrame(getResources().getDrawable(R.drawable.android_7), 500);
   newAnim.setOneShot(false);
   
   return newAnim;
  }

}

Download the files.

Creaete AnimationDrawable and copy frames from another AnimationDrawable

Modify from ast exercise "Set alpha of AnimationDrawable", we are going to create a new AnimationDrawable, copy frame from the original myAnimationDrawable, and re-arrange frame order in reverse.



Modify main.xml to add a ImageView for the new animation.

<?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:text="@string/hello" />
  <TextView
      android:layout_width="fill_parent"
      android:layout_height="wrap_content"
      android:text="Set Alpha" />
  <SeekBar
      android:id="@+id/setalpha"
      android:layout_width="fill_parent"
      android:layout_height="wrap_content"
      android:progress="255"
      android:max="255" />
  <Button
      android:id="@+id/startanimation"
      android:layout_width="fill_parent"
      android:layout_height="wrap_content"
      android:text="Start Animation" />
  <Button
      android:id="@+id/stopanimation"
      android:layout_width="fill_parent"
      android:layout_height="wrap_content"
      android:text="Stop Animation" />
  <ImageView
      android:id="@+id/myanimation"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:src="@anim/anim_android"
      />
  <ImageView
      android:id="@+id/myanimation2"
      android:layout_width="fill_parent"
      android:layout_height="fill_parent"
      />
</LinearLayout>

Modify the Java code, implement a new method copyReversedAnim(). It return the new AnimationDrawable. Then set it the ImageDrawable of the ImageView.

package com.exercise.AndroidAnimation;

import android.app.Activity;
import android.graphics.drawable.AnimationDrawable;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.SeekBar;
import android.widget.Toast;

public class AndroidAnimationActivity extends Activity {
  /** Called when the activity is first created. */
  @Override
  public void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.main);
    
      ImageView myAnimation = (ImageView)findViewById(R.id.myanimation);
      ImageView myAnimation2 = (ImageView)findViewById(R.id.myanimation2);
      final AnimationDrawable myAnimationDrawable
       = (AnimationDrawable)myAnimation.getDrawable();
    
      //Copy a new AnimationDrawable in reversed order
      final AnimationDrawable reversedAnimationDrawable = copyReversedAnim(myAnimationDrawable);
      //apply the new AnimationDrawable
      myAnimation2.setImageDrawable(reversedAnimationDrawable);
    
      SeekBar setAnimationAlpha = (SeekBar)findViewById(R.id.setalpha);
      Button startAnimation = (Button)findViewById(R.id.startanimation);
      Button stopAnimation = (Button)findViewById(R.id.stopanimation);
    
      startAnimation.setOnClickListener(new Button.OnClickListener(){

   @Override
   public void onClick(View arg0) {
    // TODO Auto-generated method stub
    if(!reversedAnimationDrawable.isRunning()){
     myAnimationDrawable.start();
     reversedAnimationDrawable.start();
    }
   }});
    
      stopAnimation.setOnClickListener(new Button.OnClickListener(){

   @Override
   public void onClick(View arg0) {
    // TODO Auto-generated method stub
    if(reversedAnimationDrawable.isRunning()){
     myAnimationDrawable.stop();
     reversedAnimationDrawable.stop();
    }
   }});
    
      setAnimationAlpha.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener(){

   @Override
   public void onProgressChanged(SeekBar seekBar, int progress,
     boolean fromUser) {
    myAnimationDrawable.setAlpha(progress);
    reversedAnimationDrawable.setAlpha(progress);
    
   }

   @Override
   public void onStartTrackingTouch(SeekBar seekBar) {
    // TODO Auto-generated method stub
    
   }

   @Override
   public void onStopTrackingTouch(SeekBar seekBar) {
    // TODO Auto-generated method stub
    
   }});

  }

  private AnimationDrawable copyReversedAnim(AnimationDrawable src){
   
   AnimationDrawable newAnim = new AnimationDrawable();
   
   int numberOfFrame = src.getNumberOfFrames();
   
   for(int i = 0; i < numberOfFrame; i++){
    newAnim.addFrame(
      src.getFrame(numberOfFrame - i - 1),
      src.getDuration(numberOfFrame - i - 1));
   }
   newAnim.setOneShot(false);
   
   return newAnim;
  }
}

Download the files.

Set alpha of AnimationDrawable

Alpha of a AnimationDrawable can be changed using setAlpha(int alpha), Specify an alpha value for the AnimationDrawable. 0 means fully transparent, and 255 means fully opaque.



Modify from last exercise "Start and Stop frame animation with AnimationDrawable", add a SeekBar to set alpha of the animation.

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:layout_width="fill_parent"
     android:layout_height="wrap_content"
     android:text="@string/hello" />
 <TextView
     android:layout_width="fill_parent"
     android:layout_height="wrap_content"
     android:text="Set Alpha" />
 <SeekBar
     android:id="@+id/setalpha"
     android:layout_width="fill_parent"
     android:layout_height="wrap_content"
     android:progress="255"
     android:max="255" />
 <Button
     android:id="@+id/startanimation"
     android:layout_width="fill_parent"
     android:layout_height="wrap_content"
     android:text="Start Animation" />
 <Button
     android:id="@+id/stopanimation"
     android:layout_width="fill_parent"
     android:layout_height="wrap_content"
     android:text="Stop Animation" />
 <ImageView
     android:id="@+id/myanimation"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:src="@anim/anim_android"
     />

</LinearLayout>

Modify the code of the actiity

package com.exercise.AndroidAnimation;

import android.app.Activity;
import android.graphics.drawable.AnimationDrawable;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.SeekBar;

public class AndroidAnimationActivity extends Activity {
 /** Called when the activity is first created. */
 @Override
 public void onCreate(Bundle savedInstanceState) {
     super.onCreate(savedInstanceState);
     setContentView(R.layout.main);
  
     ImageView myAnimation = (ImageView)findViewById(R.id.myanimation);
     final AnimationDrawable myAnimationDrawable
      = (AnimationDrawable)myAnimation.getDrawable();
  
     SeekBar setAnimationAlpha = (SeekBar)findViewById(R.id.setalpha);
     Button startAnimation = (Button)findViewById(R.id.startanimation);
     Button stopAnimation = (Button)findViewById(R.id.stopanimation);
  
     startAnimation.setOnClickListener(new Button.OnClickListener(){

  @Override
  public void onClick(View arg0) {
   // TODO Auto-generated method stub
   if(!myAnimationDrawable.isRunning()){
    myAnimationDrawable.start();
   }
  }});
  
     stopAnimation.setOnClickListener(new Button.OnClickListener(){

  @Override
  public void onClick(View arg0) {
   // TODO Auto-generated method stub
   if(myAnimationDrawable.isRunning()){
    myAnimationDrawable.stop();
   }
  }});
  
     setAnimationAlpha.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener(){

  @Override
  public void onProgressChanged(SeekBar seekBar, int progress,
    boolean fromUser) {
   myAnimationDrawable.setAlpha(progress);
  
  }

  @Override
  public void onStartTrackingTouch(SeekBar seekBar) {
   // TODO Auto-generated method stub
  
  }

  @Override
  public void onStopTrackingTouch(SeekBar seekBar) {
   // TODO Auto-generated method stub
  
  }});

 }
}

Download the files.


Next:
- Creaete AnimationDrawable and copy frames from another AnimationDrawable