Developing a clothing game for Android


SDK Version: 
M3
What the hell am I doing? Developing a clothing game for Android...

Last time I was really bored, i tried to make a simple clothing game for android.

Here is the tutorial:

On the first google image page of results for android there is a cute robot image:


In photoshop you can use the slice tool to cutting this robot into slices:


After that save the image using the 'Save for Web...' option. Here you should set every silice's settings like this:

After that create a new android project in eclipse, then copy thoose images into drawable folder.

Modify the main.xml like this:

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout android:id="@+id/LinearLayout01"; xmlns:android="http://schemas.android.com/apk/res/android"
  3.  
  4. android:orientation="vertical" android:layout_height="wrap_content" android:layout_width="wrap_content">
  5. <LinearLayout android:id="@+id/LinearLayout02"; android:layout_width="wrap_content" android:layout_height="wrap_content"><ImageView
  6.  
  7. android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/horn" android:id="@
  8.  
  9. +id/horn"></ImageView>
  10. </LinearLayout>
  11. <LinearLayout android:id="@+id/LinearLayout03"; android:layout_width="wrap_content" android:layout_height="wrap_content"><ImageView
  12.  
  13. android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/head" android:id="@
  14.  
  15. +id/head"></ImageView>
  16. </LinearLayout>
  17. <LinearLayout android:id="@+id/LinearLayout04"; android:layout_width="wrap_content" android:layout_height="wrap_content"
  18.  
  19. android:orientation="horizontal"><ImageView android:layout_width="wrap_content" android:layout_height="wrap_content"
  20.  
  21. android:src="@drawable/leftarm" android:id="@+id/leftarm"></ImageView>
  22. <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/body" android:id="@
  23.  
  24. +id/body"></ImageView>
  25. <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/rightarm"
  26.  
  27. android:id="@+id/rightarm"></ImageView>
  28. </LinearLayout>
  29. <LinearLayout android:id="@+id/LinearLayout05"; android:layout_width="wrap_content" android:layout_height="wrap_content"
  30.  
  31. android:orientation="horizontal"><ImageView android:layout_width="wrap_content" android:layout_height="wrap_content"
  32.  
  33. android:src="@drawable/leftnothing&quot; android:id="@+id/leftnothing"></ImageView>
  34. <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/legs" android:id="@
  35.  
  36. +id/legs"></ImageView>
  37. <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/rightnothing&quot;
  38.  
  39. android:id="@+id/rightnothing"></ImageView>
  40. </LinearLayout>
  41.  
  42. </LinearLayout>

Then check the layout, your robot should be ready to clothing :)

Use photoshop or mspaint or anything else to edit the slices, than save them. Use the original file names plus a number, for example
head2, head3, horn2, horn3...
Use your fantasy :)


After that create an itemselect.xml file, than modify like this:

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout android:id="@+id/LinearLayout01"; xmlns:android="http://schemas.android.com/apk/res/android"
  3.  
  4. android:layout_height="wrap_content" android:layout_width="wrap_content" android:orientation="vertical">
  5.  
  6. <ImageView android:id="@+id/first" android:layout_width="wrap_content" android:layout_height="wrap_content"></ImageView>
  7. <ImageView android:id="@+id/second" android:layout_width="wrap_content" android:layout_height="wrap_content"></ImageView>
  8. <ImageView android:id="@+id/third" android:layout_width="wrap_content" android:layout_height="wrap_content"></ImageView>
  9.  
  10. </LinearLayout>

This is the easiest way to select the new body part, using an existing imageview.

After that create a new class, called DataStorage.java. This class helps you to save and load the parts of your droid.
Use that methods:

  1.         private SharedPreferences mPrefs;
  2.         public DataStorage(Context context){
  3.                 mPrefs = PreferenceManager.getDefaultSharedPreferences(context);
  4.         }
  5.        
  6.         public void setHead(int id){
  7.                 SharedPreferences.Editor edit=mPrefs.edit();
  8.                 edit.putInt("head", id);
  9.                 edit.commit();
  10.                
  11.                 }
  12.         public int getHead(){
  13.                 return mPrefs.getInt("head",0);
  14.         }
  15.         public void setHorn(int id){
  16.                 SharedPreferences.Editor edit=mPrefs.edit();
  17.                 edit.putInt("horn", id);
  18.                 Log.d("savehorn:",""+id);
  19.                 edit.commit();
  20.                 }
  21.         public int getHorn(){
  22.                 return mPrefs.getInt("horn",0);
  23.         }
  24.         public void setLeftHand(int id){
  25.                 SharedPreferences.Editor edit=mPrefs.edit();
  26.                 edit.putInt("lefthand", id);
  27.                 edit.commit();
  28.                 }
  29.         public int getLeftHand(){
  30.                 return mPrefs.getInt("lefthand",0);
  31.         }
  32.         public void setRightHand(int id){
  33.                 SharedPreferences.Editor edit=mPrefs.edit();
  34.                 edit.putInt("righthand", id);
  35.                 edit.commit();
  36.                 }
  37.         public int getRightHand(){
  38.                 return mPrefs.getInt("righthand",0);
  39.         }
  40.         public void setLegs(int id){
  41.                 SharedPreferences.Editor edit=mPrefs.edit();
  42.                 edit.putInt("legs", id);
  43.                 edit.commit();
  44.                 }
  45.         public int getLegs(){
  46.                 return mPrefs.getInt("legs",0);
  47.         }
  48.        
  49.         public void setBody(int id){
  50.                 SharedPreferences.Editor edit=mPrefs.edit();
  51.                 edit.putInt("body", id);
  52.                 edit.commit();
  53.                 }
  54.         public int getBody(){
  55.                 return mPrefs.getInt("body",0);
  56.         }
  57.        

I wrote a ClickListener method. It helps you to save your clicked body part, than retuns to main screen.

  1.         public void ClickListener(ArrayList<ImageView> im, final int i, final int bodypart, final DataStorage ds, final Context
  2.  
  3. context ){
  4.                 im.get(i).setOnClickListener(new OnClickListener(){
  5.                         @Override
  6.                         public void onClick(View v) {
  7.                                 //ds.setHorn((ImageView)v.);
  8.                                 switch(bodypart){
  9.                                 case 1:
  10.                                         ds.setHorn(i);
  11.                                         break;
  12.                                 case 2:
  13.                                         ds.setHead(i);
  14.                                         break;
  15.                                 case 3:
  16.                                         ds.setBody(i);
  17.                                         break;
  18.                                 case 4:
  19.                                         ds.setLeftHand(i);
  20.                                         break;
  21.                                 case 5:
  22.                                         ds.setRightHand(i);
  23.                                         break;
  24.                                 case 6:
  25.                                         ds.setLegs(i);
  26.                                         break;
  27.                                 }
  28.                                 Intent i = new Intent(context.getApplicationContext(), Game.class);
  29.                                 context.startActivity(i);
  30.                         }} );  
  31.         }

In your main class declerate the imageviews and a DataStorage object:

  1. Context context=this;
  2. ImageView horn, head, leftarm, body, rightarm, leftarm, legs;
  3. DataStorage ds;
  4.  
  5. [...]
  6.  
  7. horn = (ImageView)findViewById(R.id.horn);
  8. head = (ImageView)findViewById(R.id.head);
  9. leftarm = (ImageView)findViewById(R.id.leftarm);
  10. rightarm = (ImageView)findViewById(R.id.rightarm);
  11. legs=(ImageView)findViewById(R.id.legs);

Then create array lists for body parts. For example the horn list:

  1. ArrayList<Integer> hornList=new ArrayList<Integer>();
  2.          hornList.add(R.drawable.horn1);
  3.          hornList.add(R.drawable.horn2);
  4.          hornList.add(R.drawable.horn3);
  5.          horn.setImageResource(hornList.get(ds.getHorns()));

Then you need to create an item selector class. It uses the itemselect.xml.

  1.  setContentView(R.layout.itemselect);

You should declerate the ArrayLists again in this class, and a DataStorage object.

In this case I used a simple switch-case statement to save the clicked item. Use the DataStore object's ClickListener method.

  1.         switch (bodypart){
  2.         case 1: //horn
  3.                 for (j=0;j<hornlist.size();j++){
  4.                         im.get(j).setImageResource(hornlist.get(j));
  5.                         if (j==0){
  6.                                 ds.ClickListener(im, 0, bodypart,  ds,context);
  7.                                
  8.                                
  9.                         }
  10.                         else if (j==1){
  11.                                 ds.ClickListener(im, 1, bodypart,  ds,context);
  12.                                
  13.                                
  14.                         }
  15.                         else if (j==2){
  16.                                 ds.ClickListener(im, 2, bodypart,  ds,context);    
  17.                                
  18.                                
  19.                         }
  20.                         else if (j==3){
  21.                                 ds.ClickListener(im, 3, bodypart,  ds,context);
  22.                        
  23.                         }
  24.                        
  25.                 }
  26.                 Toast.makeText(context, "Click the back button to show your robot", 3).show();
  27.                 break;
  28.         case 2:
  29.                 for (int j=0;j<headlist.size();j++){
  30.                         im.get(j).setImageResource(headlist.get(j));
  31.                         if (j==0){
  32.                                 ds.ClickListener(im, 0, bodypart,  ds,context);
  33.                                
  34.                                
  35.                         }
  36.                         else if (j==1){
  37.                                 ds.ClickListener(im, 1, bodypart,  ds,context);
  38.                
  39.                         }
  40.                         else if (j==2){
  41.                                 ds.ClickListener(im, 2, bodypart,  ds,context);                        
  42.                         }
  43.                         else if (j==3){
  44.                                 ds.ClickListener(im, 3, bodypart,  ds,context);
  45.                         }
  46.                 }
  47.                 Toast.makeText(context, "Click the back button to show your robot", 3).show();
  48.                 break;
  49.         case 3:
  50.                 for (int j=0;j<bodylist.size();j++){
  51.                         im.get(j).setImageResource(bodylist.get(j));
  52.                         if (j==0){
  53.                                 ds.ClickListener(im, 0, bodypart,  ds,context);
  54.                                
  55.                                
  56.                         }
  57.                         else if (j==1){
  58.                                 ds.ClickListener(im, 1, bodypart,  ds,context);
  59.                
  60.                         }
  61.                         else if (j==2){
  62.                                 ds.ClickListener(im, 2, bodypart,  ds,context);                        
  63.                         }
  64.                         else if (j==3){
  65.                                 ds.ClickListener(im, 3, bodypart,  ds,context);
  66.                         }
  67.                 }
  68.                 Toast.makeText(context, "Click the back button to show your robot", 3).show();
  69.                 break;
  70.         case 4:
  71.                 for (int j=0;j<leftarmlist.size();j++){
  72.                         im.get(j).setImageResource(leftarmlist.get(j));
  73.                         if (j==0){
  74.                                 ds.ClickListener(im, 0, bodypart,  ds,context);
  75.                                
  76.                                
  77.                         }
  78.                         else if (j==1){
  79.                                 ds.ClickListener(im, 1, bodypart,  ds,context);
  80.                
  81.                         }
  82.                         else if (j==2){
  83.                                 ds.ClickListener(im, 2, bodypart,  ds,context);                        
  84.                         }
  85.                         else if (j==3){
  86.                                 ds.ClickListener(im, 3, bodypart,  ds,context);
  87.                         }
  88.                 }
  89.                 Toast.makeText(context, "Click the back button to show your robot", 3).show();
  90.                 break;
  91.         case 5:
  92.                 for (int j=0;j<rightarmlist.size();j++){
  93.                         im.get(j).setImageResource(rightarmlist.get(j));
  94.                         if (j==0){
  95.                                 ds.ClickListener(im, 0, bodypart,  ds,context);
  96.                                
  97.                                
  98.                         }
  99.                         else if (j==1){
  100.                                 ds.ClickListener(im, 1, bodypart,  ds,context);
  101.                
  102.                         }
  103.                         else if (j==2){
  104.                                 ds.ClickListener(im, 2, bodypart,  ds,context);                        
  105.                         }
  106.                         else if (j==3){
  107.                                 ds.ClickListener(im, 3, bodypart,  ds,context);
  108.                         }
  109.                 }
  110.                 Toast.makeText(context, "Click the back button to show your robot", 3).show();
  111.                 break;
  112.         case 6:
  113.                 for (int j=0;j<legslist.size();j++){
  114.                         im.get(j).setImageResource(legslist.get(j));
  115.                         if (j==0){
  116.                                 ds.ClickListener(im, 0, bodypart,  ds,context);
  117.                                
  118.                                
  119.                         }
  120.                         else if (j==1){
  121.                                 ds.ClickListener(im, 1, bodypart,  ds,context);
  122.                
  123.                         }
  124.                         else if (j==2){
  125.                                 ds.ClickListener(im, 2, bodypart,  ds,context);                        
  126.                         }
  127.                         else if (j==3){
  128.                                 ds.ClickListener(im, 3, bodypart,  ds,context);
  129.                         }
  130.                        
  131.                 }
  132.                 Toast.makeText(context, "Click the back button to show your robot", 3).show();
  133.                 break;
  134.                
  135.         }

Thats it.. :)

Feel free to download the source code HERE. (Sorry for hungarian variable names :))