redondo - ¿Cómo creo un ListView con esquinas redondeadas en Android?

boton redondo android studio

Question

¿Cómo creo un ListView con esquinas redondeadas en Android?

Answer 1

@ kris-van-bael

Para aquellos que tienen problemas con la selección, resalte para la fila superior e inferior donde aparece el rectángulo de fondo en la selección, necesita configurar el selector para su vista de lista en color transparente.

listView.setSelector(R.color.transparent);

En color.xml simplemente agregue lo siguiente:

<color name="transparent">#00000000</color>

Answer 2

Aquí hay una forma de hacerlo (¡gracias a la documentación de Android!):

Agregue lo siguiente en un archivo (digamos customshape.xml) y luego colóquelo en (res / drawable / customshape.xml)

<?xml version="1.0" encoding="UTF-8"?> 
<shape xmlns:android="http://schemas.android.com/apk/res/android" 
     android:shape="rectangle"> 
     <gradient 
         android:startColor="#SomeGradientBeginColor"
         android:endColor="#SomeGradientEndColor" 
         android:angle="270"/> 

    <corners 
         android:bottomRightRadius="7dp" 
         android:bottomLeftRadius="7dp" 
         android:topLeftRadius="7dp" 
         android:topRightRadius="7dp"/> 
</shape> 

Una vez que haya terminado con la creación de este archivo, simplemente configure el fondo de una de las siguientes maneras:

A través de Code: listView.setBackgroundResource(R.drawable.customshape);

A través de XML , simplemente agregue el siguiente atributo al contenedor (por ejemplo, LinearLayout o a cualquier campo):

android:background="@drawable/customshape"

Espero que alguien lo encuentre útil...

Answer 3

Aunque eso funcionó, también eliminó todo el color de fondo. Estaba buscando una manera de hacer solo el borde y simplemente reemplazar ese código de diseño XML con este y ¡estaba listo para empezar!

<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <stroke android:width="4dp" android:color="#FF00FF00" />
    <padding android:left="7dp" android:top="7dp"
            android:right="7dp" android:bottom="7dp" />
    <corners android:radius="4dp" />
</shape> 

Answer 4

Esto fue increíblemente útil para mí. Me gustaría sugerir otra solución para resaltar perfectamente las esquinas redondeadas si está utilizando su propio CustomAdapter .

Definiendo archivos XML

Antes que nada, ve dentro de tu carpeta dibujable y crea 4 formas diferentes:

• shape_top

  <gradient
      android:startColor="#ffffff"
      android:endColor="#ffffff"
      android:angle="270"/>
  <corners
      android:topLeftRadius="10dp"
      android:topRightRadius="10dp"/>

• shape_normal

  <gradient
      android:startColor="#ffffff"
      android:endColor="#ffffff"
      android:angle="270"/>
  <corners
      android:topLeftRadius="10dp"
      android:topRightRadius="10dp"/>

• shape_bottom

  <gradient
      android:startColor="#ffffff"
      android:endColor="#ffffff"
      android:angle="270"/>
  <corners
      android:bottomRightRadius="10dp"
      android:bottomRightRadius="10dp"/>

• shape_rounded

  <gradient
      android:startColor="#ffffff"
      android:endColor="#ffffff"
      android:angle="270"/>
  <corners
      android:topLeftRadius="10dp"
      android:topRightRadius="10dp"
      android:bottomRightRadius="10dp"
      android:bottomRightRadius="10dp"/>

Ahora, cree un diseño de fila diferente para cada forma, es decir, para shape_top :

• También puede hacer esto programáticamente cambiando el fondo.

  <TextView
      android:id="@+id/textView1"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_gravity="center"
      android:layout_marginLeft="20dp"
      android:layout_marginRight="10dp"
      android:fontFamily="sans-serif-light"
      android:text="TextView"
      android:textSize="22dp" />
  
  <TextView
      android:id="@+id/txtValue1"
      android:layout_width="match_parent"
      android:layout_height="48dp"
      android:textSize="22dp"
      android:layout_gravity="right|center"
      android:gravity="center|right"
      android:layout_marginLeft="20dp"
      android:layout_marginRight="35dp"
      android:text="Fix"
      android:scaleType="fitEnd" />

Y defina un selector para cada lista de formas, es decir, para shape_top :

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- Selected Item -->

    <item android:state_selected="true"
        android:drawable="@drawable/shape_top" />
    <item android:state_activated="true"
        android:drawable="@drawable/shape_top" />

    <!-- Default Item -->
    <item android:state_selected="false"
        android:drawable="@android:color/transparent" />
</selector>

Cambia tu Adaptador Personalizado

Finalmente, defina las opciones de diseño dentro de su CustomAdapter :

if(position==0)
{
 convertView = mInflater.inflate(R.layout.list_layout_top, null);
}
else
{
 convertView = mInflater.inflate(R.layout.list_layout_normal, null);
}

if(position==getCount()-1)
{
convertView = mInflater.inflate(R.layout.list_layout_bottom, null);
}

if(getCount()==1)
{
convertView = mInflater.inflate(R.layout.list_layout_unique, null);
}

¡Y eso está hecho!

Answer 5

Estoy usando una vista personalizada que distribuyo sobre las otras y que solo dibuja las 4 esquinas pequeñas del mismo color que el fondo. Esto funciona independientemente de los contenidos de la vista y no asigna mucha memoria.

public class RoundedCornersView extends View {
    private float mRadius;
    private int mColor = Color.WHITE;
    private Paint mPaint;
    private Path mPath;

    public RoundedCornersView(Context context) {
        super(context);
        init();
    }

    public RoundedCornersView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();

        TypedArray a = context.getTheme().obtainStyledAttributes(
                attrs,
                R.styleable.RoundedCornersView,
                0, 0);

        try {
            setRadius(a.getDimension(R.styleable.RoundedCornersView_radius, 0));
            setColor(a.getColor(R.styleable.RoundedCornersView_cornersColor, Color.WHITE));
        } finally {
            a.recycle();
        }
    }

    private void init() {
        setColor(mColor);
        setRadius(mRadius);
    }

    private void setColor(int color) {
        mColor = color;
        mPaint = new Paint();
        mPaint.setColor(mColor);
        mPaint.setStyle(Paint.Style.FILL);
        mPaint.setAntiAlias(true);

        invalidate();
    }

    private void setRadius(float radius) {
        mRadius = radius;
        RectF r = new RectF(0, 0, 2 * mRadius, 2 * mRadius);
        mPath = new Path();
        mPath.moveTo(0,0);
        mPath.lineTo(0, mRadius);
        mPath.arcTo(r, 180, 90);
        mPath.lineTo(0,0);
        invalidate();
    }

    @Override
    protected void onDraw(Canvas canvas) {

        /*Paint paint = new Paint();
        paint.setColor(Color.RED);
        canvas.drawRect(0, 0, mRadius, mRadius, paint);*/

        int w = getWidth();
        int h = getHeight();
        canvas.drawPath(mPath, mPaint);
        canvas.save();
        canvas.translate(w, 0);
        canvas.rotate(90);
        canvas.drawPath(mPath, mPaint);
        canvas.restore();
        canvas.save();
        canvas.translate(w, h);
        canvas.rotate(180);
        canvas.drawPath(mPath, mPaint);
        canvas.restore();
        canvas.translate(0, h);
        canvas.rotate(270);
        canvas.drawPath(mPath, mPaint);
    }
}

Answer 6

Las otras respuestas son muy útiles, ¡gracias a los autores!

Pero no pude ver cómo personalizar el rectángulo al resaltar un elemento al seleccionarlo, en lugar de deshabilitar el resaltado @alvins @bharat dojeha.

Lo siguiente me funciona para crear un contenedor de elementos de vista de lista redondeada sin contorno y un gris más claro cuando se selecciona con la misma forma:

Su xml necesita contener un selector como, por ejemplo, (en res / drawable / customshape.xml):

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:state_pressed="true" >
    <shape xmlns:android="http://schemas.android.com/apk/res/android" >
        <stroke android:width="8dp" android:color="@android:color/transparent" />
        <padding android:left="14dp" android:top="14dp"
                android:right="14dp" android:bottom="14dp" />
        <corners android:radius="10dp" />
        <gradient 
             android:startColor="@android:color/background_light"
             android:endColor="@android:color/transparent" 
             android:angle="225"/> 
    </shape>
</item>
<item android:state_pressed="false">
    <shape xmlns:android="http://schemas.android.com/apk/res/android" >
        <stroke android:width="8dp" android:color="@android:color/transparent" />
        <padding android:left="14dp" android:top="14dp"
                android:right="14dp" android:bottom="14dp" />
        <corners android:radius="10dp" />
        <gradient 
             android:startColor="@android:color/darker_gray"
             android:endColor="@android:color/transparent" 
             android:angle="225"/> 
    </shape>        
</item>

Luego debe implementar un adaptador de lista y anular el método getView para establecer el selector personalizado como fondo

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        //snip
        convertView.setBackgroundResource(R.drawable.customshape);
        //snip
    }

y también debe ''ocultar'' el rectángulo del selector predeterminado, por ejemplo, en onCreate (también oculto mi delgada línea divisoria gris entre los elementos):

listView.setSelector(android.R.color.transparent);
listview.setDivider(null);

Este enfoque resuelve una solución general para los objetos dibujables, no solo ListViewItem con varios estados de selección.

Answer 7

Otra solución para la selección resalta los problemas con los elementos primero y último de la lista:

Agregue relleno a la parte superior e inferior de su fondo de lista igual o mayor que el radio. Esto garantiza que el resaltado de selección no se superponga con las curvas de la esquina.

Esta es la solución más fácil cuando necesita resaltar la selección no transparente.

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
    <solid android:color="@color/listbg" />
    <stroke
        android:width="2dip"
        android:color="#D5D5D5" />
    <corners android:radius="10dip" />

    <!-- Make sure bottom and top padding match corner radius -->
    <padding
        android:bottom="10dip"
        android:left="2dip"
        android:right="2dip"
        android:top="10dip" />
</shape>

Answer 8

de hecho, creo que la mejor solución se describe en este enlace:

http://blog.synyx.de/2011/11/android-listview-with-rounded-corners/

en resumen, utiliza un fondo diferente para los elementos superior, medio e inferior, de modo que los superiores e inferiores se redondearían.

Answer 9

para hacer borde u tiene que hacer otro archivo xml con propiedad de sólido y esquinas en la carpeta dibujable y lo llama en segundo plano

Answer 10

Actualizar

La solución en estos días es usar un CardView con soporte para esquinas redondeadas integradas.

Respuesta original *

Otra forma que encontré fue enmascarar su diseño dibujando una imagen en la parte superior del diseño. Puede ser que te ayude. Echa un vistazo a las esquinas recortadas redondeadas de Android XML