How to implement a form with a holo style like the stock add contact app?

Question

I need to collect user input, and I want to use the same style as the stock android "add contact app", like the screenshot above (can't post images still):

http://www.vogella.com/articles/AndroidSQLite/images/xcontact30.png.pagespeed.ic.rcgxciehCj.png

I know I can use the EditText widget but how I add the "Phone", "Email" widget? Are they edit text too? Can you give me some xml example?

EDIT: What I want to diplay is the "Phone" label (not the entry itself): I need the xml values to make it identical to the phone (font, style, type).

Thanks a lot

EDIT 2 (SOLVED): I solved this thanks to user @divoom12 and this help Android Drawing Separator/Divider Line in Layout?

        <TextView
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:gravity="left"
            android:paddingBottom="1dp"
            android:paddingLeft="6dp"
            android:text="CATEGORY"
            android:textColor="#33b5e5"
            android:textSize="15sp"
            android:textStyle="bold" />

        <View
            android:layout_width="fill_parent"
            android:layout_height="1dp"
            android:background="#33b5e5" />

        <EditText
            android:id="@+id/editText1"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:ems="10"
            android:inputType="textPersonName"
            android:text="@string/name"
            android:textColor="#ffffffff"
            android:textSize="15sp" />

score 1 · Accepted Answer · edited May 23 '17 at 12:10

1

Yes, they too are EditText. Every EditText can be set a property android:inputType="". But you can make your own validation. For e-mail EditBox, check this thread: Android Email EditText Validation. If you want to use the stock then you can do like this android:inputType="textEmailAddress", and for phone: android:inputType="phone". There are a lot like this. Check them out here: http://www.androidpeople.com/android-edittext-inputtype . Please if this helps mark this as the answer. :)

Edit: If you want your app to be with holo theme, add this to your manifest, in the application tag: android:theme="@android:style/Theme.Holo"

Edit: This is the textView:

<TextView
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:text="PHONE" 
    android:textStyle="bold"
    android:textSize="21dp"
    android:gravity="left"
    android:paddingBottom="6dp"
    android:paddingLeft="6dp"

    android:textColor="#33b5e5"
    android:background="@drawable/bottom"/>

And here is the background, which makes it to look like the picture: (bottom.xml)

<?xml version="1.0" encoding="utf-8"?>
    <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
        <item>
            <shape android:shape="rectangle">
                <solid android:color="#33b5e5"/>
            </shape>
        </item>

        <item android:bottom="2dp">
            <shape android:shape="rectangle">
                <solid android:color="#FFFFFF" />
            </shape>
        </item>
    </layer-list>

Is this what you are looking for? It looks like on the picture to me (colors, bottom border etc.). If you need help, just ask. The color of your activity should be white, for best results. Hope this helps.

edited May 23 '17 at 12:10

Community

1
1

answered Aug 03 '13 at 15:47

ya-ivanov

516
2
11

Look at the edit: I need the xml values to make an identical "Phone" label, not the input text itself. Just the blue one :) – Scognito Aug 03 '13 at 18:07
Okay I changed my post. Its now a blue label, with blue border, and white background. Is it what you are looking for? – ya-ivanov Aug 03 '13 at 19:23
It's amost done! The problem is that the bottom blue line is obtained using 2 rectangles. Any chance to have a line with transparent background? – Scognito Aug 03 '13 at 20:45
What do you mean a line with a transparent background? The line to still be blue, but to be see through? – ya-ivanov Aug 03 '13 at 20:51
Yes, for example if I have a bitmap background, your actual code will show a white rectangle and a blue line. I don't want a white rectangle. Changing color to #00FFFFFF it will show the blue rectangle.This is the effect I need: http://s13.postimg.org/cklsdrh07/Capture.png – Scognito Aug 03 '13 at 22:04
I'm sorry. I don't know a way to do this. There is a way but it is very amateur and weird. Its working though. You remove the background, and under the textview, create a EditText, with layout_width="fill_parent" and layout_height="2dp" (maybe 3dp or 4dp). This will only work on holo theme, and the line will be always blue. Then you can modify the EditText, to be untouchable, if someone tries to click on it, just to be sure, and thats it. You have a blue bottom border. It is very amateur way but it is working. Hope this helps. Try it. – ya-ivanov Aug 03 '13 at 22:24

score 1 · Answer 2 · answered Aug 03 '13 at 16:05

POSSIBLE INPUT TYPES

none text

textCapCharacters

textCapWords

textCapSentences

textAutoCorrect

textAutoComplete

textMultiLine

textImeMultiLine

textNoSuggestions

textUri

textEmailAddress

textEmailSubject

textShortMessage

textLongMessage

textPersonName

textPostalAddress

textPassword

textVisiblePassword

textWebEditText

textFilter

textPhonetic

textWebEmailAddress

textWebPassword

number

numberSigned

numberDecimal

numberPassword

phone

datetime

date

time

How to implement a form with a holo style like the stock add contact app?

2 Answers2