Xamarin.Android Spinner和TextView对齐

Question

I'm developing a Xamarin.Android application using VS2017. I want to create a form as in the image.

How to create it? I find it difficult to align TextView & Spinner . My output:

This is my code.

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="@dimen/intialPadding"
android:background="@color/windowBackground">
<LinearLayout
  android:orientation="vertical"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:layout_gravity="center">
<android.support.design.widget.TextInputLayout
    android:layout_width="match_parent"
    android:layout_height="@dimen/textInputLayoutHeight">
  <EditText
      android:id="@+id/edt_RefuelingDate1"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:textColor="@color/colorSecondaryText"
      android:layout_gravity="center"
      android:hint="Date"
      android:inputType="date" />
</android.support.design.widget.TextInputLayout>
<LinearLayout
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="@dimen/textInputLayoutHeight"
    android:layout_gravity="center">
  <TextView
      android:text="Vehicle"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:id="@+id/textView2"
      android:textSize="10dp"
      android:paddingLeft="5dp" />
  <Spinner
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      style="@style/Widget.AppCompat.Spinner.Underlined"
      android:id="@+id/spnrRefuelingVehicle"
      android:layout_marginBottom="1.5dp" />
</LinearLayout>
<LinearLayout
    android:orientation="horizontal"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
  <LinearLayout
      android:orientation="vertical"
      android:layout_width="fill_parent"
      android:layout_weight="1"
      android:layout_height="@dimen/textInputLayoutHeight"
      android:layout_gravity="center">
    <TextView
        android:text="Fuel Type"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/textView1"
        android:textSize="10dp"
        android:paddingLeft="5dp" />
    <Spinner
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        style="@style/Widget.AppCompat.Spinner.Underlined"
        android:id="@+id/spnr_RefuelingFuelType1"
        android:hint="Fuel Type" />
  </LinearLayout>
  <android.support.design.widget.TextInputLayout
      android:id="@+id/tilRefuelingFuelPrice1"
      android:layout_width="fill_parent"
      android:layout_weight="1"
      android:layout_height="@dimen/textInputLayoutHeight">
    <EditText
        android:hint="Fuel Price"
        android:inputType="numberDecimal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textColor="@color/colorSecondaryText"
        android:id="@+id/edt_RefuelingFuelPrice1" />
  </android.support.design.widget.TextInputLayout>
</LinearLayout>
<android.support.design.widget.TextInputLayout
    android:id="@+id/tilRefuelingOdometer1"
    android:layout_width="match_parent"
    android:layout_height="@dimen/textInputLayoutHeight">
  <EditText
      android:hint="Odometer"
      android:inputType="numberDecimal"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:textColor="@color/colorSecondaryText"
      android:id="@+id/edt_RefuelingOdometer1" />
</android.support.design.widget.TextInputLayout>
<LinearLayout
    android:orientation="horizontal"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
  <android.support.design.widget.TextInputLayout
      android:id="@+id/tilRefuelingAmount1"
      android:layout_width="fill_parent"
      android:layout_weight="1"
      android:layout_height="@dimen/textInputLayoutHeight">
    <EditText
        android:hint="Amount"
        android:inputType="numberDecimal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textColor="@color/colorSecondaryText"
        android:id="@+id/edt_RefuelingAmount1" />
  </android.support.design.widget.TextInputLayout>
  <android.support.design.widget.TextInputLayout
      android:id="@+id/tilRefuelingQuantity1"
      android:layout_width="fill_parent"
      android:layout_weight="1"
      android:layout_height="@dimen/textInputLayoutHeight">
    <EditText
        android:hint="Quantity"
        android:inputType="numberDecimal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textColor="@color/colorSecondaryText"
        android:id="@+id/edt_RefuelingQuantity1" />
  </android.support.design.widget.TextInputLayout>
</LinearLayout>
<LinearLayout
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="center">
  <TextView
      android:text="Fuel Efficiency"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:id="@+id/textView1"
      android:textSize="10dp"
      android:paddingLeft="5dp" />
  <TextView
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:id="@+id/tv_RefuelingAverage"
      android:gravity="center_vertical"
      android:text="Fuel Efficiency"
      android:textAlignment="center"
      android:paddingLeft="8dp" />
</LinearLayout>
</LinearLayout>
</FrameLayout>

Answer 1

I was able to achieve it by using TableLayout.

Code:

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:padding="@dimen/intialPadding"
android:background="@color/windowBackground">
<TableRow
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
<LinearLayout
      android:orientation="vertical"
      android:layout_width="match_parent"
      android:layout_height="wrap_content">
  <TextView
      android:text="Vehicle"
      android:layout_width="match_parent"
      android:layout_height="wrap_content" />
  <Spinner
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:id="@+id/spnrRefuelingVehicle" />
</LinearLayout>
</TableRow>
<TableRow
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
<TextView
    android:text="Fuel Type"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_weight="1" />
<TextView
    android:text="Fuel Price"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_weight="1" />
</TableRow>
<TableRow
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
<Spinner
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    android:id="@+id/spnr_RefuelingFuelType1" />
<TextView
    android:gravity="center_vertical"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_weight="1"
    android:id="@+id/edt_RefuelingFuelPrice1" />
</TableRow>
</TableLayout>

Output