Tic Tac Terni - My New Android application

Tic Tac Terni

An early variant of Tic-tac-toe was played in the Roman Empire, around the first century BC. It was called Terni Lapilli and instead of having any number of pieces, each player only had three, thus they had to move them around to empty spaces to keep playing. The game's grid markings have been found chalked all over Rome.

Tic Tac Terni is the android version of Terni Lapilli. Even though it is similar to Tic Tac Toe, there will be always a winner, no more boring DRAW games.

Enjoy playing Tic Tac Terni with Droid or with your friends. Three amazing themes and coins to choose for playing. 

Download the app from - https://play.google.com/store/apps/details?id=com.gooramobile.tictacterni

Android - Sharing image with copyright text in social network

We all know in today’s social media world, we all like to share image and text with our friends. One of the must feature in application is share feature. In this blog let us explore how to share a simple Image file with embedded text on the image like copyright text of your application.

This feature will be useful when one like’s to share the game achievements and status.

Step 1:

Create an activity shareimageActivity.

Modify the main.xml file; let us add an image view and a share button.

<?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="Lovely Quotes" />

    <ImageView

        android:id="@+id/motivation_img"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:src="@drawable/cool_thought" />

    <Button

        android:id="@+id/share_btn"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="Share" />

</LinearLayout>

Step 2:

Create a function drawTextToBitmap() This function takes the resource ID of the image and the text which has to be written on the image.

Here we create a bitmap and pass the bitmap to canvas and the text is written on the canvas and the bitmap is returned.

    public Bitmap drawTextToBitmap(Context gContext, int gResId,

              String gText)

     {

              Resources resources = gContext.getResources();

              float scale = resources.getDisplayMetrics().density;

              Bitmap bitmap =

                  BitmapFactory.decodeResource(resources, gResId);

             

              android.graphics.Bitmap.Config bitmapConfig =

                  bitmap.getConfig();

              // set default bitmap config if none

              if(bitmapConfig == null) {

                bitmapConfig = android.graphics.Bitmap.Config.ARGB_8888;

              }

              // resource bitmaps are imutable,

              // so we need to convert it to mutable one

              bitmap = bitmap.copy(bitmapConfig, true);

             

              Canvas canvas = new Canvas(bitmap);

              // new antialised Paint

              Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);

              // text color - #3D3D3D

              paint.setColor(Color.rgb(61, 61, 61));

              // text size in pixels

              paint.setTextSize((int) (14 * scale));

              // text shadow

              paint.setShadowLayer(1f, 0f, 1f, Color.WHITE);

             

              // draw text to the Canvas center

              Rect bounds = new Rect();

              paint.getTextBounds(gText, 0, gText.length(), bounds);

              int x = (bitmap.getWidth() - bounds.width())/2;

              int y = (bitmap.getHeight() + bounds.height())/2;

             

              canvas.drawText(gText, x * scale, y * scale, paint);

             

              return bitmap;

            }

Step 3:

In OnCreate(), get the share button and in onClicklistener() of the button let us create a new bitmap file and save the bitmap file with current date and time along with our appname.

We use Intent.ACTION_SEND to send the image from one activity to another.

To explore more on this feature how to send simple text, binary, multiple content visit http://developer.android.com/training/sharing/send.html

share_btn = (Button) findViewById(R.id.share_btn);

       

share_btn.setOnClickListener(new OnClickListener() {

                 

      @Override

      public void onClick(View v) {

           

// Create the bitmap, send the image and text has to be               // written   

Bitmap share_img = drawTextToBitmap(v.getContext(), R.drawable.cool_thought, "GRAPHICS BY SUBHA" );

ByteArrayOutputStream bytes = new ByteArrayOutputStream();

share_img.compress(Bitmap.CompressFormat.JPEG, 100, bytes);

            SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMdd_HHmmss");

            String currentDateandTime = sdf.format(new Date());

String filename = currentDateandTime+ "appname.jpg";

Log.i("ShareImg", Environment.getExternalStorageDirectory() + File.separator + filename);

File f = new File(Environment.getExternalStorageDirectory() + File.separator + filename);

            try {

                            f.createNewFile();

                            FileOutputStream fo = new FileOutputStream(f);

                            fo.write(bytes.toByteArray());

            } catch (IOException e) {                      

                                e.printStackTrace();

                        }

//Create an Intent for sharing the image

            Intent share = new Intent(Intent.ACTION_SEND);

            share.setType("image/jpg");

                       

share.putExtra(Intent.EXTRA_STREAM, Uri.parse("file:///sdcard/"+filename));

share.putExtra(Intent.EXTRA_TITLE, "Did this cool water effect using GIMP, for instructions, http://www.gimpusers.com/tutorials/waterdrops-on-a-surface.html");

            startActivity(Intent.createChooser(share, "Share Image"));

                       

                  }

            });

Enjoy sharing your image with copyright text J

Android - Horizontal Text Scrolling like credits scroll in Angry Birds

I always like credits scrolling in Angry Birds. It gives you feeling of watching a movie till end. All names slowly scrolling in the screen gives a dramatic effect. Let us see how to add a scrolling like that.

Create a new android project scrolltext and new activity scrolltextactivity.

Step 1:

In main.xml add a TextView

<?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"
     >
         <TextView
        android:id="@+id/textview"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_centerInParent="true"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:text="@string/hello"
        android:gravity="bottom"
        />
</RelativeLayout>

Step 2:

Now lets go to our scrolltextactivity, get the textview.  After getting the textview, let us create a new scroller and set this new scroller to our textview.


public class ScrolltextActivity extends Activity {
    /** Called when the activity is first created. */
Scroller myscroll = null;
TextView tvData = null;
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        
        tvData = (TextView)findViewById(R.id.textview);
        
        myscroll = new Scroller(ScrolltextActivity.this,
        new LinearInterpolator()); // create new scroller
        
        tvData.setScroller(myscroll); // set the scroller to text view 

    }

Step 3:

Now this alone doesn't do the scrolling. Let us add a new function scroll()

startScroll()

start scrolling by providing a starting point and the distance to travel. The scroll will use the default value of 250 milliseconds for the duration.

Parameters

startX	Starting horizontal scroll offset in pixels. Positive numbers will scroll the content to the left.
startY	Starting vertical scroll offset in pixels. Positive numbers will scroll the content up.
dx	Horizontal distance to travel. Positive numbers will scroll the content to the left.
dy	Vertical distance to travel. Positive numbers will scroll the content up.

public void Scroll() {
           tvData.setText(R.string.hello);
            myscroll.startScroll(0, 0, 0, 500,10000);
        }

Now call scroll() in our OnCreate function after setscroller

Step 4:

Create a new runnable compscroll

computeScrollOffset() returns false when the animation is over else it returns true. So we start a thread where we keep checking if the scroll is done. Once it it done we again start scrolling here.


private Runnable compScroll = new Runnable() {

@Override
public void run() {
if(false == myscroll.computeScrollOffset())
{
Log.i("App", "Scroll Again");
Scroll();
}

}
};

Step 5:

Now start a thread in OnCreate() after calling scroll()


Thread thread = new Thread()
        {
            @Override
            public void run() {
                try {
                    while(true) {
                    Log.i("App", "Thread Run");
                        sleep(1000);
                        ScrolltextActivity.this.runOnUiThread(compScroll);
                    }
                } catch (InterruptedException e) {
                    e.printStackTrace();
                }
            }
        };

        thread.start();

Complete Activity Code:

package com.myexample.scrolltext;

import android.app.Activity;
import android.os.Bundle;
import android.util.Log;
import android.view.animation.LinearInterpolator;
import android.widget.Scroller;
import android.widget.TextView;

public class ScrolltextActivity extends Activity {
    /** Called when the activity is first created. */
Scroller myscroll = null;
TextView tvData = null;
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        
        tvData = (TextView)findViewById(R.id.textview);
        
        myscroll = new Scroller(ScrolltextActivity.this,
        new LinearInterpolator());
        
        tvData.setScroller(myscroll);
        Scroll();    

        
        Thread thread = new Thread()
        {
            @Override
            public void run() {
                try {
                    while(true) {
                    Log.i("App", "Thread Run");
                        sleep(1000);
                        ScrolltextActivity.this.runOnUiThread(compScroll);
                    }
                } catch (InterruptedException e) {
                    e.printStackTrace();
                }
            }
        };

        thread.start();
    }
    
   

private Runnable compScroll = new Runnable() {

@Override
public void run() {
if(false == myscroll.computeScrollOffset())
{
Log.i("App", "Scroll Again");
Scroll();
}

}
};
        
        public void Scroll() {
           tvData.setText(R.string.hello);
        int length = tvData.getLineCount();
        myscroll.startScroll(0, 0, 0, 500,10000);
        
    }
}


Now enjoy your scroll view. I am sure this code can be further enhanced to any of the views.

Android - Progress Bar and Customizing Progress Bar

Progress Bar

I am sure most of our application need progress bar (for status like loading, downloading a data, media streaming). Is there any application without a progress bar? I doubt that. Lets explore how to show progress bar in Android.


Cyclic Progress Bar

Below code is for showing a progress bar with cyclic animation


public class CustomprogressbarActivity extends Activity {

    /** Called when the activity is first created. */

    @Override

    public void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.main);

    }

}

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" />

   

     <ProgressBar        

         android:layout_width="wrap_content"        

         android:layout_height="wrap_content"        

         style="@android:style/Widget.ProgressBar.Small"        

         android:layout_marginRight="5dp" />

</LinearLayout>

Other progress bar styles provided by the system include:

·         Widget.ProgressBar.Horizontal

·         Widget.ProgressBar.Small

·         Widget.ProgressBar.Large

·         Widget.ProgressBar.Inverse

·         Widget.ProgressBar.Small.Inverse

·         Widget.ProgressBar.Large.Inverse

Horizontal Scroll Bar

Next lets see how to show a horizontal scroll bar. In this example we will also see how to update a progress bar from another thread.

In Android, all the views are updated in UI thread. There fore when we try to update an UI (like updating text, progress bar) from another thread, our application will crash.

To avoid this we need to post an handler to UI thread for updating the UI.

package com.example.customprogressbar;

import android.app.Activity;

import android.os.Bundle;

import android.os.Handler;

import android.widget.ProgressBar;

public class CustomprogressbarActivity extends Activity {

    /** Called when the activity is first created. */

                ProgressBar pb;

                private static int x = 0;

                private Handler mHandler;

    @Override

    public void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.main);

        mHandler = new Handler();

        pb = (ProgressBar)findViewById(R.id.progress);

                                Thread working = new Thread(new Runnable() {

                                               

                                                @Override

                                                public void run() {

                                                                while(x<=100)

                                                                {

                                                                                try {

                                                                                                Thread.sleep(1000);

                                                                                } catch (InterruptedException e) {

                                                                                                // TODO Auto-generated catch block

                                                                                                e.printStackTrace();

                                                                                }

                                                                x = x+5;

                                                                // Update the progress bar

                mHandler.post(new Runnable() {

                    public void run() {

                        pb.setProgress(x);

                    }

                });

                                                               

                                                }

                                                }

                                });

                               

                                working.start();

    }

}

Main.Xml file for horizontal scrollbar

<?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" />

   

     <ProgressBar        

         android:layout_width="wrap_content"        

         android:layout_height="wrap_content"        

         style="@android:style/Widget.ProgressBar.Horizontal"        

         android:layout_marginRight="5dp"

         android:id = "@+id/progress"

         />

</LinearLayout>


We will get below UI :)

Customizing Progress Bar

Our next question will be can I customize the progress bar???? Like changing the background color, fill color???

Ofcourse we can do it :) Below example will help us to do the same,


Create an xml file in drawable folder (/res/drawable), search_progress_drawable.xml.

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

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:id="@android:id/background">

        <shape>

            <corners android:radius="25dip" />

            <gradient android:startColor="#C0C0C0" android:centerColor="#F8F8FF"

                android:centerY="0.75" android:endColor="#ffffff" android:angle="90" />

            <stroke android:width="1dp" android:color="#6B8E23" />

        </shape>

    </item>

    <item android:id="@android:id/progress">

        <clip>

            <shape>

                <corners android:radius="25dip" />

                <gradient android:startColor="#9ACD32" android:endColor="#FFFF00"

                    android:angle="90" />

                <stroke android:width="1dp" android:color="#d20404" />

            </shape>

        </clip>

    </item>

</layer-list>

Main.xml file

<?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" />

   

     <ProgressBar        

         android:layout_width="200dp"        

         android:layout_height="wrap_content"         

         style="@android:style/Widget.ProgressBar.Horizontal"        

         android:layout_marginRight="5dp"

         android:progressDrawable="@drawable/search_progress_drawable"

         android:id = "@+id/progress"

         />

</LinearLayout>




Wow look what an beautiful progress Bar :)

Now we all can show progress Bar in our Android application :) Learning is FUN :)