Post
Ask Question

Xamarin.Android - Logo Quiz Game

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
  1. namespace LogoQuizGame.Common  
  2. {  
  3.     public class Common  
  4.     {  
  5.         public static char[] user_submit_answer;  
  6.         public static string[] alphabet_characters = {"a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l",  
  7.             "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z", };  
  8.     }  
  9. }  
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
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:layout_width="match_parent"  
  4.     android:layout_height="match_parent">  
  5.     <LinearLayout  
  6.         android:orientation="vertical"  
  7.         android:layout_alignParentTop="true"  
  8.         android:layout_gravity="center_horizontal"  
  9.         android:layout_width="match_parent"  
  10.         android:layout_height="wrap_content">  
  11.         <ImageView  
  12.             android:id="@+id/imgLogo"  
  13.             android:layout_width="match_parent"  
  14.             android:layout_height="200dp" />  
  15.         <GridView  
  16.             android:id="@+id/gvAnswer"  
  17.             android:layout_width="match_parent"  
  18.             android:layout_height="wrap_content"  
  19.             android:layout_margin="20dp"  
  20.             android:padding="4dp"  
  21.             android:horizontalSpacing="4dp"  
  22.             android:verticalSpacing="4dp"  
  23.             android:columnWidth="40dp"  
  24.             android:numColumns="auto_fit"  
  25.             android:scrollbars="none"  
  26.             android:stretchMode="columnWidth" />  
  27.         <GridView  
  28.             android:id="@+id/gvSuggest"  
  29.             android:layout_width="match_parent"  
  30.             android:layout_height="wrap_content"  
  31.             android:layout_margin="20dp"  
  32.             android:padding="4dp"  
  33.             android:horizontalSpacing="4dp"  
  34.             android:verticalSpacing="4dp"  
  35.             android:columnWidth="40dp"  
  36.             android:numColumns="auto_fit"  
  37.             android:scrollbars="none"  
  38.             android:stretchMode="columnWidth" />  
  39.     </LinearLayout>  
  40.     <Button  
  41.         android:id="@+id/btnSubmit"  
  42.         android:text="Submit"  
  43.         android:layout_alignParentBottom="true"  
  44.         android:layout_width="match_parent"  
  45.         android:layout_height="wrap_content" />  
  46. </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
  1. using Android.Content;  
  2. using Android.Graphics;  
  3. using Android.Views;  
  4. using Android.Widget;  
  5. using System;  
  6. namespace LogoQuizGame.Adapter  
  7. {  
  8.     public class GridViewAnswerAdapter : BaseAdapter  
  9.     {  
  10.         private char[] answerCharacters;  
  11.         private Context context;  
  12.         public GridViewAnswerAdapter(char[] answerCharacters, Context context)  
  13.         {  
  14.             this.answerCharacters = answerCharacters;  
  15.             this.context = context;  
  16.         }  
  17.         public override int Count  
  18.         {  
  19.             get { return answerCharacters.Length; }  
  20.         }  
  21.         public override Java.Lang.Object GetItem(int position)  
  22.         {  
  23.             return answerCharacters[position];  
  24.         }  
  25.         public override long GetItemId(int position)  
  26.         {  
  27.             return position;  
  28.         }  
  29.         public override View GetView(int position, View convertView, ViewGroup parent)  
  30.         {  
  31.             Button button;  
  32.             if(convertView == null)  
  33.             {  
  34.                 button = new Button(context);  
  35.                 button.LayoutParameters = new GridView.LayoutParams(85, 85);  
  36.                 button.SetPadding(8, 8, 8, 8);  
  37.                 button.SetBackgroundColor(Color.DarkGray);  
  38.                 button.SetTextColor(Color.Yellow);  
  39.                 button.Text = Convert.ToString(answerCharacters[position]);  
  40.             }  
  41.             else  
  42.                 button = (Button)convertView;  
  43.                 return button;  
  44.         }  
  45.     }  
  46. }  
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
  1. using Android.Content;  
  2. using Android.Graphics;  
  3. using Android.Views;  
  4. using Android.Widget;  
  5. using System;  
  6. using System.Collections.Generic;  
  7. namespace LogoQuizGame.Adapter  
  8. {  
  9.     public class GridViewSuggestAdapter : BaseAdapter  
  10.     {  
  11.         private List<string> suggestSource;  
  12.         private Context context;  
  13.         private MainActivity mainActivity;  
  14.         public GridViewSuggestAdapter(List<string> suggestSource, Context context, MainActivity mainActivity)  
  15.         {  
  16.             this.mainActivity = mainActivity;  
  17.             this.context = context;  
  18.             this.suggestSource = suggestSource;  
  19.         }  
  20.         public override int Count  
  21.         {  
  22.             get { return suggestSource.Count; }  
  23.         }  
  24.         public override Java.Lang.Object GetItem(int position)  
  25.         {  
  26.             return position;  
  27.         }  
  28.         public override long GetItemId(int position)  
  29.         {  
  30.             return position;  
  31.         }  
  32.         public override View GetView(int position, View convertView, ViewGroup parent)  
  33.         {  
  34.             Button button;  
  35.             if (convertView == null)  
  36.             {  
  37.                 if (suggestSource[position].Equals("null"))  
  38.                 {  
  39.                     button = new Button(context);  
  40.                     button.LayoutParameters = new GridView.LayoutParams(85, 85);  
  41.                     button.SetPadding(8, 8, 8, 8);  
  42.                     button.SetBackgroundColor(Color.DarkGray);  
  43.                 }  
  44.                 else  
  45.                 {  
  46.                     button = new Button(context);  
  47.                     button.LayoutParameters = new GridView.LayoutParams(85, 85);  
  48.                     button.SetPadding(8, 8, 8, 8);  
  49.                     button.SetBackgroundColor(Color.DarkGray);  
  50.                     button.SetTextColor(Color.Yellow);  
  51.                     button.Text = Convert.ToString(suggestSource[position]);  
  52.                     button.Click += delegate   
  53.                     {  
  54.                         //Convert Char Array to String  
  55.                         string answer = new string(mainActivity.answer);  
  56.                         if (answer.Contains(suggestSource[position]))  
  57.                         {  
  58.                             char compare = suggestSource[position][0]; // get character from string  
  59.                                                                        //Similar charAt(index in java  
  60.                             for (int i = 0; i < answer.Length; i++)  
  61.                             {  
  62.                                 if (compare == answer[i])  
  63.                                     Common.Common.user_submit_answer[i] = compare;  
  64.                             }  
  65.                             //Update UI  
  66.                             GridViewAnswerAdapter answerAdapter = new GridViewAnswerAdapter(Common.Common.user_submit_answer, context);  
  67.                             mainActivity.gvAnswer.Adapter = answerAdapter;  
  68.                             answerAdapter.NotifyDataSetChanged();  
  69.                             //Remove character from suggest source  
  70.                             mainActivity.suggestSource[position] = "null";  
  71.                             mainActivity.suggestAdapter = new GridViewSuggestAdapter(mainActivity.suggestSource, context, mainActivity);  
  72.                             mainActivity.gvSuggest.Adapter = mainActivity.suggestAdapter;  
  73.                             mainActivity.suggestAdapter.NotifyDataSetChanged();  
  74.                         }  
  75.                         else  
  76.                         {  
  77.                             //Remove character from suggest source  
  78.                             mainActivity.suggestSource[position] = "null";  
  79.                             mainActivity.suggestAdapter = new GridViewSuggestAdapter(mainActivity.suggestSource, context, mainActivity);  
  80.                             mainActivity.gvSuggest.Adapter = mainActivity.suggestAdapter;  
  81.                             mainActivity.suggestAdapter.NotifyDataSetChanged();  
  82.                         }  
  83.                     };  
  84.                 }  
  85.             }  
  86.             else  
  87.                 button = (Button)convertView;  
  88.             return button;  
  89.         }  
  90.     }  
  91. }  
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
  1. using Android.App;  
  2. using Android.Widget;  
  3. using Android.OS;  
  4. using System;  
  5. using System.Collections.Generic;  
  6. using LogoQuizGame.Adapter;  
  7. using System.Linq;  
  8. namespace LogoQuizGame  
  9. {  
  10.     [Activity(Label = "LogoQuizGame", MainLauncher = true, Theme ="@style/Theme.AppCompat.Light.NoActionBar")]  
  11.     public class MainActivity : Activity  
  12.     {  
  13.         public List<string> suggestSource = new List<string>();  
  14.         public GridViewAnswerAdapter answerAdapter;  
  15.         public GridViewSuggestAdapter suggestAdapter;  
  16.         public Button btnSubmit;  
  17.         public GridView gvAnswer, gvSuggest;  
  18.         public ImageView imgLogo;  
  19.         int[] img_list =   
  20.         {  
  21.             Resource.Drawable.behance,  
  22.             Resource.Drawable.android,  
  23.             Resource.Drawable.amazon,  
  24.             Resource.Drawable.bing,  
  25.             Resource.Drawable.box,  
  26.             Resource.Drawable.buffer,  
  27.             Resource.Drawable.creativemarket,  
  28.             Resource.Drawable.delicious,  
  29.             Resource.Drawable.deviantart,  
  30.             Resource.Drawable.dribbble,  
  31.             Resource.Drawable.dropbox,  
  32.             Resource.Drawable.envato,  
  33.             Resource.Drawable.etsy,  
  34.             Resource.Drawable.facebook,  
  35.             Resource.Drawable.flickr,  
  36.             Resource.Drawable.foursquare,  
  37.             Resource.Drawable.googleplus,  
  38.             Resource.Drawable.hi5,  
  39.             Resource.Drawable.howcast,  
  40.             Resource.Drawable.html5,  
  41.             Resource.Drawable.instagram,  
  42.             Resource.Drawable.kickstarter,  
  43.             Resource.Drawable.linkedin,  
  44.             Resource.Drawable.medium,  
  45.             Resource.Drawable.myspace,  
  46.             Resource.Drawable.path,  
  47.             Resource.Drawable.paypal,  
  48.             Resource.Drawable.periscope,  
  49.             Resource.Drawable.pinterest,  
  50.             Resource.Drawable.plaxo,  
  51.             Resource.Drawable.quora,  
  52.             Resource.Drawable.reddit,  
  53.             Resource.Drawable.scribd,  
  54.             Resource.Drawable.shutterstock,  
  55.             Resource.Drawable.skype,  
  56.             Resource.Drawable.snapchat,  
  57.             Resource.Drawable.soundcloud,  
  58.             Resource.Drawable.spotify,  
  59.             Resource.Drawable.stumbleupon,  
  60.             Resource.Drawable.trello,  
  61.             Resource.Drawable.tumblr,  
  62.             Resource.Drawable.twitter,  
  63.             Resource.Drawable.vimeo,  
  64.             Resource.Drawable.vine,  
  65.             Resource.Drawable.whatsapp,  
  66.             Resource.Drawable.wikipedia,  
  67.             Resource.Drawable.wordpress,  
  68.             Resource.Drawable.yelp,  
  69.             Resource.Drawable.youtube  
  70.         };  
  71.         public char[] answer;  
  72.         string correct_answer;  
  73.         protected override void OnCreate(Bundle savedInstanceState)  
  74.         {  
  75.             base.OnCreate(savedInstanceState);  
  76.             // Set our view from the "main" layout resource  
  77.             SetContentView(Resource.Layout.Main);  
  78.             InitViews();  
  79.         }  
  80.         private void InitViews()  
  81.         {  
  82.             gvAnswer = FindViewById<GridView>(Resource.Id.gvAnswer);  
  83.             gvSuggest = FindViewById<GridView>(Resource.Id.gvSuggest);  
  84.             imgLogo = FindViewById<ImageView>(Resource.Id.imgLogo);  
  85.             SetupList();  
  86.             btnSubmit = FindViewById<Button>(Resource.Id.btnSubmit);  
  87.             btnSubmit.Click += delegate   
  88.             {  
  89.                 //Convert char Array to string  
  90.                 string result = new string(Common.Common.user_submit_answer);  
  91.                 if (result.Equals(correct_answer))  
  92.                 {  
  93.                     Toast.MakeText(ApplicationContext, "Finish ! This is"+result.ToUpper(), ToastLength.Short).Show();  
  94.                     //Result   
  95.                     Common.Common.user_submit_answer = new char[correct_answer.Length];  
  96.                     //Update UI  
  97.                     GridViewAnswerAdapter answerAdapter = new GridViewAnswerAdapter(SetupNullList(), this);  
  98.                     gvAnswer.Adapter = answerAdapter;  
  99.                     answerAdapter.NotifyDataSetChanged();  
  100.                     GridViewSuggestAdapter suggestAdapter = new GridViewSuggestAdapter(suggestSource, this,this);  
  101.                     gvSuggest.Adapter = suggestAdapter;  
  102.                     suggestAdapter.NotifyDataSetChanged();  
  103.                     SetupList();  
  104.                 }  
  105.                 else  
  106.                     Toast.MakeText(this, "Incorrect!!!", ToastLength.Short).Show();  
  107.             };  
  108.         }  
  109.         private char[] SetupNullList()  
  110.         {  
  111.             char[] result = new char[answer.Length];  
  112.             return result;  
  113.         }  
  114.         private void SetupList()  
  115.         {  
  116.             //Random Logo  
  117.             Random random = new Random();  
  118.             int imageSelected = img_list[random.Next(img_list.Length)];  
  119.             imgLogo.SetImageResource(imageSelected);  
  120.             correct_answer = Resources.GetResourceName(imageSelected);  
  121.             correct_answer = correct_answer.Substring(correct_answer.LastIndexOf("/") + 1);  
  122.             answer = correct_answer.ToCharArray();  
  123.             Common.Common.user_submit_answer = new char[answer.Length];  
  124.             //Add Answer Character to List  
  125.             suggestSource.Clear();  
  126.             foreach (char item in answer)  
  127.             {  
  128.                 suggestSource.Add(Convert.ToString(item));  
  129.             }  
  130.             //Random characters from alphabet list and add to list  
  131.             for (int i = answer.Length; i < answer.Length * 2; i++)  
  132.                 suggestSource.Add(Common.Common.alphabet_characters[random.Next(Common.Common.alphabet_characters.Length)]);  
  133.             //Sort List  
  134.             suggestSource = suggestSource.OrderBy(x => Guid.NewGuid()).ToList();  
  135.             //Set Adapter for Grid View  
  136.             answerAdapter = new GridViewAnswerAdapter(SetupNullList(), this);  
  137.             suggestAdapter = new GridViewSuggestAdapter(suggestSource, this, this);  
  138.             answerAdapter.NotifyDataSetChanged();  
  139.             suggestAdapter.NotifyDataSetChanged();  
  140.             gvAnswer.Adapter = answerAdapter;  
  141.             gvSuggest.Adapter = suggestAdapter;  
  142.         }  
  143.     }  
  144. }  
Finally, we have done our logo quiz game. Just rebuild and run the project. You will have atheresult as shown below.
 
Output
 
 
Summary
 
This was the process of creating an logo quiz game app in Xamarin.Android, using Visual Studio. Please share your comments and feedback.


Similar Articles