Radio de la esquina de CardView
¿Hay una manera de hacer CardView sólo tienen radio de esquina en la parte superior?
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="wrap_content" app:cardCornerRadius="10dp" >
- ¿Cómo agregar bibliotecas de soporte?
- Uso de la barra de herramientas AppCompat con FrameLayout
- Appcompat Toolbar "android: title" el atributo no funciona
- Diferentes estilos de colorControlActivated en Android
- ActionBar vs Barra de herramientas o barra de herramientas y barra de herramientas
- Diálogo AppCompat con estilo que contiene un fragmento
- Android spinner con subrayado appcompat
- Android, appcompat v21, implementar técnicas de desplazamiento
- Cómo ocultar el indicador del cajón de navegación mientras utiliza appcompat21
- Gradle, No se pudo expandir ZIP appcompat-v7: 19.0.1
- ¿Cómo vuelvo a empaquetar un AAR para la fusión del manifiesto gradle de Android?
- El uso de SearchView con AppCompatActivity genera fallas en la interfaz de usuario
- Animación ActionBarDrawerToggle
A menos que intente extender la clase Android CardView
, no podrá personalizar ese atributo desde XML
.
No obstante, existe una manera de obtener ese efecto.
Coloque un CardView
dentro de otro CardView
y aplique un fondo transparente a su CardView
externo y elimine su radio de esquina ( "cornerRadios = 0dp"
). Su CardView
interior tendrá un valor de cornerRadius de 3dp, por ejemplo. A continuación, aplique un marginTop a su CardView
interno, por lo que sus límites inferiores serán cortados por el CardView
externo. De esta forma, el radio de la esquina inferior de su interior CardView
se CardView
.
El código XML es el siguiente:
<android.support.v7.widget.CardView xmlns:card_view="http://schemas.android.com/apk/res-auto" android:id="@+id/card_view_outer" android:layout_width="match_parent" android:layout_height="200dp" android:layout_gravity="center" card_view:cardBackgroundColor="@android:color/transparent" card_view:cardCornerRadius="0dp" card_view:cardElevation="3dp" > <android.support.v7.widget.CardView xmlns:card_view="http://schemas.android.com/apk/res-auto" android:id="@+id/card_view_inner" android:layout_width="match_parent" android:layout_height="200dp" android:layout_gravity="center" android:layout_marginTop="3dp" card_view:cardBackgroundColor="@color/green" card_view:cardCornerRadius="4dp" card_view:cardElevation="0dp" > </android.support.v7.widget.CardView> </android.support.v7.widget.CardView>
Y el efecto visual es el siguiente:
Siempre coloque su contenido en su CardView
interno. Su CardView externo sólo sirve para "ocultar" las esquinas redondeadas inferiores de CardView
interno.
CAMINO FÁCIL
dependencies: compile 'com.android.support:cardview-v7:23.1.1' <android.support.v7.widget.CardView android:layout_width="80dp" android:layout_height="80dp" android:elevation="12dp" android:id="@+id/view2" app:cardCornerRadius="40dp" android:layout_centerHorizontal="true" android:innerRadius="0dp" android:shape="ring" android:thicknessRatio="1.9"> <ImageView android:layout_height="80dp" android:layout_width="match_parent" android:id="@+id/imageView1" android:src="@drawable/Your_image" android:layout_alignParentTop="true" android:layout_centerHorizontal="true"> </ImageView> </android.support.v7.widget.CardView>
Necesitas hacer 2 cosas:
1) Llame a setPreventCornerOverlap(false)
en su CardView.
2) Poner redondeado Imageview dentro de CardView
Acerca de redondear su imagen, tuve el mismo problema, así que hice una biblioteca que puede establecer diferentes radios en cada esquina . Finalmente conseguí el resultado que quería como a continuación.
Puede utilizar este xml dibujable y establecer como fondo de cardview:
<?xml version="1.0" encoding="UTF-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android"> <solid android:color="#ffffffff"/> <stroke android:width="1dp" android:color="#ff000000" /> <padding android:left="1dp" android:top="1dp" android:right="1dp" android:bottom="1dp" /> <corners android:topLeftRadius="7dp" android:topRightRadius="7dp"/> </shape>
Escribí un lib librable a la esquina ronda personalizada posición, se ve así:
Puede obtener esta lib en aquí:
Hay un ejemplo de cómo lograrlo, cuando la tarjeta está en la parte inferior de la pantalla. Si alguien tiene este tipo de problema sólo hacer algo así:
<android.support.v7.widget.CardView android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginBottom="-5dp" card_view:cardCornerRadius="4dp"> <SomeView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginBottom="5dp"> </SomeView> </android.support.v7.widget.CardView>
Vista de tarjeta tiene un margen inferior negativo. La vista dentro de una vista de tarjeta tiene el mismo, pero el margen inferior positivo. De esta manera las partes redondeadas se ocultan debajo de la pantalla, pero todo se ve exactamente igual, porque la vista interna tiene un margen de contador.
Puede utilizar la biblioteca: OptionRoundCardview
La forma más fácil de lograrlo en Android Studio se explica a continuación:
Paso 1:
Escriba debajo de la línea en las dependencias en build.gradle
:
compile 'com.android.support:cardview-v7:+'
Paso 2:
Copie debajo del código en su archivo xml para integrar el CardView
.
Para que cardCornerRadius
funcione, asegúrese de incluir la siguiente línea en el diseño de los padres: xmlns:card_view="http://schemas.android.com/apk/res-auto"
Y recuerde usar card_view
como espacio de nombres para usar la propiedad cardCornerRadius
.
Por ejemplo: card_view:cardCornerRadius="10dp"
Código XML:
<android.support.v7.widget.CardView xmlns:card_view="http://schemas.android.com/apk/res-auto" android:id="@+id/card_view" android:layout_width="match_parent" android:layout_height="match_parent" card_view:cardCornerRadius="10dp"/>
- Android layout_width vista – ¿cómo cambiar de forma programática?
- Creación de hashmap / map desde recursos XML