redesign intro and login

Habitica/res/drawable/ic_arrow_back_white_36dp.xml

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<vector xmlns:android="http://schemas.android.com/apk/res/android" android:height="36dp" android:viewportHeight="24.0" android:viewportWidth="24.0" android:width="36dp">
+    <path android:fillColor="#FFFFFF" android:pathData="M20,11H7.83l5.59,-5.59L12,4l-8,8 8,8 1.41,-1.41L7.83,13H20v-2z"/>
+</vector>

Habitica/res/drawable/login_gradient.xml

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
+
+    <gradient
+            android:angle="90"
+            android:endColor="#3E148A"
+            android:startColor="#8962cc"
+            android:type="linear" />
+
+</shape>

Habitica/res/layout/activity_login.xml

@@ -1,121 +1,231 @@
-<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
-            xmlns:app="http://schemas.android.com/apk/res-auto"
+<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
+             xmlns:app="http://schemas.android.com/apk/res-auto"
+             android:layout_width="match_parent"
+             android:layout_height="match_parent"
+             xmlns:tools="http://schemas.android.com/tools">
+
+    <com.habitrpg.android.habitica.ui.views.login.LockableScrollView
             android:layout_width="match_parent"
-            android:layout_height="match_parent">
+            android:layout_height="match_parent"
+            android:id="@+id/background_container"
+            >
+
+        <com.habitrpg.android.habitica.ui.views.login.LoginBackgroundView
+                android:id="@+id/background_view"
+                android:layout_width="match_parent"
+                android:layout_height="match_parent"
+                android:background="@drawable/login_gradient"
+                android:clipChildren="false"
+                android:clipToPadding="false"
+                >
+            <ImageView
+                    android:id="@+id/city_view"
+                    android:layout_width="wrap_content"
+                    android:layout_height="wrap_content"
+                    android:layout_alignParentBottom="true"
+                    app:srcCompat="@drawable/login_background"
+                    android:layout_centerHorizontal="true"
+                    android:scaleType="centerCrop" />
+            <Space android:id="@+id/cloud_anchor"
+                   android:layout_width="0dp"
+                   android:layout_height="0dp"
+                   android:layout_centerHorizontal="true"
+                   android:visibility="invisible"
+                   android:layout_below="@id/city_view" />
+            <ImageView
+                    android:layout_width="wrap_content"
+                    android:layout_height="wrap_content"
+                    app:srcCompat="@drawable/cloud_1"
+                    android:id="@+id/left_cloud_view"
+                    android:layout_toLeftOf="@id/cloud_anchor"
+                    android:layout_marginRight="150dp"
+                    android:layout_below="@id/cloud_anchor"
+                    android:layout_alignParentLeft="false"
+                    android:scaleType="centerCrop"
+                    android:layout_marginTop="150dp"
+                    />
+            <ImageView
+                    android:layout_width="wrap_content"
+                    android:layout_height="wrap_content"
+                    app:srcCompat="@drawable/cloud_2"
+                    android:id="@+id/right_cloud_view"
+                    android:layout_toRightOf="@id/cloud_anchor"
+                    android:layout_marginLeft="170dp"
+                    android:layout_below="@id/cloud_anchor"
+                    android:layout_alignParentLeft="false"
+                    android:scaleType="centerCrop"
+                    android:layout_marginTop="240dp"
+                    />
+
+
+        </com.habitrpg.android.habitica.ui.views.login.LoginBackgroundView>
+
+    </com.habitrpg.android.habitica.ui.views.login.LockableScrollView>
+
 
     <LinearLayout
             android:layout_width="match_parent"
-            android:layout_height="wrap_content"
+            android:layout_height="match_parent"
             android:padding="@dimen/spacing_large"
-            android:id="@+id/login.linear.layout"
-            android:orientation="vertical">
+            android:id="@+id/login_intro_view"
+            android:orientation="vertical"
+            android:background="@color/transparent"
+            >
 
         <ImageView
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
-                android:id="@+id/imageView"
                 android:layout_gravity="center_horizontal"
-                android:src="@drawable/ic_gryphon"/>
-
-        <ImageView
-                android:layout_width="wrap_content"
-                android:layout_height="wrap_content"
-                android:id="@+id/imageView2"
-                android:src="@drawable/ic_habitica"
-                android:layout_gravity="center"/>
-
-        <EditText
-                android:id="@+id/username"
-                android:layout_width="match_parent"
-                android:layout_height="wrap_content"
-                android:drawableLeft="@drawable/ic_username"
-                android:drawableStart="@drawable/ic_username"
-                android:drawablePadding="@dimen/spacing_large"
-                android:imeOptions="actionNext"
-                android:inputType="textPersonName"
-                android:nextFocusDown="@+id/email"
-                android:hint="@string/username"/>
-
-        <EditText
-                android:id="@+id/email"
-                android:layout_width="match_parent"
-                android:layout_height="wrap_content"
-                android:inputType="textEmailAddress"
-                android:imeOptions="actionNext"
-                android:drawableLeft="@drawable/ic_email"
-                android:nextFocusDown="@+id/password"
-                android:drawableStart="@drawable/ic_email"
-                android:drawablePadding="@dimen/spacing_large"
-                android:hint="@string/emailAddress"/>
-
-        <EditText
-                android:id="@+id/password"
-                android:layout_width="match_parent"
-                android:layout_height="wrap_content"
-                android:inputType="textPassword"
-                android:imeOptions="actionNext"
-                android:nextFocusDown="@+id/confirm_password"
-                android:drawableLeft="@drawable/ic_email"
-                android:drawableStart="@drawable/ic_email"
-                android:drawablePadding="@dimen/spacing_large"
-                android:hint="@string/password"/>
-
-        <EditText
-                android:id="@+id/confirm_password"
-                android:layout_width="match_parent"
-                android:layout_height="wrap_content"
-                android:inputType="textPassword"
-                android:drawableLeft="@drawable/ic_email"
-                android:drawableStart="@drawable/ic_email"
-                android:drawablePadding="@dimen/spacing_large"
-                android:imeOptions="actionDone"
-                android:hint="@string/confirmpassword"/>
-
-        <ProgressBar
-                android:id="@+id/PB_AsyncTask"
-                android:indeterminate="true"
-                android:visibility="gone"
-                android:layout_width="wrap_content"
-                android:layout_height="wrap_content"
-                android:layout_gravity="center"/>
+                android:src="@drawable/login_logo"
+                android:layout_margin="24dp"/>
 
         <Button
-                android:id="@+id/login_btn"
-                android:layout_width="match_parent"
-                android:layout_height="wrap_content"
-                android:text="@string/register_btn"
-                android:layout_gravity="center_horizontal"
+                android:id="@+id/new_game_button"
+                android:layout_width="@dimen/login_intro_button_size"
+                android:layout_height="@dimen/login_intro_button_size"
+                android:text="@string/new_game"
+                android:layout_gravity="center_vertical|center_horizontal"
                 android:textColor="@color/white"
                 android:layout_marginTop="@dimen/spacing_large"
-                android:background="@drawable/rounded_purple_square"/>
+                android:background="@drawable/login_begin_button"/>
 
-        <com.google.android.gms.common.SignInButton
-                android:id="@+id/google_login_button"
-                android:layout_width="wrap_content"
-                android:layout_marginTop="@dimen/spacing_medium"
-                app:buttonSize="wide"
-                android:layout_height="wrap_content"
-                android:layout_gravity="center_horizontal"/>
-
-        <com.facebook.login.widget.LoginButton
-                android:id="@+id/login_button"
-                android:layout_width="wrap_content"
-                android:paddingTop="14dp"
-                android:paddingBottom="14dp"
-                android:layout_marginTop="@dimen/spacing_medium"
-                android:layout_height="wrap_content"
-                android:layout_gravity="center_horizontal"/>
-
-        <TextView
-                android:id="@+id/forgot_pw_tv"
-                android:layout_width="match_parent"
+        <Button
+                android:id="@+id/show_login_button"
+                android:layout_width="@dimen/login_intro_button_size"
+                android:layout_height="@dimen/login_intro_button_size"
+                android:text="@string/login_btn"
+                android:layout_gravity="center_vertical|center_horizontal"
+                android:textColor="@color/white"
                 android:layout_marginTop="@dimen/spacing_large"
-                android:gravity="center_horizontal"
-                android:layout_height="wrap_content"
-                android:text="@string/forgot_pw_tv"
-                android:layout_gravity="center_horizontal"
-                android:textColor="@color/best_10"/>
+                android:background="@drawable/login_begin_button"/>
+
+        <ScrollView
+                android:layout_width="match_parent"
+                android:layout_height="match_parent"
+                android:background="@color/transparent"
+                android:visibility="invisible"
+                android:id="@+id/login_scrollview"
+                android:scrollIndicators="none"
+                tools:visibility="visible"
+                >
+
+            <LinearLayout
+                    android:layout_width="match_parent"
+                    android:layout_height="wrap_content"
+                    android:padding="@dimen/spacing_large"
+                    android:id="@+id/login.linear.layout"
+                    android:orientation="vertical"
+                    android:background="@color/transparent">
+
+                <EditText
+                        android:id="@+id/username"
+                        android:layout_width="match_parent"
+                        android:layout_height="wrap_content"
+                        android:drawableEnd="@drawable/ic_username"
+                        android:drawableRight="@drawable/ic_username"
+                        android:imeOptions="actionNext"
+                        android:inputType="textPersonName"
+                        android:nextFocusDown="@+id/email"
+                        android:hint="@string/username"
+                        android:theme="@style/LoginEditTextTheme"
+                        android:textColor="@color/white_75_alpha"
+                        android:textColorHighlight="@color/white"/>
+
+                <EditText
+                        android:id="@+id/email"
+                        android:layout_width="match_parent"
+                        android:layout_height="wrap_content"
+                        android:inputType="textEmailAddress"
+                        android:imeOptions="actionNext"
+                        android:drawableRight="@drawable/ic_email"
+                        android:nextFocusDown="@+id/password"
+                        android:drawableEnd="@drawable/ic_email"
+                        android:hint="@string/emailAddress"
+                        android:textColor="@color/white_75_alpha"
+                        android:theme="@style/LoginEditTextTheme"/>
+
+                <EditText
+                        android:id="@+id/password"
+                        android:layout_width="match_parent"
+                        android:layout_height="wrap_content"
+                        android:inputType="textPassword"
+                        android:imeOptions="actionNext"
+                        android:nextFocusDown="@+id/confirm_password"
+                        android:drawableRight="@drawable/ic_password"
+                        android:drawableEnd="@drawable/ic_password"
+                        android:hint="@string/password"
+                        android:textColor="@color/white_75_alpha"
+                        android:theme="@style/LoginEditTextTheme"/>
+
+                <EditText
+                        android:id="@+id/confirm_password"
+                        android:layout_width="match_parent"
+                        android:layout_height="wrap_content"
+                        android:inputType="textPassword"
+                        android:drawableRight="@drawable/ic_password"
+                        android:drawableEnd="@drawable/ic_password"
+                        android:imeOptions="actionDone"
+                        android:hint="@string/confirmpassword"
+                        android:textColor="@color/white_75_alpha"
+                        android:theme="@style/LoginEditTextTheme"/>
+
+                <ProgressBar
+                        android:id="@+id/PB_AsyncTask"
+                        android:indeterminate="true"
+                        android:visibility="gone"
+                        android:layout_width="wrap_content"
+                        android:layout_height="wrap_content"
+                        android:layout_gravity="center"/>
+
+                <Button
+                        android:id="@+id/login_btn"
+                        android:layout_width="match_parent"
+                        android:layout_height="42dp"
+                        android:text="@string/register_btn"
+                        android:layout_marginTop="@dimen/spacing_xlarge"
+                        style="@style/LoginButton"/>
+
+                <Button
+                        android:id="@+id/fb_login_button"
+                        android:layout_width="match_parent"
+                        android:layout_marginTop="@dimen/spacing_xlarge"
+                        android:layout_height="@dimen/diamond_button_height"
+                        android:text="@string/login_btn_fb"
+                        android:drawableLeft="@drawable/facebook_icon"
+                        style="@style/LoginButton"/>
+
+                <Button
+                    android:id="@+id/google_login_button"
+                    android:layout_width="match_parent"
+                    android:layout_marginTop="@dimen/spacing_large"
+                    android:layout_height="@dimen/diamond_button_height"
+                    android:text="@string/login_btn_google"
+                    android:drawableLeft="@drawable/google_icon"
+                    style="@style/LoginButton"/>
+
+                <TextView
+                        android:id="@+id/forgot_pw_tv"
+                        android:layout_width="match_parent"
+                        android:layout_marginTop="@dimen/spacing_xlarge"
+                        android:gravity="center_horizontal"
+                        android:layout_height="wrap_content"
+                        android:text="@string/forgot_pw_tv"
+                        android:layout_gravity="center_horizontal"
+                        android:textColor="@color/white_50_alpha"/>
+
+            </LinearLayout>
+
+        </ScrollView>
 
     </LinearLayout>
 
-</ScrollView>
+    <Button
+            android:id="@+id/back_button"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:drawableLeft="@drawable/ic_arrow_back_white_36dp"
+            android:background="@color/transparent"
+            android:paddingLeft="12dp"
+            android:alpha="0" />
+
+</FrameLayout>

Habitica/res/values-v23/styles.xml

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+
+    <style name="LoginEditTextTheme">
+        <item name="colorAccent">@color/white_50_alpha</item>
+        <item name="colorControlNormal">@color/white_15_alpha</item>
+        <item name="colorControlActivated">@color/white_75_alpha</item>
+        <item name="android:drawablePadding">@dimen/spacing_large</item>
+        <item name="android:textColor">@color/white_75_alpha</item>
+        <item name="android:textColorHint">@color/white_50_alpha</item>
+        <item name="android:drawableTint">@color/white_50_alpha</item>
+    </style>
+</resources>

Habitica/res/values/colors.xml

@@ -113,4 +113,7 @@
     <color name="gem_icon_color">#24cc8f</color>
     <color name="subscription_description_text">#b1000000</color>
     <color name="pill_gray">#efefef</color>
+    <color name="white_75_alpha">#bfffffff</color>
+    <color name="white_50_alpha">#7fffffff</color>
+    <color name="white_15_alpha">#26ffffff</color>
 </resources>

Habitica/res/values/dimens.xml

@@ -100,4 +100,6 @@
 
 	<dimen name="dialog_marginLeftRight">24dp</dimen>
 	<dimen name="dialog_marginTopBottom">24dp</dimen>
+    <dimen name="login_intro_button_size">126dp</dimen>
+	<dimen name="diamond_button_height">40dp</dimen>
 </resources>

Habitica/res/values/strings.xml

@@ -538,4 +538,7 @@ To start, which parts of your life do you want to improve?</string>
     <string name="none">None</string>
     <string name="owned">Owned</string>
     <string name="not_owned">Not owned</string>
+    <string name="new_game">New\nGame</string>
+    <string name="login_btn_fb">Login with Facebook</string>
+    <string name="login_btn_google">Login with Google</string>
 </resources>

Habitica/res/values/styles.xml

@@ -291,5 +291,19 @@
         <item name="android:paddingBottom">@dimen/button_padding_vertical_small</item>
     </style>
 
+    <style name="LoginEditTextTheme">
+        <item name="colorAccent">@color/white_50_alpha</item>
+        <item name="colorControlNormal">@color/white_15_alpha</item>
+        <item name="colorControlActivated">@color/white_75_alpha</item>
+        <item name="android:drawablePadding">@dimen/spacing_large</item>
+        <item name="android:textColor">@color/white_75_alpha</item>
+        <item name="android:textColorHint">@color/white_50_alpha</item>
+    </style>
 
+    <style name="LoginButton" parent="@style/Widget.AppCompat.Button.Borderless">
+        <item name="android:shadowColor">@color/transparent</item>
+        <item name="android:background">@drawable/login_button</item>
+        <item name="android:textColor">@color/white</item>
+        <item name="android:layout_gravity">center_horizontal</item>
+    </style>
 </resources>

Habitica/src/main/java/com/habitrpg/android/habitica/ui/activities/LoginActivity.java

@@ -12,6 +12,8 @@ import com.facebook.AccessToken;
 import com.facebook.CallbackManager;
 import com.facebook.FacebookCallback;
 import com.facebook.FacebookException;
+import com.facebook.FacebookSdk;
+import com.facebook.login.LoginManager;
 import com.facebook.login.LoginResult;
 import com.facebook.login.widget.LoginButton;
 import com.habitrpg.android.habitica.APIHelper;
@@ -22,6 +24,8 @@ import com.habitrpg.android.habitica.components.AppComponent;
 import com.habitrpg.android.habitica.helpers.AmplitudeManager;
 import com.habitrpg.android.habitica.prefs.scanner.IntentIntegrator;
 import com.habitrpg.android.habitica.prefs.scanner.IntentResult;
+import com.habitrpg.android.habitica.ui.views.login.LockableScrollView;
+import com.habitrpg.android.habitica.ui.views.login.LoginBackgroundView;
 import com.magicmicky.habitrpgwrapper.lib.models.HabitRPGUser;
 import com.magicmicky.habitrpgwrapper.lib.models.UserAuthResponse;
 
@@ -29,6 +33,11 @@ import org.json.JSONException;
 import org.json.JSONObject;
 
 import android.accounts.AccountManager;
+import android.animation.Animator;
+import android.animation.AnimatorListenerAdapter;
+import android.animation.AnimatorSet;
+import android.animation.ObjectAnimator;
+import android.animation.ValueAnimator;
 import android.app.Dialog;
 import android.content.ActivityNotFoundException;
 import android.content.Intent;
@@ -45,13 +54,19 @@ import android.util.Log;
 import android.view.Menu;
 import android.view.MenuItem;
 import android.view.View;
+import android.view.Window;
+import android.view.animation.AccelerateInterpolator;
 import android.view.inputmethod.EditorInfo;
 import android.widget.Button;
 import android.widget.EditText;
+import android.widget.LinearLayout;
 import android.widget.ProgressBar;
+import android.widget.ScrollView;
 import android.widget.TextView;
 
 import java.io.IOException;
+import java.util.Arrays;
+import java.util.Collections;
 import java.util.HashMap;
 import java.util.Map;
 
@@ -85,6 +100,23 @@ public class LoginActivity extends BaseActivity
     public String mTmpUserToken;
     public String mTmpApiToken;
     public Boolean isRegistering;
+    Boolean isShowingForm = false;
+
+    @BindView(R.id.background_container)
+    LockableScrollView backgroundContainer;
+    @BindView(R.id.background_view)
+    LoginBackgroundView backgroundView;
+    @BindView(R.id.new_game_button)
+    Button newGameButton;
+    @BindView(R.id.show_login_button)
+    Button showLoginButton;
+    @BindView(R.id.login_scrollview)
+    ScrollView scrollView;
+    @BindView(R.id.login_linear_layout)
+    LinearLayout formWrapper;
+    @BindView(R.id.back_button)
+    Button backButton;
+
     @BindView(R.id.login_btn)
     Button mLoginNormalBtn;
     @BindView(R.id.PB_AsyncTask)
@@ -97,8 +129,8 @@ public class LoginActivity extends BaseActivity
     EditText mEmail;
     @BindView(R.id.confirm_password)
     EditText mConfirmPassword;
-    @BindView(R.id.login_button)
-    LoginButton mFacebookLoginBtn;
+    @BindView(R.id.fb_login_button)
+    Button mFacebookLoginBtn;
     @BindView(R.id.forgot_pw_tv)
     TextView mForgotPWTV;
     private Menu menu;
@@ -156,20 +188,23 @@ public class LoginActivity extends BaseActivity
 
     @Override
     protected int getLayoutResId() {
+        getWindow().requestFeature(Window.FEATURE_ACTION_BAR);
         return R.layout.activity_login;
     }
 
     protected void onCreate(Bundle savedInstanceState) {
         super.onCreate(savedInstanceState);
-
+        if (getSupportActionBar() != null) {
+            getSupportActionBar().hide();
+        }
         //Set default values to avoid null-responses when requesting unedited settings
         PreferenceManager.setDefaultValues(this, R.xml.preferences_fragment, false);
 
         ButterKnife.bind(this);
 
-        mLoginNormalBtn.setOnClickListener(mLoginNormalClick);
+        setupFacebookLogin();
 
-        mFacebookLoginBtn.setReadPermissions("user_friends");
+        mLoginNormalBtn.setOnClickListener(mLoginNormalClick);
 
         mForgotPWTV.setOnClickListener(mForgotPWClick);
         SpannableString content = new SpannableString(mForgotPWTV.getText());
@@ -178,33 +213,46 @@ public class LoginActivity extends BaseActivity
 
         callbackManager = CallbackManager.Factory.create();
 
-        mFacebookLoginBtn.registerCallback(callbackManager, new FacebookCallback<LoginResult>() {
-            @Override
-            public void onSuccess(LoginResult loginResult) {
-                AccessToken accessToken = AccessToken.getCurrentAccessToken();
-                apiHelper.connectSocial("facebook", accessToken.getUserId(), accessToken.getToken())
-                        .compose(apiHelper.configureApiCallObserver())
-                        .subscribe(LoginActivity.this, throwable -> {
-                            hideProgress();
-                        });
-            }
-
-            @Override
-            public void onCancel() {
-                Log.d("FB Login", "Cancelled");
-            }
-
-            @Override
-            public void onError(FacebookException exception) {
-                Log.e("FB Login", "Error", exception);
-            }
-        });
 
         this.isRegistering = true;
 
         Map<String, Object> additionalData = new HashMap<>();
         additionalData.put("page", this.getClass().getSimpleName());
         AmplitudeManager.sendEvent("navigate", AmplitudeManager.EVENT_CATEGORY_NAVIGATION, AmplitudeManager.EVENT_HITTYPE_PAGEVIEW, additionalData);
+
+        backgroundContainer.post(() -> backgroundContainer.scrollTo(0, backgroundContainer.getBottom()));
+        backgroundContainer.setScrollingEnabled(false);
+    }
+
+    private void setupFacebookLogin() {
+        callbackManager = CallbackManager.Factory.create();
+        LoginManager.getInstance().registerCallback(callbackManager,
+                new FacebookCallback<LoginResult>() {
+                    @Override
+                    public void onSuccess(LoginResult loginResult) {
+                        AccessToken accessToken = AccessToken.getCurrentAccessToken();
+                        apiHelper.connectSocial("facebook", accessToken.getUserId(), accessToken.getToken())
+                                .compose(apiHelper.configureApiCallObserver())
+                                .subscribe(LoginActivity.this, throwable -> {
+                                    hideProgress();
+                                });
+                    }
+
+                    @Override
+                    public void onCancel() {
+                    }
+
+                    @Override
+                    public void onError(FacebookException exception) {
+                    }
+                });
+
+    }
+
+    @Override
+    public void onBackPressed() {
+
+        super.onBackPressed();
     }
 
     @Override
@@ -250,15 +298,12 @@ public class LoginActivity extends BaseActivity
     }
 
     private void setRegistering() {
-        MenuItem menuItem = menu.findItem(R.id.action_toggleRegistering);
         if (this.isRegistering) {
             this.mLoginNormalBtn.setText(getString(R.string.register_btn));
-            menuItem.setTitle(getString(R.string.login_btn));
             mUsernameET.setHint(R.string.username);
             mPasswordET.setImeOptions(EditorInfo.IME_ACTION_NEXT);
         } else {
             this.mLoginNormalBtn.setText(getString(R.string.login_btn));
-            menuItem.setTitle(getString(R.string.register_btn));
             mUsernameET.setHint(R.string.email_username);
             mPasswordET.setImeOptions(EditorInfo.IME_ACTION_DONE);
         }
@@ -298,7 +343,6 @@ public class LoginActivity extends BaseActivity
             adr = obj.getString(TAG_ADDRESS);
             user = obj.getString(TAG_USERID);
             key = obj.getString(TAG_APIKEY);
-            Log.d("", "adr" + adr + " user:" + user + " key" + key);
             SharedPreferences prefs = PreferenceManager.getDefaultSharedPreferences(this);
             SharedPreferences.Editor editor = prefs.edit();
             boolean ans = editor.putString(getString(R.string.SP_address), adr)
@@ -328,13 +372,6 @@ public class LoginActivity extends BaseActivity
         snackbar.show(); // Don’t forget to show!
     }
 
-    @Override
-    public boolean onCreateOptionsMenu(Menu menu) {
-        getMenuInflater().inflate(R.menu.login, menu);
-        this.menu = menu;
-        return super.onCreateOptionsMenu(menu);
-    }
-
     @Override
     public boolean onOptionsItemSelected(MenuItem item) {
         switch (item.getItemId()) {
@@ -397,6 +434,11 @@ public class LoginActivity extends BaseActivity
         }
     }
 
+    @OnClick(R.id.fb_login_button)
+    public void handleFacebookLogin() {
+        LoginManager.getInstance().logInWithReadPermissions(this, Collections.singletonList("user_friends"));
+    }
+
     @OnClick(R.id.google_login_button)
     public void handleGoogleLogin() {
         String[] accountTypes = new String[]{"com.google"};
@@ -454,4 +496,94 @@ public class LoginActivity extends BaseActivity
                     REQUEST_CODE_RECOVER_FROM_PLAY_SERVICES_ERROR);
         }
     }
+
+    @OnClick(R.id.new_game_button)
+    void newGameButtonClicked() {
+        isRegistering = true;
+        showForm();
+        setRegistering();
+    }
+
+    @OnClick(R.id.show_login_button)
+    void showLoginButtonClicked() {
+        isRegistering = false;
+        showForm();
+        setRegistering();
+    }
+
+    @OnClick(R.id.back_button)
+    void backButtonClicked() {
+        if (isShowingForm) {
+            hideForm();
+        }
+    }
+
+    private void showForm() {
+        isShowingForm = true;
+        ValueAnimator panAnimation = ObjectAnimator.ofInt(backgroundContainer, "scrollY",  0).setDuration(1000);
+        ValueAnimator newGameAlphaAnimation = ObjectAnimator.ofFloat(newGameButton, View.ALPHA, 0);
+
+        ValueAnimator showLoginAlphaAnimation = ObjectAnimator.ofFloat(showLoginButton, View.ALPHA, 0);
+
+        if (isRegistering) {
+            newGameAlphaAnimation.setStartDelay(600);
+            newGameAlphaAnimation.setDuration(400);
+            showLoginAlphaAnimation.setDuration(400);
+            newGameAlphaAnimation.addListener(new AnimatorListenerAdapter() {
+                public void onAnimationEnd(Animator animation) {
+                    newGameButton.setVisibility(View.GONE);
+                    showLoginButton.setVisibility(View.GONE);
+                    scrollView.setVisibility(View.VISIBLE);
+                    scrollView.setAlpha(1);
+                }
+            });
+        } else {
+            showLoginAlphaAnimation.setStartDelay(600);
+            showLoginAlphaAnimation.setDuration(400);
+            newGameAlphaAnimation.setDuration(400);
+            showLoginAlphaAnimation.addListener(new AnimatorListenerAdapter() {
+                public void onAnimationEnd(Animator animation) {
+                    newGameButton.setVisibility(View.GONE);
+                    showLoginButton.setVisibility(View.GONE);
+                    scrollView.setVisibility(View.VISIBLE);
+                    scrollView.setAlpha(1);
+                }
+            });
+        }
+        ValueAnimator backAlphaAnimation = ObjectAnimator.ofFloat(backButton, View.ALPHA, 1).setDuration(800);
+        AnimatorSet showAnimation = new AnimatorSet();
+        showAnimation.playTogether(panAnimation, newGameAlphaAnimation, showLoginAlphaAnimation);
+        showAnimation.play(backAlphaAnimation).after(panAnimation);
+        for (int i = 0; i < formWrapper.getChildCount(); i++) {
+            View view = formWrapper.getChildAt(i);
+            view.setAlpha(0);
+            ValueAnimator animator = ObjectAnimator.ofFloat(view, View.ALPHA, 1).setDuration(400);
+            animator.setStartDelay(100*i);
+            showAnimation.play(animator).after(panAnimation);
+        }
+
+        showAnimation.start();
+    }
+
+    private void hideForm() {
+        isShowingForm = false;
+        ValueAnimator panAnimation = ObjectAnimator.ofInt(backgroundContainer, "scrollY",  backgroundContainer.getBottom()).setDuration(1000);
+        ValueAnimator newGameAlphaAnimation = ObjectAnimator.ofFloat(newGameButton, View.ALPHA, 1).setDuration(700);
+        ValueAnimator showLoginAlphaAnimation = ObjectAnimator.ofFloat(showLoginButton, View.ALPHA, 1).setDuration(700);
+        showLoginAlphaAnimation.setStartDelay(300);
+        ValueAnimator scrollViewAlphaAnimation = ObjectAnimator.ofFloat(scrollView, View.ALPHA, 0).setDuration(800);
+        scrollViewAlphaAnimation.addListener(new AnimatorListenerAdapter() {
+            public void onAnimationEnd(Animator animation) {
+                newGameButton.setVisibility(View.VISIBLE);
+                showLoginButton.setVisibility(View.VISIBLE);
+                scrollView.setVisibility(View.INVISIBLE);
+            }
+        });
+        ValueAnimator backAlphaAnimation = ObjectAnimator.ofFloat(backButton, View.ALPHA, 0).setDuration(800);
+        AnimatorSet showAnimation = new AnimatorSet();
+        showAnimation.playTogether(panAnimation, scrollViewAlphaAnimation, backAlphaAnimation);
+        showAnimation.play(newGameAlphaAnimation).after(scrollViewAlphaAnimation);
+        showAnimation.play(showLoginAlphaAnimation).after(scrollViewAlphaAnimation);
+        showAnimation.start();
+    }
 }

Habitica/src/main/java/com/habitrpg/android/habitica/ui/views/login/LockableScrollView.java

@@ -0,0 +1,41 @@
+package com.habitrpg.android.habitica.ui.views.login;
+
+import android.content.Context;
+import android.util.AttributeSet;
+import android.view.MotionEvent;
+import android.widget.ScrollView;
+
+public class LockableScrollView extends ScrollView {
+
+    private boolean scrollable = true;
+
+    public LockableScrollView(Context context, AttributeSet attrs) {
+        super(context, attrs);
+    }
+
+    public void setScrollingEnabled(boolean enabled) {
+        scrollable = enabled;
+    }
+
+    public boolean isScrollable() {
+        return scrollable;
+    }
+
+    @Override
+    public boolean onTouchEvent(MotionEvent ev) {
+        switch (ev.getAction()) {
+            case MotionEvent.ACTION_DOWN:
+                if (scrollable) return super.onTouchEvent(ev);
+                return scrollable; // mScrollable is always false at this point
+            default:
+                return super.onTouchEvent(ev);
+        }
+    }
+
+    @Override
+    public boolean onInterceptTouchEvent(MotionEvent ev) {
+        if (!scrollable) return false;
+        else return super.onInterceptTouchEvent(ev);
+    }
+
+}

Habitica/src/main/java/com/habitrpg/android/habitica/ui/views/login/LoginBackgroundView.java

@@ -0,0 +1,113 @@
+package com.habitrpg.android.habitica.ui.views.login;
+
+
+import com.habitrpg.android.habitica.R;
+
+import android.content.Context;
+import android.support.annotation.Nullable;
+import android.util.AttributeSet;
+import android.widget.FrameLayout;
+import android.widget.ImageView;
+import android.widget.RelativeLayout;
+
+import java.util.ArrayList;
+import java.util.List;
+import java.util.Random;
+
+import butterknife.BindView;
+
+public class LoginBackgroundView extends RelativeLayout {
+
+    private static float SIZE_FACTOR = 1.5f;
+    private static int STAR_SIZE = 30;
+    private static int STAR_OFFSET = 18;
+    private final Random random;
+
+    @BindView(R.id.left_cloud_view)
+    ImageView leftCloudView;
+    @BindView(R.id.right_cloud_view)
+    ImageView rightCloudView;
+
+    private List<StarView> starViews;
+    private int width;
+    private int height;
+    private boolean didLayoutStars = false;
+
+    public LoginBackgroundView(Context context, @Nullable AttributeSet attrs) {
+        super(context, attrs);
+        this.random = new Random();
+        starViews = new ArrayList<>();
+        generateStars();
+    }
+
+    @Override
+    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec){
+        int parentWidth = MeasureSpec.getSize(widthMeasureSpec);
+        int parentHeight = MeasureSpec.getSize(heightMeasureSpec);
+        this.width = parentWidth;
+        this.height = (int)(parentHeight*SIZE_FACTOR);
+        this.setMeasuredDimension(width, height);
+        this.setLayoutParams(new FrameLayout.LayoutParams(width, height));
+        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
+    }
+
+    @Override
+    protected void onLayout(boolean changed, int l, int t, int r, int b) {
+        super.onLayout(changed, l, t, r, b);
+        updateStarLayoutParams();
+    }
+
+    public void generateStars() {
+        generateStars(1, 10, 20);
+    }
+
+    private void generateStars(int largeCount, int mediumCount, int smallCount) {
+        removeStarViews();
+        for (int x = 0; x < largeCount; x++) {
+            generateStar(2);
+        }
+        for (int x = 0; x < mediumCount; x++) {
+            generateStar(1);
+        }
+        for (int x = 0; x < smallCount; x++) {
+            generateStar(0);
+        }
+        requestLayout();
+    }
+
+    private void removeStarViews() {
+        if (starViews.size() > 0) {
+            starViews.forEach(this::removeView);
+            starViews.clear();
+        }
+    }
+
+    private void generateStar(int size) {
+        StarView starView = new StarView(getContext()
+        );
+        starView.setStarSize(size);
+        starViews.add(starView);
+        if (width > 0 && height > 0) {
+            this.addView(starView, getStarParams());
+        } else {
+            this.addView(starView);
+        }
+    }
+
+    private void updateStarLayoutParams() {
+        if (width <= 0 || height <= 0 || didLayoutStars || starViews.size() == 0) {
+            return;
+        }
+        for (StarView view : starViews) {
+            view.setLayoutParams(getStarParams());
+        }
+        didLayoutStars = true;
+    }
+
+    private RelativeLayout.LayoutParams getStarParams() {
+        RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(STAR_SIZE, STAR_SIZE);
+        params.leftMargin = random.nextInt(width);
+        params.topMargin = random.nextInt(height);
+        return params;
+    }
+}

Habitica/src/main/java/com/habitrpg/android/habitica/ui/views/login/StarView.java

@@ -0,0 +1,39 @@
+package com.habitrpg.android.habitica.ui.views.login;
+
+
+import com.habitrpg.android.habitica.R;
+
+import android.content.Context;
+import android.support.annotation.Nullable;
+import android.support.v7.widget.AppCompatImageView;
+import android.util.AttributeSet;
+
+public class StarView extends AppCompatImageView {
+
+
+    public StarView(Context context, @Nullable AttributeSet attrs) {
+        super(context, attrs);
+    }
+
+    public StarView(Context context) {
+        super(context);
+        this.setScaleType(ScaleType.CENTER);
+    }
+
+    public void setStarSize(int size) {
+        switch (size) {
+            case 0: {
+                this.setImageResource(R.drawable.star_small);
+                break;
+            }
+            case 1: {
+                this.setImageResource(R.drawable.star_medium);
+                break;
+            }
+            case 2: {
+                this.setImageResource(R.drawable.star_large);
+                break;
+            }
+        }
+    }
+}