0

Buenas, estoy intentando diseñar una pantalla de perfil de usuario y quiero que la imagen de perfil sea circular. La imagen original en la carpeta drawable es cuadrada, de modo que la idea es modificarla en el .java. Mi problema es que si que se me modifica la imagen y se transforma en circular pero se superpone a la imagen cuadrada original, de modo que al final queda la circular sobre la cuadrada. Mi código es el siguiente: (Creo que se puede deber a que modifico la imagen una vez creado el fragment, pero tampoco sé como hacerlo antes de crear el fragment)

public ProfileFragment() {
    // Required empty public constructor
}

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
}

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
                         Bundle savedInstanceState) {
    // Inflate the layout for this fragment

    return inflater.inflate(R.layout.fragment_profile, container, false);
}

@Override
public void onViewCreated(View view, @Nullable Bundle savedInstanceState) {
    super.onViewCreated(view, savedInstanceState);


    ImageView imageView = (ImageView) view.findViewById(R.id.perfilId);
    Bitmap bitmap = BitmapFactory.decodeResource(getResources(),R.drawable.perfil);
    RoundedBitmapDrawable roundedBitmapDrawable = RoundedBitmapDrawableFactory.create(getResources(),bitmap);
    roundedBitmapDrawable.setCircular(true);
    imageView.setImageDrawable(roundedBitmapDrawable);


     Button logout = view.findViewById(R.id.logout);

     TextView name = view.findViewById(R.id.name);
     name.setText(User.currentUser().getName());

     logout.setOnClickListener(this);
}

2 respuestas 2

2

Puedes hacerlo directamente con XML de la siguiente forma:

// res/drawable/circle.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:innerRadius="0dp"
    android:shape="ring"
    android:thicknessRatio="1.9"
    android:useLevel="false" >
    <solid android:color="@android:color/transparent" />

    <stroke
        android:width="10dp"
        android:color="@android:color/white" />
</shape>

Despues haces una LayerList y pones la imagen de fondo de la vista.

// res/drawable/img.xml

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

    <item android:drawable="@drawable/tu_imagen"/>
    <item android:drawable="@drawable/circle"/>

</layer-list>

Y luego lo utilizas en in ImageView como fondo:

<ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/img"/>

Te quedaria algo asi:

introducir la descripción de la imagen aquí

2
  • Se me sigue superponiendo y me queda la imagen circular encima de la cuadrada, no se como eliminar esta última. Commented el 30 dic. 2017 a las 11:55
  • 1
    Debes usar el ImageView de tu Layaout de perfil y solo ponerle de background la imagen de "perfil" del usuario en el img.xml, has echo eso y se te sigue viendo dos imagenes? (una cuadrada y otra circular) Commented el 30 dic. 2017 a las 12:54
0

A mi me salió bien así: Puedes hacerlo directamente con XML de la siguiente forma:

// res/drawable/circle.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:innerRadius="290dp"
android:shape="ring"
android:thicknessRatio="1.99"
android:useLevel="false" >

<solid android:color="@android:color/transparent" />

<stroke
    android:width="170dp"

    android:color="@android:color/black" />

Despues haces una LayerList y pones la imagen de fondo de la vista.

// res/drawable/img.xml

<item android:drawable="@drawable/tu_imagen"/>
<item android:drawable="@drawable/circle"/>
Y luego lo utilizas en in ImageView como fondo:
<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/img"/>

Te quedaria algo asi: introducir la descripción de la imagen aquí

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.