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

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();
}
}