1

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

Jesse R
  • 194
  • 3
  • 14
  • Check [this](https://stackoverflow.com/questions/40850966/wrap-content-view-inside-a-constraintlayout-stretches-outside-the-screen). It's `ConstraintLayout` that is causing the issue. – Xid Sep 02 '20 at 18:38
  • @SiddharthSharma I changed it to both a relative layout and linear layout instead of constraint layout and the bug is still occurring – Jesse R Sep 02 '20 at 19:12
  • Kindly add your code for the two screens. I'll have a go at it. – Xid Sep 02 '20 at 19:20
  • Updated with the xml – Jesse R Sep 02 '20 at 19:25
  • I tried your code. It seems to work fine. If anything if the layout is too large it goes below the screen not above. I can't seem to understand how your buttons stay in the same place in both layouts in your screenshots – Xid Sep 02 '20 at 19:55
  • [Image Link](https://ibb.co/7KC0fR3) – Xid Sep 02 '20 at 20:01
  • And you didn't change anything? That's really strange... on mine it cuts off the title as seen in that screenshot. I can try it on a different phone i guess then. – Jesse R Sep 02 '20 at 20:10
  • No, I just changed the color and texts and image – Xid Sep 02 '20 at 20:11
  • How are you switching the two views in the java code? Are you just calling viewFlipper.showNext()? I just ran it on a different phone and it's the same thing with it being cut off this is driving me crazy – Jesse R Sep 02 '20 at 20:14
  • Yes, I just call viewFlipper.showNext() – Xid Sep 02 '20 at 20:17
  • Thanks for the screenshots. Made me realize the issue since right now I'm fitting my app to go over the status bar so i had to make sure i made the layout fit the system window. – Jesse R Sep 02 '20 at 20:57

1 Answers1

2

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

android:fitsSystemWindows="true"
Jesse R
  • 194
  • 3
  • 14