Hacer una forma triangular usando definiciones xml?

¿Hay alguna manera de que pueda especificar una forma de triángulo en un archivo xml?

    

podemos hacer esto con una forma de camino o algo así? Solo necesito un triángulo equilátero.

Gracias

En esta publicación , describo cómo hacerlo. Y aquí está el triángulo que define XML:

            

Consulte mi publicación si algo no está claro o necesita una explicación de cómo se construye. Se rota un rectángulo recortado 🙂 es una solución muy inteligente y que funciona bien.

EDITAR: para crear una flecha que apunta como -> usar:

 ... android:fromDegrees="45" android:toDegrees="45" android:pivotX="13%" android:pivotY="-40%" > ... 

Y para crear una flecha que señale como <- use:

 android:fromDegrees="45" android:toDegrees="45" android:pivotX="87%" android:pivotY="140%" > 
  

Puede obtener aquí más opciones.

Puedes usar el vector para hacer un triángulo como este

ic_triangle_right.xml

    

Entonces úsalo como

  

Para cambiar el color y la dirección, usa android:tint y android:rotation

  

Resultado

enter image description here

Para cambiar la forma del vector, puede cambiar el ancho / alto del vector. Ejemplo de ancho de cambio a 10dp

  ...  

enter image description here

La solución de Jacek Milewski me funciona y, de acuerdo con su solución, si necesita un triángulo invertido, puede usar esto:

           

Definitivamente voy a implementar una Vista en este caso:

 import android.content.Context; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Paint; import android.graphics.Path; import android.util.AttributeSet; import android.view.View; public class TriangleShapeView extends View { public TriangleShapeView(Context context) { super(context); } public TriangleShapeView(Context context, AttributeSet attrs, int defStyle) { super(context, attrs, defStyle); } public TriangleShapeView(Context context, AttributeSet attrs) { super(context, attrs); } protected void onDraw(Canvas canvas) { super.onDraw(canvas); int w = getWidth() / 2; Path path = new Path(); path.moveTo( w, 0); path.lineTo( 2 * w , 0); path.lineTo( 2 * w , w); path.lineTo( w , 0); path.close(); Paint p = new Paint(); p.setColor( Color.RED ); canvas.drawPath(path, p); } } 

Utilícelo en sus diseños de la siguiente manera:

   

El uso de esta implementación le dará el siguiente resultado:

enter image description here

Puede usar vectores arrastrables .

Si su API mínima es inferior a 21, Android Studio crea automáticamente mapas de bits PNG para esas versiones inferiores en el momento de la comstackción (consulte Vector Asset Studio ). Si utiliza la biblioteca de soporte, Android incluso gestiona “vectores reales” hasta la API 7 (más sobre eso en la actualización de esta publicación en la parte inferior).

Un triángulo rojo que apunta hacia arriba sería:

       

Agréguelo a su diseño y recuerde configurar clipChildren = “false” si gira el triángulo.

     

enter image description here

Cambie el tamaño (ancho / alto) del triángulo estableciendo los atributos de Vistas layout_width / layout_height. De esta manera también puede obtener un triagle eqilateral si hace las matemáticas correctas.

ACTUALIZACIÓN 25.11.2017

Si usa la biblioteca de soporte, puede usar vectores reales (en cambio, si la creación de bitmap) se remonta a API 7 . Simplemente agregue:

 vectorDrawables.useSupportLibrary = true 

haga su defaultConfig en defaultConfig de su módulo.

A continuación, establezca el (vector xml) dibujable de la siguiente manera:

  

Todo está documentado muy bien en la página de Vector Asset Studio .

Desde esta función, he estado trabajando completamente sin mapas de bits en términos de icons. Esto también reduce el tamaño de APK bastante.

Vea la respuesta aquí: Flechas personalizadas sin imagen: Android

     

flecha

¿Puedo ayudarte sin usar XML?


Simplemente,

Diseño personalizado (Slice):

 import android.content.Context; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Paint; import android.graphics.Paint.Style; import android.graphics.Path; import android.graphics.Point; import android.util.AttributeSet; import android.view.View; public class Slice extends View { Paint mPaint; Path mPath; public enum Direction { NORTH, SOUTH, EAST, WEST } public Slice(Context context) { super(context); create(); } public Slice(Context context, AttributeSet attrs) { super(context, attrs); create(); } public void setColor(int color) { mPaint.setColor(color); invalidate(); } private void create() { mPaint = new Paint(); mPaint.setStyle(Style.FILL); mPaint.setColor(Color.RED); } @Override protected void onDraw(Canvas canvas) { mPath = calculate(Direction.SOUTH); canvas.drawPath(mPath, mPaint); } private Path calculate(Direction direction) { Point p1 = new Point(); p1.x = 0; p1.y = 0; Point p2 = null, p3 = null; int width = getWidth(); if (direction == Direction.NORTH) { p2 = new Point(p1.x + width, p1.y); p3 = new Point(p1.x + (width / 2), p1.y - width); } else if (direction == Direction.SOUTH) { p2 = new Point(p1.x + width, p1.y); p3 = new Point(p1.x + (width / 2), p1.y + width); } else if (direction == Direction.EAST) { p2 = new Point(p1.x, p1.y + width); p3 = new Point(p1.x - width, p1.y + (width / 2)); } else if (direction == Direction.WEST) { p2 = new Point(p1.x, p1.y + width); p3 = new Point(p1.x + width, p1.y + (width / 2)); } Path path = new Path(); path.moveTo(p1.x, p1.y); path.lineTo(p2.x, p2.y); path.lineTo(p3.x, p3.y); return path; } } 

Su actividad (ejemplo):

 import android.app.Activity; import android.graphics.Color; import android.os.Bundle; import android.view.ViewGroup.LayoutParams; import android.widget.LinearLayout; public class Layout extends Activity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); Slice mySlice = new Slice(getApplicationContext()); mySlice.setBackgroundColor(Color.WHITE); setContentView(mySlice, new LinearLayout.LayoutParams( LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT)); } } 

Ejemplo de trabajo:

enter image description here


Otra función de Calculate absolutamente simple que puede interesarle …

 private Path Calculate(Point A, Point B, Point C) { Path Pencil = new Path(); Pencil.moveTo(Ax, Ay); Pencil.lineTo(Bx, By); Pencil.lineTo(Cx, Cy); return Pencil; } 

Para aquellos que quieren una flecha de triángulo derecho, aquí van:

PASO 1: cree un archivo XML dibujable, copie y pegue el siguiente contenido XML en su XML dibujable. (Tenga en cuenta que puede usar cualquier nombre para su archivo XML dibujable. En mi caso, lo llamo “v_right_arrow”)

            

PASO 2: en el XML de su diseño, cree una Vista y vincule su fondo con el XML dibujable que acaba de crear en el PASO 1 . Para mi caso, ato v_right_arrow a la propiedad de fondo de mi Vista.

   

Muestra de salida:

enter image description here

Espero que esto ayude, buena suerte!

            

Nunca he hecho esto, pero por lo que entiendo, puedes usar la clase PathShape: http://developer.android.com/reference/android/graphics/drawable/shapes/PathShape.html

            

Llego tarde a la fiesta y me encontré con el mismo problema y Google me señaló este hilo de StackOverflow como primer resultado.

Intenté usar la forma xml para agregar un triángulo y descubrir un problema de que la forma del triángulo a través del enfoque xml está tomando más espacio de lo que parece.

Ver captura de pantalla con límites de diseño en

enter image description here

Así que terminé haciendo esta clase de vista personalizada que puede dibujar Triángulo de cualquiera de los siguientes tipos:

  1. apuntando hacia arriba
  2. apuntando hacia abajo
  3. apuntando hacia la izquierda y
  4. señalar con

asas

 package com.hiteshsahu.materialupvotewidget; import android.content.Context; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Paint; import android.graphics.Path; import android.support.annotation.NonNull; import android.util.AttributeSet; import android.view.View; public class TriangleShapeView extends View { private int colorCode = Color.DKGRAY; public int getColorCode() { return colorCode; } public void setColorCode(int colorCode) { this.colorCode = colorCode; } public TriangleShapeView(Context context) { super(context); if (isInEditMode()) return; } public TriangleShapeView(Context context, AttributeSet attrs) { super(context, attrs); if (isInEditMode()) return; } public TriangleShapeView(Context context, AttributeSet attrs, int defStyle) { super(context, attrs, defStyle); if (isInEditMode()) return; } protected void onDraw(Canvas canvas) { super.onDraw(canvas); int w = getWidth() / 2; int h = getHeight() / 2; //Choose what type of triangle you want here Path path = getLeftTriangle(w, h); path.close(); Paint p = new Paint(); p.setColor(colorCode); p.setAntiAlias(true); canvas.drawPath(path, p); } @NonNull /** * Return Path for down facing triangle */ private Path getInvertedTriangle(int w, int h) { Path path = new Path(); path.moveTo(0, 0); path.lineTo(w, 2 * h); path.lineTo(2 * w, 0); path.lineTo(0, 0); return path; } @NonNull /** * Return Path for Up facing triangle */ private Path getUpTriangle(int w, int h) { Path path = new Path(); path.moveTo(0, 2 * h); path.lineTo(w, 0); path.lineTo(2 * w, 2 * h); path.lineTo(0, 2 * h); return path; } @NonNull /** * Return Path for Right pointing triangle */ private Path getRightTriangle(int w, int h) { Path path = new Path(); path.moveTo(0, 0); path.lineTo(2 * w, h); path.lineTo(0, 2 * h); path.lineTo(0, 0); return path; } @NonNull /** * Return Path for Left pointing triangle */ private Path getLeftTriangle(int w, int h) { Path path = new Path(); path.moveTo(2 * w, 0); path.lineTo(0, h); path.lineTo(2 * w, 2 * h); path.lineTo(2 * w, 0); return path; } } 

Simplemente puede usarlo en un diseño xml como este

   

Sé que OP quiere soluciones en solución xml pero como señalé el problema con el enfoque xml. Espero que pueda ayudar a alguien.

Puede agregar el siguiente triángulo en el fondo usando el siguiente xml

       

Toda la lógica para personalizar el diseño xml está en los datos de ruta. Considere la parte superior izquierda como (0,0) y diseñe el diseño según su requisito. Verifica esta respuesta.

    

                

Google proporciona un triángulo equilátero aquí .
Elija VectorDrawable para que el tamaño sea flexible.
Está integrado en Android Studio como complemento.

Si tiene una imagen SVG, puede usar esto para convertirla a VectorDrawable también.

Una vez que tiene un VectorDrawable, cambiar su color y rotación es fácil, como otros han mencionado.