Improve UI of login form.

This commit uses HTML formatted CDATA strings to show
the user which fields in the login form are required
to be able to login. However, the formatting doesn't
work for TextInputLayout, only for TextView. Therefore,
we toggle between setting the hint on the TextView (to
get color coding) or on the TextInputLayout (to get
floating hints).

This commit also adds some styling to the login button.
Specifically, it turns it pale, both background and text color
until all required fields are entered.

openmrs-client/src/main/java/org/openmrs/mobile/activities/login/LoginFragment.java

@@ -22,7 +22,9 @@
 import android.preference.PreferenceManager;
 import android.support.annotation.Nullable;
 import android.support.design.widget.Snackbar;
+import android.support.design.widget.TextInputLayout;
 import android.support.v7.widget.AppCompatImageView;
+import android.text.Html;
 import android.text.InputType;
 import android.util.SparseArray;
 import android.view.LayoutInflater;
@@ -65,6 +67,9 @@ public class LoginFragment extends ACBaseFragment<LoginContract.Presenter> imple
     private EditText mUrl;
     private EditText mUsername;
     private EditText mPassword;
+    private TextInputLayout mUrlInput;
+    private TextInputLayout mUsernameInput;
+    private TextInputLayout mPasswordInput;
     private CheckBox mShowPassword;
     private Button mLoginButton;
     private ProgressBar mSpinner;
@@ -124,7 +129,7 @@ public void onClick(View view) {
 
         mUrl.setOnFocusChangeListener(new View.OnFocusChangeListener() {
             @Override
-            public void onFocusChange(View view, boolean b) {
+            public void onFocusChange(View view, boolean hasFocus) {
                 if (StringUtils.notEmpty(mUrl.getText().toString())
                         && !view.isFocused() 
                         && loginValidatorWatcher.isUrlChanged()
@@ -137,6 +142,46 @@ public void onFocusChange(View view, boolean b) {
                             .setUrl(mUrl.getText().toString());
                     loginValidatorWatcher.setUrlChanged(false);
                 }
+
+                if (hasFocus) {
+                    mUrl.setHint("");
+                    mUrlInput.setHint(Html.fromHtml(getString(R.string.login_url_hint)));
+                } else {
+                    if (mUrl.getText().toString().equals("")) {
+                        mUrl.setHint(Html.fromHtml(getString(R.string.login_url_hint)));
+                        mUrlInput.setHint("");
+                    }
+                }
+            }
+        });
+
+        mUsername.setOnFocusChangeListener(new View.OnFocusChangeListener() {
+            @Override
+            public void onFocusChange(View view, boolean hasFocus) {
+                if (hasFocus) {
+                    mUsername.setHint("");
+                    mUsernameInput.setHint(Html.fromHtml(getString(R.string.login_username_hint)));
+                } else {
+                    if (mUsername.getText().toString().equals("")) {
+                        mUsername.setHint(Html.fromHtml(getString(R.string.login_username_hint)));
+                        mUsernameInput.setHint("");
+                    }
+                }
+            }
+        });
+
+        mPassword.setOnFocusChangeListener(new View.OnFocusChangeListener() {
+            @Override
+            public void onFocusChange(View view, boolean hasFocus) {
+                if (hasFocus) {
+                    mPassword.setHint("");
+                    mPasswordInput.setHint(Html.fromHtml(getString(R.string.login_password_hint)));
+                } else {
+                    if (mPassword.getText().toString().equals("")) {
+                        mPassword.setHint(Html.fromHtml(getString(R.string.login_password_hint)));
+                        mPasswordInput.setHint("");
+                    }
+                }
             }
         });
 
@@ -172,9 +217,25 @@ public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
 
     private void initViewFields(View root) {
         mUrl = (EditText) root.findViewById(R.id.loginUrlField);
+        mUrl.setHint(Html.fromHtml(getString(R.string.login_url_hint)));
+        mUrlInput = (TextInputLayout) root.findViewById(R.id.textInputLayoutLoginURL);
+        mUrlInput.setHint(Html.fromHtml(getString(R.string.login_url_hint)));
+
         mUsername = (EditText) root.findViewById(R.id.loginUsernameField);
         mUsername.setText(OpenMRS.getInstance().getUsername());
+        mUsernameInput = (TextInputLayout) root.findViewById(R.id.textInputLayoutUsername);
+        if (mUsername.getText().toString().equals(""))
+            mUsername.setHint(Html.fromHtml(getString(R.string.login_username_hint)));
+        else
+            mUsernameInput.setHint(Html.fromHtml(getString(R.string.login_username_hint)));
+
         mPassword = (EditText) root.findViewById(R.id.loginPasswordField);
+        mPassword.setHint(Html.fromHtml(getString(R.string.login_password_hint)));
+        mPasswordInput = (TextInputLayout) root.findViewById(R.id.textInputLayoutPassword);
+
+        TextView mRequired = (TextView) root.findViewById(R.id.loginRequiredLabel);
+        mRequired.setText(Html.fromHtml(getString(R.string.login_required)));
+
         mShowPassword = (CheckBox) root.findViewById(R.id.checkboxShowPassword);
         mLoginButton = (Button) root.findViewById(R.id.loginButton);
         mSpinner = (ProgressBar) root.findViewById(R.id.loginLoading);

openmrs-client/src/main/java/org/openmrs/mobile/listeners/watcher/LoginValidatorWatcher.java

@@ -16,6 +16,7 @@
 
 import android.graphics.Color;
 import android.text.Editable;
+import android.text.Html;
 import android.text.TextWatcher;
 import android.view.View;
 import android.widget.AdapterView;
@@ -24,6 +25,7 @@
 import android.widget.Spinner;
 import android.widget.TextView;
 
+import org.openmrs.mobile.R;
 import org.openmrs.mobile.activities.login.LocationArrayAdapter;
 import org.openmrs.mobile.application.OpenMRS;
 import org.openmrs.mobile.utilities.StringUtils;
@@ -103,7 +105,7 @@ public void onItemSelected(AdapterView<?> parent, View view, int position, long
             //Set Text Color to red if spinner is at start/default option
             TextView currentText = (TextView) parent.getChildAt(0);
             if (currentText != null) {
-                currentText.setTextColor(Color.RED);
+                currentText.setText(Html.fromHtml(view.getContext().getString(R.string.login_location_select)));
             }
         }
         mLoginButton.setEnabled(isAllDataValid());

openmrs-client/src/main/res/color/login_button.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<selector xmlns:android="http://schemas.android.com/apk/res/android">
+    <!-- disabled state -->
+    <item android:state_enabled="false" android:color="#9D9FA2" />
+    <item android:color="@color/dark_purple"/>
+</selector>

openmrs-client/src/main/res/drawable/button_apply.xml

@@ -4,8 +4,8 @@
     <item android:state_enabled="false" >
         <shape android:shape="rectangle"  >
             <corners android:radius="3dip" />
-            <stroke android:width="1dip" android:color="#CCC" />
-            <solid android:color="#EEE"/>
+            <stroke android:width="1dip" android:color="#a4c639" />
+            <solid android:color="#DCEDC8"/>
         </shape>
     </item>
     <item android:state_pressed="true" >

openmrs-client/src/main/res/layout/fragment_login.xml

@@ -75,7 +75,6 @@
                         android:layout_marginRight="20dp"
                         android:focusable="true"
                         android:gravity="center"
-                        android:hint="@string/login_url_hint"
                         android:inputType="textUri"
                         android:maxLines="1"
                         android:textAlignment="center"
@@ -96,7 +95,6 @@
                         android:layout_marginLeft="20dp"
                         android:layout_marginRight="20dp"
                         android:focusable="true"
-                        android:hint="@string/login_username_hint"
                         android:inputType="text"
                         android:maxLines="1" />
                 </android.support.design.widget.TextInputLayout>
@@ -118,7 +116,6 @@
                             android:layout_marginLeft="20dp"
                             android:layout_marginRight="20dp"
                             android:focusable="true"
-                            android:hint="@string/login_password_hint"
                             android:inputType="textPassword|text"
                             android:maxLines="1" />
                     </android.support.design.widget.TextInputLayout>
@@ -144,6 +141,16 @@
                     android:layout_marginRight="20dp"
                     android:layout_marginTop="10dp" />
 
+                <TextView
+                    android:id="@+id/loginRequiredLabel"
+                    android:layout_width="fill_parent"
+                    android:layout_height="wrap_content"
+                    android:layout_marginLeft="18dp"
+                    android:layout_marginStart="18dp"
+                    android:layout_marginTop="10dp"
+                    android:gravity="start"
+                    android:textSize="14sp" />
+
                 <LinearLayout
                     android:layout_width="wrap_content"
                     android:layout_height="match_parent"
@@ -179,7 +186,7 @@
                     android:enabled="false"
                     android:gravity="center_vertical|center_horizontal"
                     android:text="@string/login_button"
-                    android:textColor="@color/dark_purple" />
+                    style="@style/loginButtonStyle"/>
 
 
                 <TextView

openmrs-client/src/main/res/values/login_button_style.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+    <style name="loginButtonStyle">
+        <item name="android:textColor">@color/login_button</item>
+    </style>
+</resources>

openmrs-client/src/main/res/values/strings.xml

@@ -23,10 +23,11 @@
 
     <!-- Login view -->
     <string name="login_button">Login</string>
-    <string name="login_url_hint">URL address</string>
-    <string name="login_username_hint">Username</string>
-    <string name="login_password_hint">Password</string>
-    <string name="login_location_select">Session Location</string>
+    <string name="login_url_hint"><![CDATA[URL address <font color=\'#cc0029\'>*</font>]]></string>
+    <string name="login_username_hint"><![CDATA[Username <font color=\'#cc0029\'>*</font>]]></string>
+    <string name="login_password_hint"><![CDATA[Password <font color=\'#cc0029\'>*</font>]]></string>
+    <string name="login_location_select"><![CDATA[Session Location <font color=\'#cc0029\'>*</font>]]></string>
+    <string name="login_required"><![CDATA[<font color=\'#cc0029\'>*</font> Required]]></string>
     <string name="warning_dialog_title">Warning</string>
     <string name="warning_lost_data_dialog">Changing the URL or username will erase all the data. Are you sure?</string>
     <string name="forgot_dialog_title">Unable to login?</string>