Aligning Elements in a Linear Layout

0
votes

I am new to android and learning. I am building form like UI and using linear layout. I have tried to put these in two vertical linear layouts inside a horizontal layout but couldn't manage to align label text elements with each input element. Below, I am using three linear layouts.

xml layout:

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_marginTop="@dimen/linlaytop"
    android:layout_marginLeft="@dimen/linlayleft"
    android:layout_marginRight="@dimen/linlayleft"
    android:layout_marginBottom="@dimen/linlaytop"
    android:orientation="vertical">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:layout_marginTop="@dimen/linlaytop">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/traffic"
            android:textAppearance="@style/TextAppearance.AppCompat.Medium"/>
        <Spinner
            android:id="@+id/trafficSpinnerView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="@dimen/linlayleft">
        </Spinner>
    </LinearLayout>
    <LinearLayout
        android:layout_marginTop="@dimen/linlaytop"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/location"
            android:textAppearance="@style/TextAppearance.AppCompat.Medium"
            />

        <EditText
            android:id="@+id/locationTxtView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textAppearance="@style/TextAppearance.AppCompat.Medium"
            android:layout_marginLeft="@dimen/linlayleft"/>
    </LinearLayout>
    <LinearLayout
        android:layout_marginTop="@dimen/linlaytop"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/date"
            android:textAppearance="@style/TextAppearance.AppCompat.Medium"/>
        <TextView
            android:id="@+id/dateTxtView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:hint="@string/datetime"
            android:layout_marginLeft="@dimen/linlayleft"
            android:textAppearance="@style/TextAppearance.AppCompat.Medium"/>
    </LinearLayout>


</LinearLayout>

Design Layout:
enter image description here enter image description here

I want to align these three elements:
enter image description here

Please advise.

2
androidlayoutandroid-linearlayout
I want to align these three elements - In what order? - Nongthonbam Tonthoi
to align vertically to each other. - omer
They are already aligned vertically to each other as I see it. - Nongthonbam Tonthoi
I mean start of each element should match a same vertical margin. - omer
Then just assign a static width to all the elements on the left or use width as 0dp and add layout_weight - Nongthonbam Tonthoi

2 Answers

2
votes

Give Weightsum to your linearLayout, nd give layout_weight to your views ( Textviews and spinner ). Change the width of views from wrap_content to 0dp. Do the same with all of three layouts like this. Hope this is what you looking for.

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:weightSum="100"
    android:layout_marginTop="@dimen/linlaytop">
    <TextView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="30"
        android:text="@string/traffic"
        android:textAppearance="@style/TextAppearance.AppCompat.Medium"/>
    <Spinner
        android:id="@+id/trafficSpinnerView"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="70"
        android:layout_marginLeft="@dimen/linlayleft">
    </Spinner>
</LinearLayout>
2
votes

Here you go

    <?xml version="1.0" encoding="utf-8"?>
<LinearLayout android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_marginTop="10dp"
    android:layout_marginLeft="10dp"
    android:layout_marginRight="10dp"
    android:layout_marginBottom="10dp"
    android:orientation="vertical"
    xmlns:android="http://schemas.android.com/apk/res/android">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:layout_marginTop="10dp">
        <TextView
            android:layout_width="0dp"
            android:layout_weight="10"
            android:layout_height="wrap_content"
            android:text="traffic"
            android:textAppearance="@style/TextAppearance.AppCompat.Medium"/>
        <Spinner
            android:id="@+id/trafficSpinnerView"
            android:layout_width="0dp"
            android:layout_weight="40"
            android:layout_height="wrap_content"
            android:layout_marginLeft="10dp">
        </Spinner>
    </LinearLayout>
    <LinearLayout
        android:layout_marginTop="10dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
        <TextView
            android:layout_width="0dp"
            android:layout_weight="10"
            android:layout_height="wrap_content"
            android:text="location"
            android:textAppearance="@style/TextAppearance.AppCompat.Medium"
            />

        <EditText
            android:id="@+id/locationTxtView"
            android:layout_width="0dp"
            android:layout_weight="40"
            android:layout_height="wrap_content"
            android:textAppearance="@style/TextAppearance.AppCompat.Medium"
            android:layout_marginLeft="10dp"/>
    </LinearLayout>
    <LinearLayout
        android:layout_marginTop="10dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
        <TextView
            android:layout_width="0dp"
            android:layout_weight="10"
            android:layout_height="wrap_content"
            android:text="date"
            android:textAppearance="@style/TextAppearance.AppCompat.Medium"/>
        <TextView
            android:id="@+id/dateTxtView"
            android:layout_width="0dp"
            android:layout_weight="40"
            android:layout_height="wrap_content"
            android:hint="datetime"
            android:layout_marginLeft="10dp"
            android:textAppearance="@style/TextAppearance.AppCompat.Medium"/>
    </LinearLayout>


</LinearLayout>

enter image description here