Login Love for your Android App

We love UI components–as you may know through the pre-built UI classes in our iOS SDK. Today, we are bringing this same love to Android. We are launching ParseLoginUI, an open-source library project for building login screens on Android with the Parse SDK. This ultra-customizable library implements screens for login, signup, and password help. We are releasing this as a standalone project (apart from the Parse Android SDK) so that you have the flexibility to make further changes to its look and feel when you integrate it into your app.

To use ParseLoginUI with your app, you should import the library project, and add the following to your app’s AndroidManifest.xml:

<activity 
    android:name="com.parse.ui.ParseLoginActivity" 
    android:label="@string/app_name" 
    android:launchMode="singleTop">
    <meta-data 
        android:name="com.parse.ui.ParseLoginActivity.PARSE_LOGIN_ENABLED" 
        android:value="true"/>
</activity>

Then, you can show the login screen by launching ParseLoginActivity with these two lines of code:

ParseLoginBuilder builder = new ParseLoginBuilder(MyActivity.this);
startActivityForResult(builder.build(), 0);

Within ParseLoginActivity, our library project will automatically manage the login workflow. Besides signing in, users can also sign up or ask for an email password reset. The default version of each screen (login, signup, and recover password) is shown below.

Basic Login Screens

Let’s see how we can configure our login to look different.  Make the following changes to our AndroidManifest.xml:

<activity 
    android:name="com.parse.ui.ParseLoginActivity" 
    android:label="@string/app_name" 
    android:launchMode="singleTop">
    <meta-data 
        android:name="com.parse.ui.ParseLoginActivity.PARSE_LOGIN_ENABLED" 
        android:value="true"/>

    <!-- Added these options below to customize the login flow -->
    <meta-data 
        android:name="com.parse.ui.ParseLoginActivity.APP_LOGO"  
        android:resource="@drawable/app_logo"/>
    <meta-data  
        android:name="com.parse.ui.ParseLoginActivity.FACEBOOK_LOGIN_ENABLED"  
        android:value="true"/>
    <meta-data  
        android:name="com.parse.ui.ParseLoginActivity.TWITTER_LOGIN_ENABLED"  
        android:value="true"/>
    <meta-data  
        android:name="com.parse.ui.ParseLoginActivity.PARSE_LOGIN_HELP_TEXT"  
        android:value="@string/reset_password"/>
    <meta-data  
        android:name="com.parse.ui.ParseLoginActivity.PARSE_LOGIN_EMAIL_AS_USERNAME"  
        android:value="true"/>
</activity>

With these simple configurations, we’ve changed the app logo, added Facebook & Twitter logins, and changed the text shown for the password-reset link. We also enabled an option to automatically save the email address as the username, so that you don’t have to manually save it in both fields of the ParseUser object. When this option is turned on, both the login and signup screens are also automatically updated to prompt for email address as username.

Customized Login Screens

Our Android documentation contains guides for both basic and advanced use cases. You can find the source code for ParseLoginUI at our GitHub repository. Try it out and let us know what you think!

Stanley Wang
June 25, 2014
blog comments powered by Disqus

Comments are closed.

Archives

Categories

RSS Feed Follow us Like us