Jesse R
Jesse R

Reputation: 342

Android ViewFlipper pushes second layout up

Really frustrating bug that I'm getting. I'm trying to have a login page where I can swap between signing in and signing up. View flipper looked perfect. But for some reason, when I switch from the first layout to the second in the viewflipper, the second layout is "pushed" up. See pictures below (the screen with the red info placeholder icon is the first screen). The "Title" textview is supposed to be in the same position on the second screen as it is on the first. The only way I can make it visible is to give it something like 60dp margin top. Which is what leads me to say that the second layout is "pushed" up.

Below is the xml code for my view flipper. I suppose I can post the xml for the two screens if requested, but it doesn't seem to be an issue with the layouts themselves. I say this because when I swap the order then the screen that previously was pushed up is fine and then the previously good screen is pushed up. So it seems clear it is something wrong with the view flipper. Both the layouts in the viewflipper are relative layouts that are set to match_parent.

<androidx.constraintlayout.widget.ConstraintLayout 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/relativeLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/login_gradient"
        android:orientation="vertical">

    <ViewFlipper
            android:id="@+id/view_flipper"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:measureAllChildren="false"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent">

        <include
                android:id="@+id/sign_in_layout"
                layout="@layout/sign_in_layout"
                android:layout_width="match_parent"
                android:layout_height="match_parent" />

        <include
                android:id="@+id/sign_up_layout"
                layout="@layout/sign_up_layout"
                android:layout_width="match_parent"
                android:layout_height="match_parent" />
    </ViewFlipper>
</androidx.constraintlayout.widget.ConstraintLayout>

First page xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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/sign_in_relative_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:animateLayoutChanges="true"
        android:background="@drawable/login_gradient"
        android:clickable="true"
        android:fitsSystemWindows="true"
        android:focusable="true"
        android:focusableInTouchMode="true">

    <TextView
            android:id="@+id/sign_in_app_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:fontFamily="@font/roboto"
            android:text="Title"
            android:textColor="@color/notification_color"
            android:textSize="36sp"
            android:textStyle="bold" />

    <ImageView
            android:id="@+id/sign_in_app_logo"
            android:layout_width="185dp"
            android:layout_height="140dp"
            android:layout_below="@+id/sign_in_app_title"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="20dp"
            android:contentDescription="App Logo"
            app:srcCompat="@drawable/about_icon" />

    <com.google.android.material.textfield.TextInputLayout
            android:id="@+id/sign_in_username_input_layout"
            android:layout_width="300dp"
            android:layout_height="wrap_content"
            android:layout_below="@+id/sign_in_app_logo"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="20dp"
            android:backgroundTint="@android:color/white"
            android:hint="@string/username_and_email_hint"
            android:textColor="@color/notification_color"
            android:textColorHint="@android:color/white"
            app:hintTextAppearance="@style/LoginHintStyle">

        <com.google.android.material.textfield.TextInputEditText
                android:id="@+id/sign_in_username_input"
                android:layout_width="300dp"
                android:layout_height="wrap_content"
                android:layout_centerHorizontal="true"
                android:backgroundTint="@android:color/white"
                android:drawableStart="@drawable/user_icon_login"
                android:drawablePadding="5dp"
                android:inputType="textEmailAddress"
                android:textColor="@color/notification_color"
                android:textColorHint="@android:color/white"
                android:textCursorDrawable="@null"
                android:theme="@style/Login.EditText" />
    </com.google.android.material.textfield.TextInputLayout>


    <com.google.android.material.textfield.TextInputLayout
            android:id="@+id/sign_in_password_input_layout"
            android:layout_width="300dp"
            android:layout_height="wrap_content"
            android:layout_below="@+id/sign_in_username_input_layout"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="20dp"
            android:backgroundTint="@android:color/white"
            android:hint="@string/password_hint"
            android:textColor="@color/notification_color"
            android:textColorHint="@android:color/white"
            app:hintTextAppearance="@style/LoginHintStyle"
            app:passwordToggleEnabled="true"
            app:passwordToggleTint="@android:color/white">

        <com.google.android.material.textfield.TextInputEditText
                android:id="@+id/sign_in_password_input"
                android:layout_width="300dp"
                android:layout_height="wrap_content"
                android:layout_centerHorizontal="true"
                android:backgroundTint="@android:color/white"
                android:drawableStart="@drawable/password_icon"
                android:drawablePadding="5dp"
                android:inputType="textPassword"
                android:longClickable="false"
                android:textColor="@color/notification_color"
                android:textColorHint="@android:color/white"
                android:textCursorDrawable="@null"
                android:theme="@style/Login.EditText" />
    </com.google.android.material.textfield.TextInputLayout>


    <Button
            android:id="@+id/sign_in_primary_btn"
            android:layout_width="300dp"
            android:layout_height="wrap_content"
            android:layout_below="@id/sign_in_password_input_layout"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="20dp"
            android:background="#50000000"
            android:foreground="?android:selectableItemBackground"
            android:text="@string/sign_in" />

    <View
            android:id="@+id/divider"
            android:layout_width="300dp"
            android:layout_height="2dp"
            android:layout_below="@id/sign_in_primary_btn"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="20dp"
            android:background="#c0c0c0" />

    <Button
            android:id="@+id/sign_in_change_mode_btn"
            android:layout_width="300dp"
            android:layout_height="wrap_content"
            android:layout_below="@id/divider"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="20dp"
            android:background="#50000000"
            android:foreground="?android:selectableItemBackground"
            android:text="@string/sign_up" />

</RelativeLayout>

Second page xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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/sign_up_relative_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:animateLayoutChanges="true"
        android:background="@drawable/login_gradient"
        android:clickable="true"
        android:fitsSystemWindows="true"
        android:focusable="true"
        android:focusableInTouchMode="true">

    <TextView
            android:id="@+id/sign_up_app_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:fontFamily="@font/roboto"
            android:text="title"
            android:textColor="@color/notification_color"
            android:textSize="36sp"
            android:textStyle="bold" />

    <com.google.android.material.textfield.TextInputLayout
            android:id="@+id/sign_up_email_input_layout"
            android:layout_width="300dp"
            android:layout_height="wrap_content"
            android:layout_below="@+id/sign_up_app_title"
            android:layout_centerHorizontal="true"
            android:backgroundTint="@android:color/white"
            android:hint="@string/email_hint"
            android:textColor="@color/notification_color"
            android:textColorHint="@android:color/white"
            app:hintTextAppearance="@style/LoginHintStyle">

        <com.google.android.material.textfield.TextInputEditText
                android:id="@+id/sign_up_email_input"
                android:layout_width="300dp"
                android:layout_height="wrap_content"
                android:layout_centerHorizontal="true"
                android:backgroundTint="@android:color/white"
                android:drawableStart="@drawable/email_icon"
                android:drawablePadding="5dp"
                android:inputType="textEmailAddress"
                android:textColor="@color/notification_color"
                android:textColorHint="@android:color/white"
                android:textCursorDrawable="@null"
                android:theme="@style/Login.EditText" />

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

    <com.google.android.material.textfield.TextInputLayout
            android:id="@+id/sign_up_username_input_layout"
            android:layout_width="300dp"
            android:layout_height="wrap_content"
            android:layout_below="@+id/sign_up_email_input_layout"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="20dp"
            android:backgroundTint="@android:color/white"
            android:hint="@string/username_hint"
            android:textColor="@color/notification_color"
            android:textColorHint="@android:color/white"
            app:hintTextAppearance="@style/LoginHintStyle">

        <com.google.android.material.textfield.TextInputEditText
                android:id="@+id/sign_up_username_input"
                android:layout_width="300dp"
                android:layout_height="wrap_content"
                android:layout_centerHorizontal="true"
                android:backgroundTint="@android:color/white"
                android:drawableStart="@drawable/user_icon_login"
                android:drawablePadding="5dp"
                android:inputType="textEmailAddress"
                android:textColor="@color/notification_color"
                android:textColorHint="@android:color/white"
                android:textCursorDrawable="@null"
                android:theme="@style/Login.EditText" />
    </com.google.android.material.textfield.TextInputLayout>


    <com.google.android.material.textfield.TextInputLayout
            android:id="@+id/sign_up_password_input_layout"
            android:layout_width="300dp"
            android:layout_height="wrap_content"
            android:layout_below="@+id/sign_up_username_input_layout"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="20dp"
            android:backgroundTint="@android:color/white"
            android:hint="@string/password_hint"
            android:textColor="@color/notification_color"
            android:textColorHint="@android:color/white"
            app:hintTextAppearance="@style/LoginHintStyle"
            app:passwordToggleEnabled="true"
            app:passwordToggleTint="@android:color/white">

        <com.google.android.material.textfield.TextInputEditText
                android:id="@+id/sign_up_password_input"
                android:layout_width="300dp"
                android:layout_height="wrap_content"
                android:layout_centerHorizontal="true"
                android:backgroundTint="@android:color/white"
                android:drawableStart="@drawable/password_icon"
                android:drawablePadding="5dp"
                android:inputType="textPassword"
                android:longClickable="false"
                android:textColor="@color/notification_color"
                android:textColorHint="@android:color/white"
                android:textCursorDrawable="@null"
                android:theme="@style/Login.EditText" />
    </com.google.android.material.textfield.TextInputLayout>

    <LinearLayout
            android:id="@+id/sign_up_password_attributes_layout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@+id/sign_up_password_input_layout"
            android:layout_alignStart="@+id/sign_up_password_input_layout"
            android:layout_alignEnd="@+id/sign_up_password_input_layout"
            android:orientation="vertical">

        <TextView
                android:id="@+id/sign_up_password_length_tv"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:fontFamily="@font/roboto"
                android:text="@string/password_length_msg"
                android:textColor="@color/password_constraint_successful_match"
                android:textStyle="bold" />

        <TextView
                android:id="@+id/sign_up_password_lowercase_tv"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:fontFamily="@font/roboto"
                android:text="@string/password_lowercase_msg"
                android:textColor="@color/password_constraint_unsuccessful_match"
                android:textStyle="bold" />

        <TextView
                android:id="@+id/sign_up_password_uppercase_tv"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:fontFamily="@font/roboto"
                android:text="@string/password_uppercase_msg"
                android:textStyle="bold" />

        <TextView
                android:id="@+id/sign_up_password_numbers_tv"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:fontFamily="@font/roboto"
                android:text="@string/password_numbers_msg"
                android:textStyle="bold" />

        <TextView
                android:id="@+id/sign_up_password_special_chars_tv"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:fontFamily="@font/roboto"
                android:text="@string/password_special_chars_msg"
                android:textStyle="bold" />
    </LinearLayout>

    <com.google.android.material.textfield.TextInputLayout
            android:id="@+id/sign_up_password_confirm_layout"
            android:layout_width="300dp"
            android:layout_height="wrap_content"
            android:layout_below="@+id/sign_up_password_attributes_layout"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="20dp"
            android:backgroundTint="@android:color/white"
            android:hint="@string/password_confirm_hint"
            android:textColor="@color/notification_color"
            android:textColorHint="@android:color/white"
            app:hintTextAppearance="@style/LoginHintStyle"
            app:passwordToggleEnabled="true"
            app:passwordToggleTint="@android:color/white">

        <com.google.android.material.textfield.TextInputEditText
                android:id="@+id/sign_up_password_input_confirm"
                android:layout_width="300dp"
                android:layout_height="wrap_content"
                android:layout_centerHorizontal="true"
                android:backgroundTint="@android:color/white"
                android:drawableStart="@drawable/password_icon"
                android:drawablePadding="5dp"
                android:inputType="textPassword"
                android:longClickable="false"
                android:textColor="@color/notification_color"
                android:textColorHint="@android:color/white"
                android:textCursorDrawable="@null"
                android:theme="@style/Login.EditText"
                android:visibility="visible" />
    </com.google.android.material.textfield.TextInputLayout>

    <Button
            android:id="@+id/sign_up_primary_btn"
            android:layout_width="300dp"
            android:layout_height="wrap_content"
            android:layout_below="@id/sign_up_password_confirm_layout"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="20dp"
            android:background="#50000000"
            android:foreground="?android:selectableItemBackground"
            android:text="@string/sign_up" />

    <View
            android:id="@+id/divider"
            android:layout_width="300dp"
            android:layout_height="2dp"
            android:layout_below="@id/sign_up_primary_btn"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="20dp"
            android:background="#c0c0c0" />

    <Button
            android:id="@+id/sign_up_change_mode_btn"
            android:layout_width="300dp"
            android:layout_height="wrap_content"
            android:layout_below="@id/divider"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="20dp"
            android:background="#50000000"
            android:foreground="?android:selectableItemBackground"
            android:text="@string/sign_in" />

</RelativeLayout>

First screen

Second screen

Upvotes: 1

Views: 212

Answers (1)

Jesse R
Jesse R

Reputation: 342

In classic software engineering fashion, the issue was resolved by adding one line to the layout that houses my viewflipper.

android:fitsSystemWindows="true"

Upvotes: 2

Related Questions