Now that we have setup our application, and applied a custom theme to it, it's time to start adding new Acitivities (i.e. Screens). We are going to start with a Login Screen, which should be the first screen that appears to our user when they install the app. It should provide them with an option to Log In with their Facebook, LinkedIn or Google accounts, and uniquely identify them among other users.

Android Studio provides us with many different application templates that we can use to jump start our development. Application templates create basic Android application modules that you can immediately run and test on your Android device. We've already used one of the Activity Templates when we first created the project, that was the Navigation Drawer Activity, and this time we'll use the Login Activity. There are other types of templates as well, not just the Activity Templates. This is the full list of different template types you can use from Android Studio:

• AIDL
• Activity
• Folder
• Fragment
• Google
• Service
• UI Component
• Wear
• Widget
• XML
• Other

This activity template provides input fields and a sample implementation of an AsyncTask that asks users to login or register with their credentials.

This template includes:

• Recommended user interface for requesting login information
• AsyncTask implementation for handing network operations separately from the main user interface thread
• Progress indicator during network operations

We'll use this template to get started and then we'll customize it and extend it further to eventually provide options to log in with Facebook, LinkedIn or Google accounts. You can read more about Android Templates on Using Code Templates official documentation page.

To create a new activity from a template, while in Android Studio go to File > New > Activity > Login Activity.

Which will then show you a new dialog where you can edit the basic settings for the new activity.

Once you click Finish on the dialog above, the Android Studio will create LoginActivity.java and activity_login.xml, which are the logic and the layout for this new activity. Android studio will also add some new strings to strings.xml and will edit the AndroidManifest.xml file to include the new activity by adding the code below:

<!-- To auto-complete the email text field in the login form with the user's emails -->
<uses-permission android:name="android.permission.GET_ACCOUNTS" />
<uses-permission android:name="android.permission.READ_PROFILE" />
<uses-permission android:name="android.permission.READ_CONTACTS" />

<!-- code omitted for brevity -->

<!-- the new LoginActivity we just created -->
<activity
    android:name=".LoginActivity"
    android:label="@string/title_activity_login"></activity>

However, when you run the app the LoginActivity won't be the first activity that will open, that will still be the old activity. In order to change this and make the new activity to open first, in the AndroidManifest.xml you need to set the appropriate <intent-filter>:

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.thesis.smukov.anative">

    <!-- To auto-complete the email text field in the login form with the user's emails -->
    <uses-permission android:name="android.permission.GET_ACCOUNTS" />
    <uses-permission android:name="android.permission.READ_PROFILE" />
    <uses-permission android:name="android.permission.READ_CONTACTS" />

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity
            android:name=".NavigationActivity"
            android:label="@string/app_name"
            android:theme="@style/AppTheme.NoActionBar">
            <intent-filter>
                <action android:name="com.thesis.smukov.MAINACTIVITY" />

                <category android:name="android.intent.category.DEFAULT" />
            </intent-filter>
        </activity>
        <activity
            android:name=".LoginActivity"
            android:label="@string/app_name">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

• ACTION_MAIN action indicates this is the main entry point and does not expect any intent data.
• CATEGORY_LAUNCHER category indicates that this activity's icon should be placed in the system's app launcher.

The provided template is fine, but it's not something I had really envisioned. I want to provide users with the ability to log in through their social accounts, and I don't want to worry about their email/password combinations, so I'm going to change the layout and the logic of this screen quite a bit.

Firstly, I need to change the layout to add the social account buttons for Facebook, Google and LinkedIn. I'm going to start by adding the brand colors of those websites to my colors.xml:

Source Code

    <color name="facebook">#3b5998</color>
    <color name="googleplus">#dc4e41</color>
    <color name="linkedin">#0077b5</color>

Next, I'll add 3 new buttons to the activity layout. The code for all of them will be pretty much the same, except for the android:text and android:background attributes. Here's a sample for the Facebook login button, and the link to the source code for the complete file.

Source Code

<Button
        android:id="@+id/btnFacebookLogin"
        style="?android:textAppearanceInverse"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:text="@string/sign_in_facebook"
        android:textStyle="bold"
        android:background="@color/facebook"
        />

That's it regarding the layout. However, if I try to compile this to see the end result inside the emulator, I can't. That's because the code behind of my activity was generated from a template, and is referencing some layout parts that I deleted, so I need to clean up that code, big time.

Basically, as I'm going to be implementing the oAuth login later on, I'll be happy if all 3 buttons navigate directly to my NavigationActivity at this time. That's why I'm removing everything from LoginActiviy.java file, and I'm just using the below code to add the onClick handler that will open up a new activity.

Source Code

public class LoginActivity extends AppCompatActivity {


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_login);
        // Set up the login form.

        Button mBtnFacebook = (Button) findViewById(R.id.btnFacebookLogin);
        mBtnFacebook.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View view) {
                attemptLogin();
            }
        });

        Button mBtnGooglePlus = (Button) findViewById(R.id.btnGooglePlusLogin);
        mBtnGooglePlus.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View view) {
                attemptLogin();
            }
        });

        Button mBtnLinkedIn = (Button) findViewById(R.id.btnLinkedInLogin);
        mBtnLinkedIn.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View view) {
                attemptLogin();
            }
        });
    }

    private void attemptLogin() {
        Intent intent = new Intent(this, NavigationActivity.class);
        startActivity(intent);
        finish();
    }
}

Now that I've altered the code behind I can compile my app and send it to emulator. Below you can see the end result.

As I'm an Android Developer beginner the Login Activity template didn't really helped me that much. I got plenty of code and I had no clue what it did, nor how to alter it. Luckily, I wouldn't be needing this logic at the moment as I have different plans for my login process, so I could scrap it all together and come up with something much simpler, which is good enough for now.

I got a few new surprises during the development of this activity, and they were all bad. Firstly, the android:textColor wasn't getting applied because, in my best guess, the style attribute was overriding it. That's something I didn't thought would happen, I was sure that attribute would trump the style, similarly to style > class relation in HTML. I ended up ditching the android:textColor and just using the style="?android:textAppearanceInverse" attribute.

Next, I learned that I couldn't apply multiple styles to the same view, but instead I need to join those styles by creating a new one in the resources. That seemed to me like a lot of work for no apparent reason, so I didn't yet tried it.

Finally, the Android Studio's layout preview wasn't showing me the accurate representation of the layout, which I noticed only when I deployed the app to the emulator (the button text color was wrong). I tried changing the Android version for the preview to match the one on the emulator, but it didn't help.

• Using Code Templates