Android University - Week 1

Transcript

1. Android University Week 1: Flicks Android App
2. Flicks App Portrait Landscape
3. Let’s break down what we need to know in order build this app!
4. Let’s break down what we need to know in order build this app! • How to create different screens for your app
5. Let’s break down what we need to know in order build this app! • How to create different screens for your app • How to build the UI / Layout for each screen
6. Let’s break down what we need to know in order build this app! • How to create different screens for your app • How to build the UI / Layout for each screen • How to show a list of similar items (each item has a movie image, a title, and a description)
7. Let’s break down what we need to know in order build this app! • How to create different screens for your app • How to build the UI / Layout for each screen • How to show a list of similar items (each item has a movie image, a title, and a description) • How to retrieve the information we need to display all this?
8. Why are we starting with this app? • Let’s take a look at some of the most popular Android apps
9. Why are we starting with this app? • Let’s take a look at some of the most popular Android apps
10. Why are we starting with this app? • In fact, when you think about it, almost all Android apps that aren’t games are composed the same type of screens
11. Why are we starting with this app? • In fact, when you think about it, almost all Android apps that aren’t games are composed the same type of screens
12. In the next video… • We’ll take a quick tour of Android Studio and the Android project structure • We’ll also look a deeper look at the main building piece of Android apps : Activities and their Layouts
13. Starting a new Android project
18. Android’s Activity All apps have at least one ‘screen’ that the user can interact with
19. Android’s Activity All apps have at least one ‘screen’ that the user can interact with In Android, a ‘screen’ is called an Activity
20. Android’s Activity All apps have at least one ‘screen’ that the user can interact with In Android, a ‘screen’ is called an Activity Activities are where we write Java code to handle logic for user interactions, change what’s on the screen, and a lot more
21. Layouts In Android, what’s displayed on the screen is usually designed in XML files
22. Layouts In Android, what’s displayed on the screen is usually designed in XML files Layouts are usually composed of multiple views like TextViews, ImageViews, Buttons, and more
24. Bridging Activity and Layout
25. Bridging Activity and Layout
26. What’s going on in the XML layout file?
27. What’s going on in the XML layout file?
28. What’s going on in the XML layout file?
32. In the next video… • We’ll take a deeper dive on how RecyclerViews work
33. RecyclerViews
34. Why do we need RecyclerViews?
35. What we need to build a RecyclerView Data (to populate the views)
36. What we need to build a RecyclerView Data (to populate the views) Layout for each row in the RecyclerView
37. What we need to build a RecyclerView Data (to populate the views) Layout for each row in the RecyclerView An adapter to populate each row’s view with our data
38. Data Models Every row in a RecyclerView is backed by a data model
39. Data Models Every row in a RecyclerView is backed by a data model
 
 Example: public class Email { String id; String sender; String subject; String messagePreview; String dateSend; public Email(String id, String sender, String subject, String messagePreview, String dateSend) { this.id = id; this.sender = sender; this.subject = subject; this.messagePreview = messagePreview; this.dateSend = dateSend; } }
40. Row Layouts Every row in a RecyclerView also needs to have a defined layout
 

41. Row Layouts Every row in a RecyclerView also needs to have a defined layout
 
 These layouts are defined the same way as layouts for Activities, in XMLs
42. Adapters and View Holders When building RecyclerViews, we also need a way to populate each row layout (defined in XML) with our data (model classes)
43. Adapters and View Holders When building RecyclerViews, we also need a way to populate each row layout (defined in XML) with our data (model classes) This is accomplished with a RecyclerView.Adapter
44. RecyclerView.Adapter public class EmailAdapter extends RecyclerView.Adapter<EmailAdapter.ViewHolder> { List<Email> emailsToDisplay; // Provide a direct reference to each of the views within a data item // Used to cache the views within the item layout for fast access public class ViewHolder extends RecyclerView.ViewHolder { } // Usually involves inflating a layout from XML and returning the holder @Override public ContactsAdapter.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) { } // Involves populating data into the item through holder @Override public void onBindViewHolder(ContactsAdapter.ViewHolder viewHolder, int position) { } }
45. RecyclerView.Adapter public class EmailAdapter extends RecyclerView.Adapter<EmailAdapter.ViewHolder> { List<Email> emailsToDisplay; // Provide a direct reference to each of the views within a data item // Used to cache the views within the item layout for fast access public class ViewHolder extends RecyclerView.ViewHolder { } // Usually involves inflating a layout from XML and returning the holder @Override public ContactsAdapter.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) { } // Involves populating data into the item through holder @Override public void onBindViewHolder(ContactsAdapter.ViewHolder viewHolder, int position) { } }
46. RecyclerView.Adapter public class EmailAdapter extends RecyclerView.Adapter<EmailAdapter.ViewHolder> { List<Email> emailsToDisplay; // Provide a direct reference to each of the views within a data item // Used to cache the views within the item layout for fast access public class ViewHolder extends RecyclerView.ViewHolder { } // Usually involves inflating a layout from XML and returning the holder @Override public ContactsAdapter.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) { } // Involves populating data into the item through holder @Override public void onBindViewHolder(ContactsAdapter.ViewHolder viewHolder, int position) { } }
47. RecyclerView.Adapter public class EmailAdapter extends RecyclerView.Adapter<EmailAdapter.ViewHolder> { List<Email> emailsToDisplay; // Provide a direct reference to each of the views within a data item // Used to cache the views within the item layout for fast access public class ViewHolder extends RecyclerView.ViewHolder { public TextView nameTextView; public TextView messageTitleTextView; // We also create a constructor that accepts the entire item row // and does the view lookups to find each subview public ViewHolder(View itemView) { // Stores the itemView in a public final member variable that can be used // to access the context from any ViewHolder instance. super(itemView); nameTextView = (TextView) itemView.findViewById(R.id.name); messageTitleTextView = (TextView) itemView.findViewById(R.id.messageTitle); } } // Usually involves inflating a layout from XML and returning the holder @Override public ContactsAdapter.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) { } // Involves populating data into the item through holder @Override public void onBindViewHolder(ContactsAdapter.ViewHolder viewHolder, int position) { } }
48. RecyclerView.Adapter public class EmailAdapter extends RecyclerView.Adapter<EmailAdapter.ViewHolder> { List<Email> emailsToDisplay; // Provide a direct reference to each of the views within a data item // Used to cache the views within the item layout for fast access public class ViewHolder extends RecyclerView.ViewHolder { } // Usually involves inflating a layout from XML and returning the holder @Override public ContactsAdapter.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) { } // Involves populating data into the item through holder @Override public void onBindViewHolder(ContactsAdapter.ViewHolder viewHolder, int position) { } }
49. RecyclerView.Adapter public class EmailAdapter extends RecyclerView.Adapter<EmailAdapter.ViewHolder> { List<Email> emailsToDisplay; // Provide a direct reference to each of the views within a data item // Used to cache the views within the item layout for fast access public class ViewHolder extends RecyclerView.ViewHolder { } // Usually involves inflating a layout from XML and returning the holder @Override public ContactsAdapter.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) { Context context = parent.getContext(); LayoutInflater inflater = LayoutInflater.from(context); // Inflate the custom layout View emailItemView = inflater.inflate(R.layout.item_email, parent, false); // Return a new holder instance ViewHolder viewHolder = new ViewHolder(emailItemView); return viewHolder; } // Involves populating data into the item through holder @Override public void onBindViewHolder(ContactsAdapter.ViewHolder viewHolder, int position) { } }
50. RecyclerView.Adapter public class EmailAdapter extends RecyclerView.Adapter<EmailAdapter.ViewHolder> { List<Email> emailsToDisplay; // Provide a direct reference to each of the views within a data item // Used to cache the views within the item layout for fast access public class ViewHolder extends RecyclerView.ViewHolder { } // Usually involves inflating a layout from XML and returning the holder @Override public ContactsAdapter.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) { } // Involves populating data into the item through holder @Override public void onBindViewHolder(ContactsAdapter.ViewHolder viewHolder, int position) { } }
51. RecyclerView.Adapter public class EmailAdapter extends RecyclerView.Adapter<EmailAdapter.ViewHolder> { List<Email> emailsToDisplay; // Provide a direct reference to each of the views within a data item // Used to cache the views within the item layout for fast access public class ViewHolder extends RecyclerView.ViewHolder { } // Usually involves inflating a layout from XML and returning the holder @Override public ContactsAdapter.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) { } // Involves populating data into the item through holder @Override public void onBindViewHolder(ContactsAdapter.ViewHolder viewHolder, int position) { // Get the data model based on position Email email = emailsToDisplay.get(position); // Set item views based on your views and data model viewHolder.nameTextView.setText(email.getName()); viewHolder.messageTitleTextView.setText(email.getTitle()); } }
52. LayoutManagers Lastly, we need to set a LayoutManager for our RecyclerView
53. LayoutManagers Lastly, we need to set a LayoutManager for our RecyclerView LayoutManagers tells the RecyclerView how to position items and when to reuse item views
54. LayoutManagers Lastly, we need to set a LayoutManager for our RecyclerView LayoutManagers tells the RecyclerView how to position items and when to reuse item views
55. Putting it all together public class MainActivity extends AppCompatActivity { ArrayList<Email> emails; @Override protected void onCreate(Bundle savedInstanceState) { // ... // Lookup the recyclerview in activity layout RecyclerView rvEmails = (RecyclerView) findViewById(R.id.rvEmailList); // Call api to get list of emails emails = getEmails(); // Create adapter passing in the sample user data EmailAdapater adapter = new EmailAdapater(emails); // Attach the adapter to the recyclerview to populate items rvEmails.setAdapter(adapter); // Set layout manager to position the items rvEmails.setLayoutManager(new LinearLayoutManager(this)); // That's all! } }
56. Putting it all together public class MainActivity extends AppCompatActivity { ArrayList<Email> emails; @Override protected void onCreate(Bundle savedInstanceState) { // ... // Lookup the recyclerview in activity layout RecyclerView rvEmails = (RecyclerView) findViewById(R.id.rvEmailList); // Call api to get list of emails emails = getEmails(); // Create adapter passing in the sample user data EmailAdapater adapter = new EmailAdapater(emails); // Attach the adapter to the recyclerview to populate items rvEmails.setAdapter(adapter); // Set layout manager to position the items rvEmails.setLayoutManager(new LinearLayoutManager(this)); // That's all! } }
57. Putting it all together public class MainActivity extends AppCompatActivity { ArrayList<Email> emails; @Override protected void onCreate(Bundle savedInstanceState) { // ... // Lookup the recyclerview in activity layout RecyclerView rvEmails = (RecyclerView) findViewById(R.id.rvEmailList); // Call api to get list of emails emails = getEmails(); // Create adapter passing in the sample user data EmailAdapater adapter = new EmailAdapater(emails); // Attach the adapter to the recyclerview to populate items rvEmails.setAdapter(adapter); // Set layout manager to position the items rvEmails.setLayoutManager(new LinearLayoutManager(this)); // That's all! } }
58. Putting it all together public class MainActivity extends AppCompatActivity { ArrayList<Email> emails; @Override protected void onCreate(Bundle savedInstanceState) { // ... // Lookup the recyclerview in activity layout RecyclerView rvEmails = (RecyclerView) findViewById(R.id.rvEmailList); // Call api to get list of emails emails = getEmails(); // Create adapter passing in the sample user data EmailAdapater adapter = new EmailAdapater(emails); // Attach the adapter to the recyclerview to populate items rvEmails.setAdapter(adapter); // Set layout manager to position the items rvEmails.setLayoutManager(new LinearLayoutManager(this)); // That's all! } }
59. Putting it all together public class MainActivity extends AppCompatActivity { ArrayList<Email> emails; @Override protected void onCreate(Bundle savedInstanceState) { // ... // Lookup the recyclerview in activity layout RecyclerView rvEmails = (RecyclerView) findViewById(R.id.rvEmailList); // Call api to get list of emails emails = getEmails(); // Create adapter passing in the sample user data EmailAdapater adapter = new EmailAdapater(emails); // Attach the adapter to the recyclerview to populate items rvEmails.setAdapter(adapter); // Set layout manager to position the items rvEmails.setLayoutManager(new LinearLayoutManager(this)); // That's all! } }
60. Putting it all together public class MainActivity extends AppCompatActivity { ArrayList<Email> emails; @Override protected void onCreate(Bundle savedInstanceState) { // ... // Lookup the recyclerview in activity layout RecyclerView rvEmails = (RecyclerView) findViewById(R.id.rvEmailList); // Call api to get list of emails emails = getEmails(); // Create adapter passing in the sample user data EmailAdapater adapter = new EmailAdapater(emails); // Attach the adapter to the recyclerview to populate items rvEmails.setAdapter(adapter); // Set layout manager to position the items rvEmails.setLayoutManager(new LinearLayoutManager(this)); // That's all! } }
61. In the next video… • We’ll look into how to make network requests to populate our RecyclerViews
62. Executing and Consuming Network Requests
63. In order to get a list of movies that are currently playing, we need to access data stored on the internet
64. In order to get a list of movies that are currently playing, we need to access data stored on the internet APIs allow us to access all types of different data
65. In order to get a list of movies that are currently playing, we need to access data stored on the internet APIs allow us to access all types of different data https://api.themoviedb.org/3/movie/ now_playing?api_key={your_api_key}
66. { "results": [ { "vote_count": 2150, "id": 335983, "video": false, "vote_average": 6.6, "title": "Venom", "popularity": 225.576, "poster_path": "\/2uNW4WbgBXL25BAbXGLnLqX71Sw.jpg", "original_language": "en", "original_title": "Venom", "genre_ids": [ 878 ], "backdrop_path": "\/VuukZLgaCrho2Ar8Scl9HtV3yD.jpg", "adult": false, "overview": "When Eddie Brock acquires the powers of a symbiote, he will have to release his alter-ego \"Venom\" to save his life.", "release_date": "2018-10-03" }, { "vote_count": 881, "id": 424694, "video": false, "vote_average": 8.3, "title": "Bohemian Rhapsody", "popularity": 134.625, "poster_path": "\/lHu1wtNaczFPGFDTrjCSzeLPTKN.jpg", "original_language": "en", "original_title": "Bohemian Rhapsody", "genre_ids": [ 18, 10402 ], "backdrop_path": "\/pbXgLEYh8rlG2Km5IGZPnhcnuSz.jpg", "adult": false, "overview": "Singer Freddie Mercury, guitarist Brian May, drummer Roger Taylor and bass guitarist John Deacon take the music world by storm when they form the rock 'n' roll band Queen in 1970. Hit songs become instant classics. When Mercury's increasingly wild lifestyle starts to spiral out of control, Queen soon faces its greatest challenge yet \u2013 finding a way to keep the band together amid the success and excess.", "release_date": "2018-10-24" }, { …
67. Making Network Calls Everything that happens in an Android app is running on just one thread, also known as the Main Thread, or UI Thread.
68. Making Network Calls Everything that happens in an Android app is running on just one thread, also known as the Main Thread, or UI Thread. This means that if start doing one task (ie : making a network call), we cannot start another task (ie: processing user interaction) until the first task finishes.
69. Making Network Calls Everything that happens in an Android app is running on just one thread, also known as the Main Thread, or UI Thread. This means that if start doing one task (ie : making a network call), we cannot start another task (ie: processing user interaction) until the first task finishes. Since network calls can take a unknown amount of time, we don’t want our app to appear ‘frozen’ or ‘unresponsive’ when we’re waiting for a network call to complete.
70. AsyncHttpClient We can use the AsyncHttpClient library to make network requests outside of the app’s Main Thread
71. AsyncHttpClient We can use the AsyncHttpClient library to make network requests outside of the app’s Main Thread When we use it to make a network call, we also get access to callback methods that’ll allow us to handle the result of the network call
72. AsyncHttpClient AsyncHttpClient client = new AsyncHttpClient(); client.get("https://www.google.com", new JsonHttpResponseHandler() { @Override public void onSuccess(int statusCode, Header[] headers, JSONObject response) { // this method will get called if the network request succeeds } @Override public void onFailure(int statusCode, Header[] headers, String responseString, Throwable e) { // this method will get called if the network request fails } });
73. AsyncHttpClient AsyncHttpClient client = new AsyncHttpClient(); client.get("https://www.google.com", new JsonHttpResponseHandler() { @Override public void onSuccess(int statusCode, Header[] headers, JSONObject response) { // this method will get called if the network request succeeds } @Override public void onFailure(int statusCode, Header[] headers, String responseString, Throwable e) { // this method will get called if the network request fails } });
74. AsyncHttpClient AsyncHttpClient client = new AsyncHttpClient(); client.get("https://www.google.com", new JsonHttpResponseHandler() { @Override public void onSuccess(int statusCode, Header[] headers, JSONObject response) { // this method will get called if the network request succeeds } @Override public void onFailure(int statusCode, Header[] headers, String responseString, Throwable e) { // this method will get called if the network request fails } });