Android WhatsApp Sticker app (Offline) with AdMob

Introduction

In recent years, the popularity of messaging apps has grown significantly, and WhatsApp has emerged as one of the most widely used messaging platforms. To make communication more engaging and fun, WhatsApp introduced the concept of stickers. Stickers are small images or animations that can be sent and received within the app to convey emotions and feelings. In this tutorial, we will explore how to create an offline Android WhatsApp sticker app with AdMob integration.

Why Create an Offline WhatsApp Sticker App?

Before we dive into the tutorial, let's understand why creating an offline WhatsApp sticker app is beneficial:

1. Offline functionality: Users can access and use your stickers even without an internet connection, making it a great option for users with limited data plans or in areas with poor internet connectivity.
2. Reduced data usage: By storing stickers locally, users can reduce their data usage, which is particularly important for users with limited data plans.
3. Increased user engagement: An offline sticker app can increase user engagement by providing a seamless experience, allowing users to access and use stickers without any interruptions.

Prerequisites

Before we begin, make sure you have the following:

1. Android Studio: A popular integrated development environment (IDE) for Android app development.
2. Java or Kotlin: A programming language for Android app development.
3. AdMob account: A Google-owned platform for monetizing mobile apps with ads.
4. WhatsApp sticker format: Familiarity with the WhatsApp sticker format, which is a PNG file with a specific size and compression.

Step 1: Create a New Android Project

Open Android Studio and create a new project. Choose "Empty Activity" as the project template and name your project, for example, "WhatsApp Sticker App".

Step 2: Add the WhatsApp Sticker Format

Create a new folder named "sticker" inside the "res" folder in your project structure. Inside the "sticker" folder, create PNG files with the WhatsApp sticker format (1080x1080 pixels, 100KB or less). You can use any image editing software to create these stickers.

Step 3: Add AdMob Integration

To integrate AdMob into your app, follow these steps:

1. Create a new file named "admob_config.xml" in the "res/values" folder and add the following code:

   <?xml version="1.0" encoding="utf-8"?>
   <resources>
   <string name="app_id">YOUR_APP_ID</string>
   <string name="ad_unit_id">YOUR_AD_UNIT_ID</string>
   </resources>

   Replace "YOUR_APP_ID" and "YOUR_AD_UNIT_ID" with your actual AdMob app ID and ad unit ID.

2. Create a new Java class named "AdmobHelper" and add the following code:

   
   import android.content.Context;
   import android.os.Bundle;
   import com.google.android.gms.ads.AdRequest;
   import com.google.android.gms.ads.AdView;
   import com.google.android.gms.ads.MobileAds;

public class AdmobHelper { private Context context; private AdView adView;

public AdmobHelper(Context context) {
    this.context = context;
    MobileAds.initialize(context, "YOUR_APP_ID");
    adView = new AdView(context);
    adView.setAdUnitId("YOUR_AD_UNIT_ID");
}

public void loadAd() {
    AdRequest adRequest = new AdRequest.Builder().build();
    adView.loadAd(adRequest);
}

public void showAd() {
    if (adView.isLoaded()) {
        adView.show();
    }
}

}

3. In your activity's onCreate() method, initialize the AdmobHelper instance and load the ad:
```java
public class MainActivity extends AppCompatActivity {
    private AdmobHelper admobHelper;

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

        admobHelper = new AdmobHelper(this);
        admobHelper.loadAd();
    }
}

Step 4: Create a Sticker Viewer Activity

Create a new Java class named "StickerViewerActivity" and add the following code:

import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ListView;
import android.widget.Toast;

import androidx.appcompat.app.AppCompatActivity;

import java.util.ArrayList;
import java.util.List;

public class StickerViewerActivity extends AppCompatActivity {
    private ListView stickerListView;
    private List<String> stickerList = new ArrayList<>();

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

        stickerListView = findViewById(R.id.sticker_list_view);

        // Load stickers from the "sticker" folder
        File stickerFolder = new File(getAssets().getAbsolutePath(), "sticker");
        File[] stickerFiles = stickerFolder.listFiles();
        for (File stickerFile : stickerFiles) {
            stickerList.add(stickerFile.getName());
        }

        // Set the adapter for the sticker list view
        stickerListView.setAdapter(new ArrayAdapter<>(this, android.R.layout.simple_list_item_1, stickerList));

        // Set the item click listener for the sticker list view
        stickerListView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
                // Send the selected sticker to WhatsApp
                String stickerName = stickerList.get(position);
                Intent intent = new Intent(Intent.ACTION_SEND);
                intent.setType("image/png");
                intent.putExtra(Intent.EXTRA_STREAM, Uri.parse("android.resource://" + getPackageName() + "/drawable/" + stickerName));
                startActivity(Intent.createChooser(intent, "Send to WhatsApp"));
            }
        });
    }
}

Step 5: Add the Sticker Viewer Activity to the Navigation Drawer

Open the "activity_main.xml" layout file and add the following code to the navigation drawer:

<?xml version="1.0" encoding="utf-8"?>
<androidx.drawerlayout.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!-- Main content -->
    <FrameLayout
        android:id="@+id/container"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <!-- Navigation drawer -->
    <LinearLayout
        android:id="@+id/drawer"
        android:layout_width="240dp"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:layout_gravity="start">

        <!-- Sticker viewer activity -->
        <androidx.appcompat.widget.AppCompatTextView
            android:id="@+id/sticker_viewer"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Sticker Viewer"
            android:textSize="16sp"
            android:textStyle="bold"
            android:layout_marginTop="16dp"
            android:layout_marginBottom="16dp"
            android:paddingLeft="16dp"
            android:paddingRight="16dp"
            android:background="@drawable/list_item_background"
            android:clickable="true"
            android:focusable="true"
            android:onClick="openStickerViewerActivity"/>

    </LinearLayout>

</androidx.drawerlayout.widget.DrawerLayout>

Step 6: Open the Sticker Viewer Activity

Create a new Java method named "openStickerViewerActivity" and add the following code:

public void openStickerViewerActivity(View view) {
    Intent intent = new Intent(this, StickerViewerActivity.class);
    startActivity(intent);
}

Step 7: Add AdMob Ads to the Sticker Viewer Activity

Open the "activity_sticker_viewer.xml" layout file and add the following code:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    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"
    android:orientation="vertical">

    <!-- Sticker list view -->
    <ListView
        android:id="@+id/sticker_list_view"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" />

    <!-- AdMob ad view -->
    <com.google.android.gms.ads.AdView
        android:id="@+id/ad_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:adSize="BANNER"
        app:adUnitId="YOUR_AD_UNIT_ID" />

</LinearLayout>

Step 8: Load AdMob Ads in the Sticker Viewer Activity

Open the "StickerViewerActivity.java" file and add the following code:

public class StickerViewerActivity extends AppCompatActivity {
    //...

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

        //...

        AdmobHelper admobHelper = new AdmobHelper(this);
        admobHelper.loadAd();
    }
}

Conclusion

In this tutorial, we have created an offline Android WhatsApp sticker app with AdMob integration. We have learned how to create a sticker viewer activity, load stickers from the "sticker" folder, and integrate AdMob ads into the app. With this app, users can access and use stickers even without an internet connection, reducing data usage and increasing user engagement.