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

2. 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:

3. 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

4. Linear Layout
Adapted from:

5. 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

6. Relative Layout
Adapted from:

7. 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.

8. Table Layout

9. Today
Layout Managers
Views & Fragments
Saving & Loading

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

11. Mix ‘n Match
From:

12. 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:

13. Today
Layout Managers
Views & Fragments
Saving & Loading

14. 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

15. 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); }

16. 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); }

17. 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; } }

18. 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.

19. 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

20. 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

21. 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.

22. 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

23. 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

24. 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

25. END OF LECTURE