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???
Android Mobile Development - Part 4
By Spiros Oikonomakis
