Hacer una forma triangular con definiciones xml?

En este post describo cómo hacerlo. Y aquí está el triángulo que define XML:

 <?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android" > <item> <rotate android:fromDegrees="45" android:toDegrees="45" android:pivotX="-40%" android:pivotY="87%" > <shape android:shape="rectangle" > <stroke android:color="@color/transparent" android:width="10dp"/> <solid android:color="@color/your_color_here" /> </shape> </rotate> </item> </layer-list> 

Refiérase a mi post si algo no está claro o necesita explicación de cómo se construye. Se gira un rectángulo del recorte 🙂 es solución muy elegante y bien de trabajo.

EDIT: para crear una flecha apuntando como -> use:

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

Y para crear una flecha apuntando como <- use:

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

 <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="▼"/> 

Usted puede conseguir aquí más opciones.

La solución de Jacek Milewski funciona para mí y, sobre la base de su solución, si usted necesita triángulo inverso y se puede utilizar esto:

 <?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android" > <item> <rotate android:fromDegrees="45" android:toDegrees="45" android:pivotX="135%" android:pivotY="15%"> <shape android:shape="rectangle"> <solid android:color="@color/aquamarine" /> </shape> </rotate> </item> </layer-list> 

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); } } 

Hacer uso de ella en sus diseños de la siguiente manera:

 <TriangleShapeView android:layout_width="match_parent" android:layout_height="match_parent" android:background="#ff487fff"> </TriangleShapeView> 

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

Puede utilizar el vector para hacer triángulo como este

Ic_triangle_bottom.xml

 <vector xmlns:android="http://schemas.android.com/apk/res/android" android:width="24dp" android:height="24dp" android:viewportWidth="24.0" android:viewportHeight="24.0"> <path android:pathData="M5.7,11.5c3.2,6.3 6,11.5 6.3,11.5 0.3,0 3.1,-5.2 6.3,-11.5l5.7,-11.5 -12,0 -12,0 5.7,11.5z" android:strokeColor="#00000000" android:fillColor="#000000"/> </vector> 

Ic_triangle_left.xml

 <vector xmlns:android="http://schemas.android.com/apk/res/android" android:width="24dp" android:height="24dp" android:viewportWidth="24.0" android:viewportHeight="24.0"> <path android:pathData="M12.3,5.8c-6.2,3.1 -11.3,5.9 -11.3,6.2 0,0.3 5.2,3.1 11.5,6.3l11.5,5.7 0,-12c0,-6.6 -0.1,-12 -0.2,-11.9 -0.2,0 -5.4,2.6 -11.5,5.7z" android:strokeColor="#00000000" android:fillColor="#000000"/> </vector> 

Ic_triangle_right.xml

 <vector xmlns:android="http://schemas.android.com/apk/res/android" android:width="24dp" android:height="24dp" android:viewportWidth="24.0" android:viewportHeight="24.0"> <path android:pathData="M0,12l0,12 11.5,-5.7c6.3,-3.2 11.5,-6 11.5,-6.3 0,-0.3 -5.2,-3.1 -11.5,-6.3l-11.5,-5.7 0,12z" android:strokeColor="#00000000" android:fillColor="#000000"/> </vector> 

Ic_triangle_top.xml

 <vector xmlns:android="http://schemas.android.com/apk/res/android" android:width="24dp" android:height="24dp" android:viewportWidth="24.0" android:viewportHeight="24.0"> <path android:pathData="M5.7,12.5l-5.7,11.5 12,0 12,0 -5.7,-11.5c-3.2,-6.3 -6,-11.5 -6.3,-11.5 -0.3,0 -3.1,5.2 -6.3,11.5z" android:strokeColor="#00000000" android:fillColor="#000000"/> </vector> 

Puede utilizar elementos de dibujo vectoriales .

Si su API mínima es inferior a 21 Android Studio crea automáticamente bitmaps PNG para las versiones inferiores en el momento de la creación (vea Vector Asset Studio ).

Su única limitación aquí es que no puede cambiar el color en tiempo de ejecución y tampoco puede hacer referencia a un color de los recursos (si la API mínima es inferior a 21).

Un triángulo rojo apuntando hacia arriba sería:

 <?xml version="1.0" encoding="utf-8"?> <vector xmlns:android="http://schemas.android.com/apk/res/android" android:height="100dp" android:width="100dp" android:viewportHeight="100" android:viewportWidth="100" > <group android:name="triableGroup"> <path android:name="triangle" android:fillColor="#FF0000" android:pathData="m 50,0 l 50,100 -100,0 z" /> </group> </vector> 

Añádelo a su diseño y recuerde poner clipChildren = "false" si gira el triángulo.

 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:clipChildren="false"> <View android:layout_width="100dp" android:layout_height="100dp" android:rotation="100" android:layout_centerInParent="true" android:background="@drawable/triangle"/> </RelativeLayout> 

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

Publicaría una captura de pantalla pero mi reputación no es suficiente 🙁

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

Otra absolutamente simple Calculate función que te puede interesar ..

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

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

 <?xml version="1.0" encoding="utf-8"?> <vector xmlns:android="http://schemas.android.com/apk/res/android" android:width="32dp" android:height="24dp" android:viewportWidth="32.0" android:viewportHeight="24.0"> <path android:fillColor="#e4e4e8" android:pathData="M0 0 h32 l-16 24 Z"/> </vector> 

Para aquellos que quieren una flecha de triángulo rectángulo, aquí tienes:

PASO 1: Cree un archivo XML dibujable, copie y pegue el siguiente contenido XML en su XML dibujable. (Por favor, sepa que puede usar cualquier nombre para su archivo XML dibujable. Para mi caso, lo nombro "v_right_arrow")

 <?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android" > <item > <rotate android:fromDegrees="45" android:toDegrees="-45" android:pivotX="15%" android:pivotY="-36%" > <shape android:shape="rectangle" > <stroke android:color="@android:color/transparent" android:width="1dp"/> <solid android:color="#000000" /> </shape> </rotate> </item> </layer-list> 

PASO 2: En el XML de su diseño, cree una vista y vincule su fondo al XML dibujable que acaba de crear en STEP 1 . Para mi caso, enlazo v_right_arrow a la propiedad de fondo de mi vista.

 <View android:layout_width="200dp" android:layout_height="200dp" android:background="@drawable/v_right_arrow"> </View> 

Salida de muestra:

Espero que esto ayude, buena suerte!

 <?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android" > <item> <rotate android:fromDegrees="45" android:toDegrees="45" android:pivotX="-40%" android:pivotY="87%" > <shape android:shape="rectangle" > <stroke android:color="@android:color/transparent" android:width="0dp"/> <solid android:color="#fff" /> </shape> </rotate> </item> </layer-list> 

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

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

Intenté usar la manera del xml para agregar el triángulo y descubrir un problema que la forma del triángulo vía el acercamiento de xml está tomando más espacio que aparece.

Vea la captura de pantalla con los límites de diseño en

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. Izquierda apuntando &
4. Apuntando a la derecha

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

Usted puede utilizarlo simplemente en la disposición del xml como esto

  <com.hiteshsahu.materialupvote.TriangleShapeView android:layout_width="50dp" android:layout_height="50dp"></com.hiteshsahu.materialupvote.TriangleShapeView> 

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

  <layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <item> <rotate android:fromDegrees="45" android:pivotX="135%" android:pivotY="1%" android:toDegrees="45"> <shape android:shape="rectangle"> <stroke android:width="-60dp" android:color="@android:color/transparent" /> <solid android:color="@color/orange" /> </shape> </rotate> </item> </layer-list> 

  <LinearLayout android:id="@+id/ly_fill_color_shape" android:layout_width="300dp" android:layout_height="300dp" android:layout_gravity="center" android:background="@drawable/shape_triangle" android:gravity="center" android:orientation="horizontal" > </LinearLayout> 

 <item> <rotate android:fromDegrees="45" android:pivotX="-15%" android:pivotY="77%" android:toDegrees="45" > <shape android:shape="rectangle" > <stroke android:width="2dp" android:color="@color/black_color" /> <solid android:color="@color/white" /> <padding android:left="1dp" /> </shape> </rotate> </item> <item android:top="200dp"> <shape android:shape="line" > <stroke android:width="1dp" android:color="@color/black_color" /> <solid android:color="@color/white" /> </shape> </item>