The drawable/tile empty.xml file

Transcription

1 The X and O Symbols 5COSC005W MOBILE APPLICATION DEVELOPMENT Lecture 3: Ultimate Tic-Tac-Toe Game: The Interface Dr Dimitris C. Dracopoulos Create them with the filenames x blue.png and o red.png in an Image Editor Save them in the appropriate directory: e.g. drawable-xxhdpi directory Different directories for different devices screen densities: xxxhdpi (extra-extra-extra-high) 640dpi (drawable-xxxhdpi dir) xhdpi (extra-extra-high) 480dpi (drawable-xxhdpi dir) xhdpi (extra-high) 320dpi (drawable-xhdpi dir) hdpi (high) 240dpi (drawable-hdpi dir) mdpi (medium) 160dpi (drawable-mdpi dir) ldpi (low) 120dpi (drawable-ldpi dir) The tile.xml drawable file: Dimitris C. Dracopoulos 1/24 The drawable/tile empty.xml file Dimitris C. Dracopoulos 2/24 <level - list xmlns:android =" http: // schemas. android. com / apk / res / android " > android:drawable / x_blue " android: maxlevel =" 0" / > android:drawable / o_red " android: maxlevel =" 1" / > android:drawable / tile_empty " android: maxlevel =" 2" / > android: drawable drawable / tile_ available " android: maxlevel =" 3" / > </ level - list > <solid android:color / gray_color "/> Once this is applied to a View object, the level can be changed with the setlevel() or setimagelevel() methods. Dimitris C. Dracopoulos 3/24 Dimitris C. Dracopoulos 4/24

2 The drawable/tile available.xml file <solid android:color / available_color "/> The layout/small board.xml file GridLayout android: background drawable / tile_ background " android: elevation / elevation_ low " android: padding / small_ board_ padding " tools:context =". GameActivity "> < ImageButton android:id ="@+id/ small1 " style / TileButton " android:layout_column ="0" android:layout_row ="0"/> < ImageButton android:id ="@+id/ small2 " style / TileButton " android:layout_column ="1" android:layout_row ="0"/> < ImageButton android:id ="@+id/ small3 " style / TileButton " android:layout_column ="2" android:layout_row ="0"/> < ImageButton android:id ="@+id/ small4 " style / TileButton " android:layout_column ="0" android:layout_row ="1"/> < ImageButton android:id ="@+id/ small5 " style / TileButton " android:layout_column ="1" android:layout_row ="1"/> < ImageButton android:id ="@+id/ small6 " style / TileButton " android:layout_column ="2" android:layout_row ="1"/> Dimitris C. Dracopoulos 5/24 The layout/small board.xml file (cont ed) The values/styles.xml file Dimitris C. Dracopoulos 6/24 < ImageButton android:id ="@+id/ small7 " style / TileButton " android:layout_column ="0" android:layout_row ="2"/> < ImageButton android:id ="@+id/ small8 " style / TileButton " android:layout_column ="1" android:layout_row ="2"/> < ImageButton android:id ="@+id/ small9 " style / TileButton " android:layout_column ="2" android:layout_row ="2"/> </ GridLayout > The following is included among other styles in the file: <style name =" TileButton "> name =" android:layout_width ">@dimen / tile_size </ item > name =" android:layout_height ">@dimen / tile_size </ item > name =" android:layout_margin ">@dimen / tile_margin </ item > name =" android:background "># </ item > name =" android:padding ">@dimen / tile_padding </ item > name =" android:scaletype ">centercrop </ item > name =" android:src ">@drawable / tile </ item > </ style > Dimitris C. Dracopoulos 7/24 Dimitris C. Dracopoulos 8/24

3 The drawable/tile background.xml file The drawable/tile background.xml file (cont ed) This is used to define the background for each small board (see the background" in the small board.xml file: Blue: if X won the board Red: if O won the board Gray: the board is still playable Purple: both player own the board (the game was a tie) Dimitris C. Dracopoulos 9/24 The drawable/tile background.xml file (cont ed) The drawable/tile blue.xml file Dimitris C. Dracopoulos 10/24 <level - list xmlns:android =" http: // schemas. android. com / apk / res / android "> android:drawable / tile_blue " android:maxlevel ="0"/> android: drawable drawable / tile_red " android:maxlevel ="1"/> android:drawable / tile_gray " android:maxlevel ="2"/> android:drawable / tile_purple " android:maxlevel ="3"/> </ level - list > <solid android:color / blue_color "/> Dimitris C. Dracopoulos 11/24 Dimitris C. Dracopoulos 12/24

4 The drawable/tile red.xml file The drawable/tile gray.xml file <solid android:color / red_color "/> <solid android:color / gray_color "/> The drawable/tile purple.xml file Dimitris C. Dracopoulos 13/24 Dimitris C. Dracopoulos 14/24 The Large Board (layout/large board.xml) <solid android:color / purple_color "/> < GridLayout tools:context =". GameActivity "> < include android:id ="@+id/ large1 " layout / small_board " android:layout_column ="0" android:layout_row ="0"/> < include android:id ="@+id/ large2 " layout / small_board " android:layout_column ="1" android:layout_row ="0"/> < include android:id ="@+id/ large3 " layout / small_board " android:layout_column ="2" android:layout_row ="0"/> Dimitris C. Dracopoulos 15/24 Dimitris C. Dracopoulos 16/24

5 The Large Board (layout/large board.xml) (cont ed) The Large Board (layout/large board.xml) (cont ed) < include android:id large4 " layout / small_board " android:layout_column ="0" android:layout_row ="1"/> < include android:id ="@+id/ large5 " layout / small_board " android:layout_column ="1" android:layout_row ="1"/> < include android:id ="@+id/ large6 " layout / small_board " android:layout_column ="2" android:layout_row ="1"/> < include android:id ="@+id/ large7 " layout / small_board " android:layout_column ="0" android:layout_row ="2"/> < include android:id ="@+id/ large8 " layout / small_board " android:layout_column ="1" android:layout_row ="2"/> < include android:id ="@+id/ large9 " layout / small_board " android:layout_column ="2" android:layout_row ="2"/> </ GridLayout > The include tag is an alternative option instead of copying the content of the small board.xml file nine times! Including the Large Board inside a Fragment Dimitris C. Dracopoulos 17/24 Including the Fragment inside an Activity Dimitris C. Dracopoulos 18/24 File fragment game.xml: < RelativeLayout tools:context =". GameActivity "> < include layout / large_board " android:layout_height =" wrap_content "/> </ RelativeLayout > File activity game.xml: < FrameLayout android: layout_ width =" match_ parent " android: layout_ height =" match_ parent " tools: context =". TicTacToeActivity " > < ImageView android: layout_ width =" match_ parent " android: layout_ height =" match_ parent " android: scaletype =" centercrop " android:src / sandy_beach "/> < LinearLayout android: layout_ width =" match_ parent " android: layout_ height =" match_ parent " android: gravity =" center " android: orientation =" vertical " > Dimitris C. Dracopoulos 19/24 Dimitris C. Dracopoulos 20/24

6 Including the Fragment inside an Activity (cont ed) < fragment android:id fragment_game " class =" org. example. tictactoe. GameFragment " tools:layout / fragment_game "/> <! -- Control fragment goes here... --> / LinearLayout > </ FrameLayout > Starting a Game Add the following in the end of the MainFragment.java before return: View newbutton = rootview. findviewbyid ( R. id. new_ button ); newbutton. setonclicklistener ( new View. OnClickListener () { public void onclick ( View view ) { Intent intent = new Intent ( getactivity (), GameActivity. class ); getactivity (). startactivity ( intent ); ); View continuebutton = rootview. findviewbyid ( R. id. continue_ button ); continuebutton. setonclicklistener ( new View. OnClickListener () { public void onclick ( View view ) { Intent intent = new Intent ( getactivity (), GameActivity. class ); intent. putextra ( GameActivity. KEY_RESTORE, true ); getactivity (). startactivity ( intent ); ); The GameActivity package org. example. tictactoe ; import android. app. Activity ; import android. app. AlertDialog ; import android. app. Dialog ; import android. content. DialogInterface ; import android.os. Bundle ; import android. util. Log ; Dimitris C. Dracopoulos 21/24 public class GameActivity extends Activity protected void oncreate ( Bundle savedinstancestate ) { super. oncreate ( savedinstancestate ); setcontentview ( R. layout. activity_ game ); // Restore game here... Every time a new activity is added in an app, it has to be added in the AndroidManifest.xml file: < activity android : name =" org. example. tictactoe. GameActivity "> </ activity > Coding the GameFragment package org. example. tictactoe ; // imports go here... Dimitris C. Dracopoulos 22/24 public class GameFragment extends Fragment { // Data structures go here... public void oncreate ( Bundle savedinstancestate ) { super. oncreate ( savedinstancestate ); public View oncreateview ( LayoutInflater inflater, ViewGroup container, Bundle savedinstancestate ) { View rootview = inflater. inflate ( R. layout. large_board, container, false ); //... other code will go here return rootview ; Dimitris C. Dracopoulos 23/24 Dimitris C. Dracopoulos 24/24