Android Application Design im Praxischeck

@mobileLarson @_openKnowledge

Lars Röwekamp | CIO New Technologies

App Design im Praxis-Check

Kunde droht mit Auftrag ...

„Can you do this?“

Can we do this?

„Yes, of course we can!“


„But, lots of pitfalls ahead.“

„And, lots of work to do.“

35.000+ Produkte

5.000+ Änderungen p.m.

2000+ Produktgruppen

Tablets & Smartphones

15.000+ Bilder

In-App Navigation

Komplexe Suche

Pack mas’!

Problem: Sehr, sehr viele Daten

Lösung: No problèmo!

Leider doch. 50MB (+2x2GB)

> 50 MB (+ 2 x 5 GB)> APK Limit von 50 MB> Main Expension File (max. 2 GB)> Patch Expension File (max. 2 GB) !> Google Support via API> „automatischer“ Download im Hintergrund> Ablage in <shared-storage>/Android/…!

> Google Play Store Limits



Lösung: DB Download ...

> 200 MB+> Wifi Check inkl. optional Loading > Inkrementeller Download inkl. Resume

!> einige Minuten

> Vorab Hinweis auf „Ladezeit“ anzeigen> Working Progress Feedback inkl. „Step X of Y“> Loading Progress Feedback inkl. „X von Y“

> „manueller“ DB Download


> DB Download > Check for WiFi

! <manifest ...>!

<uses-feature android:name="android.hardware.wifi" ! android:required=["true"|"false"] />! ...! </manifest>

> DB Download > Check for WiFi only// WiFi check: check for existing WiFi!

! ConnectivityManager cm = (ConnectivityManager) ! getSystemService(Context.CONNECTIVITY_SERVICE);!! ! State wifi = ! cm.getNetworkInfo(ConnectivityManager.TYPE_WIFI)!

! ! ! ! .getState();!! if (wifi == NetworkInfo.State.CONNECTED || wifi == NetworkInfo.State.CONNECTING) {!

// WiFi is available!! } else { ! ...



// WiFi check: check for WiFi detail info! WifiManager wifiManager = (WifiManager) ! getSystemService(Context.WIFI_SERVICE);!! WifiInfo wifiInfo = wifiManager.getConnectionInfo();! SupplicantState wifiState = ! wifiInfo.getSupplicantState();!! if (wifiState == SupplicantState.COMPLETED) {!

// WiFi is available - get some wifiInfo details! int linkSpeed = wifiInfo.getLinkSpeed(); ...!! } else { ! ...

> DB Download > Check for WiFi Details

> DB Download > Incremental Loading// Step 1: Prepare download with DownloadManager!

DownloadManager.Request downloadRequest = new ! DownloadManager.Request(Uri.parse(DOWNLOAD_URI));!

! // set additional optional information: ! // Title, Description, MimeType, ExternalFileDir, ...!

! // allow download via Mobile or Wifi! downloadRequest.setAllowedNetworkTypes( DownloadManager.Request.NETWORK_WIFI | ! DownloadManager.Request.NETWORK_MOBILE);!

! // do not show the file in "Downloads"! downloadRequest.setVisibleInDownloadsUi(false);


> DB Download > Incremental Loading!// Step 2: Start download with DownloadManager!

...! // register broadcast receiver for DOWNLOAD_COMPLETE! IntentFilter intentFilter = new IntentFilter(! DownloadManager.ACTION_DOWNLOAD_COMPLETE);! registerReceiver(receiver, intentFilter);!

! // Enqueue download! downloadId = downloadManager.enqueue(downloadRequest);

!!!!


> DB Download > Incremental Loading// Step 3: Do some stuff after download has finished !

BroadcastReceiver receiver = new BroadcastReceiver() { ! @Override public void onReceive(Context ctx, Intent intent) { // 1. DownloadManager.ACTION_DOWNLOAD_COMPLETE? // 2. ID = DownloadManager.EXTRA_DOWNLOAD_ID // 3. query DownloadManager for ID // 4. DownloadManager.STATUS_SUCCESSFUL? // 5. do some stuff with download } };


> DB Download > Showing Progress!!// show progress via DownloadManager (easy version)!

public void showDownload(View view) {! Intent intent = new Intent();! intent.setAction( DownloadManager.ACTION_VIEW_DOWNLOADS);! startActivity(i);! }


> DB Download > Showing Progress// show progress via own Activity (eXtended version)!

public class ProgressActivity extends Activity {!! !

private ProgressBar mProgress; // or ProgressDialog!private int mProgressStatus = 0;!private Handler mHandler = new Handler();!

!protected void onCreate(Bundle icicle) {! super.onCreate(icicle);! setContentView(R.layout.progressbar_activity); ! mProgress = (ProgressBar)findViewById(R.id.pb);!

// Start some work in background thread ! doWorkAndUpdateProgressBarInBackground(); !

} …!}


> DB Download > Showing Progress! // doWorkAndUpdateProgressBarInBackground() ! new Thread(new Runnable() {!! public void run() {!! while (mProgressStatus < 100) {!! mProgressStatus = checkDonwloadManagerStatus(); !!! // Update progress bar in UI thread!! mHandler.post(new Runnable() {!! public void run() {! ! mProgress.setProgress(mProgressStatus);!! }!! });!! }! }!}).start();


> DB Download > Showing Progress ! <ProgressBar! style="@android:style/Widget.ProgressBar.Large"! ... /> !! ! <ProgressBar! style="@android:style/Widget.ProgressBar.Horizontal"! ... />


Lösung 2: DB Download +

> ca. 10 MB> Lazy Loading Ansatz zum Füllen der DB > Nur Basisdaten initial laden/vorhalten > Produktdetails und Bilder „as needed“

!> Unterstützte Funktionen

> Home Page Angebote anzeigen> Kategorien anzeigen> Suchen1), Filtern, ...

> DB Download+


> ca. 10 MB> Lazy Loading Ansatz zum Füllen der DB > Nur Basisdaten initial laden/vorhalten > Produktdetails und Bilder „as needed“

!> Unterstützte Funktionen

> Home Page Angebote anzeigen> Kategorien anzeigen> Suchen1), Filtern, ...

> DB Download+ 1) Online-/Offline-Suche


> DB Download+


> Picasso (Square / komfortable API)> UrlImageViewHelper (sehr schnell)> Volley (Google / gut durchdacht)> Android Universal Image Loader (most popular)!

> „Do it yourself“ vs. „3rd Party“


Problem: Sehr, sehr viele Updates

Lösung: Update-Protokoll

> ca. 5000 Änderungen p.M. > Modification XML Info zum „Start-up“ laden > Neue/geänderte/gelöschte Produkte/Bilder

!> Protokoll (XML basiert)

> Gelöschte Produkte/Bilder löschen> Neue Produkte/Bilder laden> Geänderte Produkte/Bilder laden

> Update Protokoll



Lösung 2: Update-Protokoll+

> ca. 5000 Änderungen p.M. > Modification Info zum „Start-up“ laden > Produktdetails „as needed“

!> Protokoll (JSON basiert)

> Neue Produkte als Dummy anlegen> Gelöschte Produkte markieren> Geänderte Produkte markieren > Aufräumen „on-the-fly“

> Update Protokoll+



> JSON

Problem: Lesbare Datenbank

Lösung: brauche ich eine?


Lösung: Encryption

> DB im Android Filesystem> DB Verschlüsselung via SQLCipher > 256-bit AES Encryption für SQLite> Proxies für wichtigsten Android DB Klassen

!> SQLCipher anwenden

> Step 1: Imports setzen> Step 2: SQLCipher Libs laden> Step 3: alles wie sonst auch

> Encryption


> Encryption// Step 1: import sqlcipher!import info.guardianproject.database.! sqlcipher.SQLDatabase; !!// Trigger database initialization!public class SqlCypherActivity extends Activity {!

...! }


> Encryption// Trigger database initialization!public class SqlCypherActivity extends Activity {!

! ! @Override! public void onCreate(Bundle savedInstanceState) {! super.onCreate(savedInstanceState);! setContentView(R.layout.main); ! initializeSQLCipher();! }! ...!

}


> Encryption// Trigger database initialization!public class SqlCypherActivity extends Activity {!

! private void InitializeSQLCipher() {!

// Step 2: Load SQLCipher Libs! SQLiteDatabase.loadLibs(this);!

!// Step 3: Business as usual!

...!} !...!!

}


Problem: Diversifikation

Lösung: Ignorieren

4.310 %

4.217 %

4.135,3 %

4.015,2 %

2.319 %

2.22.33.x4.04.14.24.34.4

Version Problem: Diversifikation

xlarge4,9 %large

7,7 %

middle79 %

small8 %

smallmiddlelargexlarge

Größe Problem: Diversifikation

xxhdpi12 %

xhdpi20,7 %

hdpi34,6 %

mdpi22 %

ldpi9 %

ldpimdpitvdpihdpixhdpixxhdpi

Problem: Diversifikation Auflösung

Lösung 2: Teilweise ignorieren


4.310 %

4.217 %

4.135,3 %

4.015,2 %

2.319 %

2.22.33.x4.04.14.24.34.4

Version Problem: Diversifikation

Lösung 3: Unified UI


> Unified UI


> wäre schön, wären da nicht die Versionen !> Step 1: wenn möglich kompatibel bleiben > Step 2: wenn möglich Support Library > Step 3: wenn möglich 3rd Party Lösungen > Step 4: wenn möglich „Weiche“ !> Step 5: WTF! Verschiedene APKs !

!

> Unified UI

Problem: Diversifikation Version

> unterstützt Abwärtskompabilität > v4 für Android 1.6 und höher > v7 für Android 2.1 und höher > v8 für Android 2.2 und höher > v13 für Android 3.2 und höher !

!

!

!

> Unified UI via Support Libraries


> Fragment (v4) > NotificationCombat (v4) > LocalBroadcastManager (v4) > ViewPager (v4) > DrawerLayout (v4) > SlidingPaneLayout (v4) > Loader (v4) !

!



> ActionBar (v7) > ActionBarActivity (v7) > ShareActionProvider (v7) > GridLayout (v7) > MediaRouter (v7) > RenderScript (v8) > FragmentCombat (v13) !

!



> ActionBarSherlock (Android 2.x) !

> Unified UI via 3rd Party Libraries


> Unified UI via „Versions-Weiche“

Version

!// check version of current device!

int apiVersion = android.os.Build.VERSION.SDK_INT;! if (apiVersion >= android.os.Build.VERSION_CODES.FROYO){! // Do something for froyo and above versions! } else{! // do something for phones running an SDK before froyo! }


> Unified UI via „Feature-Weiche“

Version

!// check version of current device!

PackageManager packageManager = this.getPackageManager();!! if (packageManager.hasSystemFeature(! PackageManager.FEATURE_NFC)) {!

// NFC feature is available !! ! ...!! } else { ! // NFC feature is NOT available !! ! ...!! }


Lösung 4: Multi-Device UI


> Multi-Device UI


> Multi-Device UI


> UI Fragments als „Building Blocks“ > UI Activity Layout als „Block Assembler“ > UI Activity Class als „Block Assembler Logic“ !> UI Ressources als „Switch“ !

Größe

> Multi-Device UI

Problem: Diversifikation Größe

> Activity Modul a.k.a. Sub Activity > inkl. eigener UI > inkl. eigenem Lifecycle !> benötigt immer eine umliegende Activity > Lifecycle passt sich Activity-Lifecycle an

> Fragment


> Size: small, normal, large, xlarge > Density: ldpi, mdpi, hdpi, xhdpi > Orientation: landscape, portrait

> Designation: sw, w, h, ...dp !

> Ressources


> Size: small, normal, large, xlarge > Density: ldpi, mdpi, hdpi, xhdpi > Orientation: landscape, portrait

> Designation: sw, w, h, ...dp !

> Ressources


Deprecated

Added

Größe

Größe

> Multi-Device UI in Aktion


Problem: In-App Navigation

Lösung: In-App Navigation ;-)

> Activity Stack


> Activity Stack

> Intent Flags> FLAG_ACTIVITY_NEW_TASK> FLAG_ACTIVITY_SINGLE_TOP> FLAG_ACTIVITY_CLEAR_TOP

> Launch Mode> standard> singleTop> singleTask> singleInstance


> Activity Stack


> Back vs. Up


> Back vs. Up> „Back“ berücksichtigt Activity Stack > „Up“ berücksichtigt Use Case Stack

!> In-App Navigation

> Up-Navigation via In-App Buttons> Manipulation des Activity Stacks> Für Home und „Main Activities“

> In-App Navigation



Deep Dive

Problem: In-App Navigation!!@Override

public void onCreate(Bundle savedInstanceState) {! super.onCreate(savedInstanceState);!!! setContentView(R.layout.main);!!! ActionBar actionBar = getActionBar();!! actionBar.setDisplayHomeAsUpEnabled(true);!! ...!}

Step 1: Enable „Up Navigation“

Problem: In-App Navigation!!@Override!public boolean onOptionsItemSelected(MenuItem item) {! switch (item.getItemId()) {!! // app icon in action bar clicked: go home! case android.R.id.home:! Intent i = new Intent(this, MainActivity.class);! i.addFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP);! startActivity(intent);! return true;!! default:! return super.onOptionsItemSelected(item);! } !}

Step 2: Realize „Up Navigation“

> … ziemlich viel Aufwand, oder? > … was ist mit „Deep-Dive“ Intents?

> Eigentlich ganz einfach, aber …


Problem: In-App Navigation!!!<activity android:name=".MainActivity" android:label="@string/app_name" > <intent-filter> ... </intent-filter> </activity> !<activity android:name=".ResultActivity" android:parentActivityName=".MainActivity"> <meta-data android:name="android.support.PARENT_ACTIVITY" android:value=".MainActivity"/> </activity>

Step 1: Enable „Up Navigation“

Problem: In-App Navigation!!@Override!public boolean onOptionsItemSelected(MenuItem item) {! switch (item.getItemId()) {!! // app icon in action bar clicked: go home! case android.R.id.home:! Intent i = new Intent(this, MainActivity.class);! i.addFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP);! startActivity(intent);! return true;! ... ! default:! return super.onOptionsItemSelected(item);! } !}

Step 2: Realize „Up Navigation“

> Einsprung von außen „mitten“ in die App> Navigation Stack wird künstlich aufgebaut a.k.a. Synthetic Back Stack!> Was ist mit dem fehlenden Kontext? „Music Details“ navigiert zurück zur „Music Liste“, aber zu welcher?

> „Deep-Dive“ Intents


Problem: In-App Navigation!!@Override

public void onPrepareNavigateUpTaskStack(! TaskStackBuilder builder) {!! // retrieve intent for manipulation! int position = ...; ! Intent intent = builder.getIntentAt(position);!! // manipulate intent ! intent.putExtra(INTENT_SPECIFIC_INFO, specificInfo); ! ...!}

Step 3: Manipulate Intent Data

@mobileLarson @_openKnowledge

Lars Röwekamp | CIO New Technologies

Thanks! Questions?

Android Application Design im Praxischeck

Technology

Transcript of Android Application Design im Praxischeck