Introduction to Android Studio

A high level introduction to Android Studio, the new IDE for Android application development. Learn why you should migrate your projects to Android Studio now and how it can help you be more productive as a developer. Rich layout editor, handy suggestions and fixes, new Android project view - these are just some of the things you can expect from the IDE, which is built on the successful IntelliJ IDEA.

Custom ImageView to show touched portion only

Here is a custom ImageView (TouchImageView), override onTouchEvent(MotionEvent event) and onDraw(Canvas canvas) methods, to make it display the touched portion only.

package com.example.androidtouchimageview;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapShader;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.Shader;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.widget.ImageView;

public class TouchImageView extends ImageView {

 private float radius = 0;
 private Paint paint = null;

 private float x;
 private float y;
 private boolean touched = false;

 public TouchImageView(Context context) {
  super(context);
  // TODO Auto-generated constructor stub
 }

 public TouchImageView(Context context, AttributeSet attrs) {
  super(context, attrs);
  // TODO Auto-generated constructor stub
 }

 public TouchImageView(Context context, AttributeSet attrs, int defStyleAttr) {
  super(context, attrs, defStyleAttr);
  // TODO Auto-generated constructor stub
 }

 @Override
 public boolean onTouchEvent(MotionEvent event) {
  int action = event.getAction();
  touched = (action == MotionEvent.ACTION_DOWN 
    || action == MotionEvent.ACTION_MOVE);
  x = event.getX();
  y = event.getY();
  
  int w = getWidth();
  int h = getHeight();
  if(w>=h){
   radius = h * event.getSize();
  }else{
   radius = w * event.getSize();
  }
  
  invalidate();
  return true;
 }

 @Override
 protected void onDraw(Canvas canvas) {
  if (paint == null) {
   Bitmap bm = Bitmap.createBitmap(
    getWidth(), 
    getHeight(),
    Bitmap.Config.ARGB_8888);
   Canvas originalCanvas = new Canvas(bm);
   super.onDraw(originalCanvas);

   Shader shader = new BitmapShader(bm, 
    Shader.TileMode.CLAMP,
    Shader.TileMode.CLAMP);

   paint = new Paint();
   paint.setShader(shader);
  }

  canvas.drawColor(getSolidColor());
  if (touched) {
   canvas.drawCircle(x, y, radius, paint);
  }
 }

}

Layout

<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:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:orientation="vertical"
    tools:context="com.example.androidtouchimageview.MainActivity" >

    <TextView
        android:id="@+id/title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="android-coding.blogspot.com"
        android:textSize="28dp"
        android:textStyle="bold" />
    
    <com.example.androidtouchimageview.TouchImageView
        android:id="@+id/image1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_launcher" />
    
    <com.example.androidtouchimageview.TouchImageView
        android:id="@+id/image2"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/ic_launcher" />

</LinearLayout>

Implement color animation with ValueAnimator

To implement color animation with ValueAnimator:

package com.example.valueanimatorofcolor;

import com.example.objectanimatorofargb.R;

import android.animation.ArgbEvaluator;
import android.animation.ObjectAnimator;
import android.animation.ValueAnimator;
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.TextView;

public class MainActivity extends Activity {

 TextView title;
 Button btnStart;
 ImageView image;

 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main);
  title = (TextView) findViewById(R.id.title);
  image = (ImageView) findViewById(R.id.image);
  btnStart = (Button) findViewById(R.id.start);
  
  btnStart.setOnClickListener(new OnClickListener(){

   @Override
   public void onClick(View v) {
    startColorAnimation(image);
   }});
 }
 
 private void startColorAnimation(View view){
  //int colorStart = 0xFFffffff;
  int colorStart = view.getSolidColor();
  int colorEnd   = 0xFF000000;

  ValueAnimator colorAnim = ObjectAnimator.ofInt(
    view, "backgroundColor", colorStart, colorEnd);
  colorAnim.setDuration(2000);
  colorAnim.setEvaluator(new ArgbEvaluator());
  colorAnim.setRepeatCount(1);
  colorAnim.setRepeatMode(ValueAnimator.REVERSE);
  colorAnim.start();
 }

}

<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"
    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="com.example.valueanimatorofcolor.MainActivity" >

    <TextView
        android:id="@+id/title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="android-coding.blogspot.com"
        android:textSize="28dp"
        android:textStyle="bold" />

    <Button
        android:id="@+id/start"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Start Animation" />

    <ImageView
        android:id="@+id/image"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/ic_launcher" />

</LinearLayout>

Example of Reveal animations on Android 5.0

Android 5.0, added in API level 21, introduce ViewAnimationUtils.createCircularReveal (View view, int centerX, int centerY, float startRadius, float endRadius) method returns an Animator which can animate a clipping circle, to animate a clipping circle to reveal or hide a view.

package com.example.androidrevealeffect;

import android.animation.Animator;
import android.animation.AnimatorListenerAdapter;
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.ViewAnimationUtils;
import android.widget.CompoundButton;
import android.widget.CompoundButton.OnCheckedChangeListener;
import android.widget.ImageView;
import android.widget.TextView;
import android.widget.ToggleButton;

public class MainActivity extends Activity {

 TextView title;
 ImageView image;
 ToggleButton btnHideShow;

 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main);
  title = (TextView)findViewById(R.id.title);
  image = (ImageView) findViewById(R.id.image);
  btnHideShow = (ToggleButton) findViewById(R.id.hideshow);

  btnHideShow.setOnCheckedChangeListener(new OnCheckedChangeListener() {

   @Override
   public void onCheckedChanged(CompoundButton buttonView,
     boolean isChecked) {
    if(isChecked){
     hide(title);
     hide(image);
    }else{
     show(title);
     show(image);
    }

   }
  });
 }

 // To reveal a previously invisible view using this effect:
 private void show(final View view) {
  // get the center for the clipping circle
  int cx = (view.getLeft() + view.getRight()) / 2;
  int cy = (view.getTop() + view.getBottom()) / 2;

  // get the final radius for the clipping circle
  int finalRadius = Math.max(view.getWidth(), view.getHeight());

  // create the animator for this view (the start radius is zero)
  Animator anim = ViewAnimationUtils.createCircularReveal(view, cx, cy,
    0, finalRadius);
  anim.setDuration(1000);

  // make the view visible and start the animation
  view.setVisibility(View.VISIBLE);
  anim.start();
 }

 // To hide a previously visible view using this effect:
 private void hide(final View view) {

  // get the center for the clipping circle
  int cx = (view.getLeft() + view.getRight()) / 2;
  int cy = (view.getTop() + view.getBottom()) / 2;

  // get the initial radius for the clipping circle
  int initialRadius = view.getWidth();

  // create the animation (the final radius is zero)
  Animator anim = ViewAnimationUtils.createCircularReveal(view, cx, cy,
    initialRadius, 0);
  anim.setDuration(1000);

  // make the view invisible when the animation is done
  anim.addListener(new AnimatorListenerAdapter() {
   @Override
   public void onAnimationEnd(Animator animation) {
    super.onAnimationEnd(animation);
    view.setVisibility(View.INVISIBLE);
   }
  });

  // start the animation
  anim.start();
 }

}

<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:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:orientation="vertical"
    tools:context="com.example.androidrevealeffect.MainActivity" >

    <TextView
        android:id="@+id/title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="android-coding.blogspot.com"
        android:textSize="28dp"
        android:textStyle="bold" />

    <ToggleButton
        android:id="@+id/hideshow"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textOn="Show"
        android:textOff="Hide" />
    
    <ImageView
        android:id="@+id/image"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/ic_launcher"
        android:background="@android:color/darker_gray" />

</LinearLayout>

ObjectAnimator to animate coordinates along a path

In Android 5.0, android:minSdkVersion="21", ObjectAnimator has a new constructors that enable you to animate coordinates along a path using two or more properties at once. Here is a example:

package com.example.androidobjectanimator;

import android.animation.ObjectAnimator;
import android.app.Activity;
import android.graphics.Path;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;

public class MainActivity extends Activity {

 LinearLayout mainLayout;
 TextView textTitle;
 Button buttonMove;
 ImageView image;

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

  mainLayout = (LinearLayout) findViewById(R.id.mainlayout);
  mainLayout.setOnClickListener(MyOnClickListener);
  textTitle = (TextView) findViewById(R.id.title);
  textTitle.setOnClickListener(MyOnClickListener);
  buttonMove = (Button) findViewById(R.id.buttonflip);
  buttonMove.setOnClickListener(MyOnClickListener);
  image = (ImageView) findViewById(R.id.image);
  image.setOnClickListener(MyOnClickListener);
 }

 OnClickListener MyOnClickListener = 
  new OnClickListener() {

  @Override
  public void onClick(View v) {
   moveit(v);
  }

 };

 private void moveit(final View view) {

  float x = view.getX();
  float y = view.getY();
  Path path = new Path();

  path.moveTo(x + 0, y + 0);
  path.lineTo(x + 100, y + 150);
  path.lineTo(x + 400, y + 150);
  path.lineTo(x + 0, y + 0);
  ObjectAnimator objectAnimator = 
   ObjectAnimator.ofFloat(view, View.X,
    View.Y, path);
  objectAnimator.setDuration(3000);
  objectAnimator.start();
 }

}

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/mainlayout"
    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"
    android:orientation="vertical"
    tools:context="com.example.androidflipview.MainActivity" >

    <TextView
        android:id="@+id/title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="android-coding.blogspot.com"
        android:textSize="28dp"
        android:textStyle="bold" />
    
    <Button
        android:id="@+id/buttonflip"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Move" />
    
    <ImageView
        android:id="@+id/image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_launcher" />
    
</LinearLayout>

ObjectAnimator example to rotate view

package com.example.androidflipview;

import android.support.v7.app.ActionBarActivity;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;
import android.animation.ObjectAnimator;
import android.os.Bundle;

public class MainActivity extends ActionBarActivity {

 LinearLayout mainLayout;
 TextView textTitle;
 Button buttonFlip;
 ImageView image;
 
 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main);
  mainLayout = (LinearLayout)findViewById(R.id.mainlayout);
  mainLayout.setOnClickListener(MyOnClickListener);
  textTitle = (TextView)findViewById(R.id.title);
  textTitle.setOnClickListener(MyOnClickListener);
  buttonFlip = (Button)findViewById(R.id.buttonflip);
  buttonFlip.setOnClickListener(MyOnClickListener);
  image = (ImageView)findViewById(R.id.image);
  image.setOnClickListener(MyOnClickListener);

 }
 
 OnClickListener MyOnClickListener = new OnClickListener(){

  @Override
  public void onClick(View v) {
   rotateit(v);
  }
  
 };

    private void rotateit(final View viewToFlip) {
     ObjectAnimator rot = ObjectAnimator.ofFloat(viewToFlip, "rotation", 0f, 360f);
     rot.setDuration(3000);
        rot.start();
     
    }

}

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/mainlayout"
    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"
    android:orientation="vertical"
    tools:context="com.example.androidflipview.MainActivity" >

    <TextView
        android:id="@+id/title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="android-coding.blogspot.com"
        android:textSize="28dp"
        android:textStyle="bold" />
    
    <Button
        android:id="@+id/buttonflip"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Rotate" />
    
    <ImageView
        android:id="@+id/image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_launcher" />
    
</LinearLayout>

Flip view vertically

package com.example.androidflipview;

import android.support.v7.app.ActionBarActivity;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;
import android.animation.ObjectAnimator;
import android.os.Bundle;

public class MainActivity extends ActionBarActivity {

 LinearLayout mainLayout;
 TextView textTitle;
 Button buttonFlip;
 ImageView image;
 
 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main);
  mainLayout = (LinearLayout)findViewById(R.id.mainlayout);
  mainLayout.setOnClickListener(MyOnClickListener);
  textTitle = (TextView)findViewById(R.id.title);
  textTitle.setOnClickListener(MyOnClickListener);
  buttonFlip = (Button)findViewById(R.id.buttonflip);
  buttonFlip.setOnClickListener(MyOnClickListener);
  image = (ImageView)findViewById(R.id.image);
  image.setOnClickListener(MyOnClickListener);

 }
 
 OnClickListener MyOnClickListener = new OnClickListener(){

  @Override
  public void onClick(View v) {
   flipit(v);
  }
  
 };

    private void flipit(final View viewToFlip) {
     ObjectAnimator flip = ObjectAnimator.ofFloat(viewToFlip, "rotationX", 0f, 360f);
     flip.setDuration(3000);
        flip.start();
     
    }

}

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/mainlayout"
    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"
    android:orientation="vertical"
    tools:context="com.example.androidflipview.MainActivity" >

    <TextView
        android:id="@+id/title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="android-coding.blogspot.com"
        android:textSize="28dp"
        android:textStyle="bold" />
    
    <Button
        android:id="@+id/buttonflip"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Flip" />
    
    <ImageView
        android:id="@+id/image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_launcher" />
    
</LinearLayout>

Implement flipping animation horizontally with ObjectAnimator

package com.example.androidflipview;

import android.support.v7.app.ActionBarActivity;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.TextView;
import android.animation.ObjectAnimator;
import android.os.Bundle;

public class MainActivity extends ActionBarActivity {

 TextView textTitle;
 Button buttonFlip;
 ImageView image;
 
 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main);
  textTitle = (TextView)findViewById(R.id.title);
  textTitle.setOnClickListener(MyOnClickListener);
  buttonFlip = (Button)findViewById(R.id.buttonflip);
  buttonFlip.setOnClickListener(MyOnClickListener);
  image = (ImageView)findViewById(R.id.image);
  image.setOnClickListener(MyOnClickListener);

 }
 
 OnClickListener MyOnClickListener = new OnClickListener(){

  @Override
  public void onClick(View v) {
   flipit(v);
  }
  
 };

    private void flipit(final View viewToFlip) {
     ObjectAnimator flip = ObjectAnimator.ofFloat(viewToFlip, "rotationY", 0f, 360f);
     flip.setDuration(3000);
        flip.start();
     
    }

}

<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:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:orientation="vertical"
    tools:context="com.example.androidflipview.MainActivity" >

    <TextView
        android:id="@+id/title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="android-coding.blogspot.com"
        android:textSize="28dp"
        android:textStyle="bold" />
    
    <Button
        android:id="@+id/buttonflip"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Flip" />
    
    <ImageView
        android:id="@+id/image"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/ic_launcher" />
    
</LinearLayout>