fragment_newsletter.xml

<?xml version="1.0" encoding="utf-8"?>
<layout 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">

    <data>

        <variable
            name="previousIssuesSpan"
            type="android.text.SpannableString" />

        <variable
            name="viewModel"
            type="com.droidfeed.ui.module.newsletter.NewsletterViewModel" />
    </data>

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:animateLayoutChanges="true"
        android:background="@color/blue">

        <TextView
            android:id="@+id/textView2"
            style="@style/DF.TitleStyle"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginStart="@dimen/spacing_xlarge"
            android:layout_marginTop="@dimen/spacing_medium"
            android:layout_marginEnd="@dimen/spacing_xlarge"
            android:text="@string/newsletter_headline"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <TextView
            android:id="@+id/textView5"
            style="@style/DF.BodyStyle"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginTop="@dimen/spacing_medium"
            android:drawableStart="@drawable/ic_email_white_24dp"
            android:drawablePadding="@dimen/spacing_large"
            android:gravity="center_vertical"
            android:text="@string/newsletter_desc1"
            app:layout_constraintEnd_toEndOf="@+id/textView2"
            app:layout_constraintStart_toStartOf="@+id/textView2"
            app:layout_constraintTop_toBottomOf="@+id/textView2" />

        <TextView
            android:id="@+id/textView6"
            style="@style/DF.BodyStyle"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginTop="@dimen/spacing_small"
            android:drawableStart="@drawable/ic_newspaper_white_24dp"
            android:drawablePadding="@dimen/spacing_large"
            android:text="@string/newsletter_desc2"
            app:layout_constraintEnd_toEndOf="@+id/textView2"
            app:layout_constraintStart_toStartOf="@+id/textView2"
            app:layout_constraintTop_toBottomOf="@+id/textView5" />

        <TextView
            android:id="@+id/txtPreviousIssues"
            style="@style/DF.BodyStyle"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginTop="@dimen/spacing_small"
            android:drawableStart="@drawable/ic_email_open_white_24dp"
            android:drawablePadding="@dimen/spacing_large"
            android:text="@{previousIssuesSpan}"
            app:layout_constraintEnd_toEndOf="@+id/textView2"
            app:layout_constraintStart_toStartOf="@+id/textView2"
            app:layout_constraintTop_toBottomOf="@+id/textView6" />

        <com.google.android.material.textfield.TextInputLayout
            android:id="@+id/textInputLayout"
            style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginStart="@dimen/spacing_xlarge"
            android:layout_marginTop="@dimen/spacing_medium"
            android:layout_marginEnd="@dimen/spacing_xlarge"
            android:animateLayoutChanges="true"
            app:errorText="@{viewModel.errorText}"
            app:isVisible="@{viewModel.isEmailInputVisible}"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/txtPreviousIssues">

            <ProgressBar
                android:id="@+id/progressBar"
                style="?android:attr/progressBarStyleHorizontal"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:indeterminate="true"
                app:isVisible="@{viewModel.isProgressVisible}"
                tools:visibility="visible" />

            <com.google.android.material.textfield.TextInputEditText
                android:id="@+id/edtEmail"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="@string/your_email"
                android:inputType="textEmailAddress"
                android:maxLines="1"
                android:textColor="@android:color/white" />

        </com.google.android.material.textfield.TextInputLayout>

        <com.google.android.material.button.MaterialButton
            android:id="@+id/btnSignUp"
            style="@style/DF.Button.Flat"
            android:layout_width="180dp"
            android:layout_height="wrap_content"
            android:layout_marginTop="@dimen/spacing_small"
            android:layout_marginEnd="@dimen/spacing_xlarge"
            android:backgroundTint="@color/colorAccent"
            android:onClick="@{(v)->viewModel.signUp(edtEmail.getText().toString())}"
            android:text="@string/sign_me_up"
            app:isVisible="@{viewModel.isSignButtonVisible}"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/textInputLayout" />

        <TextView
            android:id="@+id/txtSubscriptionConfirmation"
            style="@style/DF.BodyStyle"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="@dimen/spacing_medium"
            android:gravity="center"
            android:paddingStart="@dimen/spacing_xlarge"
            android:paddingEnd="@dimen/spacing_xlarge"
            android:text="@string/info_subs_confirmed"
            android:textColor="@color/greenBright"
            app:isVisible="@{viewModel.isSubsConfirmationVisible}"
            app:layout_constraintTop_toBottomOf="@+id/txtPreviousIssues"
            tools:visibility="visible" />

        <com.airbnb.lottie.LottieAnimationView
            android:id="@+id/animView"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginTop="@dimen/spacing_xxlarge"
            android:layout_marginBottom="@dimen/spacing_medium"
            android:clickable="true"
            android:focusable="true"
            android:minHeight="150dp"
            android:scaleType="centerInside"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/textInputLayout"
            app:lottie_rawRes="@raw/letter_anim"
            tools:src="@drawable/ic_cat" />

    </androidx.constraintlayout.widget.ConstraintLayout>

</layout>