Android UI part I

Covers the basics of Android UI development

Transcript

1. Android UI Session 4 part I Alexey Buzdin
2. Sample App
3. Activity
4. Activity application presentation layer single, focused things that user can do rough synonym of “screen”
5. src/**/MainActivity.java public class MainActivity extends Activity { ! @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); } }
6. <activity android:name="lv.abuzdin.android.sampleapp.MainActivity" android:label="@string/app_name" > <intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" /> </intent-filter> </activity> AndroidManifest.xml
7. Activity Stack
8. Activity ActionBar
9. supports consistent navigation and view switching (tabs or drop-down lists) http://developer.android.com/guide/topics/ui/actionbar.html ActionBar dedicated space for app identity and user's location makes important actions accessible (such as Search)
10. An action bar that includes the [1] app icon, [2] two action items, and [3] action overflow.
11. Activity ActionBar Views
12. View is java class a visual application component on a screen http://developer.android.com/reference/android/view/View.html onMeasure() onLayout() onDraw() with methods:
13. View
14. View TextView ImageView Button
15. Example @Override protected void onCreate(Bundle state) { super.onCreate(state); TextView view = new TextView(this); view.setText("Hello World"); setContentView(view); }
16. Example @Override protected void TextView view = view.setText( } What’s this? this
17. Example @Override protected void TextView view = view.setText( } this Context
18. Context access to application-specific resources and classes for launching activities, broadcasting and receiving intents, etc. access to up-calls for application-level operations
19. Example @Override protected void onCreate(Bundle state) { super.onCreate(state); mapView = new MapView(this); mapView.onCreate(state); setContentView(mapView); }
20. Example @Override protected void mapView = new MapView( setContentView(mapV } Context this
21. View TextView ImageView Button ViewGroup
22. ViewGroup container that organizes child views
23. View TextView ImageView Button ViewGroup LinearLayout
24. LinearLayout LinearLayout layout = new LinearLayout(this); layout.addView(new Button(this)); layout.addView(new Button(this)); layout.addView(new Button(this)); Session 4 Session 4 Horizontal Vertical
25. <LinearLayout xmlns:android="http:// schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical"> ! <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text=“1"/> ! …2 more buttons.. ! </LinearLayout> res/layout/main.xml https://gist.github.com/LArchaon/4ea1eaa89c21ceccda10
26. <LinearLayout xmlns:android="http:// schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical"> ! < android:layout_width="wrap_content" android:layout_height="wrap_content" android:text=“1"/> ! …2 more buttons.. ! </ res https://gist.github.com/LArchaon/4ea1eaa89c21ceccda10 android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_width="match_parent" android:layout_height="wrap_content"
27. in Activity @Override protected void onCreate(Bundle state) { super.onCreate(state); setContentView(R.layout.main); }
28. in Activity Layout resource from res/ @Override protected void onCreate(Bundle state) { super.onCreate(state); setContentView(R.layout.main); }
29. @Override protected void onCreate(Bundle state) { super.onCreate(state); View view = LayoutInflater.from(this) .inflate(R.layout.main, null); setContentView(view); } same as
30. LayoutInflater 1. fill (a balloon, tyre, or other expandable structure) with air or gas so that it becomes distended. 2. increase (something) by a large or excessive amount. View view = LayoutInflater.from(this) .inflate(R.layout.activity_main, null); inflate! /ɪnˈfleɪt/! verb
31. LayoutInflater 1. fill (a balloon, tyre, or other expandable structure) with air or gas so that it becomes distended. 2. increase (something) by a large or excessive amount. View view = LayoutInflater.from(this) .inflate(R.layout.activity_main, null); inflate! /ɪnˈfleɪt/! verb Fill View from XML
32. <LinearLayout xmlns:android="http:// schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical"> ! <Button android:id=“@+id/button” android:layout_width="wrap_content" android:layout_height="wrap_content" android:text=“1"/> ! …2 more buttons.. ! </LinearLayout> res/layout/main.xml
33. @Override protected void onCreate(Bundle state) { super.onCreate(state); View view = LayoutInflater.from(this) .inflate(R.layout.main, null); Button button = (Button) view.findViewById(R.id.button); button.setText("Button"); setContentView(view); } View.findViewById
34. @Override protected void onCreate(Bundle state) { super.onCreate(state); setContentView(R.layout.main); Button button = (Button) findViewById(R.id.button); button.setText("Button"); } Activity.findViewById
35. LinearLayout android:layout_weight Session 4
36. <LinearLayout ….. android:orientation="horizontal" android:weightSum="2"> ! <Button android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:text="1"/> ! <Button android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:text="2"/> ! </LinearLayout>
37. <LinearLayout ….. android:orientation="horizontal" android:weightSum="3"> ! <Button android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="2" android:text="1"/> ! <Button android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:text="2"/> ! </LinearLayout>
38. How about this?
39. <LinearLayout ….… android:weightSum="5"> ! <Button ….. android:layout_weight="1" android:text="1"/> <LinearLayout android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight=“3" android:orientation="vertical"> </LinearLayout> ! <Button … android:layout_weight="1" android:text="2"/> ! </LinearLayout>
40. <LinearLayout …… android:orientation="vertical"> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="horizontal"> <Button android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="0.5" android:text="3"/> ….. Button with text 4 …… </LinearLayout> ! <Button android:layout_width="match_parent" android:layout_height="wrap_content" android:text="5"/> </LinearLayout> https://gist.github.com/LArchaon/b0ef20c1395c3b884b47
41. View TextView ImageView Button ViewGroup LinearLayout RelativeLayout
42. RelativeLayout android:layout_alignParentLeft! android:layout_alignParentRight! android:layout_alignParentTop android:layout_alignParentBottom android:layout_toRightOf android:layout_toLeftOf android:layout_below android:layout_above Session 4
43. Perfect for this
44. <RelativeLayout …. > <Button …. android:id="@+id/A" android:layout_alignParentLeft="true" android:layout_alignParentTop="true" /> <Button …. android:id="@+id/F" android:layout_alignParentRight="true"/> <LinearLayout …. android:id="@+id/container" android:layout_toRightOf="@+id/A" android:layout_toLeftOf="@+id/F" android:weightSum="3"> <Button android:text="B" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1"/> …. Buttons C and D ….. </LinearLayout> …. Button E ….. </RelativeLayout> https://gist.github.com/LArchaon/b6842ad6f4eadbfac012
45. View TextView ImageView Button ViewGroup LinearLayout RelativeLayout FrameLayout
46. Session 4 FrameLayout
47. View TextView ImageView Button ViewGroup LinearLayout RelativeLayout FrameLayout GridLayout
48. GridLayout Session 4
49. Misc android:layout_gravity android:gravity android:padding android:layout_margin
50. ImageView <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/duck"/>
51. <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src=“@drawable/duck" android:scaleType="fitXY"/> http://www.techrepublic.com/article/clear-up-ambiguity-about-android-image-view-scale-types-with-this-guide/
52. Resources strings, colors, images, themes, menus, layouts
53. Alternative Resources
54. Configuration qualifiers en, fr, en-rUS, fr-rFR, fr-rCA Language and region mcc310, mcc310-mnc004 Mobile country code Screen size small, normal, large, xlarge Orientation land, port Screen density ldpi, mdpi, hdpi, nodpi
55. Stored within res/values Simple values Strings Colors Dimensions Styles String or integer arrays
56. Do not use hard-coded values in your application code (num, strings) Use wrap_content, fill_parent, or the dp unit for layout dimensions Test Your Application on Multiple Screens !
57. View TextView ImageView Button ViewGroup LinearLayout RelativeLayout FrameLayout GridLayout AdapterView Expandable ListView ListView GridView Spinner
58. View TextView ImageView Button ViewGroup LinearLayout RelativeLayout FrameLayout GridLayout AdapterView Expandable ListView ListView GridView Spinner Next Session
59. Q&A