Custom design Text Box

Question

I want to design above text box but not getting any idea how to do this.

i have search png,svg for above did not found any .

please help me out any suggestion?

Answer 1

Solution: Using LayerDrawable to achieve your text box design.

What is a LayerDrawable in simply?

A LayerDrawable is a drawable object that manages an array of other drawables. Each drawable in the list is drawn in the order of the list—the last drawable in the list is drawn on top.

Each drawable is represented by an element inside a single element.

From your text box design, I will divide into 4 elements.

• An arrow icon at the center horizontal at top
• A text box content in rectangle
• A top left image in bitmap
• A top right corner in bitmap

Put all in background_text_box.xml file:

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

    <!-- The arrow in triangle by rotate a rectangle 45 degrees -->
    <item
        android:width="10dp"
        android:height="10dp"
        android:gravity="center_horizontal"
        android:top="0dp">
        <rotate android:fromDegrees="45">
            <shape android:shape="rectangle">
                <solid android:color="#FFF1A4" />
            </shape>
        </rotate>

    </item>

    <!-- The content in rectangle -->
    <item
        android:width="300dp"
        android:height="100dp"
        android:gravity="fill"
        android:top="5dp">
        <shape android:shape="rectangle">
            <solid android:color="#FFF1A4" />
        </shape>
    </item>

    <!-- The left corner image in bitmap-->
    <item
        android:gravity="top|left"
        android:top="5dp">
        <bitmap android:src="@drawable/icon" />
    </item>

    <!-- The right corner image in bitmap -->
    <item
        android:gravity="top|right"
        android:top="5dp">
        <bitmap android:src="@drawable/icon" />
    </item>

</layer-list>

The result looks like:

Let's test it:

activity_main.xml

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

    <TextView
        android:id="@+id/spinner"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:paddingStart="50dp"
        android:paddingEnd="50dp"
        android:gravity="center"
        android:text="Congratulation...!\nLaxminarayan is top performaer\nof month December 2017"
        android:background="@drawable/background_text_box"/>
</LinearLayout>

The text box looks like: