Come creare una freccia rivolta a destra (chevron) utilizzando forme XML in Android?

Question

Come creare una freccia rivolta a destra utilizzando forme xml in Android come questo ??

Answer 1

Ho avuto un problema simile. Ecco come ho risolto:

<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> 

Il primo elemento è una forma vuota per espandere il drawable. Quindi, ho usato 2 rettangoli. Ognuno di essi ha 2 lati arrotondati.

è necessario utilizzare questo drawable tramite un ImageView:

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

Ecco il risultato:

Nota: Android Studio non rende diverse dimensioni angolari, ma mostra su correttamente sui dispositivi.

Answer 2

Utilizzando la tua fantasia, e la seguente risposta, si raggiungerà il vostro obiettivo;)

Android how to create triangle and rectangle shape programmatically?

Answer 3

Non è possibile creare tale forma utilizzando XML disegnabile solo (See answer by user3249477), se si vuoi creare una forma di questo tipo a livello di programmazione, oppure puoi creare un disegno o una vista personalizzabili. Qui, è il codice per la forma della freccia destra. (Colore e diametro possono essere configurati in XML utilizzando styleable)

package com.kiriyard.stackoverflow24723040.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); 
    } 

} 

Schermata

Quindi questo è uno dei modi! ... .. l'immagine disegnabile è un modo più semplice.

Answer 4

C'è una freccia di design Materiale standard come questa.

In Android Studio, fare clic su File ->New ->Vector Asset, quindi fare clic sull'icona (pulsante con logo Android) e cercare "Freccia".

Seleziona la freccia che desideri, verrà aggiunta al tuo progetto. È possibile aprire il file XML e modificare le dimensioni e il colore se necessario.