Android Image Quiz App with Firebase and AdMob Integrated

Introduction

Welcome to the Android Image Quiz App tutorial! In this tutorial, we will create a comprehensive image-based quiz app that integrates Firebase for user authentication and data storage, and AdMob for monetization. The app will feature a simple game-like interface where users can answer trivia questions by selecting images. We will also implement features such as scoring, level progression, and social sharing.

Throughout this tutorial, we will cover the following topics:

1. Setting up the project structure and dependencies
2. Creating the game interface and image selection
3. Implementing Firebase for user authentication and data storage
4. Creating a quiz engine to generate questions and keep track of scores
5. Integrating AdMob for displaying ads
6. Testing and debugging the app

By the end of this tutorial, you will have a fully functional Android image quiz app with Firebase and AdMob integrated.

Prerequisites

Before starting this tutorial, make sure you have the following:

1. Android Studio installed on your computer
2. A basic understanding of Java and Android development
3. A Firebase account and project set up
4. An AdMob account and app set up

Setting up the project structure and dependencies

Create a new Android project in Android Studio and name it "ImageQuizApp". Make sure to select "Empty Activity" as the project template.

Add the following dependencies to your project's build.gradle file:

dependencies {
    implementation 'com.google.firebase:firebase-auth:21.0.3'
    implementation 'com.google.firebase:firebase-firestore:24.0.0'
    implementation 'com.google.firebase:firebase-messaging:21.0.0'
    implementation 'com.google.android.gms:play-services-ads:20.0.0'
    implementation 'androidx.recyclerview:recyclerview:1.2.0'
    implementation 'androidx.cardview:cardview:1.0.0'
}

These dependencies include:

• Firebase Authentication
• Firebase Firestore for data storage
• Firebase Cloud Messaging for push notifications
• AdMob for displaying ads
• RecyclerView and CardView for the game interface

Creating the game interface and image selection

Create a new layout file called "quiz_layout.xml" 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">

    <ImageView
        android:id="@+id/image_question"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:scaleType="centerCrop" />

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recycler_view_answers"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager" />

    <Button
        android:id="@+id/button_submit"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Submit" />

</LinearLayout>

This layout file consists of an ImageView for displaying the question image, a RecyclerView for displaying the answer options, and a Button for submitting the answer.

Create a new adapter class called "AnswerAdapter.java" and add the following code:

public class AnswerAdapter extends RecyclerView.Adapter<AnswerAdapter.ViewHolder> {
    private List<String> answers;

    public AnswerAdapter(List<String> answers) {
        this.answers = answers;
    }

    @NonNull
    @Override
    public ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.answer_item, parent, false);
        return new ViewHolder(view);
    }

    @Override
    public void onBindViewHolder(@NonNull ViewHolder holder, int position) {
        holder.answerTextView.setText(answers.get(position));
    }

    @Override
    public int getItemCount() {
        return answers.size();
    }

    public class ViewHolder extends RecyclerView.ViewHolder {
        public TextView answerTextView;

        public ViewHolder(View itemView) {
            super(itemView);
            answerTextView = itemView.findViewById(R.id.text_view_answer);
        }
    }
}

This adapter class will display the answer options in the RecyclerView.

Create a new item layout file called "answer_item.xml" and add the following code:

<?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="wrap_content"
    android:orientation="vertical">

    <TextView
        android:id="@+id/text_view_answer"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textSize="16sp"
        android:textStyle="bold" />

</LinearLayout>

This item layout file consists of a TextView for displaying the answer options.

Implementing Firebase for user authentication and data storage

Create a new class called "FirebaseAuthHelper.java" and add the following code:

public class FirebaseAuthHelper {
    private FirebaseAuth mAuth;

    public FirebaseAuthHelper(Context context) {
        mAuth = FirebaseAuth.getInstance(context);
    }

    public void signInAnonymously() {
        mAuth.signInAnonymously()
               .addOnCompleteListener(context, new OnCompleteListener<AuthResult>() {
                    @Override
                    public void onComplete(@NonNull Task<AuthResult> task) {
                        if (task.isSuccessful()) {
                            // User signed in anonymously
                        } else {
                            // Sign in failed
                        }
                    }
                });
    }

    public void storeScore(int score) {
        mAuth.getCurrentUser().getFirestore().collection("scores").document(mAuth.getCurrentUser().getUid()).set(new Score(score));
    }

    public int getScore() {
        return mAuth.getCurrentUser().getFirestore().collection("scores").document(mAuth.getCurrentUser().getUid()).get().getResult().getInteger("score");
    }
}

This class provides methods for signing in anonymously, storing the user's score, and retrieving the user's score.

Creating a quiz engine to generate questions and keep track of scores

Create a new class called "QuizEngine.java" and add the following code:

public class QuizEngine {
    private List<Question> questions;
    private int currentQuestionIndex;
    private int score;

    public QuizEngine() {
        questions = new ArrayList<>();
        currentQuestionIndex = 0;
        score = 0;
    }

    public void addQuestion(Question question) {
        questions.add(question);
    }

    public Question getCurrentQuestion() {
        return questions.get(currentQuestionIndex);
    }

    public void submitAnswer(String answer) {
        if (answer.equals(getCurrentQuestion().getCorrectAnswer())) {
            score++;
        }
        currentQuestionIndex++;
        if (currentQuestionIndex >= questions.size()) {
            currentQuestionIndex = 0;
        }
    }

    public int getScore() {
        return score;
    }
}

This class provides methods for adding questions to the quiz, getting the current question, submitting an answer, and getting the current score.

Integrating AdMob for displaying ads

Create a new class called "AdHelper.java" and add the following code:

public class AdHelper {
    private AdView adView;

    public AdHelper(Context context) {
        adView = new AdView(context);
        adView.setAdSize(AdSize.BANNER);
        adView.setAdUnitId("your_ad_unit_id");
    }

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

    public void showAd() {
        if (adView.isLoading()) {
            adView.setVisibility(View.VISIBLE);
        } else {
            adView.setVisibility(View.GONE);
        }
    }
}

This class provides methods for loading and displaying AdMob ads.

Testing and debugging the app

Run the app on an emulator or physical device and test the quiz functionality. Make sure to handle errors and exceptions properly.

That's it! You have now completed the tutorial on creating an Android image quiz app with Firebase and AdMob integrated.