SE4S701 Mobile Application Development Layout Managers Views & Fragments Saving & Loading

Layout - Why? The same Apps can run on many types of systems (phones, tablets) with a variety of different screen formats. The GUI of the App has to adjust its layout to these varying display conditions, e.g portrait or landscape (try it out in the emulator) Picture from:www.golfapplive.com

How it is Done Android (like Java) uses LAYOUT MANAGERS They can be: “hard-wired” at design-time in XML programmatically created at run-time The most popular are: LinearLayout RelativeLayout (usually the default) TableLayout (older), GridLayout (newer) Absolute Layout (like a desktop GUI - avoid) FrameLayout

Linear Layout Adapted from: http://www.eazytutz.com/android

Relative Layout Places components relative to each other: either relative to enclosing Container or outside and next another View* Attribute Description layout_alignParentBottom Aligns the View's bottom with the bottom of the parent container layout_alignParentTop Aligns the View's top with the top of the parent container layout_alignParentLeft Aligns the View's left with the left of the parent container layout_alignParentRight Aligns the View's right with the right of the parent container 6 more (use auto-complete to discover) Attribute Description layout_above Places above the View referenced layout_below Places below the View referenced layout_toLeftOf Places to the left of the View referenced layout_toRightOf Places to the right of the View referenced layout_alignTop Aligns the top with the top of the View referenced 4 more (use auto-complete to discover) * View: e.g. Button, CheckBox, ProgressBar, RadioGroup. Also known as ‘widgets’ and identified by their ID

Relative Layout Adapted from: http://www.eazytutz.com/android

Table Layout Some points to consider: Arranges Views in the rows and columns of a table Works almost like a table in HTML e.g. each row defined by <TableRow> tag (the <tr> tag in HTML). Amount of rows and columns defined by Views in it, not set manually Some points to consider: Each cell can contain only one View. A View can span multiple columns but not rows. The number of columns in a table is the number of columns in the row with most number of Views. Width of a column is the width of widest cell in that column.

Table Layout

Today Layout Managers Views & Fragments Saving & Loading

Views xxxViews are in effect “mini-Layouts” Examples: ListView GridView WebView

Mix ‘n Match From: http://www.techotopia.com/index.php/Understanding_Android_Views,_View_Groups_and_Layouts

Fragments Thinks of them as sub-Activities Activities can include 1 or more fragments Fragements have their own lifecycle (but only inside the parent Activity lifecycle) Fragments can be without an UI (e.g. doing background work for the Activity) Source: https://developer.android.com/guide/components/fragments.html

Today Layout Managers Views & Fragments Saving & Loading

Saving & Loading Data Android uses external & internal memory External memory (best for shared data without access restriction) Not always available (user can remove SD card or USB connection) Are readable by all other Apps When App is uninstalled data persist Internal memory (best for private data) Always available Access only by the App When App is uninstalled data are also gone

Saving to Internal Memory final String dataFilenName="LoadSaveAppData.txt"; Button SaveButton= (Button) findViewById(R.id.SaveBtn); SaveButton.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { SaveToFile(dataFilenName, "Just some text to save" ); } }); MODE_APPEND, MODE_WORLD_READABLE ( don’t - dangerous! ) private void SaveToFile(String filename, String data){ FileOutputStream outputStream; try { outputStream = openFileOutput(filename, Context.MODE_PRIVATE); outputStream.write(data.getBytes()); outputStream.close(); } catch (Exception e) { Log.e("Exception", "Data write to "+filename+" failed: "+e.toString()); } System.out.println("Saving worked! Data written to file "+filename); }

Aside: Debugging And here is where data are stored E/Exception: File read from LoadSaveAppData.txt failed: java.io.FileNotFoundException: /data/user/0/usw.loadsaveexample/files/LoadSaveAppData.txt open failed: ENOENT (No such file or directory) And here is where data are stored If running debug ( ), otherwise ( ) Android Monitor private void SaveToFile(String filename, String data){ FileOutputStream outputStream; try { outputStream = openFileOutput(filename, Context.MODE_PRIVATE); outputStream.write(data.getBytes()); outputStream.close(); } catch (Exception e) { Log.e("Exception", "Data write to "+filename+" failed: "+e.toString()); } System.out.println("Saving worked! Data written to file "+filename); }

Loading from Internal Memory Button LoadButton= (Button) findViewById(R.id.LoadBtn); LoadButton.setOnClickListener(new View.OnClickListener(){ @Override public void onClick(View v){ String dataRead; dataRead=LoadFromFile(dataFilenName); TextView whatWeReadIn=(TextView)findViewById(R.id.DataTxtView); whatWeReadIn.setText(dataRead); } }); private String LoadFromFile(String filename){ byte[] byteBuffer = new byte[100]; FileInputStream inputStream; try{ inputStream=openFileInput(filename); inputStream.read(byteBuffer); inputStream.close(); } catch(Exception e) { Log.e("Exception", "File read from "+filename+ " failed: " + e.toString()); } try{ System.out.println("Loading from "+filename+" worked."); return new String(byteBuffer, "UTF-8"); // UTF= Unicode Transformation Format, 8 bit encoding } catch (Exception e) { return "Ooops, could not read data from "+filename; } }

External Storage Requires Permissions Set in Manifest file Write Read (Read not yet required but will be in future APIs) Otherwise identical to internal load/save, just filename needs path to the SD card.

Loading Images From res Data can also be stored as a program Resource Bound/compiled into the APK file Images Located in src/mipmap* folder Android devices have different resolution classifications: mdpi = lowest resolution,160dpi xxxhdpi = highest resolution, 640dpi *mipmap = ‘multum in parto’ (much in little) map several images are manually pre-calculated from a high-res image into a map of increasingly smaller resolutions

Mipmap Creation Manually ‘Final Android Resizer’ Photoshop, etc. JAR file on Github Loads high-res image from ‘Resources’ project directory (usually placed in ‘drawable’ folder) Converts into all lower-res image types

Final Android Resizer Step-by-step instructions Place high-res source image in ‘drawable’ Start Final Android Resizer Click ‘Browse’ button Navigate to src folder, click Drag image file(s) from Win Explorer ‘drawable’ into area. A res-mipmap folder is created with sub-folders containing low-res images In Windows Explorer manually copy/paste images to the respective mipmap folders.

Final Android Resizer (cont) Step-by-step instructions Android Studio now creates a ’sub-folder’ in the project hierarchy The source image can now be deleted (or kept if a single fixed sized version is required) In the program the mip images can now be used. i.e.: Drag an ImageView control onto the Activity Select the @mipmap version of the image. Done! (Android will now auto-scale for all devices) More details here

Loading Text From res Text is stored in the ‘values’ sub-folder XML files, allowing for formatting Short strings usually go into the already existing ‘strings.xml’ file For longer and formatted text, create your own xml file: Right-click

Loading Text From res (cont) You get: Expand to, for example: (since this is XML each string can be formatted bold, italic, using HTML markup: The Java code can then retrieve the text like this: Content: More details here

END OF LECTURE