Xamarin.Android - Logo Quiz Game

Ahsan Siddique
6y
1.7k
0
3

Article

Introduction

In this article, we shall learn how to build a Logo quiz game in Xamarin.Android. A logo quiz game is a game full of fun; it entails identifying logos of different social media apps and giving out the logo quiz answers. The main objective of this game is to correctly identify different logos of different social media apps and provide the correct social media app name as the logo quiz answer. Logo quiz answers are dependent on the skills of the gamer, hence this game tests how familiar you are with social media app logos. Logo quiz answers are simple and more often the answers come from well-known manufacturers such as Microsoft, Nokia, Google and many more.

Logo quiz games usually offers some hints to the logo quiz answers and if someone is unable to correctly identify the logo and give out the correct logo quiz answer then he may take a look at the website for some of the game answers or he may consult friends on social media for answers.

The prerequisites

Android Support Library v7 AppCompat
Social Media Apps Logo Images

The steps given below are required to be followed in order to create a Logo quiz game in Xamarin.Android, using Visual Studio.

Step 1 - Create Android Project

Create your Android solution in Visual Studio or Xamarin Studio. Select Android and from list choose Android Blank App give it a name like, LogoQuizGame.

Step 2 - Add Android Support v7 AppCompat Library

First of all, in References add a reference Android.Support.v7. AppCompat using NuGet Package Manager, as shown below.

Step 3 - Add Social Media Logo Images

Open Solution Explorer -> Project Name -> Resources-> Drawable. All social media logo images paste into drawable folder.

Step 4 - Writing Common Class

Next, go to Solution Explorer-> Project Name and right-click. Select Add -> New Item-> Class. Give it a name like, Common.cs and write the following code.

(File Name: Common.cs)

C# Code

namespace LogoQuizGame.Common
{
public class Common
{
public static char[] user_submit_answer;
public static string[] alphabet_characters = {"a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l",
"m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z", };
}
}

Step 5 - Main Layout

Open Solution Explorer-> Project Name-> Resources-> Layout-> Main.axml. Open this main layout file and add the following code.

(File Name: Main.axml , Folder Name: Layout)

XML Code

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:orientation="vertical"
android:layout_alignParentTop="true"
android:layout_gravity="center_horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="@+id/imgLogo"
android:layout_width="match_parent"
android:layout_height="200dp" />
<GridView
android:id="@+id/gvAnswer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="20dp"
android:padding="4dp"
android:horizontalSpacing="4dp"
android:verticalSpacing="4dp"
android:columnWidth="40dp"
android:numColumns="auto_fit"
android:scrollbars="none"
android:stretchMode="columnWidth" />
<GridView
android:id="@+id/gvSuggest"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="20dp"
android:padding="4dp"
android:horizontalSpacing="4dp"
android:verticalSpacing="4dp"
android:columnWidth="40dp"
android:numColumns="auto_fit"
android:scrollbars="none"
android:stretchMode="columnWidth" />
</LinearLayout>
<Button
android:id="@+id/btnSubmit"
android:text="Submit"
android:layout_alignParentBottom="true"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</RelativeLayout>

Step 6 - Writing GridViewAnswerAdapter Class

Before you go further, you need to write your GridViewAnswerAdapter class. For this, go to Solution Explorer-> Project Name and right-click. Select Add -> New Item-> Class. Give it a name like GridViewAnswerAdapter.cs and write the following code with appropriate namespaces.

(File Name: GridViewAnswerAdapter.cs)

C# Code

using Android.Content;
using Android.Graphics;
using Android.Views;
using Android.Widget;
using System;
namespace LogoQuizGame.Adapter
{
public class GridViewAnswerAdapter : BaseAdapter
{
private char[] answerCharacters;
private Context context;
public GridViewAnswerAdapter(char[] answerCharacters, Context context)
{
this.answerCharacters = answerCharacters;
this.context = context;
}
public override int Count
{
get { return answerCharacters.Length; }
}
public override Java.Lang.Object GetItem(int position)
{
return answerCharacters[position];
}
public override long GetItemId(int position)
{
return position;
}
public override View GetView(int position, View convertView, ViewGroup parent)
{
Button button;
if(convertView == null)
{
button = new Button(context);
button.LayoutParameters = new GridView.LayoutParams(85, 85);
button.SetPadding(8, 8, 8, 8);
button.SetBackgroundColor(Color.DarkGray);
button.SetTextColor(Color.Yellow);
button.Text = Convert.ToString(answerCharacters[position]);
}
else
button = (Button)convertView;
return button;
}
}
}

Step 7 - Writing GridViewSuggestAdapter Class

Similarly, add a new class - GridViewSuggestAdapter.cs and add the following code with appropriate namespaces.

(File Name: GridViewSuggestAdapter.cs)

C# Code

using Android.Content;
using Android.Graphics;
using Android.Views;
using Android.Widget;
using System;
using System.Collections.Generic;
namespace LogoQuizGame.Adapter
{
public class GridViewSuggestAdapter : BaseAdapter
{
private List<string> suggestSource;
private Context context;
private MainActivity mainActivity;
public GridViewSuggestAdapter(List<string> suggestSource, Context context, MainActivity mainActivity)
{
this.mainActivity = mainActivity;
this.context = context;
this.suggestSource = suggestSource;
}
public override int Count
{
get { return suggestSource.Count; }
}
public override Java.Lang.Object GetItem(int position)
{
return position;
}
public override long GetItemId(int position)
{
return position;
}
public override View GetView(int position, View convertView, ViewGroup parent)
{
Button button;
if (convertView == null)
{
if (suggestSource[position].Equals("null"))
{
button = new Button(context);
button.LayoutParameters = new GridView.LayoutParams(85, 85);
button.SetPadding(8, 8, 8, 8);
button.SetBackgroundColor(Color.DarkGray);
}
else
{
button = new Button(context);
button.LayoutParameters = new GridView.LayoutParams(85, 85);
button.SetPadding(8, 8, 8, 8);
button.SetBackgroundColor(Color.DarkGray);
button.SetTextColor(Color.Yellow);
button.Text = Convert.ToString(suggestSource[position]);
button.Click += delegate
{
//Convert Char Array to String
string answer = new string(mainActivity.answer);
if (answer.Contains(suggestSource[position]))
{
char compare = suggestSource[position][0]; // get character from string
//Similar charAt(index in java
for (int i = 0; i < answer.Length; i++)
{
if (compare == answer[i])
Common.Common.user_submit_answer[i] = compare;
}
//Update UI
GridViewAnswerAdapter answerAdapter = new GridViewAnswerAdapter(Common.Common.user_submit_answer, context);
mainActivity.gvAnswer.Adapter = answerAdapter;
answerAdapter.NotifyDataSetChanged();
//Remove character from suggest source
mainActivity.suggestSource[position] = "null";
mainActivity.suggestAdapter = new GridViewSuggestAdapter(mainActivity.suggestSource, context, mainActivity);
mainActivity.gvSuggest.Adapter = mainActivity.suggestAdapter;
mainActivity.suggestAdapter.NotifyDataSetChanged();
}
else
{
//Remove character from suggest source
mainActivity.suggestSource[position] = "null";
mainActivity.suggestAdapter = new GridViewSuggestAdapter(mainActivity.suggestSource, context, mainActivity);
mainActivity.gvSuggest.Adapter = mainActivity.suggestAdapter;
mainActivity.suggestAdapter.NotifyDataSetChanged();
}
};
}
}
else
button = (Button)convertView;
return button;
}
}
}

Step 8 - Main Activity Class

Now, go to Solution Explorer-> Project Name-> MainActivity and add the following code with appropriate namespaces.

(FileName: MainActivity)

C# Code

using Android.App;
using Android.Widget;
using Android.OS;
using System;
using System.Collections.Generic;
using LogoQuizGame.Adapter;
using System.Linq;
namespace LogoQuizGame
{
[Activity(Label = "LogoQuizGame", MainLauncher = true, Theme ="@style/Theme.AppCompat.Light.NoActionBar")]
public class MainActivity : Activity
{
public List<string> suggestSource = new List<string>();
public GridViewAnswerAdapter answerAdapter;
public GridViewSuggestAdapter suggestAdapter;
public Button btnSubmit;
public GridView gvAnswer, gvSuggest;
public ImageView imgLogo;
int[] img_list =
{
Resource.Drawable.behance,
Resource.Drawable.android,
Resource.Drawable.amazon,
Resource.Drawable.bing,
Resource.Drawable.box,
Resource.Drawable.buffer,
Resource.Drawable.creativemarket,
Resource.Drawable.delicious,
Resource.Drawable.deviantart,
Resource.Drawable.dribbble,
Resource.Drawable.dropbox,
Resource.Drawable.envato,
Resource.Drawable.etsy,
Resource.Drawable.facebook,
Resource.Drawable.flickr,
Resource.Drawable.foursquare,
Resource.Drawable.googleplus,
Resource.Drawable.hi5,
Resource.Drawable.howcast,
Resource.Drawable.html5,
Resource.Drawable.instagram,
Resource.Drawable.kickstarter,
Resource.Drawable.linkedin,
Resource.Drawable.medium,
Resource.Drawable.myspace,
Resource.Drawable.path,
Resource.Drawable.paypal,
Resource.Drawable.periscope,
Resource.Drawable.pinterest,
Resource.Drawable.plaxo,
Resource.Drawable.quora,
Resource.Drawable.reddit,
Resource.Drawable.scribd,
Resource.Drawable.shutterstock,
Resource.Drawable.skype,
Resource.Drawable.snapchat,
Resource.Drawable.soundcloud,
Resource.Drawable.spotify,
Resource.Drawable.stumbleupon,
Resource.Drawable.trello,
Resource.Drawable.tumblr,
Resource.Drawable.twitter,
Resource.Drawable.vimeo,
Resource.Drawable.vine,
Resource.Drawable.whatsapp,
Resource.Drawable.wikipedia,
Resource.Drawable.wordpress,
Resource.Drawable.yelp,
Resource.Drawable.youtube
};
public char[] answer;
string correct_answer;
protected override void OnCreate(Bundle savedInstanceState)
{
base.OnCreate(savedInstanceState);
// Set our view from the "main" layout resource
SetContentView(Resource.Layout.Main);
InitViews();
}
private void InitViews()
{
gvAnswer = FindViewById<GridView>(Resource.Id.gvAnswer);
gvSuggest = FindViewById<GridView>(Resource.Id.gvSuggest);
imgLogo = FindViewById<ImageView>(Resource.Id.imgLogo);
SetupList();
btnSubmit = FindViewById<Button>(Resource.Id.btnSubmit);
btnSubmit.Click += delegate
{
//Convert char Array to string
string result = new string(Common.Common.user_submit_answer);
if (result.Equals(correct_answer))
{
Toast.MakeText(ApplicationContext, "Finish ! This is"+result.ToUpper(), ToastLength.Short).Show();
//Result
Common.Common.user_submit_answer = new char[correct_answer.Length];
//Update UI
GridViewAnswerAdapter answerAdapter = new GridViewAnswerAdapter(SetupNullList(), this);
gvAnswer.Adapter = answerAdapter;
answerAdapter.NotifyDataSetChanged();
GridViewSuggestAdapter suggestAdapter = new GridViewSuggestAdapter(suggestSource, this,this);
gvSuggest.Adapter = suggestAdapter;
suggestAdapter.NotifyDataSetChanged();
SetupList();
}
else
Toast.MakeText(this, "Incorrect!!!", ToastLength.Short).Show();
};
}
private char[] SetupNullList()
{
char[] result = new char[answer.Length];
return result;
}
private void SetupList()
{
//Random Logo
Random random = new Random();
int imageSelected = img_list[random.Next(img_list.Length)];
imgLogo.SetImageResource(imageSelected);
correct_answer = Resources.GetResourceName(imageSelected);
correct_answer = correct_answer.Substring(correct_answer.LastIndexOf("/") + 1);
answer = correct_answer.ToCharArray();
Common.Common.user_submit_answer = new char[answer.Length];
//Add Answer Character to List
suggestSource.Clear();
foreach (char item in answer)
{
suggestSource.Add(Convert.ToString(item));
}
//Random characters from alphabet list and add to list
for (int i = answer.Length; i < answer.Length * 2; i++)
suggestSource.Add(Common.Common.alphabet_characters[random.Next(Common.Common.alphabet_characters.Length)]);
//Sort List
suggestSource = suggestSource.OrderBy(x => Guid.NewGuid()).ToList();
//Set Adapter for Grid View
answerAdapter = new GridViewAnswerAdapter(SetupNullList(), this);
suggestAdapter = new GridViewSuggestAdapter(suggestSource, this, this);
answerAdapter.NotifyDataSetChanged();
suggestAdapter.NotifyDataSetChanged();
gvAnswer.Adapter = answerAdapter;
gvSuggest.Adapter = suggestAdapter;
}
}
}