propiedades - shape xml android

¿Cómo crear una flecha orientada hacia la derecha(chevron) utilizando formas XML en Android?

Question

¿Cómo crear una flecha orientada hacia la derecha usando formas xml en android como este?

Answer 1

He tenido un problema similar. Así es como lo resolví:

<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item>
        <shape>
            <solid android:color="@android:color/transparent"/>
            <size android:width="2dp" android:height="50dp"/>
        </shape>
    </item>

    <item android:bottom="20dp">
        <rotate
            android:fromDegrees="-45"
            android:toDegrees="45">
            <shape android:shape="rectangle">
                <solid android:color="@android:color/black"/>
                <corners
                    android:radius="1dp"
                    android:bottomRightRadius="0dp"
                    android:bottomLeftRadius="0dp"/>
            </shape>
        </rotate>
    </item>

    <item android:top="20dp">
        <rotate
            android:fromDegrees="45"
            android:toDegrees="45">
            <shape android:shape="rectangle">
                <solid android:color="@android:color/black"/>
                <corners
                    android:radius="1dp"
                    android:topRightRadius="0dp"
                    android:topLeftRadius="0dp"/>
            </shape>
        </rotate>
    </item>
</layer-list>

El primer elemento es una forma vacía para expandir el dibujo. Entonces, he usado 2 rectángulos. Cada uno de ellos tiene 2 lados redondeados.

Necesitas usar este dibujo a través de un ImageView :

<ImageView
    android:layout_width="60dp"
    android:layout_height="60dp"
    android:src="@drawable/arrow"
    android:contentDescription="@string/arrow_descriptor"/>

Aquí está el resultado:

Nota: AndroidStudio no representa diferentes tamaños de esquina, pero se muestra correctamente en los dispositivos.

Answer 2

No es necesario que escriba su propio XML, hay un chevron de diseño de material estándar.

En Android Studio, haga clic en File -> New -> Vector Asset , luego haga clic en el icono (botón con el logotipo de Android) y busque "Flecha".

Seleccione la flecha que desea, se agregará a su proyecto. Puede abrir el archivo XML y editar las dimensiones y el color si es necesario.

Answer 3

Usando tu fantasía y la siguiente respuesta, alcanzarás tu objetivo;)

¿Android cómo crear formas de triángulos y rectángulos programáticamente?

Answer 4

No es posible crear tal forma usando solo un xml dibujable ( vea la respuesta del usuario 3249477 ), si desea crear dicha forma programáticamente, cree una vista o dibujable personalizada. Aquí está el código para la forma de la flecha del lado derecho. (El color y el diámetro se pueden configurar en xml usando styleable)

package com.kiriyard.24723040.views;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.Path.Direction;
import android.util.AttributeSet;
import android.view.View;

public class ArrowView extends View {



    private Paint arrowPaint;
    private Path arrowPath;
    private int arrowColor = 0xFF888888;
    private float density;
    private int diameter = 25, diameter_calc, radius_calc;

    public ArrowView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        stuff();
    }

    public ArrowView(Context context, AttributeSet attrs) {
        super(context, attrs);
        stuff();
    }

    public ArrowView(Context context) {
        super(context);
        stuff();
    }

    private void stuff() {

        //Getting density "dp"
        density = getContext().getResources().getDisplayMetrics().scaledDensity;
        //Calculating actual diameter
        diameter_calc = (int) density * diameter;
        radius_calc = diameter/2;

        //Creating paint
        arrowPaint = new Paint();
        arrowPaint.setAntiAlias(true);
        arrowPaint.setColor(arrowColor);

        //Initialize path
        arrowPath = new Path();

        this.setWillNotDraw(false);
    }

    private int startX,startY, currentX, currentY;

    protected void onDraw(Canvas c) {

        startX = c.getWidth();
        startY = c.getHeight()/2;

        c.rotate(-45, startX, startY);

        arrowPath.reset();
        currentX = startX;
        currentY = startY;
        //Move to right end side center of the canvas
        arrowPath.moveTo(currentX,currentY);
        //Lets move up
        currentY = radius_calc;
        arrowPath.lineTo(currentX, currentY);
        //Now draw circle
        currentX-=radius_calc;
        arrowPath.addCircle(currentX, radius_calc, radius_calc, Direction.CCW);
        currentX-=radius_calc;

        arrowPath.lineTo(currentX,currentY);
        // Go to inner side center point
        currentX = startX - diameter_calc;
        currentY = startY - diameter_calc;
        arrowPath.lineTo(currentX,currentY);
        // Go left
        currentX = startX - startY + radius_calc;
        arrowPath.lineTo(currentX, currentY);       
        //Draw circle
        currentY+=radius_calc;
        c.drawCircle(currentX, currentY, radius_calc, arrowPaint);
        currentY+=radius_calc;
        arrowPath.lineTo(currentX, currentY);
        //Go to start
        arrowPath.lineTo(startX, startY);

        c.drawPath(arrowPath, arrowPaint);
    }

}

Captura de pantalla

¡Así que este es uno de los caminos! ... .. La imagen dibujable es la forma más fácil.