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 utilizar appcompat-v7 con Android API 19
- Barra de herramientas con ProgressBar horizontal debajo
- Cambiar actionOverflowButtonStyle con appcompat v21
- Configuración de SupportActionBar subtitle multiline
- Android DrawerLayout.setDrawerLockMode () no funciona
- El uso de SearchView con AppCompatActivity genera fallas en la interfaz de usuario
- No tengo una carpeta separada llamada valores v21
- Estilo AppCompat SearchView con AppCompat 22.1.0 no funciona
- Edittext el color es blanco en appcompat 22.2
- ¿Cómo puedo utilizar vectorDrawable como icono para notificaciones push mediante Android Support Library 23.2? setSmallIcon da error
- Android: RecyclerView dentro de un ScrollView (o paralaje)
- ¿Cómo cambiar el título de diálogo de Appcompat y el color del divisor de título?
- Barra de herramientas de AppCompat: establece el tema de la barra de herramientas desde el tema superior
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