Week4Tutorial Basic Activity PDF

Preview

Summary

Basic activities in android...

Description

University of Canberra Faculty of Science and Technology

Mobile Technologies (8878 & 9076)

Week 4 Tutorial Activity, Navigation, List View, Action Bar and Menu Tasks 1. 2. 3. 4.

Use Basic Activity for Mobile and Tablet app Add more activities to the app and implement navigation between them Use ListView container Use Action Bar and Menu

Screenshots for the app you implement in this tutorial

Implementation 1. 2. 3. 4. 5. 6.

Run Android Studio and select Start a New Android Studio Project On New Project window: enter ListViewActionBarMenuApp to Application name On Target Android Devices window: set Minimum SDK to API 27 On Add an Activity to Mobile window: select Basic Activity On Customise the Activity window: click Finish. Right-click on the image below, select Save as Picture and save it to the drawable folder (similar to what you did in Week 2 tutorial)

Page 1 of 8

7. Open content_main.xml, change Hello World! to What’s on in Canberra and change ID to textViewMain. Add an ImageButton to have the design as below (use the image above).

8. In the next steps, you will implement the app to let the user tap on the image button to open a new activity that contains a list of events (see the second screenshot on page 1). 9. Add an activity for list view: expand app -> java then right-click on the first package that contains MainActivity, select New -> Activity -> Basic Activity. Name it ListViewActivity.

Page 2 of 8

10. You will see a new Java file and 2 XML files as follows

11. Drag and drop a TextView to display List of Canberra Events, then drag and drop a ListView container as seen below

12. Now you add a click event to the image button to open the list view activity as follows: Open content_main.xml, select Text tab, and add this line to the ImageButton (similar to what you did in Week 3 tutorial) android:onClick="gotolistview" 13. Open MainActivity.java then add the code below for the gotolistview event listener (similar to what you did in Week 3 tutorial) public void gotolistview(View v){ Intent intent = new Intent(this, ListViewActivity.class); startActivity(intent); } 14. Now you run the project and click on the image. It should open the activity for list view (no item on the list at the moment). In the next steps, you will add 3 items to the list. Right-click on the first package in the java folder then select New -> Java Class.

Page 3 of 8

15. On the Create New Class dialog, enter CanberraEvent to the Name edit box then click OK to create this class. Implement the class as follows import java.util.Date; class CanberraEvent { String title; int imageResource; Date date; public CanberraEvent(String title, int imageResource, Date date) { this.title = title; this.imageResource = imageResource; this.date = date; } public String getTitle(){ return this.title; } public int getImageResource(){ return this.imageResource; } public String getDateString(){ return this.date.toString(); } @Override public String toString(){ return title; } }

16. In the ListViewActivity class, add the following to declare a list instance (above the onCreate method) ArrayList events = new ArrayList(); If you see ArrayList in red colour, just wait for a while then you will see a small pop up window that asks you to press Alt + Enter (this is to import missing libraries to your project). 17. In the ListViewActivity class, add the code below in to the onCreate method to create 3 instances of CanberraEvent class events.add(new CanberraEvent("Neon Night", R.drawable.neon_night, new Date(2017,3,3))); events.add(new CanberraEvent("Lights! Canberra! Actions!", Page 4 of 8

R.drawable.lights_canberra_actions, new Date(2017,3,10))); events.add(new CanberraEvent("National Portrait Gallery Late Night", R.drawable.national_portrait_gallery, new Date(2017,3,3))); ArrayAdapter adapter = new ArrayAdapter( this, android.R.layout.simple_list_item_1, events); ListView listView = (ListView) findViewById(R.id.listView); listView.setAdapter(adapter); 18. Right-click on the 3 images below and save them to the drawable folder with the names below

neon_night.jpg

lights_canberra_actions.jpg

national_portrait_gallery.jpg

19. Run your app and you will see 3 items on the list view

In the next steps, you will add one more activity to let the user open it when the user taps on an item on the list. 20. Add an activity for list items as follows. Expand app -> java then right-click on the first package that contains MainActivity, select New -> Activity -> Basic Activity. Name it EventActivity.

Page 5 of 8

21. Open content_event.xml, add 2 TextView elements and an ImageView as seen below. Create proper vertical and horizontal constraints for them. The text and image you see below is just for an event, other events will be displayed at runtime.

Verify their IDs are textViewLarge, textViewSmall, and imageView. 22. Add the code below to the onCreate method in ListViewActivity.java (below the line listView.setAdapter(adapter); you added in Step 17 above) to handle click event when the user clicks on an item on the list view. The Event Activity you have created above will be open by the Intent instance. listView.setOnItemClickListener( new AdapterView.OnItemClickListener() { @Override public void onItemClick(AdapterView parent, View view, int position, long id) { CanberraEvent cbrevent = events.get(position); Intent intent = new Intent(view.getContext(), EventActivity.class); intent.putExtra("title", cbrevent.getTitle()); intent.putExtra("imageResource", cbrevent.getImageResource()); intent.putExtra("date", cbrevent.getDateString()); startActivity(intent); } }); 23. Open EventActivity.java, copy the code in the block below to the end of the onCreate method. This code is to get the intent instance sent from MainActivity.java, then get the extras and get strings and image in this extras and display them on the event activity. Bundle extras = getIntent().getExtras(); String title = extras.getString("title"); int imageRes = extras.getInt("imageResource"); String date = extras.getString("date"); Page 6 of 8

TextView tv = (TextView) findViewById(R.id.textViewLarge); tv.setText(title); ImageView image = (ImageView) findViewById(R.id.imageView); image.setImageResource(imageRes); tv = (TextView) findViewById(R.id.textViewSmall); tv.setText(date); 24. Run your app and tap on each list view items to see the details of each item.

In the next steps, you will modify the menu so that it can display an item (Canberra Event List) for list view activity and the user can open this activity with this menu item.

25. Open menu_main.xml and modify the menu item for Settings to Canberra Event List as follows

Page 7 of 8

26. Open MainActivity.java, in the onOptionsItemSelected method, delete the current if statement then add the following (the code below is the same as the code in gotolistview of the ImageButton on the first activity) if (id == R.id.action_listview) { Intent intent = new Intent(this, ListViewActivity.class); startActivity(intent); return true; } 27. Now you run the app and tap the menu then the item. You would see the list view activity.

28. In menu_main.xml. change never to ifRoom then run the app again, you will see the menu item appears on the action bar.

29.Zip your entire project app and submit it via Canvas site of this unit and ask your tutor to see your complete work before you leave the lab. Mark for this tutorial: 1 mark and for attendance: 1 mark.

Page 8 of 8...