How do I add a vertical separator line between 3 displayed values?

Question

I have 3 values displayed consecutively on the screen and I need to add 2-3 vertical separator lines between all of them.The issue is everytime I add a view/ divider between them they shift to the left or right way too much and some values cut off/ disappear. I was wondering if there is a way to go abotu it, below is my xml code for the same:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:foo="http://schemas.android.com/apk/res/com.justin.abc"
    android:layout_width="20dp"
    android:layout_height="match_parent"
    android:orientation="horizontal"
    android:paddingBottom="8dp"
    android:paddingLeft="20dp"
    android:paddingTop="8dp" >

    <LinearLayout
        android:id="@+id/layout1"
        android:layout_width="2dp"
        android:layout_height="match_parent"
        android:orientation="vertical" >

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal" >

            <com.justin.abc.utils.FontView
                android:id="@+id/symbol"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:paddingRight="3dp"
                android:textColor="@color/white"
                android:textSize="12sp"
                foo:customFont="Roboto-Bold.ttf" />

            <com.justin.abc.utils.FontView
                android:id="@+id/arrow"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textSize="14sp"
                foo:customFont="Roboto-Bold.ttf" />
        </LinearLayout>

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

            <TextView
                android:id="@+id/value1_back"
                style="@style/abc.TextView.ListsTextView.Header"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:padding="3dp"/>

            <com.justin.abc.utils.FontView
                android:id="@+id/change"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textSize="15sp"
                foo:customFont="Roboto-Bold.ttf" />
        </FrameLayout>
    </LinearLayout>

    <LinearLayout
        android:id="@+id/layout2"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:orientation="vertical" >

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal" >

            <com.justin.abc.utils.FontView
                android:id="@+id/symbol2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:paddingRight="3dp"
                android:textColor="@color/white"
                android:textSize="12sp"
                foo:customFont="Roboto-Bold.ttf" />

            <com.justin.abc.utils.FontView
                android:id="@+id/dashboard_markets_arrow2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textSize="14sp"
                foo:customFont="Roboto-Bold.ttf" />
        </LinearLayout>

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

            <TextView
                android:id="@+id/value2_back"
                style="@style/abc.TextView.ListsTextView.Header"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:padding="3dp"/>

            <com.justin.abc.utils.FontView
                android:id="@+id/change2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textSize="15sp"
                foo:customFont="Roboto-Bold.ttf" />
        </FrameLayout>
    </LinearLayout>

    <LinearLayout
        android:id="@+id/layout3"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:orientation="vertical" >

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal" >

            <com.justin.abc.utils.FontView
                android:id="@+id/dashboard_markets_symbol3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:paddingRight="3dp"
                android:textColor="@color/white"
                android:textSize="12sp"
                foo:customFont="Roboto-Bold.ttf" />

            <com.justin.abc.utils.FontView
                android:id="@+id/dashboard_markets_arrow3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textSize="14sp"
                foo:customFont="Roboto-Bold.ttf" />
        </LinearLayout>

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

            <TextView
                android:id="@+id/value3_back"
                style="@style/abc.TextView.ListsTextView.Header"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:padding="3dp"/>

            <com.justin.abc.utils.FontView
                android:id="@+id/change3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textSize="15sp"
                foo:customFont="Roboto-Bold.ttf" />
        </FrameLayout>
    </LinearLayout>

</LinearLayout>

Do I need to add a layer or something in the background for it to support the same or do I need to change this structure? Thanks! Justin I have attached the image for the same

even after adding android:gravity="center" I still see the same results

Could you post an image of what it looks like now and what you want it to look like? — Neil Townsend, Jul 11 '13 at 19:11

score 0 · Answer 1 · answered Jul 11 '13 at 15:34

0

Place this in between each value you have mentioned in your question.

<View android:layout_height="fill_parent" android:layout_width="2px" android:background="#000000"/>

should give you a black bar in between values.

answered Jul 11 '13 at 15:34

Gru

2,686
21
29

I tried that but it just sticks to the values on the left, if I add any padding, it shifts the values, i want it to be centered, so it can be equidistant between these values, any clue? – Jul 11 '13 at 15:40
@Justice Bauer for this check Neil Townsend answer, may that help you. – Gru Jul 12 '13 at 11:45

Neil Townsend · Accepted Answer · 2013-07-12T15:01:34.140

0

As @Gru says, you can get the black line using a View between layout1 and layout2 and layout2 and layout3.

As you point out, this will be on the left edge of the contents of layout2 and layout3. To separate this out a bit, an easy solution is to add the line:

android:paddingLeft="20dp"

to layout1, layout2 and layout3, whilst removing it from the top LinearLayout. This won't achieve precise centring, but it will give an equal text to left edge for each block, which I think will look about right.

edited Jul 12 '13 at 15:01

answered Jul 11 '13 at 20:19

Neil Townsend

6,024
5
35
52

I have added the image in the edited question for the same and even after adding the above line it still sticks to the left line as seen in the image, are there any other adjustments that can help push it? like padding or something? – Jul 12 '13 at 14:47
OK, got it, I'll have a think about how to achieve what you want. – Neil Townsend Jul 12 '13 at 14:53
What is `FontView` a derivative of and how does it set it's width? – Neil Townsend Jul 12 '13 at 14:56
its a custom font class to set certain types of fonts – Jul 12 '13 at 15:01
thanks!followed that and adjusted accordingly, paddingleft to 30 worked, thanks for the help, i appreciate it! – Jul 12 '13 at 16:11
do you have any idea about this issue: http://stackoverflow.com/questions/18382510/how-do-i-fix-the-password-username-authentication-in-my-code/18428135?noredirect=1#18428135 – Aug 26 '13 at 14:50
you are good at these UI questions, so have one more for ya: http://stackoverflow.com/questions/19166342/how-do-i-avoid-double-borders-between-lists/19201562?noredirect=1#comment28459924_19201562 Let me know if you have any idea about the same? – Oct 07 '13 at 18:46
I'm a bit confused, that question appears to have been solved! – Neil Townsend Oct 08 '13 at 15:13
sorry about that, I posted this comment before someone posted an answer to it. thanks though – Oct 08 '13 at 16:16

How do I add a vertical separator line between 3 displayed values?

2 Answers2

Linked