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.
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.
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)
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;
- }
- }
- }
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.
0 Comments:
Post a Comment