Over a million developers have joined DZone.

Android Tutorial: Game Menu with a Custom Font

DZone's Guide to

Android Tutorial: Game Menu with a Custom Font

· Mobile Zone ·
Free Resource

Android game development is HOT! I really get a lot of mails / requests for more game oriented tutorial. So here is one just for all you starting Android game developers out there! This post will explain how to make a simple game menu in Android. As always the source code is in the bottom! Want more about game development? There is a tag that holds all posts about game development

Here is a list with features that the finished menu will have:

  • a nice background
  • a custom font
  • a style for making clean menu buttons
  • a sub-menu with settings for your game
  • settings will be saved in persistent storage ( with SharedPreferences )

Here is a picture of the complete menu.



First ill show you guys (and galls) the layout. Because we want to have a nice background we use a RelativeLayout to make sure that we can have overlapping "Layers". The layout is pretty clean.

<?xml version="1.0" encoding="utf-8"?><RelativeLayout  xmlns:android="http://schemas.android.com/apk/res/android"  android:layout_width="fill_parent"  android:layout_height="fill_parent">      <ImageViewandroid:src="@drawable/menuback"android:layout_width="fill_parent"android:layout_height="fill_parent" />      <LinearLayoutandroid:orientation="vertical"android:layout_margin="10dp"android:layout_width="fill_parent"android:layout_height="fill_parent" >    <TextView    android:text="START GAME"    android:layout_gravity="right"        android:id="@+id/start"style="@style/MenuFont" />    <TextView    android:text="QUICK GAME"    android:id="@+id/quick"style="@style/MenuFont" />    <TextView    android:text="SETTINGS"    android:id="@+id/settings"style="@style/MenuFont" />    <TextView        android:text="ABOUT"        android:id="@+id/about"style="@style/MenuFont" />  <TextView        android:text="EXIT"        android:id="@+id/exit"style="@style/SystemFont" />   </LinearLayout></RelativeLayout>

As you might have noticed; all the TextViews have a style defined. There are 2 styles in this project both very alike. In the style we define the attributes that all the buttons will have. this makes sure that when we change 1 button we change all buttons!

Here is the style definition of the MenuFont:

<style name="MenuFont"><item name="android:textSize">25sp</item><item name="android:textColor">#FFFFFF00</item><item name="android:textStyle">bold</item><item name="android:clickable">true</item><item name="android:layout_weight">1</item><item name="android:gravity">right|center</item><item name="android:layout_width">fill_parent</item><item name="android:layout_height">wrap_content</item></style>

Now we have a layout plus a style for the buttons. Now we only need to implement our custom font and the design for the menu is done.


Implementing a custom font is pretty simple. Ill layout the things we need to do.

  1. We search the web for a font
  2. Place that in our assets folder
  3. Create a TypeFace in our code
  4. Apply the TypeFace to the TextViews

I guess you can figure out the 1st and the 2nd on the list yourself. So ill help with the code.

Here is how you bind a custom font to a TextView:

Typeface tf = Typeface.createFromAsset(getAssets(),"data/fonts/floral.ttf");TextView tv = (TextView) findViewById(R.id.start);tv.setTypeface(tf);

Yes, its that simple!

We want to make sure that the user doesn't need to set the settings every time. Our ´game´ need to save it somewhere save! To do this we will use SharedPreferences. Here is a bit of information about them (from the android official docs):

The SharedPreferences class provides a general framework that allows you to save and retrieve persistent key-value pairs of primitive data types. You can useSharedPreferences to save any primitive data: booleans, floats, ints, longs, and strings. This data will persist across user sessions (even if your application is killed).

Its clearly the right solution to the problem. Here is the code implementation. First we need to get the settings. If the value is not there we can specify a default value:

private boolean[] settingsHolder = new boolean[4];private void getSettings() {SharedPreferences settings = getSharedPreferences(MenuActivity.PREFS_NAME, 0);settingsHolder[0] = settings.getBoolean("sound", true);settingsHolder[1] = settings.getBoolean("music", true);settingsHolder[2] = settings.getBoolean("vibrate", true);settingsHolder[3] = settings.getBoolean("graphics", true);}

the boolean array will be the place to keep our settings. In our game we can call upon that. Next up is placing / overwriting the settings. We will do that in our onClickListener in the settings menu. Here is that piece of code!

@Overridepublic void onClick(View v) {SharedPreferences settings = getSharedPreferences(MenuActivity.PREFS_NAME, 0);SharedPreferences.Editor editor = settings.edit();switch(v.getId()){case R.id.sound:editor.putBoolean("sound", !settingsHolder[0]);break;case R.id.music:editor.putBoolean("music", !settingsHolder[1]);break;case R.id.vibrate:editor.putBoolean("vibrate", !settingsHolder[2]);break;case R.id.graphics:editor.putBoolean("graphics", !settingsHolder[3]);break;case R.id.back:finish();break;}editor.commit();getSettings();setText();}

Well thats all there is to it! For a deeper dig you can go through the source code.

For more information you can check out the original article

java ,mobile ,android ,design ,gaming

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}