Arrow textview Shape on Android

Question

The textview must end as arrow and in second example should start as arrow. Please see the picture below

How can I achieve this on android java with eclipse?

the method I could only find is to give the red bgcolor to textview and stuck at end a picture (arrow)

Answer 1

You can check this repo to get this arrow shape https://github.com/imranhsn/ArrowShape

<com.example.arrowshape.shapes.BubbleView
    android:layout_width="200dp"
    android:layout_marginTop="20dp"
    app:shape_bubble_borderRadius="0dp"
    app:shape_bubble_arrowPosition="left"
    app:shape_bubble_arrowHeight="60dp"
    app:shape_bubble_arrowWidth="100dp"
    android:layout_height="100dp">

    // your child layout

</com.example.arrowshape.shapes.BubbleView>

Answer 2

I think it's better to do it programatically, something like that:

package com.example.trist_000.alarm;

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.widget.LinearLayout;
import android.widget.TextView;
public class customPrice extends LinearLayout {

TextView text1;
TextView text2;

public customPrice(Context context) {
    super(context);
}

public customPrice(Context context, AttributeSet attrs) {
    super(context, attrs);
    this.setWillNotDraw(false);
    this.setOrientation(HORIZONTAL);
    text1 = new TextView(context);
    text1.setText("2.00 $ base price");
    text1.setLayoutParams(new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));

    text2 = new TextView(context);
    text2.setText("1+1 offer");
    text2.setLayoutParams(new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));

    this.addView(text1);
    this.addView(text2);
}

Paint paint = new Paint();
Path path;

@Override
public void onDraw(Canvas canvas){
    int gap = 5;

    paint.setStyle(Paint.Style.FILL);
    paint.setStrokeWidth(2);
    paint.setColor(Color.RED);
    paint.setAntiAlias(true);
    path = new Path();
    path.moveTo(0, 0);
    path.lineTo(text1.getWidth(), 0);
    path.lineTo(text1.getWidth() - 5, text1.getHeight() / 2);
    path.lineTo(text1.getWidth(), text1.getHeight());
    path.lineTo(0, text1.getHeight());
    path.lineTo(0, 0);

    path.moveTo(text1.getWidth() + gap, 0);
    path.lineTo(text1.getWidth() + text2.getWidth() + gap, 0);
    path.lineTo(text1.getWidth()+text2.getWidth()+gap -5, text2.getHeight()/2);
    path.lineTo(text1.getWidth()+text2.getWidth()+gap, text2.getHeight());
    path.lineTo(text1.getWidth()+gap, text2.getHeight());
    path.lineTo(text1.getWidth()+gap-5, text2.getHeight()/2);

    path.close();
    canvas.drawPath(path, paint);
    super.onDraw(canvas);
}
}

in xml i did that:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">

<com.example.trist_000.alarm.customPrice
    android:layout_marginLeft="3dp"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"></com.example.trist_000.alarm.customPrice>

it's not perfect, need to change some stuff in the draw but its a good start i think. The variable gap is the difference between the first draw and the second draw. You have to replace com.example.trist_000.alarm, by your own path. This is what I have:

Answer 3

Make a drawable/arrow_shape.xml and use this code:

<?xml version="1.0" encoding="UTF-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

    <item>
        <shape android:shape="rectangle">
            <size
                android:width="100dp"
                android:height="40dp" />
            <solid android:color="#5EB888" />
            <corners android:radius="0dp"/>
        </shape>
    </item>

    <item
    android:top="-40dp"
    android:bottom="65dp"
    android:left="-30dp"
    android:right="-10dp">
    <rotate
        android:fromDegrees="135">
        <shape android:shape="rectangle">
            <solid android:color="#ffffff" />
        </shape>
    </rotate>
</item>

    <item
        android:top="-10dp"
        android:bottom="0dp"
        android:left="65dp"

        android:right="-15dp">

        <rotate
            android:fromDegrees="130">
            <shape android:shape="rectangle">
                <solid android:color="#ffffff" />
                <corners
                    android:radius="1dp"
                    android:bottomLeftRadius="0dp"/>
            </shape>
        </rotate>
    </item>

    <item
        android:top="10dp"
        android:width="-50dp"
        android:bottom="5dp"
        android:left="60dp"
        android:right="-5dp">

        <rotate
            android:fromDegrees="230">
            <shape android:shape="rectangle">
                <solid android:color="#ffffff" />
            </shape>
        </rotate>
    </item>

    <item
        android:top="65dp"
        android:bottom="-40dp"
        android:left="-22dp"
        android:right="-20dp">
        <rotate
            android:fromDegrees="-320">
            <shape android:shape="rectangle">
                <solid android:color="#ffffff" />
            </shape>
        </rotate>
    </item>

</layer-list>

then use it on any TextView like android:background="@drawable/arrow_shape" and the result is:

You can also check this library and do whatever shape you want in your textview

Hope it helps!!!