rounded - shape corners android

Esquinas recortadas redondeadas de Android XML

Question

Configuré LinearLayout con el siguiente fondo dibujable:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <corners android:radius="10dp" />
    <solid android:color="#CCFFFFFF"/>
</shape>

El problema que tengo es que dentro de LinearLayout tengo otro elemento LinearLayout que se encuentra en la parte inferior de su padre. Como no tiene esquinas redondeadas, sus esquinas se extienden más allá de las esquinas inferiores izquierda y derecha de los padres.

El fondo dibujable en el Child LinearLayout se ve así:

<?xml version="1.0" encoding="utf-8"?>
<bitmap
    xmlns:android="http://schemas.android.com/apk/res/android" 
    android:src="@drawable/pedometer_stats_background" 
    android:tileMode="repeat"   
/>

El problema se ve así: http://kttns.org/hn2zm en el dispositivo, el recorte no es más evidente.

¿Cuál es el mejor método para lograr el recorte?

Answer 1

API nivel 21 (Jellybean) agregó View.setClipToOutline . De la documentación de Android sobre Definir sombras y vistas de recorte :

Para recortar una vista a la forma de un dibujable, configure el dibujable como el fondo de la vista ... y llame al método View.setClipToOutline ().

Probé esto al configurar el fondo de una Vista padre en un GradientDrawable con un radio de esquina, y las Vistas secundarias se recortan correctamente para que coincidan con las mismas esquinas redondeadas del elemento principal.

Answer 2

Lo que tu descripción suena así:

<LinearLayout android:shape="rounded">
   <LinearLayout android:background="@drawable/pedometer_stats_background">
   </LinearLayout>
</LinearLayout>

Y el diseño interior está empujando fuera de las esquinas redondeadas porque no está redondeado. Tendrás que redondear las esquinas de tu mapa de bits. Si tiene un mapa de bits repetitivo, querrá ver la definición de un dibujo dibujable de nueve parches. Redondea las esquinas y luego define la parte del gráfico que se puede expandir.

http://developer.android.com/guide/topics/resources/drawable-resource.html#Shape

Sería bueno si pudiéramos simplemente agregar un mapa de bits a la forma dibujable y aplicarlo como una máscara sobre cualquier forma que dibujemos. Y, apuesto a que si sabes lo que estás haciendo, podrías crear una subclase Shape que dibuje un mapa de bits, pero eso no está incluido en Android de forma predeterminada.

Answer 3

Actualización 2018

Mucho ha cambiado en los últimos 7 años.

La mejor forma de manejar este tipo de diseño en estos días es usar CardView que también es compatible con esquinas redondeadas y muchas otras características de UI más nuevas.

Aplique la propiedad cardCornerRadius para configurar las esquinas para redondear.

<android.support.v7.widget.CardView
    .......
    app:cardCornerRadius="16dp">

</android.support.v7.widget.CardView>

Original

Necesitaba diseños redondos estilo iPhone, con un fondo gris detrás de ellos. (suspiro, siempre copiando el iPhone)

Estaba frustrado porque no pude encontrar una manera de enmascarar un diseño. La mayoría de las respuestas aquí dicen usar una imagen de fondo, pero esto no es lo que necesitaba.

Editar : la respuesta anterior sugirió usar FrameLayout y configurar el android:foreground dibujable. Esto introdujo un extraño relleno en la vista. He actualizado mi respuesta para usar una técnica RelativeLayout más simple.

El truco es usar un RelativeLayout ; coloque su diseño dentro de él. Debajo de su diseño, agregue otro ImageView , estableciendo su background en un marco de imagen enmascaradora adecuado. Esto dibujará eso encima de tu otro diseño.

En mi caso, hice un archivo de 9Patch que era un fondo gris, con un rectángulo redondeado transparente cortado de él.

Esto crea la máscara perfecta para su diseño subyacente.

El código XML está debajo: este es un archivo XML de diseño normal:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_height="wrap_content" android:layout_width="fill_parent">

    <!-- this can be any layout that you want to mask -->
    <LinearLayout android:id="@+id/mainLayout"
        android:layout_height="wrap_content"
        android:layout_width="fill_parent" android:orientation="vertical"
        android:background="@android:color/white">

        <TextView android:layout_height="wrap_content"
            android:layout_width="wrap_content" android:layout_gravity="center"
            android:text="Random text..." />

    </LinearLayout>

    <!-- FRAME TO MASK UNDERLYING VIEW -->
    <ImageView android:layout_height="fill_parent" 
        android:layout_width="fill_parent" 
        android:background="@drawable/grey_frame"
        android:layout_alignTop="@+id/mainLayout"
        android:layout_alignBottom="@+id/mainLayout" />

</RelativeLayout>

Observe ImageView en la parte inferior, alineado arriba y abajo al diseño principal, con el conjunto de imágenes enmascarado:

• android:background="@drawable/grey_frame"

Esto hace referencia a mi archivo 9Patch - y enmascara el diseño subyacente al dibujarse en primer plano.

Aquí hay un ejemplo que muestra las esquinas redondeadas grises sobre un diseño estándar.

hth