Android：对齐复杂的LinearLayout内容

Question

I've the following Linear layout and been trying align elements by a single vertical baseline as shown on the screenshot

How it looks so far

Activity xml source

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal"
                android:clickable="true"
                android:background="@drawable/container_drowshadow_grey"
                android:baselineAligned="false"
                android:padding="8dp">

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="left"
        android:id="@+id/first_language"
        android:layout_marginLeft="10dp">

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/lang_source_icon"
            android:src="@drawable/ic_flag_en"
            android:contentDescription="@string/language_direction"
            android:layout_gravity="center_horizontal"/>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textAppearance="?android:attr/textAppearanceMedium"
            android:text="English"
            android:id="@+id/lang_source_text"
            android:gravity="center_vertical"
            android:layout_marginTop="4dp"
            android:layout_marginLeft="6dp"
            android:layout_marginRight="10dp"
            android:textColor="@color/text_source_phrase"/>

    </LinearLayout>

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/language_direction"
        android:src="@drawable/ic_arrowlist"
        android:contentDescription="@string/language_direction"
        android:layout_marginTop="8dp"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"/>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="right"
        android:id="@+id/second_language">

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/lang_destination_icon"
            android:src="@drawable/ic_flag_es"
            android:contentDescription="@string/language_direction"
            android:layout_gravity="left"/>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textAppearance="?android:attr/textAppearanceMedium"
            android:text="Espanol"
            android:id="@+id/lang_destination_text"
            android:gravity="center_vertical"
            android:layout_marginTop="4dp"
            android:layout_marginLeft="6dp"
            android:textColor="@color/text_source_phrase"/>
    </LinearLayout>

</LinearLayout>

I want to align all list items by the red line on the screen shot. How to do this? I've tried to play with android:gravity and android:layout_gravity attributes but didn't succeed.

Answer 1

Try this.. give android:layout_weight="0.5" for horizontal two layouts

    <LinearLayout
    android:layout_width="0dp"             //Correction here
        android:layout_weight="0.5"          //Correction here
    android:layout_height="wrap_content"
        android:gravity="left"
        android:id="@+id/first_language"
        android:layout_marginLeft="10dp">

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/lang_source_icon"
            android:src="@drawable/ic_flag_en"
            android:contentDescription="@string/language_direction"
            android:layout_gravity="center_horizontal"/>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textAppearance="?android:attr/textAppearanceMedium"
            android:text="English"
            android:id="@+id/lang_source_text"
            android:gravity="center_vertical"
            android:layout_marginTop="4dp"
            android:layout_marginLeft="6dp"
            android:layout_marginRight="10dp"
            android:textColor="@color/text_source_phrase"/>

    </LinearLayout>

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/language_direction"
        android:src="@drawable/ic_arrowlist"
        android:contentDescription="@string/language_direction"
        android:layout_marginTop="8dp"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"/>

    <LinearLayout
    android:layout_width="0dp"                //Correction here
        android:layout_weight="0.5"           //Correction here
    android:layout_height="wrap_content"
        android:gravity="right"
        android:id="@+id/second_language">

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/lang_destination_icon"
            android:src="@drawable/ic_flag_es"
            android:contentDescription="@string/language_direction"
            android:layout_gravity="left"/>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textAppearance="?android:attr/textAppearanceMedium"
            android:text="Espanol"
            android:id="@+id/lang_destination_text"
            android:gravity="center_vertical"
            android:layout_marginTop="4dp"
            android:layout_marginLeft="6dp"
            android:textColor="@color/text_source_phrase"/>
    </LinearLayout>