CODEWITHSUNDEEP
androidcssxml
user29051986
user29051986

Reputation: 97

how to create textview with the image and border like the image attached

I want to create a textview like the below image. I tried but not able to get like this format.

enter image description here

This is my xml file. 

<View android:background="#ff340c1c"
    android:layout_width="fill_parent"
    android:layout_height="0.5dip"
    android:layout_above="@+id/genere"
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="true" />

<TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:id="@+id/genere"
    android:text="Search by Movie Genere"
    android:layout_above="@+id/rating"
    android:layout_alignParentRight="true"
    android:layout_alignParentEnd="true"
    android:layout_marginBottom="78dp"
    android:textSize="20sp"/>

<View android:background="#ff340c1c"
    android:layout_width="fill_parent"
    android:layout_height="0.5dip"
    android:layout_alignBottom="@+id/genere"
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="true" />

Upvotes: 0

Views: 249

Answers (3)

Aman Gupta - ΔMΔN
Aman Gupta - ΔMΔN

Reputation: 3007

Note: Many possible solution exists.

It can be done by using a simple linear layout as a border.

 <LinearLayout
            android:id="@+id/linearLayout1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="#EEEEEE"
            android:orientation="horizontal"
            android:padding="1dp" >

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="#FFFFFF"
                android:orientation="horizontal" >

                <ImageView
                    android:id="@+id/imageView1"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:src="@android:drawable/ic_search_category_default" />

                <TextView
                    android:id="@+id/textView1"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:text="Search By Venue" />
            </LinearLayout>
        </LinearLayout>

Upvotes: 2

Sagar Zala
Sagar Zala

Reputation: 5134

Use custom background with border and drawableLeft -

drawable/my_rect.xml

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

    <stroke
        android:width="0.5dp"
        android:color="@color/gray" />

    <solid android:color="@color/white" />

    <corners android:radius="0px" />

</shape>

In XML:

<TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:id="@+id/genere"
    android:text="Search by Movie Genere"
    android:layout_above="@+id/rating"
    android:drawableLeft="@drawable/someimage" // ADD
    android:background="@drawable/my_rect"     // ADD
    android:layout_alignParentRight="true"
    android:layout_alignParentEnd="true"
    android:layout_marginBottom="78dp"
    android:textSize="20sp"/>

Upvotes: 3

aravindsagar
aravindsagar

Reputation: 4242

For adding an image to the TextView, see android:drawableLeft. For adding a border, you could take a look at 9-patch images. Generate a 9-patch image as described, and set that as the background of the TextView.

Upvotes: 0

Related Questions