Slide 1

Slide 1 text

Android UI Session 4 part I Alexey Buzdin

Slide 2

Slide 2 text

Sample App

Slide 3

Slide 3 text

Activity

Slide 4

Slide 4 text

Activity application presentation layer single, focused things that user can do rough synonym of “screen”

Slide 5

Slide 5 text

src/**/MainActivity.java public class MainActivity extends Activity { ! @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); } }

Slide 6

Slide 6 text

AndroidManifest.xml

Slide 7

Slide 7 text

Activity Stack

Slide 8

Slide 8 text

Activity ActionBar

Slide 9

Slide 9 text

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)

Slide 10

Slide 10 text

An action bar that includes the [1] app icon, [2] two action items, and [3] action overflow.

Slide 11

Slide 11 text

Activity ActionBar Views

Slide 12

Slide 12 text

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:

Slide 13

Slide 13 text

View

Slide 14

Slide 14 text

View TextView ImageView Button

Slide 15

Slide 15 text

Example @Override protected void onCreate(Bundle state) { super.onCreate(state); TextView view = new TextView(this); view.setText("Hello World"); setContentView(view); }

Slide 16

Slide 16 text

Example @Override protected void TextView view = view.setText( } What’s this? this

Slide 17

Slide 17 text

Example @Override protected void TextView view = view.setText( } this Context

Slide 18

Slide 18 text

Context access to application-specific resources and classes for launching activities, broadcasting and receiving intents, etc. access to up-calls for application-level operations

Slide 19

Slide 19 text

Example @Override protected void onCreate(Bundle state) { super.onCreate(state); mapView = new MapView(this); mapView.onCreate(state); setContentView(mapView); }

Slide 20

Slide 20 text

Example @Override protected void mapView = new MapView( setContentView(mapV } Context this

Slide 21

Slide 21 text

View TextView ImageView Button ViewGroup

Slide 22

Slide 22 text

ViewGroup container that organizes child views

Slide 23

Slide 23 text

View TextView ImageView Button ViewGroup LinearLayout

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

! ! …2 more buttons.. ! res/layout/main.xml https://gist.github.com/LArchaon/4ea1eaa89c21ceccda10

Slide 26

Slide 26 text

! < android:layout_width="wrap_content" android:layout_height="wrap_content" android:text=“1"/> ! …2 more buttons.. !

Slide 27

Slide 27 text

in Activity @Override protected void onCreate(Bundle state) { super.onCreate(state); setContentView(R.layout.main); }

Slide 28

Slide 28 text

in Activity Layout resource from res/ @Override protected void onCreate(Bundle state) { super.onCreate(state); setContentView(R.layout.main); }

Slide 29

Slide 29 text

@Override protected void onCreate(Bundle state) { super.onCreate(state); View view = LayoutInflater.from(this) .inflate(R.layout.main, null); setContentView(view); } same as

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

! ! …2 more buttons.. ! res/layout/main.xml

Slide 33

Slide 33 text

@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

Slide 34

Slide 34 text

@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

Slide 35

Slide 35 text

LinearLayout android:layout_weight Session 4

Slide 36

Slide 36 text

! ! !

Slide 37

Slide 37 text

! ! !

Slide 38

Slide 38 text

How about this?

Slide 39

Slide 39 text

! ! !

Slide 40

Slide 40 text

….. Button with text 4 …… ! https://gist.github.com/LArchaon/b0ef20c1395c3b884b47

Slide 41

Slide 41 text

View TextView ImageView Button ViewGroup LinearLayout RelativeLayout

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

Perfect for this

Slide 44

Slide 44 text

…. Buttons C and D ….. …. Button E ….. https://gist.github.com/LArchaon/b6842ad6f4eadbfac012

Slide 45

Slide 45 text

View TextView ImageView Button ViewGroup LinearLayout RelativeLayout FrameLayout

Slide 46

Slide 46 text

Session 4 FrameLayout

Slide 47

Slide 47 text

View TextView ImageView Button ViewGroup LinearLayout RelativeLayout FrameLayout GridLayout

Slide 48

Slide 48 text

GridLayout Session 4

Slide 49

Slide 49 text

Misc android:layout_gravity android:gravity android:padding android:layout_margin

Slide 50

Slide 50 text

ImageView

Slide 51

Slide 51 text

http://www.techrepublic.com/article/clear-up-ambiguity-about-android-image-view-scale-types-with-this-guide/

Slide 52

Slide 52 text

Resources strings, colors, images, themes, menus, layouts

Slide 53

Slide 53 text

Alternative Resources

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

Stored within res/values Simple values Strings Colors Dimensions Styles String or integer arrays

Slide 56

Slide 56 text

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 !

Slide 57

Slide 57 text

View TextView ImageView Button ViewGroup LinearLayout RelativeLayout FrameLayout GridLayout AdapterView Expandable ListView ListView GridView Spinner

Slide 58

Slide 58 text

View TextView ImageView Button ViewGroup LinearLayout RelativeLayout FrameLayout GridLayout AdapterView Expandable ListView ListView GridView Spinner Next Session

Slide 59

Slide 59 text

Q&A