How to make ImageButton a circle and to fit Uploaded Image inside that circle?

Question

I am trying to implement "Upload Profile Pic" thing in the android. Below is the Snapshot which I need to Implement in the Android.

Snapshot_for_profile_page.png

enter image description here

I want "Add Photo" to work like same as Instagram's Edit profile thing. Here's What I have done so far.

I took ImageButton.
Onlcick event i uploaded the picture either from Camera/Gallery.

But the problem is that image which is being uploaded gets squared. Also How to resize the image to fit within that circle. I want full image to get exactly fit into the circle. Just like on Instagram

Here is my code

Profile.java

import android.app.AlertDialog;
import android.content.DialogInterface;
import android.content.Intent;
import android.database.Cursor;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.net.Uri;
import android.os.Environment;
import android.provider.MediaStore;
import android.support.v4.app.FragmentActivity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.ImageButton;
import java.io.File;
import java.io.FileOutputStream;
import java.io.OutputStream;


public class Profile extends FragmentActivity {

    private ImageButton mProfileImage;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.profile_activity);
        mProfileImage = (ImageButton) findViewById(R.id.imageButton);
        mProfileImage.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                selectImage();
            }
        });
 }

    private void selectImage() {
        final CharSequence[] options = { "Take Photo", "Choose from Gallery","Cancel" };
        AlertDialog.Builder builder = new AlertDialog.Builder(Profile.this);
        builder.setTitle("Add Photo!");
        builder.setItems(options,new DialogInterface.OnClickListener() {
            @Override
            public void onClick(DialogInterface dialog, int item) {
                if(options[item].equals("Take Photo"))
                {
                    Intent intent = new Intent(MediaStore.ACTION_IMAGE_CAPTURE);
                    File f = new File(android.os.Environment.getExternalStorageDirectory(), "Image.jpg");
                    intent.putExtra(MediaStore.EXTRA_OUTPUT, Uri.fromFile(f));
                    startActivityForResult(intent, 1);
                }
                else if (options[item].equals("Choose from Gallery"))
                {
                    Intent intent = new   Intent(Intent.ACTION_PICK,android.provider.MediaStore.Images.Media.EXTERNAL_CONTENT_URI);
                    startActivityForResult(intent, 2);
                }
                else if (options[item].equals("Cancel")) {
                    dialog.dismiss();
                }
            }
        });
        builder.show();
    }
    @Override

    protected void onActivityResult(int requestCode, int resultCode, Intent data) {
        super.onActivityResult(requestCode, resultCode, data);
        if (resultCode == RESULT_OK) {
            if (requestCode == 1) {
                File f = new File(Environment.getExternalStorageDirectory().toString());
                for (File temp : f.listFiles()) {
                    if (temp.getName().equals("Image.jpg")) {
                        f = temp;
                        break;
                    }
                }
                try {
                    Bitmap bitmap;
                    BitmapFactory.Options bitmapOptions = new BitmapFactory.Options();
                    bitmap = BitmapFactory.decodeFile(f.getAbsolutePath(),bitmapOptions);
                    mProfileImage.setImageBitmap(bitmap);
                    String path = android.os.Environment.getExternalStorageDirectory()+ File.separator+ "Phoenix" + File.separator + "default";
                    f.  delete();
                    OutputStream outFile;
                    File file = new File(path, String.valueOf(System.currentTimeMillis()) + ".jpg");

                    try {
                        outFile = new FileOutputStream(file);
                        bitmap.compress(Bitmap.CompressFormat.JPEG, 85, outFile);
                        outFile.flush();
                        outFile.close();
                    } catch (Exception e) {
                        e.printStackTrace();
                    }
                } catch (Exception e) {
                    e.printStackTrace();
                }
            } else if (requestCode == 2) {
                Uri selectedImage = data.getData();
                String[] filePath = { MediaStore.Images.Media.DATA };
                Cursor c = getContentResolver().query(selectedImage,filePath, null, null, null);
                c.moveToFirst();
                int columnIndex = c.getColumnIndex(filePath[0]);
                String picturePath = c.getString(columnIndex);
                c.close();
                Bitmap thumbnail = (BitmapFactory.decodeFile(picturePath));
                mProfileImage.setImageBitmap(thumbnail);

            }

        }

    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.menu_profile, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        //int id = item.getItemId();

        //noinspection SimplifiableIfStatement


        return super.onOptionsItemSelected(item);
    }
}

profile_activity.xml

                <ImageButton
                android:layout_width="150dp"
                android:layout_height="155dp"
                android:id="@+id/imageButton"
                android:src="@drawable/add_photo"
                android:background="@drawable/circlebutton"
                android:layout_alignParentTop="true"
                android:layout_centerHorizontal="true"
                android:adjustViewBounds="true"
                android:scaleType="fitXY" />

circlebutton.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid android:color="#FFFFFF"/>
    <stroke android:width="1dp" android:color="#00A2B3" />
    <!--<corners
        android:bottomLeftRadius="12.0dip"
        android:bottomRightRadius="12.0dip"
        android:radius="12.0dip"
        android:topLeftRadius="12.0dip"
        android:topRightRadius="12.0dip" />-->
</shape>

The button is still in the form of square.

PS: Sorry for my English

try circleImageView class...https://github.com/hdodenhof/CircleImageView — Rohit Goswami, Feb 26 '15 at 10:45
This link should answer your question. http://stackoverflow.com/questions/21397115/rounded-image-button-android — Nikhil Setty, Feb 26 '15 at 10:46

score 4 · Answer 1 · answered Feb 26 '15 at 10:47

Just a trick that is completely different than your solution,

Let the image remain square or whatever. Just center it inside its parent.
Place another white imageView with a bordered circular space in the center overlying that profile picture.

This is called masking :)

score 4 · Accepted Answer · answered Oct 01 '15 at 17:08

I recommend you to use Picasso library. Make a class that extends the Transformation class of Picasso.

public class RoundTransformation implements com.squareup.picasso.Transformation {

private final int radius;
private final int margin;

public RoundTransformation(final int radius, final int margin) {
    this.radius = radius;
    this.margin = margin;
}

@Override
public Bitmap transform( Bitmap source) {
    final Paint paint = new Paint();
    paint.setAntiAlias(true);
    paint.setShader(new BitmapShader(source, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP));



    Bitmap output = Bitmap.createBitmap(source.getWidth(), source.getHeight(), Bitmap.Config.ARGB_8888);
    Canvas canvas = new Canvas(output);
    canvas.drawRoundRect(new RectF(margin, margin, source.getWidth() - margin, source.getHeight() - margin), radius, radius, paint);

    if (source != output) {
        source.recycle();
    }

    return output;
}

@Override
public String key() {
    return "rounded";
    }
}

Once you have this class ready. Use the Picasso library

Picasso.with(context).load("url")
            .transform(new RoundTransformation(radius,margin)).into(image);

PS : Instead of Using an ImageButton use ImageView and use a setOnClickListener on the imageview

How to make ImageButton a circle and to fit Uploaded Image inside that circle?

2 Answers2