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.png8/8/2019 Developing With Android Ui
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
8/8/2019 Developing With Android Ui
3/29
Linear Layout
3
.....
8/8/2019 Developing With Android Ui
4/29
Linear Layout
3
.....
8/8/2019 Developing With Android Ui
5/29
Linear Layout
3
android:layout_width="fill_parent" android:layout_height="fill_parent">
........
8/8/2019 Developing With Android Ui
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/android8/8/2019 Developing With Android Ui
7/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/android8/8/2019 Developing With Android Ui
8/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/android8/8/2019 Developing With Android Ui
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);}
8/8/2019 Developing With Android Ui
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);}
8/8/2019 Developing With Android Ui
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);}
8/8/2019 Developing With Android Ui
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);}
8/8/2019 Developing With Android Ui
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));}
http://schemas.android.com/apk/res/androidhttp://schemas.android.com/apk/res/androidhttp://schemas.android.com/apk/res/androidhttp://schemas.android.com/apk/res/android8/8/2019 Developing With Android Ui
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));}
http://schemas.android.com/apk/res/androidhttp://schemas.android.com/apk/res/androidhttp://schemas.android.com/apk/res/androidhttp://schemas.android.com/apk/res/android8/8/2019 Developing With Android Ui
15/29
Views: MapView
8
http://schemas.android.com/apk/res/androidhttp://schemas.android.com/apk/res/androidhttp://schemas.android.com/apk/res/androidhttp://schemas.android.com/apk/res/android8/8/2019 Developing With Android Ui
16/29
Views: MapView
8
http://schemas.android.com/apk/res/androidhttp://schemas.android.com/apk/res/androidhttp://schemas.android.com/apk/res/androidhttp://schemas.android.com/apk/res/android8/8/2019 Developing With Android Ui
17/29
Views: WebView
9
http://schemas.android.com/apk/res/androidhttp://schemas.android.com/apk/res/androidhttp://schemas.android.com/apk/res/androidhttp://schemas.android.com/apk/res/android8/8/2019 Developing With Android Ui
18/29
Views: WebView
9
http://schemas.android.com/apk/res/androidhttp://schemas.android.com/apk/res/androidhttp://schemas.android.com/apk/res/androidhttp://schemas.android.com/apk/res/android8/8/2019 Developing With Android Ui
19/29
Form View Gallery ViewTab View
Other Views
10
8/8/2019 Developing With Android Ui
20/29
Menus
11
Screen Menu Context Menu
8/8/2019 Developing With Android Ui
21/29
Notifications
12
Toast Notifications
Dialog Boxes
Notification Bar
8/8/2019 Developing With Android Ui
22/29
Dialog Notifications
13
8/8/2019 Developing With Android Ui
23/29
Dialog Notifications
13
8/8/2019 Developing With Android Ui
24/29
Dialog Notifications
13
8/8/2019 Developing With Android Ui
25/29
Dialog Notifications
13
8/8/2019 Developing With Android Ui
26/29
Dialog Notifications
13
8/8/2019 Developing With Android Ui
27/29
Dialog Notifications
13
8/8/2019 Developing With Android Ui
28/29
StyleSheet
Create style elements to use on all your views
Like CSS but written in XML
14
8/8/2019 Developing With Android Ui
29/29
Demo
Top Related