How to achieve this UI in Android?

Question

In one of my applications, i need to create a border for a linear layout which would look like below

I do not want to have an image and set it as background. Because then i would need to create images of various size for different devices.

If i create the layout with a linear layout and place a textview using absolute positioning, it might not look as expected in different devices.

So What is the best way to achieve this UI ?

Answer 1

Try this

main_layout.xml

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

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent" >

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:layout_margin="10dp"
            android:background="@drawable/Layout_selector"
            android:orientation="vertical" >
        </LinearLayout>

        <TextView
            android:id="@+id/textView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="MyText"
            android:layout_marginLeft="50dp"
            android:padding="1dp"
            android:background="#fff"
            android:textAppearance="?android:attr/textAppearanceMedium" />

    </FrameLayout>

</LinearLayout>

In Drawable Layout_selector.xml

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

    <item android:state_enabled="true"
            android:state_pressed="true">
        <shape android:padding="5dp" android:shape="rectangle">
            <solid android:color="#FFF" />
            <stroke android:width="0.5dp" android:color="#29166f" />
            <corners android:bottomLeftRadius="10dp" android:bottomRightRadius="10dp" android:topLeftRadius="10dp" android:topRightRadius="10dp" />
        </shape>
    </item>
    <item android:state_enabled="true" android:state_focused="true">
        <shape android:padding="5dp" android:shape="rectangle">
            <solid android:color="#FFF" />
            <stroke android:width="0.5dp" android:color="#29166f" />
            <corners android:bottomLeftRadius="10dp" android:bottomRightRadius="10dp" android:topLeftRadius="10dp" android:topRightRadius="10dp" />
        </shape>
    </item>
    <item android:state_enabled="true">
        <shape android:padding="5dp"
            android:shape="rectangle">
            <solid android:color="#FFF" /> 
            <stroke android:width="0.5dp" android:color="#29166f" />
            <corners android:bottomLeftRadius="10dp" android:bottomRightRadius="10dp" android:topLeftRadius="10dp" android:topRightRadius="10dp" />
        </shape>
    </item>

</selector>

Output is :

Answer 2

Use RelativeLayout . First create an EditText box with boundary. Then use RelativeLayout to place a TextView - adjust the margin and padding on TextView to achieve the desired effect.

Answer 3

Now I know you said that you want to avoid just setting that image as the background in order for you to be able to avoid having to create multiple images, but have you heard about Android Asset Studio . I use to hate dealing with resources (especially nine-patches) before I heard about this an awesome website.

Just use this site and upload that image and create a nine-patch file for you image. I would suggest setting the stretchable area to be a small square right in the middle of your image and then Android asset studio will do the rest.

Once you have done all that, you want to just make this the background of your EditText instead of the RelativeLayout but that is up to you to decide what looks best in your UI.

If you want to set it to the background of the EditText, your xml will look something like this:

<EditText
    android:id="@+id/textView1"
    android:layout_width="match_parent"
    android:layout_height="100dp"
    android:layout_alignLeft="@+id/relativeLayout1"
    android:background="@android:drawable/imageFile"
     />