毕加索图像未在圆圈视图中显示

Question

The user profile-picture does not display in Circle Image View inside the Fragment. When a user uploads image, the upload and crop image features work, and the image also gets uploaded onto the Firebase database. But it does not display in the user's profile.

Here is the code of the class in which the image is uploaded:

public class ProfileFragment extends Fragment {

 private CircleImageView mDisplayImage;
 private TextView mName;
 private TextView mStatus;

 private Button mStatusBtn;
 private Button mImageBtn;

 private static final int GALLERY_PICK = 1;

 private StorageReference mImageStorage;
 private ProgressDialog mProgressDialog;


 private DatabaseReference mUserDatabase;
 private FirebaseUser mCurrentUser;

 public ProfileFragment() {}

 public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {

  View view = inflater.inflate(R.layout.fragment_profile, container, false);
  mDisplayImage = (CircleImageView) view.findViewById(R.id.profile_pic);
  mName = (TextView) view.findViewById(R.id.username);
  mStatus = (TextView) view.findViewById(R.id.default_intro);

  mCurrentUser = FirebaseAuth.getInstance().getCurrentUser();

  mUserDatabase = FirebaseDatabase.getInstance().getReference("UsersActivity").child(mCurrentUser.getUid());

  mStatusBtn = (Button) view.findViewById(R.id.settings_status_btn);

  mImageBtn = (Button) view.findViewById(R.id.settings_image_btn);

  mImageStorage = FirebaseStorage.getInstance().getReference();

  String current_uid = mCurrentUser.getUid();

  mUserDatabase = FirebaseDatabase.getInstance().getReference().child("Users").child(current_uid);
  mUserDatabase.keepSynced(true);

  mUserDatabase.addValueEventListener(new ValueEventListener() {
   @Override
   public void onDataChange(@NonNull DataSnapshot dataSnapshot) {
    String name = dataSnapshot.child("name").getValue().toString();
    final String image = dataSnapshot.child("image").getValue().toString();
    String status = dataSnapshot.child("status").getValue().toString();
    String thumb_image = dataSnapshot.child("thumb_image").getValue().toString();

    mName.setText(name);
    mStatus.setText(status);
    if (!image.equals("default")) {
     Picasso.with(getActivity()).load(image).networkPolicy(NetworkPolicy.OFFLINE).placeholder(R.drawable.default_avatar).into(mDisplayImage, new Callback() {


      @Override
      public void onSuccess() {

      }

      @Override
      public void onError() {
       Picasso.with(getActivity()).load(image).placeholder(R.drawable.default_avatar).into(mDisplayImage);
      }


     });
    }
   }

   @Override
   public void onCancelled(@NonNull DatabaseError databaseError) {

   }


  });


  mStatusBtn.setOnClickListener(new View.OnClickListener() {
   @Override
   public void onClick(View view) {
    String status_value = mStatus.getText().toString();
    //Intent status_intent=new Intent(getContext(),StatusActivity.class);

    Intent intent = new Intent(getActivity(), StatusActivity.class);
    intent.putExtra("status_value", status_value);
    startActivity(intent);

   }
  });

  mImageBtn.setOnClickListener(new View.OnClickListener() {
   @Override
   public void onClick(View view) {
    Intent galleryIntent = new Intent();
    galleryIntent.setType("image/*");
    galleryIntent.setAction(Intent.ACTION_GET_CONTENT);

    startActivityForResult(Intent.createChooser(galleryIntent, "SELECT_IMAGE"), GALLERY_PICK);



   }
  });

  return view;
 }


 public void onActivityResult(int requestCode, int resultCode, Intent data) {
  super.onActivityResult(requestCode, resultCode, data);

  if (requestCode == GALLERY_PICK && resultCode == RESULT_OK) {
   Uri imageUri = data.getData();

   CropImage.activity(imageUri)
    .setAspectRatio(1, 1)
    .setMinCropWindowSize(500, 500)
    .start(getContext(), this);
  }

  if (requestCode == CropImage.CROP_IMAGE_ACTIVITY_REQUEST_CODE) {

   CropImage.ActivityResult result = CropImage.getActivityResult(data);

   if (resultCode == RESULT_OK) {

    mProgressDialog = new ProgressDialog(getActivity());
    mProgressDialog.setTitle("Uploading Image");
    mProgressDialog.setMessage("Please wait until we process and upload the image ");
    mProgressDialog.setCanceledOnTouchOutside(false);
    mProgressDialog.show();

    Uri resultUri = result.getUri();
    File thumb_filePath = new File(resultUri.getPath());

    String current_user_id = mCurrentUser.getUid();


    Bitmap thumb_bitmap = null;
    try {
     thumb_bitmap = new Compressor(getActivity())
      .setMaxWidth(200)
      .setMaxWidth(200)
      .setQuality(75)
      .compressToBitmap(thumb_filePath);
    } catch (IOException e) {
     e.printStackTrace();
    }


    ByteArrayOutputStream baos = new ByteArrayOutputStream();
    thumb_bitmap.compress(Bitmap.CompressFormat.JPEG, 100, baos);
    final byte[] thumb_byte = baos.toByteArray();


    StorageReference filepath = mImageStorage.child("profile_images").child(current_user_id + ".jpg");
    final StorageReference thumb_filepath = mImageStorage.child("profile_images").child("thumbs").child(current_user_id + ".jpg");

    filepath.putFile(resultUri).addOnCompleteListener(new OnCompleteListener < UploadTask.TaskSnapshot > () {
     @Override
     public void onComplete(@NonNull Task < UploadTask.TaskSnapshot > task) {

      if (task.isSuccessful()) {

       final String download_url = task.getResult().getStorage().getDownloadUrl().toString();

       UploadTask uploadTask = thumb_filepath.putBytes(thumb_byte);
       uploadTask.addOnCompleteListener(new OnCompleteListener < UploadTask.TaskSnapshot > () {
        @Override
        public void onComplete(@NonNull Task < UploadTask.TaskSnapshot > thumb_task) {

         String thumb_downloadUrl = thumb_task.getResult().getStorage().getDownloadUrl().toString();


         if (thumb_task.isSuccessful()) {

          Map update_hashMap = new HashMap < > ();
          update_hashMap.put("image", download_url);
          update_hashMap.put("thumb_image", thumb_downloadUrl);

          mUserDatabase.updateChildren(update_hashMap).addOnCompleteListener(new OnCompleteListener < Void > () {
           @Override
           public void onComplete(@NonNull Task < Void > task) {

            if (task.isSuccessful()) {
             mProgressDialog.dismiss();
             Toast.makeText(getActivity(), "Success Uploading", Toast.LENGTH_LONG).show();
            }
           }


          });



         } else {
          Toast.makeText(getActivity(), "Error in uploading Thumbnail", Toast.LENGTH_LONG).show();
          mProgressDialog.dismiss();
         }
        }
       });


      } else {
       Toast.makeText(getActivity(), "Error in uploading ", Toast.LENGTH_LONG).show();
       mProgressDialog.dismiss();
      }
     }
    });
   } else if (resultCode == CropImage.CROP_IMAGE_ACTIVITY_RESULT_ERROR_CODE) {
    Exception error = result.getError();
   }
  }

 }
 public static String random() {
  Random generator = new Random();
  StringBuilder randomStringBuilder = new StringBuilder();
  int randomLength = generator.nextInt(10);
  char tempChar;
  for (int i = 0; i < randomLength; i++) {
   tempChar = (char)(generator.nextInt(96) + 32);
   randomStringBuilder.append(tempChar);
  }
  return randomStringBuilder.toString();
 }


 //TO HIDE TOOLBAR FROM FRAGMENT
 public void onResume() {
  super.onResume();
  ((AppCompatActivity) getActivity()).getSupportActionBar().hide();
 }
 public void onStop() {
  super.onStop();
  ((AppCompatActivity) getActivity()).getSupportActionBar().show();
 }


 //
}

Answer 1

Just try this:

import com.squareup.picasso.Transformation;

public class CircleTransform implements Transformation {
    @Override
    public Bitmap transform(Bitmap source) {
        int size = Math.min(source.getWidth(), source.getHeight());

        int x = (source.getWidth() - size) / 2;
        int y = (source.getHeight() - size) / 2;

        Bitmap squaredBitmap = Bitmap.createBitmap(source, x, y, size, size);
        if (squaredBitmap != source) {
            source.recycle();
        }

        Bitmap bitmap = Bitmap.createBitmap(size, size, source.getConfig());

        Canvas canvas = new Canvas(bitmap);
        Paint paint = new Paint();
        BitmapShader shader = new BitmapShader(squaredBitmap,
                BitmapShader.TileMode.CLAMP, BitmapShader.TileMode.CLAMP);
        paint.setShader(shader);
        paint.setAntiAlias(true);

        float r = size / 2f;
        canvas.drawCircle(r, r, r, paint);

        squaredBitmap.recycle();
        return bitmap;
    }

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

then simply apply it like:

Picasso.with(activity).load(url).transform(new CircleTransform()).into(ImageView);

But I prefer fresco.