Facebook Messenger like profile image crop in android

Lots of our reader send me email asking for how to crop image as in google plus app and facebook messanger profile image in circle.So I decided to put this tutorial live on how you can crop that imageview in circle.

There are more ways of doing it I got this using the canvas elements on the android.The android bitmap can be used to align,stretch,and lots more.The Android bitmapdrawable give a lots of flexibilty to attain image crop.

Some inspiration of what we are trying to build is somthing like this:
 
Above is the Image of facebook messanger .The profile image here is cropped to circle.This is what we are going to develop.

Lets start creating.

1.Create New ProjectNew->Android Application Project.
2.Create New Class file RoundprofImage.java 
Right Click on package com.androidgreeve.profile.roundimage ->New->RoundprofImage.java
3.Copy the below code in roundimage.java file
package com.androidgreeve.profile.roundimage
import android.graphics.Bitmap;
import android.graphics.BitmapShader;
import android.graphics.Canvas;
import android.graphics.ColorFilter;
import android.graphics.Paint;
import android.graphics.PixelFormat;
import android.graphics.Rect;
import android.graphics.RectF;
import android.graphics.Shader;
import android.graphics.drawable.Drawable;
public class RoundImage extends Drawable {
      private final Bitmap mBitmap;
      private final Paint mPaint;
      private final RectF mRectF;
      private final int mBitmapWidth;
      private final int mBitmapHeight;
      public RoundImage(Bitmap bitmap) {
            mBitmap = bitmap;
            mRectF = new RectF();
            mPaint = new Paint();
            mPaint.setAntiAlias(true);
            mPaint.setDither(true);
            final BitmapShader shader = new BitmapShader(bitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
            mPaint.setShader(shader);
            mBitmapWidth = mBitmap.getWidth();
            mBitmapHeight = mBitmap.getHeight();
      }
      @Override
      public void draw(Canvas canvas) {
            canvas.drawOval(mRectF, mPaint);
      }
      @Override
      protected void onBoundsChange(Rect bounds) {
            super.onBoundsChange(bounds);
            mRectF.set(bounds);
      }
      @Override
      public void setAlpha(int alpha) {
            if (mPaint.getAlpha() != alpha) {
                  mPaint.setAlpha(alpha);
                  invalidateSelf();
            }
      }
      @Override
      public void setColorFilter(ColorFilter cf) {
            mPaint.setColorFilter(cf);
      }
      @Override
      public int getOpacity() {
            return PixelFormat.TRANSLUCENT;
      }
      @Override
      public int getIntrinsicWidth() {
            return mBitmapWidth;
      }
      @Override
      public int getIntrinsicHeight() {
            return mBitmapHeight;
      }
      public void setAntiAlias(boolean aa) {
            mPaint.setAntiAlias(aa);
            invalidateSelf();
      }
      @Override
      public void setFilterBitmap(boolean filter) {
            mPaint.setFilterBitmap(filter);
            invalidateSelf();
      }
      @Override
      public void setDither(boolean dither) {
            mPaint.setDither(dither);
            invalidateSelf();
      }
      public Bitmap getBitmap() {
            return mBitmap;
      }

}

Now you can add the image view in activity_main.xml file.copy the following code in it.
Activity_main .xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#000000"
    android:orientation="vertical" >
    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:scaleType="centerCrop"
        android:layout_gravity="center"
        android:src="@drawable/image" />
<TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:text="@string/Androidgreeve"/>
 

</LinearLayout>
import android.app.Activity;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.os.Bundle;
import android.widget.ImageView;
import com.androidgree.profile.roundprofimage.R;
public class MainActivity extends Activity {
      ImageView imageView1;
      RoundImage roundedImage;
      @Override
      protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
            imageView1 = (ImageView) findViewById(R.id.imageView1);
            Bitmap bm = BitmapFactory.decodeResource(getResources(),R.drawable.image);
            roundedImage = new RoundImage(bm);
            imageView1.setImageDrawable(roundedImage);
      }
}
Run the project .All is done now!
Hope you find easier to understand the code.Please Comment your views
Sponsor:
Do miss out to check out the offer of the month post! we already started gifting the Ebooks.

Androidgreeve offer of the month

Hello guys!
First of all thanks to all the reader of our blog.I wanted to share the details of our blog and want to present a new gift to our lucky subscribers!



FREE!!!! OFFER OF THE MONTH

We have brought a offer to our subscribers .We have prepared a sets of tutorials as an ebook which we would like to give as a free gift to some of our lucky subscriber during this one month period.Already some of the subscribers have got this ebook into their inbox at the start of the month and we would like to give more fo it to new subscriber as well.

"All you have to do this is subscribe to our site and like our facebook or twitter page" .
we will mail you the ebook straight into your Inbox.T&C applied.



Our Subscriber list has just reached toward 4000+ mark ,If you are the one missing the updates from our site directly into your inbox subscribe here.The Email is delivered using RSS feedburner.


Enter your email address:



Facebook  Page

Our facebook page Androidgreeve has reached 1900+ likes ,thanks to all of you.
if you are the one missing daily updates from our facefbook page.You can like below by clicking.



Twitter Page

Our twitter profile has more than 400+ follower .Follow Androidgreeve on Twitter and receive alerts when new tutorials and how-to guides are published on the blog. For my personal tweets, please follow @Androidgreeve.




Some statistics of our blog:
As you know that our blog is still hosted in Google blogger.we are going to move to new domain soon.
Daily pageviews:      3000 or more
Monthly pageviews: 70k pageviews
Subscribers: Nearly 4000 subscriber

Login screen with Compound drawables

In the last post we looked about the Compound drawables that makes the easy designing of your app.
The compound drawables  can be used to place the image next to textbox.
So In this post we will go through an example of using it by creating a sample login screen.


In the last post we looked about the Compound drawables that makes the easy designing of your app.
The compound drawables  can be used to place the image next to textbox.
So In this post we will go through an example of using it by creating a sample login screen.



So let’s start by creating a new project.

1. Create a new project in Eclipse from File --> New --> Android --> Application Project. While creating the project select the app theme which has Action Bar as shown in the below image.

2.Open the activity_main.xml for creating the layout of the app.
Type the code in the activity_main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="250dp"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:gravity="center"
        android:orientation="vertical"
        android:layout_marginTop="16dp"
        >

    <EditText
              android:layout_width="match_parent"
              android:layout_height="wrap_content"
              android:gravity="center_vertical"
              android:hint="@string/user_name"
              android:drawableLeft="@drawable/ic_action_person"
              android:drawablePadding="8dp"
            />
    <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center_vertical"
            android:hint="@string/password"
            android:drawableLeft="@drawable/ic_action_accounts"
            android:drawablePadding="8dp"
            />
<Button
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@string/log_in"
            android:drawableRight="@drawable/ic_action_accept"
            />

</LinearLayout> 
 
3.Run the app  
 
  

 
Please subscribe to our site.Share it on facebook and twitter.


How to use Compound drawables in your android app design

A Small Design tip: Compound Drawables.

A question by our reader
I designed a layout which worked perfectly well, but I updated to ADT 16 and the new Lint tool gave me a warning 
"This tag and its children can be replaced by one and a compound drawable."

In this article we’ll have a look at what they are and see how we can use them to simplify some of our layouts.


custom drawable androidgreeve


A quick dig through the documentation for TextView lead me to the setCompoundDrawableWithIntrinsicBounds() method which is a method of attaching drawables to a TextView. We can replace the LinearLayout and its two children with a single TextView:

How to use it:
<TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/text"
        android:gravity="center"/>


Then in the onCreate() method of our activity we can assign a drawable to appear above the the text.

@Override
public void onCreate( Bundle savedInstanceState )
{
    super.onCreate( savedInstanceState );
    setContentView( R.layout.main );
    TextView tv = (TextView) findViewById( R.id.textView );
    tv.setCompoundDrawablesWithIntrinsicBounds( 0,
        R.drawable.ic_launcher, 0, 0 );
}

Our TextView has four properties that let us specify images to be set around it. These ones are: drawableLeft, drawableRight, drawableTop and drawableBottom. We also can use another one which defines the padding among the text and the images: drawablePadding.

<TextView xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:layout_marginTop="16dp"              
              android:gravity="center"
              android:layout_gravity="center_horizontal"
              android:text="@string/my_contacts"
              android:drawableRight="@drawable/ic_action_add_group"
              android:drawablePadding="8dp"
        />

Cool! We removed a level of complexity and made our XML much simpler. It’s almost as easy to set these drawables from code:
textView.setCompoundDrawablesWithIntrinsicBounds
(0, 0, R.drawable.ic_action_add_group, 0);

textView.setCompoundDrawablePadding(...);
There are plenty of other use cases where compound drawables can simplify your layouts. If you use the Lint tool in ADT 16+ you will be alerted to instances where you can make this optimisation. It my only sound like a small improvement to create one Widget instead of three, but if we expand this to the layout that we created in Intelligent Layouts.
What Next ?
We would like to Demonstrate this by designing a small Login page for our app.