Baseline Constraint in Linear, scrollable layouts

Question

I need to make sure that two view elements are right next to each other and vertically at the same height. I'd do it using Baseline Constraint but currently I'm working with a linear, scrollable layout (a linear layout in a scrollview) and when I click on an element it wouldn't allow me to get the Baseline Constraint from it and connect it to somewhere else.

XML code:

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/newOrderScrollView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbars="vertical">
tools:context="eof.concrete.NewOrderActivity">

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_margin="@dimen/activity_horizontal_margin"
    android:layout_marginBottom="@dimen/activity_horizontal_margin"
    android:focusable="true"
    android:focusableInTouchMode="true"
    android:orientation="vertical"
    android:paddingBottom="16dp"
    android:baselineAligned="false">

    <TextView
        android:id="@+id/newOrderHeadlineTextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:text="Yeni Sipariş"
        android:textColor="@android:color/black"
        android:textSize="10pt"
        android:textStyle="bold"></TextView>

    <TextView
        android:id="@+id/materialCodeTextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="@dimen/activity_vertical_margin"
        android:text="Malzeme kodu"
        android:textSize="10pt"></TextView>

    <Spinner
        android:id="@+id/materialsSpinner"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"></Spinner>

    <TextView
        android:id="@+id/amountTextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="@dimen/activity_horizontal_margin"
        android:text="Miktar"
        android:textSize="10pt"></TextView>

    <EditText
        android:id="@+id/amountText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:hint="Örnek: 1000"
        android:inputType="numberDecimal" />

    <TextView
        android:id="@+id/dateTextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="@dimen/activity_vertical_margin"
        android:text="Teslim tarihi"
        android:textSize="10pt"></TextView>

    <EditText
        android:id="@+id/dateText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:hint="Örnek: 10/01/2017"
        android:inputType="date" />

    <TextView
        android:id="@+id/cityTextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:text="İl"
        android:textSize="10pt"></TextView>

    <Spinner
        android:id="@+id/citiesSpinner"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"></Spinner>

    <TextView
        android:id="@+id/provinceTextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:text="İlçe"
        android:textSize="10pt"></TextView>

    <Spinner
        android:id="@+id/provincesSpinner"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"></Spinner>

    <TextView
        android:id="@+id/priceTextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:text="Pompa fiyatı"
        android:textSize="10pt"></TextView>

    <EditText
        android:id="@+id/priceText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:hint="Örnek: 3.45"
        android:inputType="numberDecimal" />

    <TextView
        android:id="@+id/totalPriceTextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:text="Toplam fiyat: $$$"
        android:textSize="10pt"></TextView>

    <TextView
        android:id="@+id/paymentTypeTextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:text="Ödeme Şekli"
        android:textColor="@android:color/black"
        android:textSize="10pt"
        android:textStyle="bold"></TextView>

    <RadioGroup
        android:id="@+id/paymentTypeRadioGroup"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/textView1"
        android:layout_marginTop="@dimen/activity_horizontal_margin"
        android:orientation="horizontal">

        <RadioButton
            android:id="@+id/radioButton1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Peşin   "></RadioButton>

        <RadioButton
            android:id="@+id/radioButton2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/radioButton1"
            android:text="Kredi kartı   "></RadioButton>

        <RadioButton
            android:id="@+id/radioButton3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/radioButton2"
            android:text="Çek/Senet   "></RadioButton>
    </RadioGroup>

    <TextView
        android:id="@+id/authorizedTextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="@dimen/activity_vertical_margin"
        android:text="İrtibat yetkilisi"
        android:textSize="10pt"></TextView>

    <EditText
        android:id="@+id/authorizedText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:hint="Örnek: Ali Kayataş"
        android:inputType="textPersonName" />

    <TextView
        android:id="@+id/authorizedPhoneTextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="@dimen/activity_vertical_margin"
        android:text="Yetkili telefon no"
        android:textSize="10pt"></TextView>

    <EditText
        android:id="@+id/authorizedPhoneText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:hint="Örnek: 554 123 45 67"
        android:inputType="number" />

    <TextView
        android:id="@+id/facilityTextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="@dimen/activity_vertical_margin"
        android:text="Tesis"
        android:textSize="10pt"></TextView>

    <Spinner
        android:id="@+id/facilitiesSpinner"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"></Spinner>

    <TextView
        android:id="@+id/explanationTextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="@dimen/activity_vertical_margin"
        android:text="Açıklama"
        android:textSize="10pt"></TextView>

    <EditText
        android:id="@+id/explanationText"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:ems="10"
        android:gravity="left|top"
        android:inputType="textMultiLine"></EditText>

    <Button
        android:id="@+id/confirmNewOrderButton"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="32dp"
        android:layout_marginRight="32dp"
        android:layout_marginBottom="16dp"
        android:layout_marginTop="@dimen/activity_horizontal_margin"
        android:background="@color/colorPrimary"
        android:text="Kaydet" />

</LinearLayout>

</ScrollView>

EditTexts should be at the same horizontal line with TextViews.

The IDE tag is **not relevant**. – Phantômaxx Jul 20 '17 at 10:51 — Phantômaxx, Jul 20 '17 at 10:51

score 3 · Answer 1 · answered Jul 20 '17 at 11:17

Just copy this code and check this is you want

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/newOrderScrollView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbars="vertical">

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_margin="@dimen/activity_horizontal_margin"
    android:layout_marginBottom="@dimen/activity_horizontal_margin"
    android:focusable="true"
    android:focusableInTouchMode="true"
    android:orientation="vertical"
    android:paddingBottom="16dp"
    android:baselineAligned="false">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal">
    <TextView
        android:id="@+id/newOrderHeadlineTextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:text="Yeni Sipariş"
        android:textColor="@android:color/black"
        android:textSize="10pt"
        android:textStyle="bold"></TextView>

    <TextView
        android:id="@+id/materialCodeTextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="@dimen/activity_vertical_margin"
        android:text="Malzeme kodu"
        android:textSize="10pt"></TextView>

    <Spinner
        android:id="@+id/materialsSpinner"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="@dimen/activity_vertical_margin"
        ></Spinner>
        </LinearLayout>
    <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal">

    <TextView
        android:id="@+id/amountTextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="@dimen/activity_horizontal_margin"
        android:text="Miktar"
        android:textSize="10pt"></TextView>

    <EditText
        android:id="@+id/amountText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:hint="Örnek: 1000"
        android:inputType="numberDecimal"
        android:layout_marginTop="@dimen/activity_horizontal_margin"/>
    </LinearLayout>
    <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal">

    <TextView
        android:id="@+id/dateTextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="@dimen/activity_vertical_margin"
        android:text="Teslim tarihi"
        android:textSize="10pt"></TextView>

    <EditText
        android:id="@+id/dateText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:hint="Örnek: 10/01/2017"
        android:layout_marginTop="@dimen/activity_vertical_margin"
        android:inputType="date" />
    </LinearLayout>
<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal">

<TextView
        android:id="@+id/cityTextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:text="İl"
        android:textSize="10pt"></TextView>

    <Spinner
        android:id="@+id/citiesSpinner"
        android:layout_width="wrap_content"
        android:layout_marginTop="@dimen/activity_vertical_margin"
        android:layout_height="wrap_content"></Spinner></LinearLayout>

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

<TextView
        android:id="@+id/provinceTextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="@dimen/activity_vertical_margin"

        android:text="İlçe"
        android:textSize="10pt"></TextView>

    <Spinner
        android:id="@+id/provincesSpinner"
        android:layout_width="wrap_content"
        android:layout_marginTop="@dimen/activity_vertical_margin"
        android:layout_height="wrap_content"></Spinner></LinearLayout>
<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal">

    <TextView
        android:id="@+id/priceTextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:text="Pompa fiyatı"
        android:textSize="10pt"></TextView>

    <EditText
        android:id="@+id/priceText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="@dimen/activity_vertical_margin"
        android:hint="Örnek: 3.45"
        android:inputType="numberDecimal" /></LinearLayout>


<TextView
        android:id="@+id/totalPriceTextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:text="Toplam fiyat: $$$"
        android:textSize="10pt"></TextView>


<TextView
        android:id="@+id/paymentTypeTextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:text="Ödeme Şekli"
        android:textColor="@android:color/black"
        android:textSize="10pt"
        android:textStyle="bold"></TextView>

    <RadioGroup
        android:id="@+id/paymentTypeRadioGroup"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/textView1"
        android:layout_marginTop="@dimen/activity_horizontal_margin"
        android:orientation="horizontal">

        <RadioButton
            android:id="@+id/radioButton1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Peşin   "></RadioButton>

        <RadioButton
            android:id="@+id/radioButton2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/radioButton1"
            android:text="Kredi kartı   "></RadioButton>

        <RadioButton
            android:id="@+id/radioButton3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/radioButton2"
            android:text="Çek/Senet   "></RadioButton>
    </RadioGroup>
<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal">

<TextView
        android:id="@+id/authorizedTextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="@dimen/activity_vertical_margin"
        android:text="İrtibat yetkilisi"
        android:textSize="10pt"></TextView>

    <EditText
        android:id="@+id/authorizedText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="@dimen/activity_vertical_margin"
        android:hint="Örnek: Ali Kayataş"
        android:inputType="textPersonName" /></LinearLayout>

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

<TextView
        android:id="@+id/authorizedPhoneTextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="@dimen/activity_vertical_margin"
        android:text="Yetkili telefon no"
        android:textSize="10pt"></TextView>

    <EditText
        android:id="@+id/authorizedPhoneText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="@dimen/activity_vertical_margin"
        android:hint="Örnek: 554 123 45 67"
        android:inputType="number" /></LinearLayout>
<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal">
<TextView
        android:id="@+id/facilityTextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="@dimen/activity_vertical_margin"
        android:text="Tesis"
        android:textSize="10pt"></TextView>

    <Spinner
        android:id="@+id/facilitiesSpinner"
        android:layout_width="wrap_content"
        android:layout_marginTop="@dimen/activity_vertical_margin"
        android:layout_height="wrap_content"></Spinner></LinearLayout>

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

<TextView
        android:id="@+id/explanationTextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="@dimen/activity_vertical_margin"
        android:text="Açıklama"
        android:textSize="10pt"></TextView>

    <EditText
        android:id="@+id/explanationText"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:ems="10"
        android:gravity="left|top"
        android:layout_marginTop="@dimen/activity_vertical_margin"
        android:inputType="textMultiLine"></EditText></LinearLayout>

    <Button
        android:id="@+id/confirmNewOrderButton"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="32dp"
        android:layout_marginRight="32dp"
        android:layout_marginBottom="16dp"
        android:layout_marginTop="@dimen/activity_horizontal_margin"
        android:background="@color/colorPrimary"
        android:text="Kaydet" />

</LinearLayout>

</ScrollView>

score 1 · Accepted Answer · answered Jul 20 '17 at 10:57

I hope this what you intended

<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/newOrderScrollView"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical>

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

                <TextView
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1"/>

                <EditText
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1"/>

            </LinearLayout>

        </LinearLayout>
   </ScrollView>

The inner LinearLayout ensures that it's childLayouts appear 1 after the other horizontally

score 1 · Answer 3 · answered Jul 20 '17 at 11:14

You say "Baseline Constraint" which refers to a feature of ConstraintLayout but you are using a LinearLayout.

If you want to use baseline constraints, then you should convert your LinearLayout to a ConstraintLayout. You can then constrain the base lines with app:layout_constraintBaseline_toBaselineOf in your XML.

Baseline Constraint in Linear, scrollable layouts

3 Answers3