¿Cómo crear una vista de imagen circular en Android sin usar ninguna biblioteca?

Este artículo tiene como objetivo ayudar a hacer una vista de imagen circular en una imagen usando la aplicación de Android. Se puede hacer una vista de imagen circular simple con borde blanco y contenido transparente con forma sin usar ninguna biblioteca. 

A continuación se muestran los pasos para hacerlo: 

  • Paso 1: crear el diseño de la vista de imagen circular 
    Cree un nuevo archivo de recursos dibujable en el directorio dibujable que define la forma de la vista de imagen que es un círculo.

Aquí el nombre del archivo es circular.xml

XML

<?xml version="1.0" encoding="utf-8"?>
 
 <!--res/drawable/circular.xml-->
 <!--defines the circular shape and its properties-->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
 
    android:innerRadius="0dp"
    android:shape="ring"
    android:thicknessRatio="2.0"
    android:useLevel="false" >
 
    <solid
        android:color="@android:color/transparent" />
 
    <stroke
        android:width="9dp"
        android:color="@android:color/white" />
</shape>
  • Paso 2: El siguiente paso es hacer una lista de capas dibujable para que pueda actuar como fondo para la vista de imagen. Cree un nuevo archivo XML en el directorio dibujable con el nombre image.xml
     

Aquí el nombre del archivo es image.xml

XML

<?xml version="1.0" encoding="utf-8"?>
 
<!--res/drawable/image.xml-->
<!--define layer-list-->
<layer-list
    xmlns:android="http://schemas.android.com/apk/res/android" >
 
    <!--set image to be shown on circular image view-->
    <item android:drawable="@drawable/ic_launcher"/>
    <item android:drawable="@drawable/circular"/>
</layer-list>
  • Paso 3: Creando el archivo activity_main.xml

XML

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:gravity="center"
    >
 
  <!--put image.xml as background to your image view-->
  <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/image"/>
</RelativeLayout>
  • Paso 4: crear el archivo backend MainActivity.java

Java

package com.geeksforgeeks.circularimageview;
 
import android.support.v7.app.AppCompatActivity;
import android.graphics.drawable.ColorDrawable;
import java.io.IOException;
 
public class MainActivity extends AppCompatActivity {
 
    ImageView imageView;
    @Override
    protected void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
 
        ActionBar actionBar;
        actionBar = getSupportActionBar();
        ColorDrawable colorDrawable
            = new ColorDrawable(
                Color.parseColor("#0F9D58"));
        actionBar.setBackgroundDrawable(colorDrawable);
 
        Toast.makeText(
                 MainActivity.this,
                 "Circular Image View "
                     + "without using any library",
                 Toast.LENGTH_LONG)
            .show();
    }
}

Salida: vista de imagen circular 
 

Actividad que contiene imagen circular

Publicación traducida automáticamente

Artículo escrito por Rishabh007 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *