Wednesday, June 19, 2013

ANDROID TRAFFIC LIGHT ANIMATION

In this tutorial we will go into the ANIMATIONS side of Android.

Lets take the example of Traffic Light.

SITUATION:

1.Traffic Light works with respect to time(some amount of milliseconds)
2.Three lights correspondingly to change the transactions.
3. Light should change automatically.



Lets proceed to the deployment process

STEP 1:Open Eclipse and Select NEW--->PROJECT--->ANDROID APPLICATION PROJECT.

STEP 2:A window appears and include Project Name as Traffic light(Remember first letter should always be in uppercase) and package name as com.sai.trafficlight(YOUR CHOICE)

Then proceed to the main window of our project.

In the left pane i.e PROJECT EXPLORER pane, under the res folder,create a new folder named Drawable to have the Nine Patch (PNG)images of the TRAFFIC LIGHTS.

DRAWABLE FOLDER CONTAINS THE FOLLOWING ITEMS


----->IC LAUNCHER

--->RED.PNG

----->RED2.PNG

----->RED_YELLOW.PNG

-------->YELLOW.PNG

----------->GREEN.PNG

Along with these it contains the XML i.e the animation list.

TAFFICLIGHTS.XML:(source file for the layout folder)

<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
  android:oneshot="false">
  <item android:drawable="@drawable/red" android:duration="2000" />
  <item android:drawable="@drawable/red_yellow" android:duration="2000" />
  <item android:drawable="@drawable/green" android:duration="2000" />
  <item android:drawable="@drawable/red2" android:duration="2000" />
 <item android:drawable="@drawable/yello"android:duration="2000"/>
  
</animation-list>

Here the png images glows for 2000 mill seconds and then changes automatically as in the TRAFFIC LIGHT.

Next,res/layout:

LAYOUT.XML:

<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:orientation="vertical">

    <ImageView 
        android:id="@+id/iv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/trafficlights" />

</LinearLayout>


Next move on the src folder where the Main_Activity java file exists.

package com.sai.traffic;

import android.os.Bundle;
import android.app.Activity;
import android.graphics.drawable.AnimationDrawable;
import android.view.Menu;
import android.widget.ImageView;

public class MainActivity extends Activity {
AnimationDrawable lightsAnimation;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ImageView lights = (ImageView)findViewById(R.id.iv);-->USING R.ID
lightsAnimation= (AnimationDrawable)lights.getDrawable();--->USING get()
}

@Override
public void onWindowFocusChanged(boolean hasFocus) {
// TODO Auto-generated method stub
super.onWindowFocusChanged(hasFocus);>
                 //oncreate()method which keeps the particular window focused//
lightsAnimation.start(); ----->Animation begins
}

@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;
}

}

Thus Android Animation has been made easily.

https://drive.google.com/folderview?id=0B2IcKyXPw18dbGRiMVlrZWt5M2c&usp=sharing

Tuesday, June 18, 2013

CALCULATOR IN ANDROID





In this tutorial we will see how to create a SIMPLE CALCULATOR in ANDROID.

STEP 1: Click on Project-->Android Project in the ECLIPSE.

STEP 2:Name the project to be calculator and package as com.calculator(YOU CAN HAVE DESIRE NAME)

STEP 3: On the left pane of the main window,choose layout folder under res folder.

Change the layout folder as follows.
Here we use Relative Layout along with Table Layout to display the numbers in calculator.
Text View is used to make type the numbers on the screen with help of Buttons.

ACTIVITY_MAIN.XML:

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

    <TextView
        android:id="@+id/txtResultId"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_margin="@dimen/padding_small"
        android:background="#cccccc"
        android:gravity="right"
        android:padding="@dimen/padding_medium" />

    <TableLayout
        android:id="@+id/tableId"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/txtResultId"
        android:layout_margin="@dimen/padding_small" >

        <TableRow>

            <Button
                android:id="@+id/btnNum7Id"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="@string/text_seven" />

            <Button
                android:id="@+id/btnNum8Id"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="@string/text_eight" />

            <Button
                android:id="@+id/btnNum9Id"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="@string/text_nine" />

            <Button
                android:id="@+id/btnDivId"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="@string/text_div" />
        </TableRow>

        <TableRow>

            <Button
                android:id="@+id/btnNum4Id"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="@string/text_four" />

            <Button
                android:id="@+id/btnNum5Id"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="@string/text_five" />

            <Button
                android:id="@+id/btnNum6Id"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="@string/text_six" />

            <Button
                android:id="@+id/btnMulId"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="@string/text_mul" />
        </TableRow>

        <TableRow>

            <Button
                android:id="@+id/btnNum1Id"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="@string/text_one" />

            <Button
                android:id="@+id/btnNum2Id"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="@string/text_two" />

            <Button
                android:id="@+id/btnNum3Id"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="@string/text_three" />

            <Button
                android:id="@+id/btnSubId"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="@string/text_sub" />
        </TableRow>

        <TableRow>

            <Button
                android:id="@+id/btnNum0Id"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="@string/text_zero" />

            <Button
                android:id="@+id/btnClearId"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="@string/text_clear" />

            <Button
                android:id="@+id/btnEqualId"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="@string/text_equal" />

            <Button
                android:id="@+id/btnAddId"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="@string/text_add" />
        </TableRow>
    </TableLayout>

</RelativeLayout>

Graphical Layout of our Application.
To add the @dimen/padding_small and @dimen/padding_medium we use dimens.xml under values folder.
Next to add texts to these buttons we use strings.xml under values folder.

DIMENS.XML:
resources>

    <!-- Default screen margins, per the Android Design guidelines. -->
    <dimen name="padding_small">16dp</dimen>
    <dimen name="padding_medium">16dp</dimen>

STRINGS.XML:
</resources>
<?xml version="1.0" encoding="utf-8"?>
<resources>

    <string name="app_name">Calc</string>
    <string name="action_settings">Settings</string>
    <string name="hello_world">Hello world!</string>
    <string name="text_seven">7</string>
<string name="text_eight">8</string>
<string name="text_nine">9</string>
<string name="text_div">/</string>
<string name="text_four">4</string>
<string name="text_five">5</string>
<string name="text_six">6</string>
<string name="text_mul">*</string>
<string name="text_one">1</string>
<string name="text_two">2</string>
<string name="text_three">3</string>
<string name="text_zero">0</string>
<string name="text_clear">C</string>
<string name="text_equal">=</string>
<string name="text_add">+</string>
<string name="text_sub">-</string>
</resources>

Now coming on to main activity that is class file of the application where the main activity takes place for the application to process and compute.

MainActivity.java:

package com.calc;---------->PACKAGE NAME

import android.os.Bundle;
import android.app.Activity;
import android.view.View;
import android.view.View.OnClickListener;   --------->IMPORT CLASS
import android.widget.Button;
import android.widget.TextView;

public class MainActivity extends Activity {
 private TextView txtResult;
 private int result =0;                               --------->LOCAL VARIABLES
 private String inStr="0";
 //Previous operator:'+','-','*','/','=' or ' '
 private char lastOperator =' ';
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

// CALLING THE USED VIEWS AND BUTTONS WITH REFERENCE ID(R.ID.......)
txtResult =(TextView)findViewById(R.id.txtResultId);
txtResult.setText("0");

BtnListener listener = new BtnListener();
((Button)findViewById(R.id.btnNum0Id)).setOnClickListener(listener);
((Button)findViewById(R.id.btnNum1Id)).setOnClickListener(listener);
((Button)findViewById(R.id.btnNum2Id)).setOnClickListener(listener);
((Button)findViewById(R.id.btnNum3Id)).setOnClickListener(listener);
((Button)findViewById(R.id.btnNum4Id)).setOnClickListener(listener);
((Button)findViewById(R.id.btnNum5Id)).setOnClickListener(listener);
((Button)findViewById(R.id.btnNum6Id)).setOnClickListener(listener);
((Button)findViewById(R.id.btnNum7Id)).setOnClickListener(listener);
((Button)findViewById(R.id.btnNum8Id)).setOnClickListener(listener);
((Button)findViewById(R.id.btnNum9Id)).setOnClickListener(listener);
((Button)findViewById(R.id.btnAddId)).setOnClickListener(listener);
((Button)findViewById(R.id.btnSubId)).setOnClickListener(listener);
((Button)findViewById(R.id.btnMulId)).setOnClickListener(listener);
((Button)findViewById(R.id.btnDivId)).setOnClickListener(listener);
((Button)findViewById(R.id.btnClearId)).setOnClickListener(listener);
((Button)findViewById(R.id.btnEqualId)).setOnClickListener(listener);
}

//CREATING BUTTONCLICKLISTENER METHOD
private class BtnListener implements OnClickListener{

@Override
public void onClick(View view) {
// TODO Auto-generated method stub
switch(view.getId()){
case R.id.btnNum0Id:
case R.id.btnNum1Id:
case R.id.btnNum2Id:
case R.id.btnNum3Id:
case R.id.btnNum4Id:
case R.id.btnNum5Id:
case R.id.btnNum6Id:
case R.id.btnNum7Id:
case R.id.btnNum8Id:
case R.id.btnNum9Id:

String inDigit =((Button)view).getText().toString();
if(inStr.equals("0")){
inStr=inDigit;
}else{
inStr +=inDigit;
}
txtResult.setText(inStr);
if(lastOperator== '='){
result= 0;
lastOperator = ' ';
}
break;
case R.id.btnAddId:
compute();
lastOperator= '+';
break;
case R.id.btnSubId:
compute();
lastOperator='-';
break;
case R.id.btnMulId:
compute();
lastOperator='*';
break;
case R.id.btnDivId:
compute();
lastOperator= '/';
case R.id.btnEqualId:
compute();
lastOperator='=';
break;
case R.id.btnClearId:
result=0;
inStr="0";
lastOperator=' ';
txtResult.setText("0");
break;
}
}

//COMPUTATION
private void compute() {
// TODO Auto-generated method stub
int inNum = Integer.parseInt(inStr);
inStr="0";
if(lastOperator==' '){
result= inNum;
}else if(lastOperator== '+'){

result +=inNum;
}else if(lastOperator== '-'){

result -=inNum;
}else if(lastOperator== '*'){
                                     --->ALL COMPUTATION RESULTS PROCESS' 
result *=inNum;
}else if(lastOperator== '/'){  

result /=inNum;
}else if(lastOperator== '='){

// result for next operation
}
txtResult.setText(String.valueOf(result));    ----->SHOWS THE RESULT 
}
}
}

OUTPUT: IN LANDSCAPE MODE




Thus,SIMPLE CALCULATOR is made.