Create Animation Of Sprites in Android

Hello guys, how are you today? Its Super Sunday, while you guys are enjoying i am busy writing this blog. Never mind, lets get started.
In this blog i will show you how to create animation of sprites in android. Basically what we are going to do is to display the sprites one by one quickly so that it looks like as if it is an animation.

Download http://www.2shared.com/file/9aHDwyXe/Blog4.html

1) First create an Android Application Project in Eclipse.Lets name it "Blog4" .

2) Now go to "res/layout/activity_main.xml" and create an image view there, just like i did.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" >

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id = "@+id/image" />

</RelativeLayout>

3) Now go to "src/your_package_name/MainActivity.java" . Here we are going to create two classes one is "Rotate class" and other is "MyHandler class". Rotate class extends TimerTask and rotates our Sprite after a certain period of time.

private class Rotate extends TimerTask
    {
        @Override
        public void run() {
            // TODO Auto-generated method stub
            handler.sendEmptyMessage(_index);
             if(_index==7) _index =0;
             else _index++;
           
        }
    }

MyHandler Class handles the request from the Rotate class and sets the image in the ImageView that we have previous created.

private class MyHandler extends Handler
    {
        @Override
        public void handleMessage(Message msg) {
            // TODO Auto-generated method stub
            super.handleMessage(msg);

            try {
                    Bitmap bmp= BitmapFactory.decodeStream(MainActivity.this.getAssets().open("costume"+_index+".png"));
                    image.setImageBitmap(bmp);

                    Log.v("Loaing Image: ",_index+"");
            } catch (IOException e) {
                // TODO Auto-generated catch block
                Log.v("Exception in Handler ",e.getMessage());
            }
        }
    }

4) The Sprite pictures need to be saved in the assets folder under res directory. For this project i am using sprites from this site http://scratch.mit.edu/projects/1307379/  . Thanks a lot to the developer of these Sprites.

5) So our whole code under MainActivity.java looks like.

import java.io.IOException;
import java.util.Timer;
import java.util.TimerTask;
import android.app.Activity;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.os.Bundle;
import android.os.Handler;
import android.os.Message;
import android.util.Log;
import android.view.Menu;
import android.widget.ImageView;

public class MainActivity extends Activity {
    ImageView image;
    Rotate t;
    private Timer _timer;
    private int _index;
    private MyHandler handler;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        image = (ImageView) findViewById(R.id.image);
        handler= new MyHandler();
        _index=0;
        _timer= new Timer();
         t =new Rotate();
        _timer.schedule(t, 100, 200);
    }

    private class Rotate extends TimerTask
    {
        @Override
        public void run() {
            // TODO Auto-generated method stub
            handler.sendEmptyMessage(_index);
             if(_index==7) _index =0;
             else _index++;
           
        }
    }
    private class MyHandler extends Handler
    {
        @Override
        public void handleMessage(Message msg) {
            // TODO Auto-generated method stub
            super.handleMessage(msg);

            try {
                    Bitmap bmp= BitmapFactory.decodeStream(MainActivity.this.getAssets().open("costume"+_index+".png"));
                    image.setImageBitmap(bmp);

                    Log.v("Loaing Image: ",_index+"");
            } catch (IOException e) {
                // TODO Auto-generated catch block
                Log.v("Exception in Handler ",e.getMessage());
            }
        }
    }

}

So, now we are done. Post your problems in the comments, i will love to handle those.

For more info https://www.facebook.com/androidcoolstuffs

Thank you

Websites as the object in Swipe Screen in Android

Hello guys, Today we are going to see how to load a bunch of websites as the object in Swipe Screen in Android. So, lets get started..

1) First of all, create an Android Application Project and name it anything you like. For me its "Blog3" .

2) Then go to "res/layout/activity_main.xml" and add the below code.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" >

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Click me"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true"
        android:id="@+id/click" />

</RelativeLayout>

In this code we are simply creating a button in the middle of the android screen and on clicking the button our new Activity will start.

3) Next go to "src/your_package_name/MainActivity.java" and add the below piece of code.

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.view.Menu;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;

public class MainActivity extends Activity implements OnClickListener {
    Button click;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        click = (Button) findViewById(R.id.click);

        click.setOnClickListener(this);
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        //getMenuInflater().inflate(R.menu.main, menu);
        return true;
    }

    @Override
    public void onClick(View v) {
        // TODO Auto-generated method stub
        switch (v.getId()) {
        case R.id.click:
            Intent i = new Intent(this, Website.class);
            startActivity(i);
            break;
        }

    }

}

In this java file we are implementing the OnClickListener for the click button that we have previously created. And we are assigning some activity to be performed on clicking the click button.

4) Go to "src/your_package_name/" and right click there and create the new java file "Website.java" . Here we are creating our new activity which will show the bunch of websites.

5) Now go to "res/layout/" and right click there and create a new xml file, and name it as "pager.xml".

6) Open pager.xml and paste the code below.

<android.support.v4.view.ViewPager xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/pager"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!--
    This title strip will display the currently visible page title, as well as the page
    titles for adjacent pages.
    -->
    <android.support.v4.view.PagerTitleStrip android:id="@+id/pager_title_strip"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="top"
        android:background="#33b5e5"
        android:textColor="#fff"
        android:paddingTop="4dp"
        android:paddingBottom="4dp" />

</android.support.v4.view.ViewPager>

7) Now go to "res/layout/" and right click there and create a new xml file, and name it as "result.xml".

8) Open "result.xml" and paste the code below.

<?xml version="1.0" encoding="utf-8"?>
<WebView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/web" >
 
</WebView>


9) Next open the "Website.java" file which you have created previously and copy paste the below code. Necessary   comments have been added there.

 import android.app.ActionBar;
import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentStatePagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.view.ViewGroup;
import android.webkit.WebChromeClient;
import android.webkit.WebView;
import android.webkit.WebViewClient;

public class Website extends FragmentActivity {
    DemoCollectionPagerAdapter mDemoCollectionPagerAdapter;
    /**
     * The {@link android.support.v4.view.ViewPager} that will display the
     * object collection.
     */
    ViewPager mViewPager;
    static WebView w;

    public void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);
        setContentView(R.layout.pager);
        mDemoCollectionPagerAdapter = new DemoCollectionPagerAdapter(
                getSupportFragmentManager());
        mViewPager = (ViewPager) findViewById(R.id.pager);
        mViewPager.setAdapter(mDemoCollectionPagerAdapter);
        final ActionBar actionBar;
        actionBar = getActionBar();
        actionBar.setDisplayHomeAsUpEnabled(true);
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.main, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()) {
        case android.R.id.home:
            // go to previous screen when app icon in action bar is clicked
            Intent intent = new Intent(this, MainActivity.class);
            intent.addFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP);
            startActivity(intent);
            return true;
        }
        return super.onOptionsItemSelected(item);
    }

    public static class DemoCollectionPagerAdapter extends
            FragmentStatePagerAdapter {

        public DemoCollectionPagerAdapter(FragmentManager fm) {
            super(fm);
        }

        @Override
        public Fragment getItem(int i) {
            Fragment fragment = new DemoObjectFragment();
            Bundle args = new Bundle();
            args.putInt(DemoObjectFragment.ARG_OBJECT, i); // Our object is just
                                                            // an integer :-P
            fragment.setArguments(args);
            return fragment;
        }

        @Override
        public int getCount() {
            // For this contrived example, we have a 100-object collection.
            return 3;
        }

        @Override
        public CharSequence getPageTitle(int position) {

            if (position == 0) {
                return "Google";
            } else if (position == 1) {
                return "Facebook";

            } else {
                return "Bing";
            }

        }
    }

    public static class DemoObjectFragment extends Fragment {

        public static final String ARG_OBJECT = "object";

        View rootView;

        @Override
        public View onCreateView(LayoutInflater inflater, ViewGroup container,
                Bundle savedInstanceState) {
            rootView = inflater.inflate(R.layout.result, container, false);
            Bundle args = getArguments();
            w = (WebView) rootView.findViewById(R.id.web);
            w.getSettings().setJavaScriptEnabled(true);
            w.setWebViewClient(new WebViewClient() {
                @Override
                public boolean shouldOverrideUrlLoading(WebView view, String url) {
                    return false;
                }
            });
            final Activity activity = getActivity();

            w.setWebChromeClient(new WebChromeClient() {

                public void onProgressChanged(WebView view, int progress) {
                    activity.setTitle("Loading...");
                    activity.setProgress(progress * 100);
                    if (progress == 100)
                        activity.setTitle("TekArt");
                }
            });

            String url = "";
            int i = args.getInt(ARG_OBJECT);
            if (i == 0) {
                url = "http://www.google.com";
                w.loadUrl(url);
            } else if (i == 1) {
                url = "http://www.facebook.com";
                w.loadUrl(url);
            } else {
                url = "http://www.bing.com";
                w.loadUrl(url);
            }

            return rootView;

        }

        @Override
        public void onActivityCreated(Bundle savedInstanceState) {
            super.onActivityCreated(savedInstanceState);
            setRetainInstance(true);
        }

    }

}

In this class we are creating objects fragment and then in the fragment we are loading the different webpages in the objects.

10) Next go to "AndroidManifest.xml" and add the following permissions and activity.

    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

    <activity android:name="your_package_name.Website" />

Now we are done.

Post you problems in the comments. I will be very happy to handle those.

Thank you

Splash Screen with Sound inAndroid

Hello guys, got a good response from my first video which encouraged me to write my second blog.

In this blog i will show how to create a splash screen in android which also produces a sound on start up. So, lets get started.

Follow the steps correctly-

1) Create an Android Application Project.

2) Take an image file and name it as "logo.jpg" and save it in the "res/drawable-mdpi".

3) Go to "res/layout/activity_main.xml" and insert this code.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:tools="http://schemas.android.com/tools"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:paddingBottom="@dimen/activity_vertical_margin"

    android:paddingLeft="@dimen/activity_horizontal_margin"

    android:paddingRight="@dimen/activity_horizontal_margin"

    android:paddingTop="@dimen/activity_vertical_margin"

    tools:context=".MainActivity"

    android:background="@drawable/logo" >

</RelativeLayout>

We have named our image file as "logo.jpg" so we are using the same name in "android:background " in the code. We can change this file name to whatever we want but the same should be the image filename.

4) Now go to "src/your_package_name/MainActivity.java" and insert the following code.

import android.media.MediaPlayer;

import android.os.Bundle;

import android.os.Handler;

import android.app.Activity;

import android.content.Intent;

import android.view.Menu;

public class MainActivity extends Activity {

      MediaPlayer mp;

      @Override

      protected void onCreate(Bundle savedInstanceState) {

            super.onCreate(savedInstanceState);

            setContentView(R.layout.activity_main);

            mp = MediaPlayer.create(this, R.raw.music);

            mp.start();

            new Handler().postDelayed(new Runnable() {

                  @Override

                  public void run() {

                        // TODO Auto-generated method stub

                        Intent i = new Intent(MainActivity.this,NewActivity.class);

                        mp.stop();

                        startActivity(i);

                        finish();

                       

                  }

                 

            }, 5000);

      }

}

In this code we are using MediaPlayer class to play the audio on startup.

MediaPlayer mp;

mp = MediaPlayer.create(this, R.raw.music);

mp.start();

Then we are using the Handler class to create a delay of 5s. This handler class consists of run() function in which we are creating our new activity.Then this activity gets called after 5s.

5) Now go to "src/your_package_name" folder, right click there and create a new class. Lets name the class as "NewActivity.java" .Copy the below code in NewActivity.java.

import android.app.Activity;

import android.os.Bundle;

public class NewActivity  extends Activity {

      @Override

      protected void onCreate(Bundle savedInstanceState) {

            super.onCreate(savedInstanceState);

            setContentView(R.layout.new_activity);

      }

}

This class basically displays the text.

6) Now go to "res/layout" and right click there to create a new xml file.Lets name the file as "new_activity.xml" .Copy the below code in the new_activity.xml.

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:orientation="vertical" >

   

    <TextView

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="Hello its a new Activity"/>

</LinearLayout>

7) Now the last thing, open the AndroidManifest.xml and we will create our new activity for "NewActivity.java".Simply copy paste the below code after the end of previous activity tag ie after "</activity>" .

<activity android:name="your_package_name.NewActivity" />

Now we are done. We have created our new Android Splash Screen with sound. Comment your problems and doubts. I will love to handle it.

Thank you.

Android Layout with CheckButtons and Button at bottom

Hey Guys, this is my first blog on Android. Hope, you will like it.

In this blog i am going to show how to create a simple layout on Android in which lots of checkboxes are there and a button is present at the bottom.Many people have doubts in this as how to create a button at bottom of page in LinearLayout in Android.So, lets do this..

1 ) First of all create Android Application Project in eclipse.
2) Go to res-> layout->activity_main.xml and copy paste the below code.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#000000"
    android:orientation="vertical" >
   
    <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:text="Choose Category"
                android:textColor="#ffffff"
                android:textSize="25sp" />

    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="0dip"
        android:layout_weight="1" >

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical" >

           

            <CheckBox
                android:id="@+id/all"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="15sp"
                android:background="#C0C0C0"
                android:checked="true"
                android:text="Select All"
                android:textColor="#ffffff"
                android:textSize="22sp" />

            <CheckBox
                android:id="@+id/clothing"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:checked="true"
                android:text="Clothing"
                android:textColor="#ffffff" />

            <CheckBox
                android:id="@+id/electronics"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:checked="true"
                android:text="Electronics"
                android:textColor="#ffffff" />

            <CheckBox
                android:id="@+id/footwear"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:checked="true"
                android:text="Footwear"
                android:textColor="#ffffff" />

            <CheckBox
                android:id="@+id/health"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:checked="true"
                android:text="Health Care"
                android:textColor="#ffffff" />

            <CheckBox
                android:id="@+id/hardware"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:checked="true"
                android:text="Hardware"
                android:textColor="#ffffff" />
           
            <CheckBox
                android:id="@+id/sports"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:checked="true"
                android:text="Sports"
                android:textColor="#ffffff" />
           
            <CheckBox
                android:id="@+id/book"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:checked="true"
                android:text="Book"
                android:textColor="#ffffff" />
           
            <CheckBox
                android:id="@+id/medicine"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:checked="true"
                android:text="Medicine"
                android:textColor="#ffffff" />
           
            <CheckBox
                android:id="@+id/kids"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:checked="true"
                android:text="Kids"
                android:textColor="#ffffff" />
           
            <CheckBox
                android:id="@+id/kitchen"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:checked="true"
                android:text="Hardware"
                android:textColor="#ffffff" />
           
            <CheckBox
                android:id="@+id/grocery"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:checked="true"
                android:text="Grocery and Vegetable"
                android:textColor="#ffffff" />
           
            <CheckBox
                android:id="@+id/food"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:checked="true"
                android:text="Order Food"
                android:textColor="#ffffff" />
           
            <CheckBox
                android:id="@+id/lens"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:checked="true"
                android:text="Lens Shop"
                android:textColor="#ffffff" />
        </LinearLayout>
    </ScrollView>

    <Button
        android:id="@+id/done"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal|center"
        android:background="#95B9C7"
        android:text="Done" />

</LinearLayout>

Finally you will get the layout as shown in the figure..

Thanks....Comment if you have any doubts. I would love to answer that.