Android: dibujando formas personalizadas

android-shapedrawable

Question

Quiero dibujar una forma personalizada como esta- .

Una opción es hacer cada forma en photoshop individualmente y luego usarla en codificación, pero quiero saber si es posible dibujar esto utilizando xml.

¿Cómo debo dibujar la forma de esta manera? No esperes un código completo, solo dame una idea o apúntame en la dirección correcta.

Answer 1

Prueba la siguiente forma dibujable xml:

<?xml version="1.0" encoding="UTF-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<!-- Colored rectangle-->
<item>
<shape android:shape="rectangle">
<size
android:width="100dp"
android:height="40dp" />
<solid android:color="#FAD55C" />
</shape>
</item>
<!-- This rectangle for the left side -->
<!-- Its color should be the same as layout''s -->
<item
android:right="90dp"
android:left="-30dp">
<rotate
android:fromDegrees="45">
<shape android:shape="rectangle">
<solid android:color="#ffffff" />
</shape>
</rotate>
</item>
<!-- These rectangles for the right side -->
<!-- Their color should be the same as layout''s -->
<item
android:top="-40dp"
android:bottom="63dp"
android:right="-25dp">
<rotate
android:fromDegrees="45">
<shape android:shape="rectangle">
<solid android:color="#ffffff" />
</shape>
</rotate>
</item>
<item
android:top="63dp"
android:bottom="-40dp"
android:right="-25dp">
<rotate
android:fromDegrees="-45">
<shape android:shape="rectangle">
<solid android:color="#ffffff" />
</shape>
</rotate>
</item>
</layer-list>

Así es como se ve en un fondo blanco:

Aquí hay más información sobre Shape Drawables .

EDITAR:

La siguiente es una pequeña explicación de cómo se hace.

1. Colocamos un rectángulo amarillo de 100 x 40 dp. A partir de ahora, este rectángulo se puede tratar como un contenedor para el resto de las formas. Los bordes del contenedor se consideran como orígenes para los bordes de las formas que vamos a colocar dentro del contenedor. Es decir, establecer top, bottom, right and left atributos top, bottom, right and left de la etiqueta de size de forma significa la distancia desde los bordes de la forma hasta los bordes top, bottom, right and left del contenedor (rectángulo amarillo).

Por ejemplo, si queremos colocar un rectángulo más pequeño dentro del amarillo con un espacio de 10dp desde el borde de cada rectángulo amarillo, estableceremos los atributos top, bottom, right and left igual a 10dp para el nuevo rectángulo (interior).

2. Con el fin de lograr una forma de flecha para el lado derecho del rectángulo amarillo, usamos dos rectángulos blancos que se mueven de manera apropiada hacia la derecha y se giran. Observe que los valores del atributo de etiqueta de size pueden ser negativos, lo que significa que el borde correspondiente de la forma aparece fuera del contenedor. En el ejemplo anterior, si establece, por ejemplo, el atributo left a 100 dp o más, el rectángulo interior no se mostrará, porque estará detrás del borde derecho del amarillo.

Con respecto a la rotación, va en el sentido de las agujas del reloj para valores positivos y en sentido contrario a las agujas del reloj.

3. Para la forma del lado izquierdo es suficiente usar solo un rectángulo que se mueve hacia la izquierda (parcialmente fuera del contenedor) y girado a 45 grados.

Con suerte, esto no te confundió.