Draw android xml shape diagonal with triangles

Asked 1/10, 2015 at 9:2 Answered 13/2, 2020 at 15:13

Hi I would like to draw something like this

with a shape Is it possible ?

Leahleahey answered 1/10, 2015 at 9:2 Comment(4)

what you have tried? – Maurizia 1/10, 2015 at 9:17

I tried two rectangles and rotate them, but I have no experience with drawing xml shapes .. – Leahleahey 1/10, 2015 at 9:19

why you dot try with images – Maurizia 1/10, 2015 at 9:19

I need then add corner radius 5 dp something like this:

<shape xmlns:android="http://schemas.android.com/apk/res/android"     android:shape="rectangle" >     <corners android:radius="5dp"/>     <solid android:color="@color/button_buy_pre" /> </shape>

– Leahleahey 1/10, 2015 at 9:23

I know its too late to answer this question but still posting my answer here so that others can have reference:

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

<path
    android:name="dark_triangle"
    android:fillColor="#FFFFFF"
    android:pathData="M 100,0 L 0,100 100,100 z" />

<path
    android:name="light_triangle"
    android:fillColor="#d0021b"
    android:pathData="M 0,0 L 100,0 0,100 z" />

</vector>

Duramen answered 12/10, 2018 at 22:20 Comment(2)

Thanks. This is the best answer. – Inviting 27/6, 2020 at 15:16

The most concise answer ever! I need to take a crash course on creating vector graphics in Android! – Entophyte 11/8, 2021 at 9:19

@Pauli .You can use Image for easy practice and can try this way . Use this logic

     <?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item
    android:drawable="@color/Your_color">
</item>

<item>
    <rotate
        android:fromDegrees="50"
        android:pivotX="10%"
        android:pivotY="85%"
         >
        <shape

            android:shape="rectangle">
            <solid android:color="#000000" />

        </shape>
    </rotate>
</item>

SO Courtesy

Diagonally spilliting background of a Relative Layout

Making a triangle shape using xml definitions?

Manchu answered 1/10, 2015 at 9:20 Comment(1)

I have seen this links before and tried it.. but it's not what I'm looking – Leahleahey 1/10, 2015 at 9:31

Create color resources in colors.xml file

<color name="primaryColor">#3F51B5</color>
<color name="primaryColorDark">#303F9F</color>

Create Java file TriangleBackgroundView.Java:

public class TriangleBackgroundView extends View {
Paint paint;
Paint bgPaint;

public TriangleBackgroundView(Context context) {
    super(context);
    init();
}

public TriangleBackgroundView(Context context, AttributeSet attrs) {
    super(context, attrs);
    init();
}

public TriangleBackgroundView(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
    init();
}

private void init() {
    paint = new Paint();
    paint.setStrokeWidth(1);
    paint.setAntiAlias(true);
    paint.setStrokeCap(Paint.Cap.SQUARE);
    paint.setStyle(Paint.Style.FILL);
    paint.setColor(getResources().getColor(R.color.primaryColor));

    bgPaint= new Paint();
    bgPaint.setStyle(Paint.Style.FILL);
    bgPaint.setColor(getResources().getColor(R.color.primaryColorDark));
}

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    super.onMeasure(widthMeasureSpec, heightMeasureSpec);
}

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);

    int h = getMeasuredHeight();
    int w = getMeasuredWidth();

    canvas.drawRect(0,0,w,h,bgPaint);

    Path path = new Path();
    path.moveTo(0, h);
    path.lineTo(w, h);
    path.lineTo(0, 0);
    path.lineTo(0, h);
    path.close();
    canvas.drawPath(path,paint);
}
}

Now add custom view in your layout:

<com.yourpackage.TriangleBackgroundView
    android:layout_height="match_parent"
    android:layout_width="match_parent"/>

<TextView android:text="@string/hello_world" android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textStyle="bold"
    android:textSize="20dp"
    android:textColor="@android:color/white"
    android:layout_centerInParent="true"/>

You can get help from this tutorial to create shape diagonal with triangle:

Source: http://marcouberti.net/2015/06/23/create-a-custom-triangle-background-view-in-android/

Headroom answered 28/1, 2016 at 5:9 Comment(2)

While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - From Review – Satanic 28/1, 2016 at 5:49

Edited the post @AbhinavSinghMaurya – Headroom 28/1, 2016 at 7:13

You can use something like this:

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

            </shape>
        </rotate>
    </item>
    <item>
        <rotate
            xmlns:android="http://schemas.android.com/apk/res/android"
            android:fromDegrees="45"
            android:pivotX="-35%"
            android:pivotY="85%">
            <shape android:shape="rectangle">
                <solid android:color="@color/brown_color" />

            </shape>
        </rotate>
    </item>
</layer-list>

The two rotated rectangles do the work of fill brown side in your image.

Sousa answered 31/10, 2016 at 19:9 Comment(0)

half_diagonal.xml

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="200dp"
    android:height="200dp"
    android:viewportHeight="100"
    android:viewportWidth="100">

    <path
        android:name="dark_triangle"
        android:fillColor="#673AB7"
        android:pathData="M 0,0 L 100,0 0,100 z" />

</vector>

Tetrasyllable answered 13/2, 2020 at 15:13 Comment(0)

You can use a gradient tool...

http://angrytools.com/gradient/

Holmun answered 18/10, 2016 at 8:32 Comment(2)

Whilst this may theoretically answer the question, it would be preferable to include the essential parts of the answer here, and provide the link for reference. – Baerl 18/10, 2016 at 8:33

background: -moz-linear-gradient(45deg, rgba(192,192,192,1) 0%, rgba(192,192,192,1) 49%, rgba(0,0,0,1) 50%, rgba(0,0,0,1) 100%); /* ff3.6+ / background: -webkit-gradient(linear, left bottom, right top, color-stop(0%, rgba(192,192,192,1)), color-stop(49%, rgba(192,192,192,1)), color-stop(50%, rgba(0,0,0,1)), color-stop(100%, rgba(0,0,0,1))); / safari4+,chrome / background: -webkit-linear-gradient(45deg, rgba(192,192,192,1) 0%, rgba(192,192,192,1) 49%, rgba(0,0,0,1) 50%, rgba(0,0,0,1) 100%); / safari5.1+,chrome10+ */ – Holmun 18/10, 2016 at 10:22

Recommended topics

Hot tags