CODEWITHSUNDEEP
androidandroiddesignsupport
Syed Danish Ali
Syed Danish Ali

Reputation: 111

Android: circle profile picture

I'm trying to make a profile page for my application. Here is the sample I want to create.

one

I want to know how to align circled image at the bottom of cover. I'm confused.

Thank you.

Upvotes: 2

Views: 33166

Answers (7)

Snow Star
Snow Star

Reputation: 86

I just faced the same problem before. I knew it is provided the CardView from androidx.

The code using the androidx is the following.

<androidx.cardview.widget.CardView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    app:cardCornerRadius="50dp"
    app:cardElevation="0dp">

    <ImageView
        android:id="@+id/avatar"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:scaleType="fitXY"
        android:src="@drawable/avatar"/>

</androidx.cardview.widget.CardView>

Upvotes: 1

Sagar Chavada
Sagar Chavada

Reputation: 5269

Use this code for circle image: 

<?xml version="1.0" encoding="UTF-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android">

        <stroke android:width="1dp" android:color="#1B5E20" />
        <corners android:radius="50dp"/>
        <padding android:left="0dip" android:top="0dip" android:right="0dip" android:bottom="0dip" />
    </shape>

and set to the image background.

<ImageView
                 android:background="@drawable/shape"
                android:id="@+id/btnMore"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:src="@drawable/more_apps" />

You can change other factor by your requirement. Basically its use for set border to image or any layout. But its work, all you have to do is set radius by your choice, and it will circle your image.You can remove border if you don't want.

Upvotes: 1

andyb
andyb

Reputation: 91

Luckily Android already supports a circle shape without having to declare the radius. Simply ensure that your ImageView is square:

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <stroke
        android:width="1dp"
        android:color="#ff0000"/>
</shape>

Upvotes: 1

petrrr33
petrrr33

Reputation: 599

If you are using a Coordinator Layout you can add this lines to your CircleImageView: 

    app:layout_anchor="@id/your_cover_id"
    app:layout_anchorGravity="bottom|center"

Upvotes: 0

Chetna
Chetna

Reputation: 154

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.Bitmap.Config;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.PorterDuff.Mode;
import android.graphics.PorterDuffXfermode;
import android.graphics.Rect;
import android.graphics.drawable.BitmapDrawable;
import android.graphics.drawable.Drawable;
import android.util.AttributeSet;
import android.widget.ImageView;
public class RoundedImageView extends ImageView {

public RoundedImageView(Context context) {
super(context);
}

public RoundedImageView(Context context, AttributeSet attrs) {
super(context, attrs);
}

public RoundedImageView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
}

@Override
protected void onDraw(Canvas canvas) {

Drawable drawable = getDrawable();

if (drawable == null) {
    return;
}

if (getWidth() == 0 || getHeight() == 0) {
    return; 
}
Bitmap b =  ((BitmapDrawable)drawable).getBitmap() ;
Bitmap bitmap = b.copy(Config.ARGB_8888, true);

int w = getWidth(), h = getHeight();
Bitmap roundBitmap =  getCroppedBitmap(bitmap, w);
canvas.drawBitmap(roundBitmap, 0,0, null);

}

public static Bitmap getCroppedBitmap(Bitmap bmp, int radius) {
Bitmap sbmp;
if(bmp.getWidth() != radius || bmp.getHeight() != radius)
    sbmp = Bitmap.createScaledBitmap(bmp, radius, radius, false);
else
    sbmp = bmp;
Bitmap output = Bitmap.createBitmap(sbmp.getWidth(),
        sbmp.getHeight(), Config.ARGB_8888);
Canvas canvas = new Canvas(output);

final Paint paint = new Paint();
final Rect rect = new Rect(0, 0, sbmp.getWidth(), sbmp.getHeight());
paint.setAntiAlias(true);
paint.setFilterBitmap(true);
paint.setDither(true);
canvas.drawARGB(0, 0, 0, 0);
paint.setColor(Color.parseColor("#BAB399"));
canvas.drawCircle(sbmp.getWidth() / 2+0.7f, sbmp.getHeight() / 2+0.7f,
        sbmp.getWidth() / 2+0.1f, paint);
paint.setXfermode(new PorterDuffXfermode(Mode.SRC_IN));
canvas.drawBitmap(sbmp, rect, rect, paint);


        return output;
 }

 }

Upvotes: 1

Matthew Carpenter
Matthew Carpenter

Reputation: 660

Here is a class for a circular ImageView without the need for pulling in a library. 

public class CircularImageView extends ImageView
{

public CircularImageView( Context context )
{
    super( context );
}

public CircularImageView( Context context, AttributeSet attrs )
{
    super( context, attrs );
}

public CircularImageView( Context context, AttributeSet attrs, int defStyle )
{
    super( context, attrs, defStyle );
}

@Override
protected void onDraw( @NonNull Canvas canvas )
{

    Drawable drawable = getDrawable( );

    if ( drawable == null )
    {
        return;
    }

    if ( getWidth( ) == 0 || getHeight( ) == 0 )
    {
        return;
    }
    Bitmap b = ( ( BitmapDrawable ) drawable ).getBitmap( );
    Bitmap bitmap = b.copy( Bitmap.Config.ARGB_8888, true );

    int w = getWidth( )/*, h = getHeight( )*/;

    Bitmap roundBitmap = getCroppedBitmap( bitmap, w );
    canvas.drawBitmap( roundBitmap, 0, 0, null );

}

private static Bitmap getCroppedBitmap( @NonNull Bitmap bmp, int radius )
{
    Bitmap bitmap;

    if ( bmp.getWidth( ) != radius || bmp.getHeight( ) != radius )
    {
        float smallest = Math.min( bmp.getWidth( ), bmp.getHeight( ) );
        float factor = smallest / radius;
        bitmap = Bitmap.createScaledBitmap( bmp, ( int ) ( bmp.getWidth( ) / factor ), ( int ) ( bmp.getHeight( ) / factor ), false );
    }
    else
    {
        bitmap = bmp;
    }

    Bitmap output = Bitmap.createBitmap( radius, radius,
            Bitmap.Config.ARGB_8888 );
    Canvas canvas = new Canvas( output );

    final Paint paint = new Paint( );
    final Rect rect = new Rect( 0, 0, radius, radius );

    paint.setAntiAlias( true );
    paint.setFilterBitmap( true );
    paint.setDither( true );
    canvas.drawARGB( 0, 0, 0, 0 );
    paint.setColor( Color.parseColor( "#BAB399" ) );
    canvas.drawCircle( radius / 2 + 0.7f,
            radius / 2 + 0.7f, radius / 2 + 0.1f, paint );
    paint.setXfermode( new PorterDuffXfermode( PorterDuff.Mode.SRC_IN ) );
    canvas.drawBitmap( bitmap, rect, rect, paint );

    return output;
}

}

Example use:

<your.package.name.CircularImageView
                    android:id="@+id/circleImage"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerInParent="true"/>

Upvotes: 6

BOUTERBIAT Oualid
BOUTERBIAT Oualid

Reputation: 1544

You could easilly add this library in your build.gradle :

compile 'de.hdodenhof:circleimageview:1.2.1'.

Usage

<de.hdodenhof.circleimageview.CircleImageView
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/profile_image"
android:layout_width="96dp"
android:layout_height="96dp"
android:src="@drawable/profile"
app:civ_border_width="2dp"
app:civ_border_color="#FF000000"/>

Upvotes: 18

Related Questions