Reputation: 342
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>
Upvotes: 1
Views: 212
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