Android Developer Fundamentals User Interaction and Intuitive Navigation

  • Slides: 27
Download presentation
Android Developer Fundamentals User Interaction and Intuitive Navigation Lesson 4 Android Developer Fundamentals Recycler.

Android Developer Fundamentals User Interaction and Intuitive Navigation Lesson 4 Android Developer Fundamentals Recycler. View This work is licensed under a Creative Commons Attribution-Non. Commercial 4. 0 International License 1

4. 4 Recycler View Android Developer Fundamentals Recycler. View This work is licensed under

4. 4 Recycler View Android Developer Fundamentals Recycler. View This work is licensed under a Creative Commons Attribution-Non. Commercial 4. 0 International License 2

Contents ● Recycler. View Components ● Implementing a Recycler. View Android Developer Fundamentals Recycler.

Contents ● Recycler. View Components ● Implementing a Recycler. View Android Developer Fundamentals Recycler. View This work is licensed under a Creative Commons Attribution-Non. Commercial 4. 0 International License 3

What is a Recycler View? ● Scrollable container for large data sets ● Efficient

What is a Recycler View? ● Scrollable container for large data sets ● Efficient ○ uses and reuses limited number of views ○ Updates changing data fast ● Recycler. View Android Developer Fundamentals Recycler. View This work is licensed under a Creative Commons Attribution-Non. Commercial 4. 0 International License 4

Recycler. View Components Android Developer Fundamentals Recycler. View This work is licensed under a

Recycler. View Components Android Developer Fundamentals Recycler. View This work is licensed under a Creative Commons Attribution-Non. Commercial 4. 0 International License 5

Components All Components overview ● Data ● Recycler. View scrolling list for list items—Recycler.

Components All Components overview ● Data ● Recycler. View scrolling list for list items—Recycler. View ● Layout for one item of data—XML file ● Layout manage r handles the organization of UI components in a view— Recyclerview. Layout. Manager ● Adapter connects data to the Recycler. View—Recycler. View. Adapter ● View holder has view information for displaying one item— Recycler. View. Holder Android Developer Fundamentals Recycler. View This work is licensed under a Creative Commons Attribution-Non. Commercial 4. 0 International License 6

Components How components fit together overview Android Developer Fundamentals Recycler. View This work is

Components How components fit together overview Android Developer Fundamentals Recycler. View This work is licensed under a Creative Commons Attribution-Non. Commercial 4. 0 International License 7

Layoutis. Manager What a layout manager? ● All view groups have layout managers ●

Layoutis. Manager What a layout manager? ● All view groups have layout managers ● Positions item views inside a Recycler. View. ● Reuses item views that are no longer visible to the user ● Built-in layout managers include Linear. Layout. Manager, Grid. Layout. Manager, and Staggered. Grid. Layout. Manager ● For Recycler. View, extend Recycler. View. Layout. Manager Android Developer Fundamentals Recycler. View This work is licensed under a Creative Commons Attribution-Non. Commercial 4. 0 International License 8

Adapter What is an adapter? ● Helps incompatible interfaces work together, for example, takes

Adapter What is an adapter? ● Helps incompatible interfaces work together, for example, takes data from a database Cursor and puts them as strings into a view ● Intermediary between data and view ● Manages creating, updating, adding, deleting item views as the underlying data changes ● Recycler. View. Adapter Android Developer Fundamentals Recycler. View This work is licensed under a Creative Commons Attribution-Non. Commercial 4. 0 International License 9

Adapter What is a view holder? ● Used by the adapter to prepare one

Adapter What is a view holder? ● Used by the adapter to prepare one view with data for one list item ● Layout specified in an XML resource file ● Can have clickable elements ● Is placed by the layout manager ● Recycler. View. Holder Android Developer Fundamentals Recycler. View This work is licensed under a Creative Commons Attribution-Non. Commercial 4. 0 International License 10

Implementing Recycler. View Android Developer Fundamentals Recycler. View This work is licensed under a

Implementing Recycler. View Android Developer Fundamentals Recycler. View This work is licensed under a Creative Commons Attribution-Non. Commercial 4. 0 International License 11

Implementation Steps Summary 1. Add the Recycler. View dependency to app/build. gradle file 2.

Implementation Steps Summary 1. Add the Recycler. View dependency to app/build. gradle file 2. Add Recycler. View to layout 3. Create XML layout for item 4. Extend Recycler. View. Adapter 5. Extend Recycler. View. Holder 6. In on. Create of activity, create a Recycler. View with adapter and layout manager Android Developer Fundamentals Recycler. View This work is licensed under a Creative Commons Attribution-Non. Commercial 4. 0 International License 12

app/build. gradle Add dependency to app/build. gradle dependencies {. . . compile 'com. android.

app/build. gradle Add dependency to app/build. gradle dependencies {. . . compile 'com. android. support: recyclerview-v 7: 24. 1. 1'. . . } Android Developer Fundamentals Recycler. View This work is licensed under a Creative Commons Attribution-Non. Commercial 4. 0 International License 13

Activity Add Recycler. View layout to XML Layout <android. support. v 7. widget. Recycler.

Activity Add Recycler. View layout to XML Layout <android. support. v 7. widget. Recycler. View android: id="@+id/recyclerview" android: layout_width="match_parent" android: layout_height="match_parent"> </android. support. v 7. widget. Recycler. View> Android Developer Fundamentals Recycler. View This work is licensed under a Creative Commons Attribution-Non. Commercial 4. 0 International License 14

Item layout Create layout for 1 list item <Linear. Layout …> <Text. View android:

Item layout Create layout for 1 list item <Linear. Layout …> <Text. View android: id="@+id/word" style="@style/word_title" /> </Linear. Layout> Android Developer Fundamentals Recycler. View This work is licensed under a Creative Commons Attribution-Non. Commercial 4. 0 International License 15

Adapter: Create Implement the adapter public class Word. List. Adapter extends Recycler. View. Adapter<Word.

Adapter: Create Implement the adapter public class Word. List. Adapter extends Recycler. View. Adapter<Word. List. Adapter. Word. View. Holder> { public Word. List. Adapter(Context context, Linked. List<String> word. List) { m. Inflater = Layout. Inflater. from(context); this. m. Word. List = word. List; } } Android Developer Fundamentals Recycler. View This work is licensed under a Creative Commons Attribution-Non. Commercial 4. 0 International License 16

Adapter: has Adapter on. Create. View. Holder() 3 required methods ● on. Create. View.

Adapter: has Adapter on. Create. View. Holder() 3 required methods ● on. Create. View. Holder() ● in. Bind. View. Holder() ● get. Item. Count() Let's take a look! Android Developer Fundamentals Recycler. View This work is licensed under a Creative Commons Attribution-Non. Commercial 4. 0 International License 17

Adapter: on. Create. View. Holder() @Override public Word. View. Holder on. Create. View. Holder(

Adapter: on. Create. View. Holder() @Override public Word. View. Holder on. Create. View. Holder( View. Group parent, int view. Type) { // Create view from layout View m. Item. View = m. Inflater. inflate( R. layout. wordlist_item, parent, false); return new Word. View. Holder(m. Item. View, this); } Android Developer Fundamentals Recycler. View This work is licensed under a Creative Commons Attribution-Non. Commercial 4. 0 International License 18

Adapter: on. Bind. View. Holder() @Override public void on. Bind. View. Holder( Word. View.

Adapter: on. Bind. View. Holder() @Override public void on. Bind. View. Holder( Word. View. Holder holder, int position) { // Retrieve the data for that position String m. Current = m. Word. List. get(position); // Add the data to the view holder. word. Item. View. set. Text(m. Current); } Android Developer Fundamentals Recycler. View This work is licensed under a Creative Commons Attribution-Non. Commercial 4. 0 International License 19

Adapter: get. Item. Count() @Override public int get. Item. Count() { // Return the

Adapter: get. Item. Count() @Override public int get. Item. Count() { // Return the number of data items to display return m. Word. List. size(); } Android Developer Fundamentals Recycler. View This work is licensed under a Creative Commons Attribution-Non. Commercial 4. 0 International License 20

Adapter: Create the View. Holder view holder Class in adapter class Word. View. Holder

Adapter: Create the View. Holder view holder Class in adapter class Word. View. Holder extends Recycler. View. Holder {} If you want to handle mouse clicks: class Word. View. Holder extends Recycler. View. Holder implements View. On. Click. Listener {} Android Developer Fundamentals Recycler. View This work is licensed under a Creative Commons Attribution-Non. Commercial 4. 0 International License 21

View. Holder: View holder constructor Constructor public Word. View. Holder(View item. View, Word. List.

View. Holder: View holder constructor Constructor public Word. View. Holder(View item. View, Word. List. Adapter adapter) { super(item. View); // Get the layout word. Item. View = (Text. View) item. View. find. View. By. Id(R. id. word); // Associate with this adapter this. m. Adapter = adapter; // Add click listener, if desired item. View. set. On. Click. Listener(this); } // Implement on. Click() if desired Android Developer Fundamentals Recycler. View This work is licensed under a Creative Commons Attribution-Non. Commercial 4. 0 International License 22

Create Recycler. View in activity's on. Create() Createthe Recycler. View m. Recycler. View =

Create Recycler. View in activity's on. Create() Createthe Recycler. View m. Recycler. View = (Recycler. View) find. View. By. Id(R. id. recyclerview); m. Adapter = new Word. List. Adapter(this, m. Word. List); m. Recycler. View. set. Adapter(m. Adapter); m. Recycler. View. set. Layout. Manager(new Linear. Layout. Manager(this)); Android Developer Fundamentals Recycler. View This work is licensed under a Creative Commons Attribution-Non. Commercial 4. 0 International License 23

Practical: Recycler. View ● This is rather complex with many separate pieces. So, there

Practical: Recycler. View ● This is rather complex with many separate pieces. So, there is a whole practical where you implement a Recycler. View that displays a list of clickable words. ● Shows all the steps, one by one with a complete app Android Developer Fundamentals Recycler. View This work is licensed under a Creative Commons Attribution-Non. Commercial 4. 0 International License 24

Learn more ● Recycler. View class ● Recycler. View. Adapter class ● Recycler. View.

Learn more ● Recycler. View class ● Recycler. View. Adapter class ● Recycler. View. Holder class ● Recycler. View. Layout. Manager class Android Developer Fundamentals Recycler. View This work is licensed under a Creative Commons Attribution-Non. Commercial 4. 0 International License 25

What's Next? ● Concept Chapter: 4. 4 C Recycler. View ● Practical: 4. 4

What's Next? ● Concept Chapter: 4. 4 C Recycler. View ● Practical: 4. 4 P Create a Recycler View Android Developer Fundamentals Recycler. View This work is licensed under a Creative Commons Attribution-Non. Commercial 4. 0 International License 26

END Android Developer Fundamentals 27

END Android Developer Fundamentals 27