1. MOBILE COMPUTING D10K-7D02 MC03: Introduction to Android Programming Dr. Setiawan Hadi, M.Sc.CS. Program Studi S-1 Teknik Informatika FMIPA Universitas Padjadjaran

2. Mobile Computing Teknik Informatika-Semester Ganjil 2015-2016 Android App Kebanyakan ditulis dalam Java Android SDK tools mengkompilasi code, data dan resource files menjadi Android PacKage yaitu filename.apk (filename berekstensi apk). Apps didownload dari Google Play, atau dikopikan ke alat adalah berupa filename.apk Instalasi = menginstal file apk Elemen-elemen App – User Interface – Other code designed to run in background (multi‐task)

3. Mobile Computing Teknik Informatika-Semester Ganjil 2015-2016 UI Design menggunakan XML Android memisahkan UI design dari program Mengapa? Agar UI dapat dimodifikasi tanpa mengubah program Java Contoh: Dalam aplikasi contoh, shapes, colors dapat diubah dalam file XML tanpa mengubah program Java UI dirancang menggunakan graphical (WYSIWYG) tool atau Extensible Markup Language (XML) XML: – Markup language that is both human‐readable and machine‐readable'

4. Mobile Computing Teknik Informatika-Semester Ganjil 2015-2016 File-file dalam Android Project Folder/DirectoryDeskripsiContoh res/layout/XML files for look or layout of Android screens The width, height, layout of screen cells are specified in XML file here res/drawable‐xyz/images (PNG, JPEG, etc) at various resolutions The images stored in jpg or other format here res/rawgeneral‐purpose files (e.g. audio clips, CSV files res/values/strings, dimensions, etc java/Java code for programming the “brains” of the app. E.g. What happens on user input, etc App’s behavior when user clicks on a selection in java file here Configuration files(e.g. AndroidManifext.xml) Contains app name, app screens, etc App’s behavior when user clicks on a selection in java file here

5. Mobile Computing Teknik Informatika-Semester Ganjil 2015-2016 File-file dalam Android Project

6. Mobile Computing Teknik Informatika-Semester Ganjil 2015-2016 Editting Android Activity_my.xml is XML file specifying screen layout Can edit XML directly or drag and drop

7. Mobile Computing Teknik Informatika-Semester Ganjil 2015-2016 What is XML file? Android XML files consist of: – UI components called Views – ViewGroups (or layout managers) The example XML file shown contains: – 1 ViewGroup (LinearLayout) that fills the entire screen – 1 View (TextView) that contains text

8. Mobile Computing Teknik Informatika-Semester Ganjil 2015-2016 Basic Overview of an App https://www.youtube.com/watch?v=9l1lfWAiHPg Main topics – Introduces main files of Android App Activity_main.xml MainActivity.java AndroidManifest.xml – How to work with these files within Android Studio – Editting files using either drag‐and‐drop interface or XML – Flow of basic app

9. Mobile Computing Teknik Informatika-Semester Ganjil 2015-2016 Activity Activity: main building block of Android UI Analogous to a window or dialog box in adesktop application Apps – have at least 1 activity that deals with UI – Entry point of app similar to main( ) in C Typically have multiple activities Example: A camera app – Activity 1: to focus, take photo, start activity 2 – Activity 2: to present photo for viewing, save it Each activity controls 1 or more screens Activities independent of each other Can be coupled by control or data App Activities are sub‐class of Activity class

10. Mobile Computing Teknik Informatika-Semester Ganjil 2015-2016 Activity_main.xml XML file used to design screen layout, buttons, etc Widgets: elements that can be dragged onto activity (screen)

11. Mobile Computing Teknik Informatika-Semester Ganjil 2015-2016 MainActivity.java Used to define actions taken when button clicked (intelligence)

12. Mobile Computing Teknik Informatika-Semester Ganjil 2015-2016 activity_main.xml: Text View Design View: Drag‐and‐drop screen (Activity) design Text view: Directly edit XML file defining screen

13. Mobile Computing Teknik Informatika-Semester Ganjil 2015-2016 AndroidManifest.xml App’s starting point (a bit like main( ) in C) All activities (screens) are listed in AndroidManifest.xml Activity with tag “LAUNCHER” is launched first (starting point)

14. Mobile Computing Teknik Informatika-Semester Ganjil 2015-2016 Inside “MyHello” AndroidManifest.xml

15. Mobile Computing Teknik Informatika-Semester Ganjil 2015-2016 Resume 3 Files: – activity_main.xml: XML file specifying screen layout – MainActivity.Java: Java code to define behavior, actions taken when button clicked (intelligence) – AndroidManifest.xml: Lists all screens, components of app How these components attach themselves to overall Android system Analogous to a table of contents for a book E.g. Hello world program has 1 screen, so AndroidManifest.xml has 1 item listed App starts running here (a bit like main( ) in C), launches activity with a tag “LAUNCHER”

16. Mobile Computing Teknik Informatika-Semester Ganjil 2015-2016 AndroidManifest.xml

17. Mobile Computing Teknik Informatika-Semester Ganjil 2015-2016 MainActivity.Java

18. Mobile Computing Teknik Informatika-Semester Ganjil 2015-2016 activity_main.xml After choosing the layout, then widgets added to design UI

19. Mobile Computing Teknik Informatika-Semester Ganjil 2015-2016 Android Compilation Process/Steps Dalvik is Android virtual machine – Works like Java virtual machine, but optimized for mobile devices

20. Mobile Computing Teknik Informatika-Semester Ganjil 2015-2016 Execution Order

21. RESOURCES

22. Mobile Computing Teknik Informatika-Semester Ganjil 2015-2016 View Properties and String Resources Views are declared with attributes for configuring them Consider the following TextView example @string/hello is a variable declared in another file, strings.xml

23. Mobile Computing Teknik Informatika-Semester Ganjil 2015-2016 Strings in AndroidManifest.xml Strings declared in strings.xml can be referenced by all other XML files (activity_main.xml, AndroidManifest.xml)

24. Mobile Computing Teknik Informatika-Semester Ganjil 2015-2016 strings.xml

25. Mobile Computing Teknik Informatika-Semester Ganjil 2015-2016 Styled Text In HTML, tags can be used for italics, bold, etc E.g. Hello makes text Hello Hello makes text Hello Can use the same HTML tags to add style (italics, bold, etc) to your Android strings

26. Mobile Computing Teknik Informatika-Semester Ganjil 2015-2016 Files in Android Project res/layout: The width, height, layout of screen cells are specified in XML file here res/drawable‐xyz/: The images stored in jpg or other format here java/: App’s behavior when user clicks on screen (e.g. button) specified in java file here AndroidManifext.XML: Contains app name (Pinterest), list of app screens, etc

27. Mobile Computing Teknik Informatika-Semester Ganjil 2015-2016 Resource Files in an Android Project Resources (stored in /res folder) are static bits of information outside java code (e.g. layout, images, etc). E.g. – res/drawable‐xyz/ – res/layout: Can have multiple resource definitions, used under different conditions. E.g internalization (text in different languages) In Android Studio, the res/ folder is app/src/main/

28. Mobile Computing Teknik Informatika-Semester Ganjil 2015-2016 Phone Dimensions Used in Android UI Physical dimensions measured diagonally – E.g. Nexus 4 is 4.7 inches diagonally Resolution in pixels – E.g. Nexus 4 resolution 768 x 1280 pixels Pixel Density = PPI = Dots per inch (DPI) is number of pixels in a physical area – Low density (ldpi) = 120 dpi – Medium density (mdpi) = 160 dpi – High density (hdpi) = 240 dpi – Extra High Density (xhdpi) = 320 dpi

29. Mobile Computing Teknik Informatika-Semester Ganjil 2015-2016 PPI dan DPI DPI. Dots per inch. That’s how many droplets of liquid squeeze into an inch of your printed paper. PPI. Pixels per inch. That’s how many points of light live on an inch of screen.

30. Mobile Computing Teknik Informatika-Semester Ganjil 2015-2016 Adding Pictures Android supports images in PNG, JPEG and GIF formats GIF officially discouraged, PNG preferred format Default directory for images (drawables) is res/drawable‐xyz Images in res/drawable‐xyz can be referenced by XML and java files – res/drawable‐ldpi: low dpi images (~ 120 dpi of dots per inch) – res/drawable‐mdpi: medium dpi images (~ 160 dpi) – res/drawable‐hdpi: high dpi images (~ 240 dpi) – res/drawable‐xhdpi: extra high dpi images (~ 320 dpi) – res/drawable‐xxhdpir: extra extra high dpi images (~ 480 dpi) – res/drawable‐xxxhdpi: high dpi images (~ 640 dpi) Images in these directories are same size, different resolutions

31. Mobile Computing Teknik Informatika-Semester Ganjil 2015-2016 Layout Layouts can contain UI elements (provided and custom) Stored in res/layout Useful Layouts: – FrameLayout, – LinearLayout, – TableLayout, – GridLayout, – RelativeLayout, – ListView, – GridView, – ScrollView, – DrawerLayout, – ViewPager

32. Mobile Computing Teknik Informatika-Semester Ganjil 2015-2016 Kompilasi ke Hardware Android

33. Mobile Computing Teknik Informatika-Semester Ganjil 2015-2016 Kompilasi ke Hardware Android

34. Mobile Computing Teknik Informatika-Semester Ganjil 2015-2016 activity_mail.xml

35. Mobile Computing Teknik Informatika-Semester Ganjil 2015-2016 package com.example.shadi.myhello; import android.app.Activity; import android.os.Bundle; import android.view.Menu; import android.view.MenuItem; //tambah import android.content.Context; import android.view.View; import android.widget.Toast; public class MainActivity extends Activity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); } @Override public boolean onCreateOptionsMenu(Menu menu) { // Inflate the menu; this adds items to the action bar if it is present. getMenuInflater().inflate(R.menu.menu_main, menu); return true; } @Override public boolean onOptionsItemSelected(MenuItem item) { // Handle action bar item clicks here. The action bar will // automatically handle clicks on the Home/Up button, so long // as you specify a parent activity in AndroidManifest.xml. int id = item.getItemId(); //noinspection SimplifiableIfStatement if (id == R.id.action_settings) { return true; } return super.onOptionsItemSelected(item); } public void okButtonClicked(View v) { tToast("Tombok OK di klik!"); } public void cancelButtonClicked(View v) { tToast("Tombok Cancel di klik!"); } private void tToast(String s) { Context context = getApplicationContext(); int duration = Toast.LENGTH_SHORT; Toast toast = Toast.makeText(context, s, duration); toast.show();