Android Design and Layout

public TreasureListAdapter(Context context, String[] paths) {

this.context = context;

this.treasurePaths = paths;

}

@Override

public int getCount() {

return treasurePaths.length;

}

@Override

public View getView(int i, View view, ViewGroup viewGroup) {

ImageView imageView = (view == null) ? new ImageView(context) : (ImageView) view;

imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);

Picasso.with(context).load(treasurePaths[i]).resize(640, 480).centerCrop().into(imageView);

return imageView;

}

Android Bootcamp Week 3

Design And Layout

Goals:

• Layout the welcome screen
• Display a list of treasures

Retrospective...

UI Building Blocks

Next time on

Android Bootcamp:

Using the Camera

Next time...

• What did we do well?
• What could we do better?
• What puzzles you?

Layouts

There are a number of standard UI elements provided by the framework that you can use to provide a consistent user experience.

Action Bar

Layouts are container views which determine the positioning of their child views.

LinearLayout

Arranges all child views either vertically or horizontally, in the order in which they are added

RelativeLayout

Can arranges views relative to each other and to the layout itself

Tabs

Navigation Drawer

Spinner

Ex 2 pt 2 - Implement the Adapter

Picasso is a library that makes loading and caching images locally or from the network easy.

Let's use it.

Edit build.gradle

compile 'com.squareup.picasso:picasso:+'

Write the Adapter

Ex 2 - pt 3 - Use the Adapter

Update TreasureListFragment to use the shiny new adapter.

Treasures!

Ex 1 pt 1- Redesigning the who am I screen

Lets start by prettying up the "Who am I" screen

Add a colors.xml file

Right click on values->New values resource file

Add a color definition for our highlight color:

<color name="highlight">#F68E2D</color>

Add a dimen for our large text size:

<dimen name="intro_text_size">36sp</dimen>

Add a style for the "What is your name" label:

<style name="PlayerLabelName">

<item name="android:textSize">@dimen/intro_text_size</item>

<item name="android:textColor">@color/highlight</item>

</style>

Ex 2 pt 1 - Adapter for the Grid

A little prettier

Perfect

A bit more polish

Designing for multiple screen sizes

activity_whoami.xml

An adapter is a class which dynamically generates views for a view such as a ListView or GridView. They specify how many items are in the view, then when they need to be displayed will provide views.

Create a TreasureListAdapter

Extend BaseAdapter and implement stub overrides

Create a test for the Adapter

public void shouldReturnItemCountAsNumberOfImagesProvided() throws Exception {

int numTreasures = 10;

TreasureListAdapter adapter = new TreasureListAdapter(Mockito.mock(Context.class), new String[numTreasures]);

Assert.assertEquals(10, adapter.getCount());

}

styles.xml

Android runs on watches, TVs and everything in between.

Even phones and tablets vary greatly in size.

Adapter Views

These views are similar to layouts, but have their child views generated dynamically by an Adapter.

3.5"

4.3"

4.7"

5"

5.7"

7"

GridView

Displays its views in a grid with a configurable column size and count.

ListView

Displays its views vertically.

10"

Designing for multiple devices

Configuration qualifiers

Making a good UI

For each type of folder (drawable, layout, values, etc) variants can be created which apply only under conditions. Resources in these folders will be preferred when these conditions are met. The conditions are appended to the folder name.

• Width/height - Width / height of the screen. Eg. layout-w320dp, values-h600dp
• smallestWidth - Smallest width of both the screen's dimensions. Eg. layout-sw320dp
• Density - Density bucket in which the device's screen sits. Eg. drawable-xxhdpi, drawable-mdpi

Android has well established UI patterns for apps.

Follow them!

Ex 1 pt 6 - A bit more polish

Loading the treasures

Unpad the layout

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical"

tools:context=".WhoAmIActivity$PlaceholderFragment">

And add a margin to the label instead

<style name="PlayerLabelName">

<item name="android:textSize">@dimen/intro_text_size</item>

<item name="android:textColor">@color/highlight</item>

<item name="android:layout_marginLeft">@dimen/activity_horizontal_margin</item>

<item name="android:layout_marginRight">@dimen/activity_horizontal_margin</item>

<item name="android:layout_marginTop">@dimen/activity_horizontal_margin</item>

</style>

Pre-exercise

Copy the treasures into the app cache in HelloAndroid onCreate

treasureLoader = new TreasureLoader(this);

treasureLoader.copySampleImages();

Add a GridView to fragment_treasure_list layout

<GridView

android:id="@+id/treasure_list"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:columnWidth="@dimen/treasure_grid_width"

android:numColumns="auto_fit"

android:stretchMode="columnWidth"

android:horizontalSpacing="@dimen/treasure_grid_spacing"

android:verticalSpacing="@dimen/treasure_grid_spacing"

android:padding="@dimen/treasure_grid_spacing"/>

We need to remove usage of the AppCompat theme to make Robolectric tests work.

+ public class * extends Activity

Ex 1 pt 4 - A bit more polish

- public class * extends ActionBarActivity

- getSupportActionbar()

+ getActionBar()

- getSupportFragmentManager()

Ex 1 pt 5 -A bit more polish

+ getFragmentManager()

That OK button's a bit out of place there.

Move it to the bottom of the screen

android:layout_alignParentBottom="true"

Style it

style="?android:attr/buttonBarStyle"

Add a divider above it.

Ex 1 pt 3 -Redesigning the who am I screen

Line up the EditText with the TextView:

styles.xml

Ex 1 pt 2- Redesigning the who am I screen

Now to work on the layout

- Theme.AppCompat.Light

+ @android:style/Theme.Holo.Light

<View

android:layout_width="fill_parent"

android:layout_height="1dip"

android:background="?android:attr/dividerHorizontal"

android:layout_above="@id/player_ok_button"/>

<EditText

android:id="@+id/player_field"

android:layout_height="wrap_content"

android:layout_width="0dp"

android:inputType="textPersonName"

android:layout_below="@id/player_label"

android:layout_alignLeft="@id/player_label"

android:layout_alignRight="@id/player_label"/>

Change the LinearLayout to a RelativeLayout

Style the player_label TextView

Add the attribute style="@style/PlayerLabelName"

Ensure the Button comes before the EditText in the layout

This is necessary so that Android can compute the length of the EditText as the parent width minus the width of the button

Line up the Buttton

android:layout_alignParentRight="true"

android:layout_below="@id/player_label"

Line up the EditText

android:layout_below="@id/player_label"

android:layout_toLeftOf="@+id/player_ok_button"

android:layout_alignBottom="@id/player_ok_button"

design by Dóri Sirály for Prezi

Colorise the action bar:

<style name="AppTheme" parent="@android:style/Theme.Holo.Light.DarkActionBar">

<item name="android:actionBarStyle">@style/ActionBarBackground</item>

</style>

<style name="ActionBarBackground" parent="@android:style/Widget.Holo.Light.ActionBar.Solid.Inverse">

<item name="android:background">@color/highlight</item>

</style>

Redesigning the who am I screen

fragment_whoami.xml

styles.xml