How do I design this UI in android app?

Question

I am new to android so I'm very sorry if this sounds like an easy question but I am trying to create the following line above the Text View where the arrow is pointing.

Is this called a View ? If so how do I place it? I know that this isn't just borders of the Text View because it doesn't go all the way to the edge.

This line should be a ListView seperator line, see for example http://stackoverflow.com/questions/2372415/how-to-change-color-of-android-listview-separator-line — bnydev, Sep 03 '16 at 06:11
The listview separator wont show above the first element, he has got to use a View — Aman Grover, Sep 03 '16 at 06:12
Are you sure that "Smart Color Adjustments" is the first entry? It can be the second. It depends on the context which way is the correct one. If nicko_yuan has a ListView, using seperator lines will be the preferred way. If not, then using a View. — bnydev, Sep 03 '16 at 07:53

score 1 · Accepted Answer · edited May 23 '17 at 11:53

1

As you said, this element is named View. And we often use as horizontal line:

<View 
    android:layout_width="match_parent"
    android:layout_height="1dp"/>

Here is another post discuss about your problem: divider line

edited May 23 '17 at 11:53

Community

1
1

answered Sep 03 '16 at 06:12

hqt

29,632
51
171
250

score 0 · Answer 2 · edited Sep 03 '16 at 06:33

Use this instead of Text View in your layout.

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:background="#818181"
    android:paddingTop="1px"
    android:paddingBottom="1px">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceSmall"
        android:id="@+id/name"
        android:ellipsize="end"
        android:maxLines="1"
        android:textColor="#ffffff"
        android:text="Text"
        android:background="#ffffff"
        android:gravity="center"/>

</LinearLayout>

score 0 · Answer 3 · edited Sep 03 '16 at 06:29

0

Yes, its View.

you can use like this.

<View 
    android:layout_width="match_parent"
    android:layout_height="1dp"
    android:background="#e3e3e3"/>

edited Sep 03 '16 at 06:29

brahmy adigopula

617
3
15

answered Sep 03 '16 at 06:11

V-rund Puro-hit

5,518
9
31
50

score 0 · Answer 4 · answered Sep 03 '16 at 06:11

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">
    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="#000"/><!--This will draw a line of 1 dp and black color-->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="anything you want" />

</LinearLayout>

How do I design this UI in android app?

4 Answers4