Failed to create a circular imageView

Question

I am using third party library (dependency) to make a circular ImageView in login page but I am not able to make it i.e. ImageView is not circular.

This is what I have tried.

activity_main

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@color/violetred"
    android:gravity="center"
    android:orientation="vertical"
    android:padding="10dp"
    android:weightSum="1">

    <de.hdodenhof.circleimageview.CircleImageView xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/imgProfilePicture"
        android:layout_width="120dp"
        android:layout_height="120dp"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="10dp"
        android:background="@mipmap/profile"
        app:border_color="@color/white"
        app:border_width="3dp"
        android:layout_gravity="center_horizontal"
        android:orientation="vertical" />


    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:orientation="vertical"
        android:paddingLeft="20dp"
        android:paddingRight="20dp" >

        <EditText
            android:id="@+id/name"
            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"
            android:textColor="@color/input_login"
            android:textColorHint="@color/input_login_hint" />

        <EditText
            android:id="@+id/password"
            android:layout_width="fill_parent"
            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"
            android:textColor="@color/input_login"
            android:textColorHint="@color/input_login_hint" />

        <!-- Login Button -->

        <Button
            android:id="@+id/btnLogin"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="20dip"
            android:background="@color/btn_login_bg"
            android:text="@string/btn_login"
            android:textColor="@color/btn_login" />

        <Button
            android:id="@+id/btnLinkToRegisterScreen"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="20dp"
            android:background="@null"
            android:text="Create account"
            android:textAllCaps="false"
            android:textColor="@color/white"
            android:textSize="15dp" />
    </LinearLayout></LinearLayout>

@Jj I follow this [answer](http://stackoverflow.com/a/36613446/2987882) — AI., Sep 03 '16 at 17:00
It seems all okay. Check with this README if you are doing all right. https://github.com/hdodenhof/CircleImageView — Kuldeep Yadav, Sep 03 '16 at 17:10
I think the preview layout is a square, but when you run on the app, it's a circle — OneCricketeer, Sep 03 '16 at 17:25

score 0 · Answer 1 · answered Sep 03 '16 at 17:25

0

Seems like the problem is namespace collision

Try this

    app:civ_border_width="3dp"
    app:civ_border_color="@color/white"

Instead of this

    app:border_color="@color/white"
    app:border_width="3dp"

answered Sep 03 '16 at 17:25

Pavneet_Singh

36,884
5
53
68

Diogo Rosa · Accepted Answer · 2016-09-28T15:23:13.427

0

Im not on my computer now, but i have one circle imageview working, but i think is from support.design library, you should check that. When i have my computer i can give you a better answer

UPDATE:

on your build.gradle add this to dependecies

compile 'de.hdodenhof:circleimageview:2.1.0'

And then, on your xml:

<de.hdodenhof.circleimageview.CircleImageView
    android:id="@+id/image"
    android:layout_width="wrap_content"
    android:layout_height="0dp"
    android:layout_weight="45"
    android:src="@drawable/image"
    android:layout_gravity="center_horizontal" />

UPDATE 2: way better solution is to use Picasso library

 Picasso.with(this)
.load(R.mipmap.profile)
.transform(new CropCircleTransformation() )
.into(ImageView);

Don't forget to add the library in gradle file

edited Sep 28 '16 at 15:23

answered Sep 03 '16 at 19:07

Diogo Rosa

756
1
5
24

Btw this is not my library i just found some time ago, its the work of this guy https://github.com/hdodenhof – Diogo Rosa Sep 07 '16 at 14:55
Since my answer was from some days ago i forgot that you are using the same library, but this is working for me, maybe you are missing the dependecies code – Diogo Rosa Sep 07 '16 at 15:27
Not sure what's the problem is..I still can't get a circular image :( – AI. Sep 11 '16 at 18:14
Man, i think its because you are setting your image as background of the circular img, try to use it as source like me – Diogo Rosa Sep 12 '16 at 10:55

Failed to create a circular imageView

2 Answers2