No se puede obtener la forma exacta del círculo al usar la vista de tarjeta

4 minutos de lectura

avatar de usuario
Ayyappán

Estoy usando la vista de tarjeta para el botón de acción flotante en el diseño de material de Android. Estoy usando el siguiente código para obtener el círculo.

<android.support.v7.widget.CardView
    android:id="@+id/fab"
    android:layout_width="38dp"
    android:layout_height="38dp"
    android:layout_marginBottom="10dp"
    android:layout_marginRight="10dp"
    card_view:background="@color/blue"
    card_view:cardCornerRadius="19dp"
    card_view:cardPreventCornerOverlap = "false"
    card_view:cardElevation="6dp" >
</android.support.v7.widget.CardView>

He establecido el radio de la esquina como la mitad del ancho. pero aún no puedo obtener la forma del círculo.ingrese la descripción de la imagen aquí

  • ¿Puedes subir una captura de pantalla de lo que ves?

    – hoomi

    16 de marzo de 2015 a las 10:43

  • Lo siento hoomy, no puedo subir la captura de pantalla. La vista de la tarjeta parece un rectángulo redondeado.

    – Ayyappán

    16 de marzo de 2015 a las 10:57

  • ¿Mantiene el ancho y la altura como 38 dp?

    – hoomi

    16 de marzo de 2015 a las 10:59

  • No hoomi, no parece 38dp. buscando menos de 38dp. en realidad traté de aumentar el radio del círculo. pero aumenta la altura y el ancho también.

    – Ayyappán

    16 de marzo de 2015 a las 11:02

  • ¿Tienes respuesta para este problema?

    – Drupal

    21 de agosto de 2015 a las 9:29

Para lograr una forma circular usando vista de tarjeta puedes configurar el forma propiedad, android:forma=”anillo”.
app:cardCornerRadius debe establecerse en la mitad del ancho o alto de la vista secundaria

<android.support.v7.widget.CardView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:innerRadius="0dp"
        android:shape="ring"
        app:cardCornerRadius="75dp">

        <ImageView
            android:layout_width="150dp"
            android:layout_height="150dp"
            android:layout_gravity="center"
            android:background="@drawable/image" />
     </android.support.v7.widget.CardView>

  • No es necesario agregar el forma atributo como el tarjetaEsquinaRadio es suficiente.

    – Ahmed Mad

    8 abr 2020 a las 21:45


avatar de usuario
Ayyappán

He resuelto el problema. Ahora, Android proporciona una biblioteca de diseño para el diseño de materiales, que tiene la Botón de acción flotante. No es necesario personalizar la vista de tarjeta para el botón de acción flotante.

<android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="@dimen/fab_margin"  />

Agregar biblioteca de diseño en dependencias gradle

compile 'com.android.support:design:23.1.1'

Para más detalles, consulte este Enlace

  • pero, ¿cómo podemos configurar la imagen dinámica? También debe redondearse

    – Amit Verma

    28 de noviembre de 2018 a las 14:42


Para obtener una forma de círculo perfecta utilizando una vista de tarjeta, el radio de la esquina debe ser la mitad del ancho o la altura (teniendo en cuenta que es un cuadrado). Además, me he dado cuenta de que está utilizando parámetros card_view, no lo haga.

<android.support.v7.widget.CardView
android:layout_width="38dp"
android:layout_height="38dp"
app:cardCornerRadius="19dp"
app:cardElevation="6dp"
android:layout_marginBottom="10dp"
android:layout_marginRight="10dp"
android:id="@+id/fab"
android:background="@color/blue"
>

  • No es una solución mantenible o escalable

    – Jaydev

    6 de mayo de 2017 a las 8:29

avatar de usuario
Gautam Kumar

usar

forma = “anillo”

use el mismo layout_height y layout_weight

y

app:cardCornerRadius= la mitad de layout_height o layout_weight

ejemplo

<android.support.v7.widget.CardView
                        android:id="@+id/cardview"
                        android:layout_width="110dp"
                        android:layout_height="110dp"
                        android:shape="ring"
                        app:cardCornerRadius="55dp">
</android.support.v7.widget.CardView>

<androidx.cardview.widget.CardView
        android:layout_width="60dp"
        android:layout_marginStart="150dp"
        app:cardCornerRadius="360dp"
        android:layout_height="60dp">

  • Agregue alguna explicación para corroborar su respuesta.

    – Sathish Gurú V

    5 de febrero de 2020 a las 9:16

  • Estoy dando ese CardCornerRadius 360dp

    – balu koppineedi

    14 de febrero de 2020 a las 10:57

¡Se me ocurrió una solución simple de usar un Drawable y se ve increíble!

Obtén Drawable aquí
https://drive.google.com/drive/folders/0B4Vo_ku-aIKzUFFnUjYxYVRLaGc?resourcekey=0-RiH8lUO0i1kwnZsqquqjnQ&usp=sharing

ingrese la descripción de la imagen aquí

  • Agregue alguna explicación para corroborar su respuesta.

    – Sathish Gurú V

    5 de febrero de 2020 a las 9:16

  • Estoy dando ese CardCornerRadius 360dp

    – balu koppineedi

    14 de febrero de 2020 a las 10:57

Probé su código y descubrí que las tarjetas eran menos redondas con respecto al aumento en el valor de elevación de la tarjeta. Intente configurarlo en cero y esto al menos hace que se vea mejor.

card_view:cardElevation="0dp";

Pero una opción probablemente mejor sería usar el FloatingActionButton para el botón redondo

<android.support.design.widget.FloatingActionButton
    android:src="https://stackoverflow.com/questions/29074717/@drawable/your_drawble_name"
    app:fabSize="normal"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />

¿Ha sido útil esta solución?

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Configurar y más información
Privacidad