radius - textview rounded corners android

¿Cómo puedo solucionar el problema de Android 9161, donde se intercambian bottomRightRadius y bottomLeftRadius?

Question

Mi meta:

Figura 1: El objetivo

Entonces, antes de que supiera sobre el problema, esto es lo que intenté.

Primero, un diseño base:

<LinearLayout
    android:orientation="horizontal"
    android:layout_below="@id/heading"
    android:layout_marginTop="10dp"
    android:layout_width="@dimen/horizontal_two_button_width"
    android:layout_height="@dimen/button_height_small" >

    <Button
        android:id="@+id/button_one"
        android:layout_width="0dp"
        android:layout_weight="1.0"
        android:layout_height="fill_parent"
        android:padding="10dp"
        style="@style/ButtonText"
        android:background="@drawable/button_left_green" />

    <Button
        android:id="@+id/button_two"
        android:layout_width="0dp"
        android:layout_weight="1.0"
        android:layout_height="fill_parent"
        android:padding="10dp"
        style="@style/ButtonText"
        android:background="@drawable/button_right_green" />      

</LinearLayout>

El ''button_left_green'' dibujable:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/button_left_green_pressed"
        android:state_pressed="true" />
    <item android:drawable="@drawable/button_left_green_focused"
        android:state_focused="true" />
    <item android:drawable="@drawable/button_left_green_default" />
</selector>

Y, por ejemplo, el dibujable ''button_left_green_default'':

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <solid android:color="@color/shadow" />
            <corners
                android:radius="5dp"
                android:topLeftRadius="5dp"
                android:topRightRadius="0dp"
                android:bottomLeftRadius="5dp"
                android:bottomRightRadius="0dp" />      
        </shape>
    </item>
    <item
        android:bottom="19dp"
        android:top="1dp"
        android:left="1dp"
        android:right="1dp" >

        <shape android:shape="rectangle">
            <gradient
                android:startColor="@color/button_left_green_top_gradient_start"
                android:endColor="@color/button_left_green_top_gradient_end"
                android:angle="270" />

            <corners
                android:radius="5dp"
                android:topLeftRadius="5dp"
                android:topRightRadius="0dp"
                android:bottomLeftRadius="0dp"
                android:bottomRightRadius="0dp" />
        </shape>
    </item>

    <item
        android:top="19dp"
        android:bottom="1dp"
        android:left="1dp"
        android:right="1dp" >

        <shape android:shape="rectangle" >
            <solid android:color="@color/button_left_green_bottom_gradient" />

            <corners
                android:radius="5dp"
                android:topLeftRadius="0dp"
                android:topRightRadius="0dp"
                android:bottomLeftRadius="5dp"
                android:bottomRightRadius="0dp" />
        </shape>
    </item>
</layer-list>

Entonces, después de todo eso, obtuve la imagen en la Figura 2:

Figura 2: Toma uno

Después de revisar la definición de las esquinas inferiores, me convencí de que estaba loco hasta que encontré el problema conocido: http://code.google.com/p/android/issues/detail?id=9161

Preferiría no simplemente intercambiarlos, porque entonces si / cuando el problema se solucione, los botones se romperán en las versiones más nuevas.

Una idea que tuve fue dejar los botones reales como rectángulos regulares (es decir, sin radios de esquina) y envolver ambos botones con un rectángulo redondeado. Agregué un fondo dibujable al LinearLayout que tenía esquinas redondeadas, pero las esquinas de los botones se superponían al borde del borde redondeado LinearLayout (consulte la Figura 3).

Figura 3: Toma dos

¿Cómo puedo mantener el fondo del botón dentro de los límites del fondo dibujable de su padre? ¿O tiene alguna otra sugerencia sobre cómo solucionar el error?

Answer 1

Debería funcionar si proporcionamos la configuración intercambiada ya la izquierda derecha; de modo que el intercambio de errores restaurará la configuración requerida, como se muestra a continuación, solo para el botón izquierdo, curvo y con bordes afilados

<corners android:radius="2dp" android:topLeftRadius="2dp" 
    android:topRightRadius="0dp" android:bottomLeftRadius="0dp" 
    android:bottomRightRadius="2dp">

Answer 2

Esto parece haber sido arreglado en Android 3.0 . Y hay un comentario sobre el problema que explica cómo tener compatibilidad con versiones anteriores.

Answer 3

Esto se siente como un hack, pero funcionó.

Los botones se componían originalmente de (1) una sombra exterior, (2) un gradiente de la mitad superior y (3) un color sólido inferior. Esto es lo que hice:

1. Hizo las mitades superior e inferior redondeadas en las cuatro esquinas. Esto dejó (1) un espacio en el medio de los lados izquierdo y derecho y (2) esquinas redondeadas a la derecha.
2. Creó un pequeño rectángulo para rellenar el espacio en el centro izquierdo.
3. Creó otro pequeño rectángulo para rellenar el espacio en el centro a la derecha y hacer las esquinas superior e inferior en el cuadrado del lado derecho.

Aquí hay un ejemplo del XML para el estado normal del botón izquierdo.

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <!-- Main part of button -->
    <item
        android:bottom="20dp"
        android:right="5dp" >

        <shape android:shape="rectangle">
            <solid android:color="@color/button_normal_green_top" />
            <corners android:radius="5dp" />
        </shape>
    </item>

    <item
        android:top="20dp"
        android:right="5dp" >

        <shape
            android:shape="rectangle" >
            <solid android:color="@color/button_normal_green_bottom" />
            <corners android:radius="5dp" />
        </shape>
    </item>

    <!-- Patch left middle part of button, which was left empty due to rounded 
    corners on top and bottom halves of button -->
    <item
        android:top="5dp"
        android:bottom="20dp"
        android:right="5dp" >

        <shape android:shape="rectangle">
            <solid android:color="@color/button_normal_green_top" />
        </shape>
    </item>

    <item
        android:top="20dp"
        android:bottom="5dp"
        android:right="5dp" >

        <shape
            android:shape="rectangle" >
            <solid android:color="@color/button_normal_green_bottom" />
        </shape>
    </item>

    <!-- Patch right middle and make right side corners square -->
    <item
        android:bottom="20dp"
        android:left="15dp" >

        <shape android:shape="rectangle">
            <solid android:color="@color/button_normal_green_top" />
        </shape>
    </item>

    <item
        android:top="20dp"
        android:left="15dp" >

        <shape android:shape="rectangle" >
            <solid android:color="@color/button_normal_green_bottom" />
        </shape>
    </item>
</layer-list>

Sin embargo, sí perdí el gradiente en la mitad superior, pero puedo vivir con el botón de dos tonos. Así es como se ve el resultado:

Answer 4

Otra solución es crear otra carpeta llamada "drawable-v12".

Aquí, coloque el radio correcto (por lo tanto, bottomLeftRadius, topLeftRadius), y en la carpeta dibujable original ponga los valores intercambiados. Luego, 3.1+ utilizará la carpeta v12, y las versiones anteriores a 3.1 usarán la carpeta dibujable.

Answer 5

Una mejor solución:

• Crear otra carpeta de values-12
• Cree el archivo dimensions.xml bajo values-12 .
• Ponga 2 propiedades de dimensión en values-12/dimensions.xml para el radio de la esquina inferior izquierda y la esquina inferior derecha.
• Ponga 2 propiedades de dimensión en values/dimensions.xml para los valores de radio de esquina inferior izquierda e inferior derecha, pero recuerde voltearlos.

Use los valores de dimensión al asignar el radio de la esquina en lugar de codificarlos en sus dibujos. Cuando se carga una versión 3.1 anterior, utilizará los valores de radio de esquina invertidos en los valores de carpeta. Cuando se cargue 3.1+, utilizará los valores de radio de esquina correctos en los valores de carpeta values-12 .

¿Por qué es esto mejor? No es necesario duplicar el código dibujable. Ahora puede cambiar cualquier código no relacionado con los radios de esquina sin tener que actualizar 2 o más lugares.