Saturday 17 May 2014

How to animate an image to rotate with your finger touch in android

A simple animation to rotate an image with finger touch both left and right.


Lets see how to rotate image with 2D animation. I've used a steering wheel for this to make some sense.





Step 1 : Place an image file in your xml layout.

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"
android:background="#ffffff" >

<ImageView
android:id="@+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:src="@drawable/wheel"
android:contentDescription="@string/wheel" />

</RelativeLayout>


Step 2 : Let the main class implement onTouchListener and use the MotionEvent for rotation. Just copy the below code.

MainActivity.java :

package com.exampl.simplegame;

import android.app.Activity;
import android.os.Bundle;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.OnTouchListener;
import android.view.animation.RotateAnimation;
import android.widget.ImageView;

public class MainActivity extends Activity implements OnTouchListener{
private ImageView wheel;
private double mCurrAngle = 0;
private double mPrevAngle = 0;
ImageView bask;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

wheel=(ImageView)findViewById(R.id.imageView1);
wheel.setOnTouchListener(this);
}

@Override
public boolean onTouch(final View v, MotionEvent event) {
final float xc = wheel.getWidth() / 2;
final float yc = wheel.getHeight() / 2;

final float x = event.getX();
final float y = event.getY();

switch (event.getAction()) {
case MotionEvent.ACTION_DOWN: {
wheel.clearAnimation();
mCurrAngle = Math.toDegrees(Math.atan2(x - xc, yc - y));
break;
}
case MotionEvent.ACTION_MOVE: {
mPrevAngle = mCurrAngle;
mCurrAngle = Math.toDegrees(Math.atan2(x - xc, yc - y));
animate(mPrevAngle, mCurrAngle, 0);
System.out.println(mCurrAngle);
break;
}
case MotionEvent.ACTION_UP : {
mPrevAngle = mCurrAngle = 0;
break;
}
}
return true;
}

private void animate(double fromDegrees, double toDegrees, long durationMillis) {
final RotateAnimation rotate = new RotateAnimation((float) fromDegrees, (float) toDegrees,
RotateAnimation.RELATIVE_TO_SELF, 0.5f,
RotateAnimation.RELATIVE_TO_SELF, 0.5f);
rotate.setDuration(durationMillis);
rotate.setFillEnabled(true);
rotate.setFillAfter(true);
wheel.startAnimation(rotate);
System.out.println(mCurrAngle);
}
}

Friday 16 May 2014

How to set custom font for text view or button in android

To have your own customized application of your own theme make your text look your style with custom font for your textviews and buttons.

You can check this link for custom font for spinners in android.

For custom fonts for textviews and buttons follow the simple steps given in this post.



Step 1 : In your Layout file place some text views and buttons as required for your app.

Step 2 : Step 2: Create a folder in Assets and name it as fonts. Then paste your typeface (fontname.ttf) file in fonts folder.

Step 3 : Create a typeface of your font and assign it for your buttons and textviews in your mainactivity.

MainActivity.java :

package com.exam.sample;
import android.app.Activity;
import android.app.AlertDialog;
import android.content.DialogInterface;
import android.graphics.Typeface;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.widget.Button;
import android.widget.TextView;

public class MainActivity extends Activity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

Typeface Font = Typeface.createFromAsset(getAssets(),"fonts/idr.ttf");

TextView tv1 = (TextView)findViewById(R.id.textView1);
TextView tv2 = (TextView)findViewById(R.id.textView2);
Button bt1 = (Button)findViewById(R.id.button1);

tv1.setTypeface(Font);
tv2.setTypeface(Font);
bt1.setTypeface(Font);
}

How to create custom dialog box or alert box in android

Here's a simple alert box with customization. We create the alert box through a xml layout, here we can drag any type of widgets, text fields etc.. like spinners, edit text, image in a alert box.


To create simple alert box without creating xml layout check this link.

By creating alert box though xml layout it provides a wide variety of options to be inserted in a alert box easily.





Step 1 : Create an android project. And in layout folder create a new layout for alert box.

Customize your layout file how your alert box should look like.

custom_layout.xml :

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:orientation="vertical"
android:layout_width="match_parent"
 android:layout_height="wrap_content">
 
<TextView
android:id="@+id/title"
android:src="@drawable/batman"
android:layout_width="match_parent"
android:layout_height="64dp"
android:text="LOGIN"
android:gravity="center"
android:textSize="35sp"
android:background="#FFFFBB33"/>

<EditText
android:id="@+id/username"
android:inputType="textEmailAddress"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:layout_marginLeft="4dp"
android:layout_marginRight="4dp"
android:layout_marginBottom="4dp"
android:hint="username" />
 
<EditText
android:id="@+id/password"
android:inputType="textPassword"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:layout_marginLeft="4dp"
android:layout_marginRight="4dp"
android:layout_marginBottom="16dp"
android:fontFamily="sans-serif"
android:hint="password"/>
</LinearLayout>

Step 2 : In your main activity file create alert dialog and inflate the view for alert box.

MainActivity.java :

package com.exam.sample;

import android.app.Activity;
import android.app.AlertDialog;
import android.content.DialogInterface;
import android.os.Bundle;
import android.view.LayoutInflater;

public class MainActivity extends Activity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
logout();
}

public void logout(){
AlertDialog.Builder alertDialog = new AlertDialog.Builder(MainActivity.this);
LayoutInflater inflater = this.getLayoutInflater();
alertDialog.setView(inflater.inflate(R.layout.custom_layout, null));

/* When positive (yes/ok) is clicked */
alertDialog.setPositiveButton("Yes", new DialogInterface.OnClickListener() {
public void onClick(DialogInterface dialog,int which) {
dialog.cancel(); // Your custom code
}
});

/* When negative (No/cancel) button is clicked*/
alertDialog.setNegativeButton("No", new DialogInterface.OnClickListener() {
public void onClick(DialogInterface dialog, int which) {
finish(); // Your custom code
}
});
alertDialog.show();
}
}

Thursday 15 May 2014

Creating Alert box or Dialog box in android while onClick button.

This example program is for beginners those who want alert box in their application. I will create a alert box for logout that closes the application. With two options y/n.


To create alert box using xml and customize alert box check this link.

This is how your alert box looks.



I have just place a button in this activity, on-clicking this button pops out a alert box and asks for confirmation for logout.

MainActivity.java : 


package com.exam.sample;

import android.app.Activity;
import android.app.AlertDialog;
import android.content.DialogInterface;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.Toast;

public class MainActivity extends Activity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Button logout = (Button)findViewById(R.id.button1);
logout.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
logout();
}
});
}

public void logout(){
AlertDialog.Builder alertDialog = new AlertDialog.Builder(MainActivity.this);
 
alertDialog.setTitle("Logout"); // Sets title for your alertbox

alertDialog.setMessage("Are you sure you want to Logout ?"); // Message to be displayed on alertbox

alertDialog.setIcon(R.drawable.logout1); // Icon for your alertbox

/* When positive (yes/ok) is clicked */
alertDialog.setPositiveButton("Yes", new DialogInterface.OnClickListener() {
public void onClick(DialogInterface dialog,int which) {
finish();
Toast.makeText(MainActivity.this,"Successfully Logged Out", Toast.LENGTH_LONG).show();  
}
});

/* When negative (No/cancel) button is clicked*/
alertDialog.setNegativeButton("No", new DialogInterface.OnClickListener() {
public void onClick(DialogInterface dialog, int which) {
dialog.cancel();
}
});
alertDialog.show();
}
}

Wednesday 14 May 2014

How to set custom font, Font size, Font color and Text background for spinner in android

Customize your spinner as you like with simple steps. Change your font color and size of your spinner text and even background of your text. Make your app look your way.

You will go through some simple steps to make changes to your android spinner's font color, font size, background color and font type.


For customizing your font type for spinner check this link.




Step 1: Just create a spinner in your layout

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"
tools:context=".MainActivity" >

<Spinner
android:id="@+id/spinner1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="44dp" />
</RelativeLayout>


Step 2: In your layout file create two android xml layout file.

First : 
selected_item.xml with TextView.

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:textColor="#FF5050"
android:textSize="30sp">
</TextView>


Second :
drpdown_item with CheckedTextView.

<?xml version="1.0" encoding="utf-8"?>
<CheckedTextView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:singleLine="true"
android:ellipsize="marquee"
android:textColor="#0099CC"
android:textSize="30sp"
android:background="#4d4d4d" >
</CheckedTextView>


Step 3: This is your main activity class according to your need call the method.
MainActivity.java:

package com.exam.customspinner;

import android.app.Activity;
import android.os.Bundle;
import android.widget.ArrayAdapter;
import android.widget.Spinner;

public class MainActivity extends Activity {

String list[]={"Jan","Feb","March","April"};

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

/* Call the method you wish */

spinnermeth();
// spinnermeth1(); // Make changes to those two file to get desired result
}

public void spinnermeth(){
Spinner mySpinner = (Spinner) findViewById(R.id.spinner1);
ArrayAdapter<String> adapter = new ArrayAdapter<String>(this,R.layout.selected_item, list);
mySpinner.setAdapter(adapter);
}

public void spinnermeth1(){
Spinner mySpinner = (Spinner) findViewById(R.id.spinner1);
ArrayAdapter<String> adapter = new ArrayAdapter<String>(this,R.layout.selected_item, list);
adapter.setDropDownViewResource(R.layout.dropdown_item);
mySpinner.setAdapter(adapter);
}
}