Building Social Media Features in XML-Based Apps

While Jetpack Compose is the modern and recommended approach for building Android UIs, many existing apps still rely heavily on XML layouts. Integrating social media features into these apps can significantly enhance user engagement and expand their reach. This post outlines how to implement social media functionalities such as sharing, authentication, and content display in traditional XML-based Android applications.

Why Integrate Social Media Features in XML-Based Apps?

• Increased User Engagement: Social features encourage users to interact more within the app.
• Enhanced Sharing Capabilities: Allows users to easily share content, increasing app visibility.
• User Authentication Simplification: Leverages existing social media accounts for quick and secure login.

Authentication with Social Media Providers

Integrating social media authentication streamlines the user onboarding process. Firebase Authentication offers easy integration with various social media providers.

Step 1: Set Up Firebase Authentication

First, add Firebase to your Android project. Follow the instructions on the Firebase Console to set up your project and add the necessary dependencies to your build.gradle file:

// build.gradle (Project)
buildscript {
    dependencies {
        classpath 'com.google.gms:google-services:4.3.15'
    }
}

// build.gradle (Module)
dependencies {
    implementation platform('com.google.firebase:firebase-bom:32.3.0')
    implementation 'com.google.firebase:firebase-auth-ktx'
    implementation 'com.google.android.gms:play-services-auth:20.7.0'
}

apply plugin: 'com.google.gms.google-services'

Step 2: Enable Social Authentication Providers in Firebase Console

Go to the Firebase Console, select Authentication, and enable the desired sign-in methods (e.g., Google, Facebook). Follow the specific configuration instructions for each provider.

Step 3: Implement Google Sign-In

For Google Sign-In, implement the following code in your Android activity:

import android.content.Intent;
import android.os.Bundle;
import android.widget.Toast;
import androidx.appcompat.app.AppCompatActivity;
import com.google.android.gms.auth.api.signin.GoogleSignIn;
import com.google.android.gms.auth.api.signin.GoogleSignInAccount;
import com.google.android.gms.auth.api.signin.GoogleSignInClient;
import com.google.android.gms.auth.api.signin.GoogleSignInOptions;
import com.google.android.gms.common.SignInButton;
import com.google.android.gms.common.api.ApiException;
import com.google.firebase.auth.AuthCredential;
import com.google.firebase.auth.FirebaseAuth;
import com.google.firebase.auth.GoogleAuthProvider;

public class LoginActivity extends AppCompatActivity {
    private static final int RC_SIGN_IN = 9001;
    private GoogleSignInClient mGoogleSignInClient;
    private FirebaseAuth mAuth;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_login);

        mAuth = FirebaseAuth.getInstance();

        // Configure Google Sign In
        GoogleSignInOptions gso = new GoogleSignInOptions.Builder(GoogleSignInOptions.DEFAULT_SIGN_IN)
                .requestIdToken(getString(R.string.default_web_client_id))
                .requestEmail()
                .build();

        mGoogleSignInClient = GoogleSignIn.getClient(this, gso);

        SignInButton signInButton = findViewById(R.id.sign_in_button);
        signInButton.setSize(SignInButton.SIZE_STANDARD);

        signInButton.setOnClickListener(v -> signIn());
    }

    private void signIn() {
        Intent signInIntent = mGoogleSignInClient.getSignInIntent();
        startActivityForResult(signInIntent, RC_SIGN_IN);
    }

    @Override
    public void onActivityResult(int requestCode, int resultCode, Intent data) {
        super.onActivityResult(requestCode, resultCode, data);

        if (requestCode == RC_SIGN_IN) {
            try {
                GoogleSignInAccount account = GoogleSignIn.getSignedInAccountFromIntent(data).getResult(ApiException.class);
                firebaseAuthWithGoogle(account.getIdToken());
            } catch (ApiException e) {
                Toast.makeText(this, "Google sign in failed", Toast.LENGTH_SHORT).show();
            }
        }
    }

    private void firebaseAuthWithGoogle(String idToken) {
        AuthCredential credential = GoogleAuthProvider.getCredential(idToken, null);
        mAuth.signInWithCredential(credential)
                .addOnCompleteListener(this, task -> {
                    if (task.isSuccessful()) {
                        Toast.makeText(this, "Authentication Successful.", Toast.LENGTH_SHORT).show();
                        // Proceed to the next activity
                    } else {
                        Toast.makeText(this, "Authentication failed.", Toast.LENGTH_SHORT).show();
                    }
                });
    }
}

And here’s the corresponding XML layout (activity_login.xml):

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:gravity="center"
    tools:context=".LoginActivity">

    <com.google.android.gms.common.SignInButton
        android:id="@+id/sign_in_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

</LinearLayout>

Step 4: Implement Facebook Login

To implement Facebook login, follow these steps:

1. Add Facebook SDK to your build.gradle file.

dependencies {
    implementation 'com.facebook.android:facebook-android-sdk:latest.release'
}

2. Add the Facebook App ID to your AndroidManifest.xml file.

<application>
    <meta-data android:name="com.facebook.sdk.ApplicationId" android:value="@string/facebook_app_id"/>
    <activity android:name="com.facebook.FacebookActivity"
        android:configChanges=
                "keyboard|keyboardHidden|screenLayout|screenSize|orientation"
        android:label="@string/app_name" />
    <activity
        android:name="com.facebook.CustomTabActivity"
        android:exported="true">
        <intent-filter>
            <action android:name="android.intent.action.VIEW" />
            <category android:name="android.intent.category.DEFAULT" />
            <category android:name="android.intent.category.BROWSABLE" />
            <data android:scheme="fb[your_app_id]" />
        </intent-filter>
    </activity>
</application>

3. Implement the Facebook login functionality in your Activity:

import android.content.Intent;
import android.os.Bundle;
import android.widget.Toast;
import androidx.appcompat.app.AppCompatActivity;
import com.facebook.CallbackManager;
import com.facebook.FacebookCallback;
import com.facebook.FacebookException;
import com.facebook.login.LoginResult;
import com.facebook.login.LoginButton;
import com.google.firebase.auth.AuthCredential;
import com.google.firebase.auth.FacebookAuthProvider;
import com.google.firebase.auth.FirebaseAuth;

public class FacebookLoginActivity extends AppCompatActivity {
    private CallbackManager mCallbackManager;
    private FirebaseAuth mAuth;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_facebook_login);

        mAuth = FirebaseAuth.getInstance();
        mCallbackManager = CallbackManager.Factory.create();

        LoginButton loginButton = findViewById(R.id.facebook_login_button);
        loginButton.setReadPermissions("email", "public_profile");
        loginButton.registerCallback(mCallbackManager, new FacebookCallback<LoginResult>() {
            @Override
            public void onSuccess(LoginResult loginResult) {
                handleFacebookAccessToken(loginResult.getAccessToken().getToken());
            }

            @Override
            public void onCancel() {
                Toast.makeText(FacebookLoginActivity.this, "Facebook login cancelled.", Toast.LENGTH_SHORT).show();
            }

            @Override
            public void onError(FacebookException error) {
                Toast.makeText(FacebookLoginActivity.this, "Facebook login error: " + error.getMessage(), Toast.LENGTH_SHORT).show();
            }
        });
    }

    @Override
    protected void onActivityResult(int requestCode, int resultCode, Intent data) {
        super.onActivityResult(requestCode, resultCode, data);
        mCallbackManager.onActivityResult(requestCode, resultCode, data);
    }

    private void handleFacebookAccessToken(String token) {
        AuthCredential credential = FacebookAuthProvider.getCredential(token);
        mAuth.signInWithCredential(credential)
                .addOnCompleteListener(this, task -> {
                    if (task.isSuccessful()) {
                        Toast.makeText(FacebookLoginActivity.this, "Facebook Authentication Successful.", Toast.LENGTH_SHORT).show();
                        // Proceed to the next activity
                    } else {
                        Toast.makeText(FacebookLoginActivity.this, "Facebook Authentication failed.", Toast.LENGTH_SHORT).show();
                    }
                });
    }
}

And here’s the corresponding XML layout (activity_facebook_login.xml):

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:gravity="center">

    <com.facebook.login.LoginButton
        android:id="@+id/facebook_login_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:layout_marginTop="30dp"
        android:layout_marginBottom="30dp" />

</LinearLayout>

Social Media Sharing

Implementing sharing features allows users to easily share content from your app to social media platforms.

Step 1: Using Implicit Intents for Sharing

The simplest way to share content is by using implicit intents:

import android.content.Intent;
import android.net.Uri;
import android.os.Bundle;
import android.widget.Button;
import androidx.appcompat.app.AppCompatActivity;

public class ShareActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_share);

        Button shareButton = findViewById(R.id.share_button);
        shareButton.setOnClickListener(v -> shareContent());
    }

    private void shareContent() {
        Intent shareIntent = new Intent(Intent.ACTION_SEND);
        shareIntent.setType("text/plain");
        shareIntent.putExtra(Intent.EXTRA_SUBJECT, "Sharing from My App");
        shareIntent.putExtra(Intent.EXTRA_TEXT, "Check out this amazing content!");
        startActivity(Intent.createChooser(shareIntent, "Share via"));
    }
}

And the corresponding XML layout (activity_share.xml):

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:gravity="center">

    <Button
        android:id="@+id/share_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Share Content" />

</LinearLayout>

Step 2: Sharing with Specific Social Media Apps

To share directly with a specific social media app, target the app’s package name. For example, to share on Twitter:

private void shareToTwitter() {
    Intent twitterIntent = new Intent(Intent.ACTION_SEND);
    twitterIntent.setType("text/plain");
    twitterIntent.putExtra(Intent.EXTRA_TEXT, "Check out this content on Twitter!");
    twitterIntent.setPackage("com.twitter.android"); // Twitter's package name
    
    try {
        startActivity(twitterIntent);
    } catch (android.content.ActivityNotFoundException ex) {
        // Twitter app is not installed
        Toast.makeText(this, "Twitter app not installed.", Toast.LENGTH_SHORT).show();
    }
}

Displaying Social Media Content

Displaying content from social media platforms like Twitter or Instagram can enhance your app’s functionality.

Step 1: Integrating Twitter Timeline

To display a Twitter timeline, you can use the Twitter Kit (deprecated, but alternative libraries exist) or the Twitter API directly. A simplified example using a WebView:

import android.os.Bundle;
import android.webkit.WebView;
import androidx.appcompat.app.AppCompatActivity;

public class TwitterTimelineActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_twitter_timeline);

        WebView twitterWebView = findViewById(R.id.twitter_webview);
        twitterWebView.getSettings().setJavaScriptEnabled(true);
        twitterWebView.loadUrl("https://twitter.com/twitterdev?ref_src=twsrc%5Egoogle%7Ctwcamp%5Eserp%7Ctwgr%5Eauthor"); // Replace with your desired Twitter timeline
    }
}

And the corresponding XML layout (activity_twitter_timeline.xml):

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <WebView
        android:id="@+id/twitter_webview"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</LinearLayout>

Note: Directly embedding social media content might require adherence to platform-specific policies and terms of service. Always check the official documentation of the respective social media platforms.

Best Practices for Integrating Social Media Features

• User Privacy: Handle user data with care and adhere to privacy policies.
• Error Handling: Implement robust error handling for API calls and authentication processes.
• UI/UX Consistency: Ensure a seamless integration of social features within the app’s existing design.
• Performance Optimization: Optimize network calls to prevent performance bottlenecks.

Conclusion

Integrating social media features in XML-based Android apps is a practical approach to enhance user engagement and broaden the app’s reach. By implementing social authentication, sharing, and content display, developers can create richer and more interactive user experiences, even in legacy applications. Despite the rise of Jetpack Compose, understanding how to leverage these features in traditional XML-based apps remains essential for maintaining and improving a significant portion of the Android ecosystem.