Android: Create speech popup pointing up

117 Views Asked by At

I need to create a speech bubble pointing up, but I'm not familiar with android shapes, so looking for examples come across with one as expected, but pointing down, and as I don't know the meaning of pivotX and pivotY, all my attempts to invert the pointing triangle were not at all successfull.

Apart from that, this example creates the bubble effect with two xml files, but it could be also great if it could be possible to do it with only one xml (this wouldn't be so important though).

As a last point maybe I would like to make the pointing triangle a little bit higher, or also a little bit bigger, so apart from the given example, it wouldn't be bad if you could give one or two examples more according this.

Thanks.

Given the next Drawable files

rounded_rect.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="#888" />
    <corners
        android:bottomRightRadius="8dp"
        android:topLeftRadius="8dp"
        android:topRightRadius="8dp"/>

</shape>

corner.xml

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <rotate
            android:fromDegrees="45"
            android:pivotX="135%"
            android:pivotY="15%"
            android:toDegrees="45"
            >
            <shape android:shape="rectangle">
                <solid android:color="#888"/>

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

And the next code:

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:layout_margin="16dp"
    android:orientation="vertical">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content" 
        android:text="Hello"
        android:padding="16dp"
        android:background="@drawable/rounded_rect"/>

    <ImageView
        android:layout_marginTop="-1.5dp"
        android:layout_width="8dp"
        android:layout_height="16dp"
        android:layout_gravity="start"
        android:background="@drawable/corner"
        />

</LinearLayout>

You get the following result:

enter image description here

But I expect the opposite:

enter image description here

0

There are 0 best solutions below