How to convert ImageView's images in circular format

Question

Currently I am working on application in which I flip images on button click. But problem is here that I am using ImageView's images from xml and these are in rectangular format. I want to use these images in circular format.

I search on internet about this problem and I found that most of solutions uses Bitmap images. This means I need to convert Images in bitmap format. How can I convert these.?
Note:- I am using images from Drawable folder.

I found these solutions but don't know how to use them:
How to make an ImageView with rounded corners?

second one:
How to create a circular ImageView in Android?

How to use these solution for my application?
So how to convert images in circular shape?

Here is my MainActivity.java class which I used to flip images on button click.

package com.example.image_changer;

import java.util.ArrayList;

import android.app.Activity;
import android.content.Context;
import android.content.Intent;
import android.graphics.Bitmap;
import android.graphics.Color;
import android.graphics.Typeface;
import android.graphics.drawable.BitmapDrawable;
import android.graphics.drawable.ColorDrawable;
import android.graphics.drawable.Drawable;
import android.media.MediaPlayer;
import android.net.Uri;
import android.os.Bundle;
import android.os.CountDownTimer;
import android.os.Handler;
import android.os.SystemClock;
import android.util.DisplayMetrics;
import android.view.Menu;
import android.view.MenuInflater;
import android.view.MenuItem;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.View.OnTouchListener;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.MediaController;
import android.widget.RelativeLayout;
import android.widget.TextView;
import android.widget.Toast;
import android.widget.VideoView;

public class MainActivity extends Activity {
TextView textView;
ImageView imageView;
ImageView imageView1;
private long startTime = 0L;
private Handler customHandler = new Handler();
long timeInMillisecond = 0L;
long timeSwapBuff = 0L;
long updatedTime = 0L;
Button button;
Button button2;
Button button3;
Button music;
boolean pause;
int flag=0;;
VideoView videoView;

MediaController mediaController;






MediaPlayer mp;
@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    // MainActivity.this.requestWindowFeature(Window.FEATURE_NO_TITLE);
    // MainActivity.this.getWindow().setFlags(
    // WindowManager.LayoutParams.FLAG_FULLSCREEN,
    // WindowManager.LayoutParams.FLAG_FULLSCREEN);

    setContentView(R.layout.activity_main);

    mp = new MediaPlayer();
    mp= MediaPlayer.create(this, R.raw.instrumental);


    textView = (TextView) findViewById(R.id.timerValue);
    button = (Button) findViewById(R.id.button1);
    button3 = (Button)findViewById(R.id.button2);
    button2 = (Button) findViewById(R.id.pause);
    music = (Button)findViewById(R.id.button3);
    imageView1 = (ImageView) findViewById(R.id.imageView4);
    videoView = (VideoView) findViewById(R.id.videoView1);  


    imageView1.buildDrawingCache();
    Bitmap bmap = imageView1.getDrawingCache();


    videoView.setVisibility(1);
    imageView1.setVisibility(1);


    mediaController = new MediaController(MainActivity.this);
    // RelativeLayout relativeLayout = (RelativeLayout)
    // findViewById(R.id.relativelayout);
    // relativeLayout.setBackgroundResource(R.drawable.img);

    Typeface typeface = Typeface.createFromAsset(getAssets(),
            "font/gothic_0.TTF");
    button.setTypeface(typeface);
    button2.setTypeface(typeface);
    button3.setTypeface(typeface);
    music.setTypeface(typeface);
    button.setVisibility(1);
    button2.setVisibility(1);
    button2.setVisibility(View.INVISIBLE);
    textView.setVisibility(View.INVISIBLE);
    videoView.setVisibility(View.INVISIBLE);
    imageView1.setVisibility(View.INVISIBLE);

    getActionBar().setBackgroundDrawable(
            new ColorDrawable(Color.parseColor("#ee7b35")));

    button.setOnClickListener(new OnClickListener() {

        @Override
        public void onClick(View arg0) {
            textView.setVisibility(View.VISIBLE);
            button.setVisibility(View.INVISIBLE);
            button2.setVisibility(View.VISIBLE);
            videoView.setVisibility(View.GONE);
            imageView1.setVisibility(View.VISIBLE);

            new CountDownTimer(11000, 7000) {

                @Override
                public void onTick(long millisUntilFinished) {

                    customHandler.postDelayed(updateTimerThread, 1);
                    startTime = SystemClock.uptimeMillis();
                }

                @Override
                public void onFinish() {
                    customHandler.removeCallbacks(updateTimerThread);
                }
            }.start();

            // TODO Auto-generated method stub
        }
    });



    button2.setOnClickListener(new OnClickListener() {

        @Override
        public void onClick(View arg0) {
            // TODO Auto-generated method stub
            customHandler.removeCallbacks(updateTimerThread);
            button.setVisibility(View.VISIBLE);
            button2.setVisibility(View.INVISIBLE);
            imageView1.setVisibility(View.GONE);
            videoView.setVisibility(View.GONE);

        }
    });


    button3.setOnClickListener(new OnClickListener() {

        @Override
        public void onClick(View arg0) {
            // TODO Auto-generated method stub
            textView.setVisibility(View.INVISIBLE);
            videoView.setVisibility(View.VISIBLE);
            imageView1.setVisibility(View.GONE);
            button.setVisibility(View.VISIBLE);
            button2.setVisibility(View.INVISIBLE);

                ArrayList<Integer> songarr= new ArrayList<Integer>();
                songarr.add(R.raw.funny);
                Uri uri = Uri.parse("android.resource://"+getPackageName()+"/"+R.raw.funny);
               mediaController.setAnchorView(videoView);
               videoView.setMediaController(mediaController);
               videoView.setVideoURI(uri);
               videoView.start(); 
               }
                });


     videoView.setOnTouchListener(new OnTouchListener() {

        @Override
        public boolean onTouch(View arg0, MotionEvent arg1) {
            // TODO Auto-generated method stub
            if (flag == 0){

                button.setVisibility(View.INVISIBLE);
                button2.setVisibility(View.INVISIBLE);
                music.setVisibility(View.INVISIBLE);
                button3.setVisibility(View.INVISIBLE);
             DisplayMetrics metrics = new DisplayMetrics();
             getWindowManager().getDefaultDisplay().getMetrics(metrics);
             android.widget.RelativeLayout.LayoutParams params = (android.widget.RelativeLayout.LayoutParams) videoView.getLayoutParams();
             params.width =  metrics.widthPixels;
             params.height = metrics.heightPixels;

             //params.leftMargin = 0;
             videoView.setLayoutParams(params);
             flag = 1;
            }else{

                button.setVisibility(View.VISIBLE);
                button2.setVisibility(View.VISIBLE);
                music.setVisibility(View.VISIBLE);
                button3.setVisibility(View.VISIBLE);
             DisplayMetrics metrics = new DisplayMetrics(); getWindowManager().getDefaultDisplay().getMetrics(metrics);
             android.widget.RelativeLayout.LayoutParams params = (android.widget.RelativeLayout.LayoutParams) videoView.getLayoutParams();
             params.width =  (int) (200*metrics.density);
             params.height = (int) (200*metrics.density);
             params.leftMargin = 30;
             videoView.setLayoutParams(params);
            flag = 0;
            }

            return false;
        }
    });











    music.setOnClickListener(new OnClickListener() {

        @Override
        public void onClick(View arg0) {
            // TODO Auto-generated method stub
            if(flag == 0){

            Toast.makeText(getApplicationContext(), "Playing Music", Toast.LENGTH_LONG).show();
            mp.start();

            flag = 1;
            }
            else{
                Toast.makeText(getApplicationContext(), "Stop", Toast.LENGTH_LONG).show();
                mp.stop();
                mp.release();
                flag = 0;
            }



        }
    });











            }




private Runnable updateTimerThread = new Runnable() {

    int secs;

    @Override
    public void run() {
        // TODO Auto-generated method stub
        timeInMillisecond = SystemClock.uptimeMillis() - startTime;
        updatedTime = timeSwapBuff + timeInMillisecond;
        secs = (int) (updatedTime / 1000);
        int mins = secs / 60;
        secs = secs % 60;
        int milliseconds = (int) (updatedTime % 10000);
        textView.setText(String.format("%02d", secs));

        customHandler.postDelayed(this, 1000);


        switch (secs) {
        case 1:
            imageView1.setBackgroundResource(R.drawable.img1);
            break;
        case 2:
            imageView1.setBackgroundResource(R.drawable.img2);
            break;
        case 3:
            imageView1.setBackgroundResource(R.drawable.img3);
            break;
        case 4:
            imageView1.setBackgroundResource(R.drawable.img4);
            break;
        case 5:
            imageView1.setBackgroundResource(R.drawable.img5);
            break;
        case 6:
            imageView1.setBackgroundResource(R.drawable.img6);
            break;
        case 7:
            imageView1.setBackgroundResource(R.drawable.img7);
            break;
        case 8:
            imageView1.setBackgroundResource(R.drawable.img8);
            break;
        case 9:
            imageView1.setBackgroundResource(R.drawable.img9);
            break;
        case 10:
            imageView1.setBackgroundResource(R.drawable.img66);
            button.setVisibility(View.VISIBLE);
            button2.setVisibility(View.INVISIBLE);
            break;
        }
    }
};

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    // TODO Auto-generated method stub
    // return super.onCreateOptionsMenu(menu);
    MenuInflater inflater = getMenuInflater();
    inflater.inflate(R.menu.main, menu);
    return true;
}

@Override
public boolean onOptionsItemSelected(MenuItem item) {
    // TODO Auto-generated method stub
    // return super.onOptionsItemSelected(item);
    if (item.getItemId() == R.id.menulist)
        finish();

    // return true;
    if (item.getItemId() == R.id.pager1) {
        Intent in = new Intent(getApplicationContext(), MainActivity1.class);
        startActivity(in);

    }

    if (item.getItemId() == R.id.image1) {
        Intent in = new Intent(getApplicationContext(), Imageswipe.class);
        startActivity(in);

    }
    return true;
}

}

And this is my xml file:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/relativelayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#FF944D"
tools:context=".MainActivity" >

<TextView
    android:id="@+id/timerValue"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentTop="true"
    android:layout_centerHorizontal="true"
    android:layout_marginTop="14dp"
    android:textColor="#ffffff"
    android:text="00"
    android:textSize="40sp" />

<Button
    android:id="@+id/pause"
    android:layout_width="50dp"
    android:layout_height="200dp"
    android:layout_alignParentRight="true"
    android:layout_alignRight="@+id/button1"
    android:layout_centerVertical="true"
    android:layout_marginLeft="4dp"
    android:layout_marginRight="6dp"
    android:background="#ee7b35"
    android:padding="20dp"
    android:text="Pause"
    android:textColor="#ffffff"
    />

<Button
    android:id="@+id/button1"
    android:layout_width="200dp"
    android:layout_height="50dp"
    android:layout_below="@+id/pause"
    android:layout_centerHorizontal="true"
    android:layout_marginBottom="5dp"
    android:layout_marginTop="4dp"
    android:background="#ee7b35"
    android:text="Start slide show"
    android:textColor="#ffffff" />

<Button
    android:id="@+id/button2"
    style="?android:attr/buttonStyleSmall"
    android:layout_width="wrap_content"
    android:layout_height="40dp"
    android:layout_alignLeft="@+id/button1"
    android:layout_below="@+id/button1"
    android:layout_toLeftOf="@+id/timerValue"
    android:background="#2B9B2B"
    android:textColor="#ffffff"
    android:text="Play Video" />

<Button
    android:id="@+id/button3"
    style="?android:attr/buttonStyleSmall"
    android:layout_width="wrap_content"
    android:layout_height="40dp"
    android:layout_alignRight="@+id/button1"
    android:layout_below="@+id/button1"
    android:layout_toRightOf="@+id/timerValue"
    android:background="#3B38FD"
    android:textColor="#ffffff"
    android:text="Play Audio" />

<VideoView
    android:id="@+id/videoView1"
    android:layout_width="200dp"
    android:layout_height="200dp"

    android:layout_centerHorizontal="true"
    android:layout_centerVertical="true" />

<ImageView
    android:id="@+id/imageView4"
    android:layout_width="200dp"
    android:layout_height="200dp"

    android:layout_centerHorizontal="true"
    android:layout_centerVertical="true"

     />

</RelativeLayout>

score 1 · Answer 1 · answered Apr 03 '14 at 11:31

1

Try using this CircularImageView library found at github.

XML:

<com.mikhaellopez.circularimageview.CircularImageView
        android:layout_width="250dp"
        android:layout_height="250dp"
        android:src="@drawable/image"
        app:border_color="#EEEEEE"
        app:border_width="10"
        app:shadow="true" />

Java:

CircularImageView circularImageView = (CircularImageView)findViewById(R.id.yourCircularImageView);
circularImageView.setBorderColor(getResources().getColor(R.color.GrayLight));
circularImageView.setBorderWidth(10);
circularImageView.addShadow();

answered Apr 03 '14 at 11:31

fida1989

3,234
1
27
30

Not able to import library successfully. and what should I need to write in place of `com.mikhaellopez.circularimageview.CircularImageView` in my xml file. – Devendra Dagur Apr 04 '14 at 09:08
Inport the CircularImageView project and add it as library to your main project. – fida1989 Apr 04 '14 at 16:48

score 1 · Answer 2 · answered Apr 07 '14 at 12:53

Simple

in your xml file:

just drag imageview and put any image from your drawable folder

<ImageView
    android:id="@+id/imageView1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"       
    android:layout_centerHorizontal="true"       
    android:src="@drawable/image" />

in your main activity:

Get all control on the image view. By using bitmap we can crop image into circular form and show in the same imageview. Not only into circular form, we can convert it into any shape like square or so using this.

public class MainActivity extends Activity {

static ImageView imageView;

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

    imageView=(ImageView)findViewById(R.id.imageView1);

    Bitmap bitmap=BitmapFactory.decodeResource(getResources(), R.drawable.image);

    imageView.setImageBitmap(getCircleBitmap(bitmap));
}

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


public static Bitmap getCircleBitmap(Bitmap bitmap) {


    //crop to circle 
    Bitmap output;
    //check if its a rectangular image
    if (bitmap.getWidth() > bitmap.getHeight()) {
        output = Bitmap.createBitmap(bitmap.getHeight(), bitmap.getHeight(), Config.ARGB_8888);
    } else {
        output = Bitmap.createBitmap(bitmap.getWidth(), bitmap.getWidth(), Config.ARGB_8888);
    }
    Canvas canvas = new Canvas(output);

    float r = 0;

    if (bitmap.getWidth() > bitmap.getHeight()) {
        r = bitmap.getHeight() / 2;
    } else {
        r = bitmap.getWidth() / 2;
    }

    final Paint paint = new Paint();
    final Rect rect = new Rect(0, 0, bitmap.getWidth(), bitmap.getHeight());


    paint.setAntiAlias(true);
    canvas.drawARGB(0, 0, 0, 0);

    canvas.drawCircle(r, r, r, paint);
    paint.setXfermode(new PorterDuffXfermode(Mode.SRC_IN));
    canvas.drawBitmap(bitmap, rect, rect, paint);

    return output;
   }

}

How to convert ImageView's images in circular format

2 Answers2