Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Android UI part I

Android UI part I

Covers the basics of Android UI development

Alexey Buzdin

October 01, 2014
Tweet

More Decks by Alexey Buzdin

Other Decks in Programming

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