Android Mobile Development

Effective Android UI

inspired by Pedro V. Gomez

Introduction

 

  • Communication between Framents and Activities

  • How to use resources to support different screen densities, device orientation and different Android versions

  • How to use styles and themes

  • Custom views

Introduction: Nexus 7 and Nexus 10 - 4.4.4

Introduction: MDPI device

Communication between Fragments and Activities

public class SongsFragment extends BaseFragment implements AdapterView.OnItemClickListener {

  /**
   * Interface for listening songs list events.
   */
  interface SongsListener {
    void onSongClicked(SongEntity songEntity);
  }

  private SongsListener songsListener;

  ....

  @Override public void onAttach(Context context) {
    super.onAttach(context);
    if (activity instanceof SongsActivity) {
      this.songsListener = (SongsListener) context;
    }
  }

  ....

  @Override public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
    SongEntity songEntity = (SongEntity) songsAdapter.getItem(position);
    if (songEntity != null) {
      this.songsListener.onSongClicked(songEntity);
    }
  }
}
package com.architecture.babypadawans.views.songs;

import android.content.Context;
import android.content.Intent;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuInflater;
import android.view.MenuItem;
import com.architecture.babypadawans.R;
import com.architecture.babypadawans.entities.song.SongEntity;
import com.architecture.babypadawans.managers.SessionManager;
import com.architecture.babypadawans.views.BaseActivity;

public class SongsActivity extends BaseActivity implements SongsFragment.SongsListener {

   .......

  @Override
  public void onSongClicked(SongEntity songEntity) {
    //do something
  }
}

How can we change the UI depending on the device?

Resources and qualifiers (1)

Color: Available colours for your application colors.xml


Drawable: shapes static assets

 

Layout: XML files for the UI of your application

 

Menu: XML files for the menus of your application


Integer: Integer values which can be used in XML or java code


Dimens: Dimensions which you can define to reuse 

Resources and qualifiers (2)

Screen Density : ldpi, mdpi, hdpi, xhdpi, xxhdpi, etc.


Language: es, en, fr, en-rUS, etc

 

Min width: sw600dp, sw720dip

 

Available width or height: w720dp, h1024dp


Screen orientation: landscape, portrait


Android API level: v7, v8, v9, v10 etc. 

Resources and qualifiers (3)

Layouts : 

  • layout-v10: Android 2.x is using one layout with one fragment

  • layout-v11: Android 3.x, 4.x (except tablets in landscape)

  • layout-sw600dp-land: Layout with two fragments in landscape


Values:

  • values-mdpi: mdpi and ldpi devices are using one column for Gridview and different ImageView height

  • values-hdpi: hdpi, xhdpi & xxdpi devices with screen witdh lower than 820 dip using two columns for GridView and another ImageView height

  • values-w820: Devices with more than 820 dip width using 3 colums for Gridview

 

Styles and themes

Styles and themes

<TextView
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:textColor="#00FF00"
    android:typeface="monospace"
    android:text="@string/hello" />
<style name="CodeFont" parent="@android:style/TextAppearance.Medium">
    <item name="android:layout_width">fill_parent</item>
    <item name="android:layout_height">wrap_content</item>
    <item name="android:textColor">#00FF00</item>
    <item name="android:typeface">monospace</item>
</style>
<TextView
    style="@style/CodeFont"
    android:text="@string/hello" />
<style name="CodeFont.Red">
    <item name="android:textColor">#FF0000</item>
</style>

<style name="CodeFont.Red.Big">
    <item name="android:textSize">30sp</item>
</style>

Custom Views

Custom Views (1)

How can I decide to create a custom view? Use custom views when:

 

  • Crete a non implemented Android SDK widget

  • Group presentation logic for different views

  • Avoid code duplicity


 

 

Custom Views (2)

5 Approaches to implement custom views:

  • Extend an already written Android widget like TextView, ImageView etc.

  • Extend View and override onDraw method using the Canvas API

  • Extend one Layout/ViewGroup and other devs will use this custom view
    Inflate different layouts provided by the custom view client

 “Before software can be reusable it first has to be usable.”

Ralph Johnson (computer scientist)

 

Thank you!!!

 

Questions???

 

Made with Slides.com