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

Akshay Shah

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.

  1. I took ImageButton.
  2. 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

Deepak Baliga

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

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

From Dev

How can I fit a square HTML image inside a circle border?

From Dev

How to make a circular seek bar with an image fit to its circle in android

From Dev

Responsive circle and image fit on circle

From Dev

How to make an image inside a diamond shape morph to circle

From Dev

How to make circle image in tcpdf?

From Dev

SVG image inside circle

From Dev

How to make an item drag inside a circle in QML?

From Dev

How to make an Image button circular and inside the circle,an image will be shown and a border will be there around the image

From Dev

How to crop image inside the circle in UIImageView in iOS

From Dev

how stretch inside a circle image with nine patch

From Dev

How to make border for circle cropped image in glide

From Dev

How to make Circle image Label in Java?

From Dev

How to make the image transparent around the circle

From Dev

How to fit text in a circle in UILabel

From Dev

How to fit img into div circle ?

From Dev

How to fit a curve with a circle with matlab?

From Dev

How to draw an image inside Rounded Rectangle or inside a shape like circle?

From Dev

MATLAB: Display image inside circle

From Dev

MATLAB: Display image inside circle

From Dev

How to make a flickering circle?

From Dev

How to make circle clickable

From Dev

How to set Circle image?

From Dev

How to fit an image to ImageButton programmatically

From Dev

css: fit rounded (circle) image (do not stretch it)

From Dev

Python Fit circle with center outside of image

From Dev

How to make one circle inside of another using CSS

From Dev

How to make one circle inside of another using CSS

From Dev

How to crop an image which is coming inside circle in iOS

From Dev

How do I add an image inside a rectangle or a circle in JavaFX?

Related Related

  1. 1

    How can I fit a square HTML image inside a circle border?

  2. 2

    How to make a circular seek bar with an image fit to its circle in android

  3. 3

    Responsive circle and image fit on circle

  4. 4

    How to make an image inside a diamond shape morph to circle

  5. 5

    How to make circle image in tcpdf?

  6. 6

    SVG image inside circle

  7. 7

    How to make an item drag inside a circle in QML?

  8. 8

    How to make an Image button circular and inside the circle,an image will be shown and a border will be there around the image

  9. 9

    How to crop image inside the circle in UIImageView in iOS

  10. 10

    how stretch inside a circle image with nine patch

  11. 11

    How to make border for circle cropped image in glide

  12. 12

    How to make Circle image Label in Java?

  13. 13

    How to make the image transparent around the circle

  14. 14

    How to fit text in a circle in UILabel

  15. 15

    How to fit img into div circle ?

  16. 16

    How to fit a curve with a circle with matlab?

  17. 17

    How to draw an image inside Rounded Rectangle or inside a shape like circle?

  18. 18

    MATLAB: Display image inside circle

  19. 19

    MATLAB: Display image inside circle

  20. 20

    How to make a flickering circle?

  21. 21

    How to make circle clickable

  22. 22

    How to set Circle image?

  23. 23

    How to fit an image to ImageButton programmatically

  24. 24

    css: fit rounded (circle) image (do not stretch it)

  25. 25

    Python Fit circle with center outside of image

  26. 26

    How to make one circle inside of another using CSS

  27. 27

    How to make one circle inside of another using CSS

  28. 28

    How to crop an image which is coming inside circle in iOS

  29. 29

    How do I add an image inside a rectangle or a circle in JavaFX?

HotTag

Archive