Search code examples
androidandroid-layoutimageviewandroid-imageviewandroid-image

How to make a circular image view


I trying to make a circular image view in my Register class. I tried many solutions but none of the solutions are worked for me. Can someone help me to figuring out the problem ? Thanks.

build.gradle

apply plugin: 'com.android.application'

android {
    compileSdkVersion 23
    buildToolsVersion "23.0.2"

    defaultConfig {
        applicationId "com.example.seng.healthyapp"
        minSdkVersion 15
        targetSdkVersion 23
        versionCode 1
        versionName "1.0"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    compile 'com.android.support:appcompat-v7:23.1.1'
    compile 'de.hdodenhof:circleimageview:2.1.0'
    testCompile 'junit:junit:4.12'
    compile 'com.google.android.gms:play-services-location:9.2.0'

}

register.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:gravity="center"
    android:orientation="vertical">

    <de.hdodenhof.circleimageview.CircleImageView
        android:id="@+id/imgProfilePicture"
        android:layout_width="120dp"
        android:layout_height="120dp"
        android:layout_marginBottom="20dp"
        app:civ_border_width="3dp"
        app:civ_border_color="@color/white"
        android:background="@mipmap/profile" />


    <EditText
        android:id="@+id/editTextName"
        android:layout_width="325dp"
        android:layout_height="wrap_content"
        android:layout_marginBottom="10dp"
        android:background="@color/white"
        android:hint="@string/hint_name"
        android:padding="10dp"
        android:singleLine="true" />

    <EditText
        android:id="@+id/editTextPassword"
        android:layout_width="325dp"
        android:layout_height="wrap_content"
        android:layout_marginBottom="10dp"
        android:background="@color/white"
        android:hint="@string/hint_password"
        android:inputType="textPassword"
        android:padding="10dp"
        android:singleLine="true" />

    <!-- Login Button -->

    <EditText
        android:id="@+id/editTextConfirmPassword"
        android:layout_width="325dp"
        android:layout_height="wrap_content"
        android:layout_marginBottom="10dp"
        android:background="@color/white"
        android:hint="@string/confirm_password"
        android:inputType="textPassword"
        android:padding="10dp"/>

    <Button
        android:id="@+id/buttonSave"
        android:layout_width="325dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:background="@color/blue"
        android:text="Confirm"
        android:textAllCaps="false"
        android:textColor="@color/white"
        android:textSize="15dp" />
</LinearLayout>

enter image description here


Solution

  • this will make a bitmap rounded, i never had problems with it, when i was tring to achieve this i also tried the circular imageview but i found this to be more easy to use

    Bitmap book = BitmapFactory.decodeResource(getResources(),R.drawable.book);
    
    imageView.setImageBitmap(getRoundedBitmap(book));
    
    
    public Bitmap getRoundedBitmap(Bitmap bitmap){
        Bitmap circleBitmap = Bitmap.createBitmap(bitmap.getWidth(), bitmap.getHeight(), Bitmap.Config.ARGB_8888);
        BitmapShader shader = new BitmapShader(bitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
        Paint paint = new Paint();
        paint.setShader(shader);
        paint.setAntiAlias(true);
        Canvas c = new Canvas(circleBitmap);
        c.drawCircle(bitmap.getWidth() / 2, bitmap.getHeight() / 2, bitmap.getWidth() / 2, paint);
        return circleBitmap;
    }