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

Android University - Week 1

7bf2baf0d8d5d7d96e6b67c5d567e3f9?s=47 Caren
December 13, 2018
130

Android University - Week 1

7bf2baf0d8d5d7d96e6b67c5d567e3f9?s=128

Caren

December 13, 2018
Tweet

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

  14. None
  15. None
  16. None
  17. None
  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
  23. None
  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?

  29. None
  30. None
  31. None
  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 } });