How do i place a line between two linearlayouts?

Question

How do i place a line between two linearlayouts horizontally? I tried with a additional linearlayout and a one time with a View. My linearlayouts looks currently like this:

<LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="60dp"
        android:layout_gravity="bottom"
        android:orientation="horizontal"
        >

        <LinearLayout
            android:id="@+id/about"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:clickable="true"
            android:gravity="start"
            android:layout_gravity="start"
            android:layout_weight="1"
            android:background="?android:attr/selectableItemBackground"
            >
            <ImageView
                android:id="@+id/about_icon"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:scaleType="fitXY"
                android:layout_marginStart="20dp"
                android:layout_gravity="start|center_vertical"
                android:src="@drawable/ic_info_black_24dp"
                android:clickable="false"
                />

            <TextView
                android:id="@+id/text"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginStart="10dp"
                android:layout_gravity="start|center_vertical"
                android:text="About"
                android:textSize="20sp"
                android:textColor="@android:color/black"
                android:clickable="false"
                />
        </LinearLayout>
        <!--<View
            android:layout_width="1dp"
            android:layout_height="fill_parent"
            android:layout_gravity="center_horizontal"
            android:gravity="center_horizontal"
            android:layout_weight="2"
            android:elevation="0dp"
            android:background="@android:color/black"
            />-->

        <LinearLayout
            android:id="@+id/theme"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:clickable="true"
            android:layout_weight="3"
            android:gravity="end"
            android:layout_gravity="end"
            android:background="?android:attr/selectableItemBackground"
            >
            <ImageView
                android:id="@+id/theme_icon"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:scaleType="fitXY"
                android:layout_marginEnd="10dp"
                android:layout_gravity="end|center_vertical"
                android:src="@drawable/ic_palette_white_24dp"
                android:tint="@android:color/black"
                android:clickable="false"
                />
            <TextView
                android:id="@+id/text2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="end|center_vertical"
                android:layout_marginEnd="20dp"
                android:text="Theme"
                android:textSize="20sp"
                android:textColor="@android:color/black"
                android:clickable="false"
                />
        </LinearLayout>
    </LinearLayout>

It looks currently like this(the layout on the right side, is a bit more left, dont understand why ^^):

Any suggestions?

Answer 1

Why not use a RelativeLayout and avoid weights all together. Try this:

<RelativeLayout
android:layout_width="match_parent"
android:layout_height="60dp"
android:layout_gravity="bottom"
android:orientation="horizontal"
xmlns:android="http://schemas.android.com/apk/res/android">

<View
    android:id="@+id/divider"
    android:layout_width="1dp"
    android:layout_height="match_parent"
    android:layout_centerInParent="true"
    android:elevation="0dp"
    android:background="@android:color/black" />
<LinearLayout
    android:id="@+id/about"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:clickable="true"
    android:layout_toLeftOf="@id/divider"
    android:background="?android:attr/selectableItemBackground">
    <ImageView
        android:id="@+id/about_icon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:scaleType="fitXY"
        android:layout_marginStart="20dp"
        android:layout_gravity="start|center_vertical"
        android:src="@drawable/ic_launcher"
        android:clickable="false"
        />

    <TextView
        android:id="@+id/text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="10dp"
        android:layout_gravity="start|center_vertical"
        android:text="About"
        android:textSize="20sp"
        android:textColor="@android:color/black"
        android:clickable="false"
        />
</LinearLayout>

<LinearLayout
    android:id="@+id/theme"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:clickable="true"
    android:layout_toRightOf="@id/divider"
    android:background="?android:attr/selectableItemBackground">
    <ImageView
        android:id="@+id/theme_icon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:scaleType="fitXY"
        android:layout_marginEnd="10dp"
        android:layout_gravity="end|center_vertical"
        android:src="@drawable/ic_launcher"
        android:tint="@android:color/black"
        android:clickable="false"
        />
    <TextView
        android:id="@+id/text2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="end|center_vertical"
        android:layout_marginEnd="20dp"
        android:text="Theme"
        android:textSize="20sp"
        android:textColor="@android:color/black"
        android:clickable="false"
        />
</LinearLayout>

Answer 2

Get rid of the weights and use a Relative layout to hold your linear layouts. Then add this in your XML:

<View android:id="@+id/separator"
  android:layout_width="5dp" 
  android:layout_height="match_parent"
  android:layout_centerHorizontal="true"/>

Then in the layout you want to the right add this line:

android:layout_toRightOf="@+id/separator"

And then for the layout to the left:

android:layout_toLeftOf="@+id/separator"