Making a triangle shape using xml definitions

Question

Is there a way that I can specify a triangle shape in an xml file    lt shape xmlns android  http   schemas android com apk res android  android shape  triangle  gt     lt stroke android width  1dip  android color   FFF    gt     lt solid android color   FFF    gt   lt  shape gt    can we do this with a path shape or something  I just need an equilateral triangle   Thanks

User · Answer

Using the solution of Jacek Milewski I made an oriented down angle with a transparent background.

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

You can change android:pivotX and android:pivotY to shift the angle.

Usage:

<ImageView
    android:layout_width="10dp"
    android:layout_height="10dp"
    android:src="@drawable/ic_angle_down"
    />

Parameters depend on the size of the image. For instance, if ImageView has size 100dp*80dp, you should use these constants:

<rotate
    android:fromDegrees="135"
    android:pivotX="64.5%"
    android:pivotY="19%"
    android:toDegrees="135"
    >

User · Answer

For those who want a right triangle arrow  here you go   STEP 1  Create a drawable XML file  copy and paste the following XML content into your drawable XML   Please be informed that you can use any name for your drawable XML file  For my case  I name it  v right arrow     lt  xml version  1 0  encoding  utf-8   gt   lt layer-list xmlns android  http   schemas android com apk res android   gt       lt item  gt           lt rotate             android fromDegrees  45              android toDegrees  -45              android pivotX  15               android pivotY  -36    gt               lt shape                 android shape  rectangle    gt                   lt stroke android color   android color transparent  android width  1dp   gt                   lt solid                     android color   000000     gt               lt  shape gt           lt  rotate gt       lt  item gt   lt  layer-list gt    STEP 2  In your layout s XML  create a View and bind its background to the drawable XML that you have just created in STEP 1  For my case  I bind v right arrow to my View s background property    lt View     android layout width  200dp      android layout height  200dp      android background   drawable v right arrow  gt   lt  View gt    Sample output     Hope this helps  good luck

User · Answer

Using vector drawable    lt vector xmlns android  http   schemas android com apk res android     android width  24dp     android height  24dp     android viewportWidth  24 0     android viewportHeight  24 0  gt      lt path         android pathData  M0 0 L24 0 L0 24 z          android strokeColor   color color          android fillColor   color color   gt   lt  vector gt

User · Answer

I have never done this  but from what I understand you can use the PathShape class  http   developer android com reference android graphics drawable shapes PathShape html

User · Answer

You can use vector to make triangle like this  ic triangle right xml   lt vector xmlns android  http   schemas android com apk res android          android width  24dp          android height  24dp          android viewportWidth  24 0          android viewportHeight  24 0  gt       lt 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   gt   lt  vector gt    Then use it like   lt ImageView     android layout width  wrap content      android layout height  wrap content      app srcCompat   drawable ic triangle right        gt    For change the color and direction  use android tint and android rotation   lt ImageView     android layout width  wrap content      android layout height  wrap content      app srcCompat   drawable ic triangle right      android rotation  180     change direction     android tint   00f     change color       gt    Result    For change the shape of vector  you can change the width height of vector    Example change width to 10dp     lt vector          android width  10dp          android height  24dp           gt              lt  vector gt

User · Answer

In this post I describe how to do it  And here is the XML defining triangle    lt  xml version  1 0  encoding  utf-8   gt   lt layer-list xmlns android  http   schemas android com apk res android   gt       lt item gt           lt rotate             android fromDegrees  45              android toDegrees  45              android pivotX  -40               android pivotY  87    gt               lt shape                 android shape  rectangle   gt                   lt stroke android color   color transparent  android width  10dp   gt                   lt solid                     android color   color your color here    gt               lt  shape gt           lt  rotate gt       lt  item gt   lt  layer-list gt    Refer to my post if something is unclear or you need explanation how it is built  It is rotated an cutout rectangle    it is very smart and well working solution   EDIT   to create an arrow pointing like --  use       android fromDegrees  45  android toDegrees  45  android pivotX  13   android pivotY  -40    gt        And to create an arrow pointing like  lt -- use   android fromDegrees  45  android toDegrees  45  android pivotX  87   android pivotY  140    gt

User · Answer

Google provides a Equilateral triangle here  Choose VectorDrawable so the size is flexible  It  integrated into Android Studio as  plugin     If you have an SVG image  you can use this to convert it to VectorDrawable too     Once you have a VectorDrawable  changing its colour and rotation is easy like others have mentioned

User · Answer

lt layer-list xmlns android  http   schemas android com apk res android  gt           lt item gt               lt rotate                 android fromDegrees  45                  android pivotX  135                   android pivotY  1                   android toDegrees  45  gt                   lt shape android shape  rectangle  gt                       lt stroke                         android width  -60dp                          android color   android color transparent    gt                       lt solid android color   color orange    gt                   lt  shape gt               lt  rotate gt           lt  item gt       lt  layer-list gt

User · Answer

lt TextView          android layout width  wrap content          android layout height  wrap content          android text      gt    You can get here more options

User · Answer

I provide this customView below if you don t want to hack xml  Please have a try          TriangleView        author Veer     date 2020-09-03     class TriangleView  JvmOverloads constructor      context  Context      attrs  AttributeSet    null      defStyleAttr  Int   0     View context  attrs  defStyleAttr        private var triangleColor  Int   0     private var direction   Direction Bottom      private val paint by lazy           Paint   apply               isAntiAlias   true             style   Paint Style FILL             color   triangleColor                      init           initStyle context  attrs  defStyleAttr             private fun initStyle          context  Context          attrs  AttributeSet           defStyleAttr  Int                 val ta   context obtainStyledAttributes attrs  R styleable TriangleView  defStyleAttr  0          with ta                triangleColor                   getColor R styleable TriangleView triangle background  Color parseColor  quot  000000 quot                 val directionValue                   getInt R styleable TriangleView triangle direction  Direction Bottom value              direction   when  directionValue                    Direction Top value - gt  Direction Top                 Direction Bottom value - gt  Direction Bottom                 Direction Left value - gt  Direction Left                 Direction Right value - gt  Direction Right                 else - gt  Direction Bottom                            recycle                        override fun onDraw canvas  Canvas            calculatePath direction  let               canvas drawPath it  paint                       private fun calculatePath direction  Direction   Path           var p1  Point    null         var p2  Point    null         var p3  Point    null          val width   width         val height   height          when  direction                Direction Top - gt                    p1   Point 0  height                  p2   Point width   2  0                  p3   Point width  height                            Direction Bottom - gt                    p1   Point 0  0                  p2   Point width   2  height                  p3   Point width  0                            Direction Left - gt                    p1   Point width  0                  p2   Point 0  height   2                  p3   Point width  height                            Direction Right - gt                    p1   Point 0  0                  p2   Point width  height   2                  p3   Point 0  height                                   val path   Path           path moveTo p1 x toFloat    p1 y toFloat            path lineTo p2 x toFloat    p2 y toFloat            path lineTo p3 x toFloat    p3 y toFloat            return path            private enum class Direction val value  Int            Top 0           Bottom 1           Left 2           Right 3            lt declare-styleable name  quot TriangleView quot  gt       lt attr name  quot triangle direction quot  format  quot enum quot  gt           lt enum name  quot top quot  value  quot 0 quot    gt           lt enum name  quot bottom quot  value  quot 1 quot    gt           lt enum name  quot left quot  value  quot 2 quot    gt           lt enum name  quot right quot  value  quot 3 quot    gt       lt  attr gt       lt attr name  quot triangle background quot  format  quot reference color quot    gt   lt  declare-styleable gt

User · Answer

See answer here  Custom arrows without image  Android   lt  xml version  1 0  encoding  utf-8   gt   lt vector xmlns android  http   schemas android com apk res android          android width  32dp          android height  24dp          android viewportWidth  32 0          android viewportHeight  24 0  gt       lt path android fillColor   e4e4e8            android pathData  M0 0 h32 l-16 24 Z   gt   lt  vector gt

User · Answer

I would definetely go for implementing a View in this case   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             Make use of it in your layouts as follows    lt TriangleShapeView     android layout width  match parent      android layout height  match parent      android background   ff487fff  gt   lt  TriangleShapeView gt    Using this implementation will give you the following result

User · Answer

May I help you without using XML      Simply     Custom Layout   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            Your Activity   Example         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              Working Example          Another absolutely simple Calculate function you may interested in     private Path Calculate Point A  Point B  Point C        Path Pencil   new Path        Pencil moveTo A x  A y       Pencil lineTo B x  B y       Pencil lineTo C x  C y       return Pencil

User · Answer

I my be late to party and I came across same problem and Google pointed me to this StackOverflow thread as first result       I tried using xml way to add triangle and find out a problem that the triangle   shape via xml approach is taking more space than it appears    See screen shot with layout bounds on    So ended up making this custom view class which can draws Triangle of any of following types -   up pointing down pointing left pointing  amp   right pointing    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            You can Simply use it in xml layout like this    lt com hiteshsahu materialupvote TriangleShapeView             android layout width  50dp              android layout height  50dp  gt  lt  com hiteshsahu materialupvote TriangleShapeView gt    I know OP want solutions in xml solution but as I pointed out problem with xml approach   I Hope it might help somebody

User · Answer

You can use vector drawables   If your minimum API is lower than 21  Android Studio automatically creates PNG bitmaps for those lower versions at build time  see Vector Asset Studio   If you use the support library  Android even manages  real vectors  down to API 7  more on that in the update of this post at the bottom    A red upwards pointing triangle would be    lt  xml version  1 0  encoding  utf-8   gt   lt vector xmlns android  http   schemas android com apk res android      android height  100dp      android width  100dp      android viewportHeight  100      android viewportWidth  100   gt       lt group         android name  triableGroup  gt           lt path             android name  triangle              android fillColor   FF0000              android pathData  m 50 0 l 50 100 -100 0 z    gt       lt  group gt   lt  vector gt    Add it to your layout and remember to set clipChildren  false  if you rotate the triangle    lt  xml version  1 0  encoding  utf-8   gt   lt RelativeLayout xmlns android  http   schemas android com apk res android      android layout width  match parent      android layout height  match parent      android clipChildren  false  gt        lt ImageView         android layout width  130dp          android layout height  100dp          android rotation  0          android layout centerInParent  true          android background   drawable triangle   gt    lt  RelativeLayout gt      Change the size  width height  of the triangle by setting the Views layout width layout height attributes  This way you can also get an eqilateral triagle if you do the math correct    UPDATE 25 11 2017   If you use the support library you can use real vectors  instead if bitmap creation  as far back as API 7  Simply add   vectorDrawables useSupportLibrary   true   do your defaultConfig in your module s build gradle   Then set the  vector xml  drawable like this    lt ImageView     android layout height  wrap content      android layout width  wrap content      app srcCompat   drawable triangle    gt    Everything is documented very nicely on the Vector Asset Studio page   Ever since this feature I ve been working entirely without bitmaps in terms of icons  This also reduces APK size quite a bit

User · Answer

lt  xml version  1 0  encoding  utf-8   gt   lt layer-list xmlns android  http   schemas android com apk res android   gt       lt item gt           lt rotate             android fromDegrees  45              android toDegrees  45              android pivotX  -40               android pivotY  87    gt               lt shape                 android shape  rectangle   gt                   lt stroke android color   android color transparent  android width  0dp   gt                   lt solid                     android color   fff    gt               lt  shape gt           lt  rotate gt       lt  item gt   lt  layer-list gt

User · Answer

You can add following triangle in background using following xml     lt  xml version  1 0  encoding  utf-8   gt   lt vector xmlns android  http   schemas android com apk res android      android height  100dp      android width  100dp      android viewportHeight  100      android viewportWidth  100   gt       lt group         android name  triableGroup  gt           lt path             android name  triangle              android fillColor   848af8              android pathData  M 0 20 L 0 0 L 100 0 L 100 20 L 54 55  l -1 0 6  l -1 0 4  l -1 0 2  l -1 0   l -1 -0  l -1 -0 2  l -1 -0 4  l -1 -0 6    L 46 55   L 0 20 -100 -100 Z    gt       lt  group gt   lt  vector gt    The whole logic to customize xml design is in pathData  Consider top-left as  0 0  and design the layout as per your requirement   Check this answer

User · Answer

The solution of Jacek Milewski works for me and  based on his solution  if you need and inversed triangle you can use this    lt  xml version  1 0  encoding  utf-8   gt   lt layer-list xmlns android  http   schemas android com apk res android   gt       lt item gt           lt rotate             android fromDegrees  45              android toDegrees  45              android pivotX  135                android pivotY  15   gt               lt shape android shape  rectangle  gt                       lt solid android color   color aquamarine    gt               lt  shape gt           lt  rotate gt       lt  item gt   lt  layer-list gt

User · Answer

I try to create triangle image like back button of android navigation bar but I haven t found any solution   Now  I found the solution with myself and would like to share it     use xml below   lt layer-list xmlns android  http   schemas android com apk res android  gt   lt item     android bottom  20dp      android left  480dp      android right  60dp      android top  20dp  gt       lt shape gt           lt size android width  60dp    gt           lt corners android radius  80dp   gt           lt solid android color   AAA    gt       lt  shape gt   lt  item gt   lt item     android bottom  480dp      android right  70dp      android top  20dp  gt       lt rotate         android fromDegrees  -28          android pivotX  96           android pivotY  50           android toDegrees  -20  gt           lt shape gt               lt corners android radius  80dp   gt               lt size android height  60dp    gt               lt solid android color   AAA    gt           lt  shape gt       lt  rotate gt   lt  item gt    lt item     android bottom  20dp      android right  70dp      android top  480dp  gt       lt rotate         android fromDegrees  28          android pivotX  96           android pivotY  50           android toDegrees  -20  gt           lt shape gt               lt corners android radius  80dp   gt               lt size android height  60dp    gt               lt solid android color   AAA    gt           lt  shape gt       lt  rotate gt   lt  item gt

User · Answer

lt 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   gt       lt  LinearLayout gt        lt item gt       lt rotate         android fromDegrees  45          android pivotX  -15           android pivotY  77           android toDegrees  45   gt           lt shape android shape  rectangle   gt               lt stroke                 android width  2dp                  android color   color black color    gt                lt solid android color   color white    gt                lt padding android left  1dp    gt           lt  shape gt       lt  rotate gt   lt  item gt   lt item android top  200dp  gt       lt shape android shape  line   gt           lt stroke             android width  1dp              android color   color black color    gt            lt solid android color   color white    gt        lt  shape gt   lt  item gt

[android] Making a triangle shape using xml definitions?

Examples related to android

Examples related to xml