developing with android ui

8/8/2019 Developing With Android Ui

1/29

Android UI Creation

Timothy SohnSenior Research Scientist

NRC Palo Alto
http://o3d.googlecode.com/svn/trunk/samples/assets/android.pnghttp://o3d.googlecode.com/svn/trunk/samples/assets/android.png


2/29

Android User Interface

Specified in XML or programmatically through Java

- UI declared in XML

-Instantiated at runtime

No WYSIWYG editor for UI creation

- layout preview through eclipse

- layoutopt tool to analyze inefficiencies

2


3/29

Linear Layout

3

.....


4/29

Linear Layout

3

.....


5/29

Linear Layout

3

android:layout_width="fill_parent" android:layout_height="fill_parent">

........


6/29

Relative Layout

4
http://schemas.android.com/apk/res/androidhttp://schemas.android.com/apk/res/androidhttp://schemas.android.com/apk/res/androidhttp://schemas.android.com/apk/res/android


7/29

Relative Layout

4


8/29

Relative Layout

4


9/29

Auto Completion

5

@Overrideprotected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); AutoCompleteTextView textView =(AutoCompleteTextView) findViewById(R.id.edit); ArrayAdapter adapter = new ArrayAdapter(this,android.R.layout.simple_dropdown_item_1line,COUNTRIES); textView.setAdapter(adapter);}


10/29

Auto Completion

5

@Overrideprotected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); AutoCompleteTextView textView =(AutoCompleteTextView) findViewById(R.id.edit); ArrayAdapter adapter = new ArrayAdapter(this,android.R.layout.simple_dropdown_item_1line,COUNTRIES); textView.setAdapter(adapter);}


11/29

List View Filtering

6

@Override

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);setListAdapter(new ArrayAdapter(this, android.R.layout.simple_list_item_1,

COUNTRIES)); getListView().setTextFilterEnabled(true);}


12/29

List View Filtering

6

@Override

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);setListAdapter(new ArrayAdapter(this, android.R.layout.simple_list_item_1,

COUNTRIES)); getListView().setTextFilterEnabled(true);}


13/29

Views: GridView

7

public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); GridView gridview = (GridView) findViewById(R.id.gridview); gridview.setAdapter(new ImageAdapter(this));}


14/29

Views: GridView

7

public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); GridView gridview = (GridView) findViewById(R.id.gridview); gridview.setAdapter(new ImageAdapter(this));}


15/29

Views: MapView

8


16/29

Views: MapView

8


17/29

Views: WebView

9


18/29

Views: WebView

9


19/29

Form View Gallery ViewTab View

Other Views

10


20/29

Menus

11

Screen Menu Context Menu


21/29

Notifications

12

Toast Notifications

Dialog Boxes

Notification Bar


22/29

Dialog Notifications

13


23/29


13


24/29


13


25/29


13


26/29


13


27/29


13


28/29

StyleSheet

Create style elements to use on all your views

Like CSS but written in XML

14


29/29

Demo

developing with android ui

Documents