05. RecyclerView and Styles

Size: px

Start display at page:

Download "05. RecyclerView and Styles"

Anissa Cain
5 years ago
Views:

1 05. RecyclerView and Styles

2 Agenda Intents Creating Lists with RecyclerView Creating Cards with CardView Application Bar Menu Styles and Themes 2

3 Intents 3

4 What is Intent? An Intent is an object that provides runtime binding between separate components (such as two activities) The Intent represents an app s "intent to do something" You can use intents for a wide variety of tasks, but most often they re used to start another activity 4

5 Build an Intent The constructor used here takes two parameters A Context as its first parameter (this is used because the Activity class is a subclass of Context) The Class of the app component to which the system should deliver the Intent (in this case, the activity that should be started) public void intent(view view) { Intent intent = new Intent(this, DetailActivity.class); } 5

6 Starting Another Activity To start an activity call startactivity() pass it your Intent The system receives this call and starts an instance of the Activity specified by the Intent public void opensecondactivity(view view) { Intent intent = new Intent(this, DetailActivity.class); intent.putextra("param", "into"); } startactivity(intent); 6

7 Receive the Intent Every Activity is invoked by an Intent, regardless of how the user navigated there You can get the Intent that started your activity by calling getintent() and retrieve the data contained within the protected void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); } setcontentview(r.layout.activity_detail); Intent intent = getintent(); String pparam = intent.getstringextra("param"); 7

8 RecyclerView 8

RecyclerView The RecyclerView widget is a more advanced and flexible version of ListView This widget is a container for displaying large data sets that can be scrolled very

9 RecyclerView The RecyclerView widget is a more advanced and flexible version of ListView This widget is a container for displaying large data sets that can be scrolled very efficiently by maintaining a limited number of views Use the RecyclerView widget when you have data collections whose elements change at runtime based on user action or network events. 9

10 RecyclerView To use the RecyclerView widget you have to specify an adapter layout manager To create an adapter, extend the RecyclerView.Adapter class 10

11 Custom Layout 11

12 LayoutManager Linear LayoutManager Grid LayoutManager StaggeredGrid LayoutManager 12

13 Create a RecyclerView - 1 Add required Gradle dependency to your app's module build.gradle file apply plugin: 'com.android.application' android { } dependencies { compile filetree(dir: 'libs', include: ['*.jar']) androidtestcompile('com.android.support.test.espresso:espresso-core:2.2.2', { exclude group: 'com.android.support', module: 'support-annotations' }) compile 'com.android.support:appcompat-v7: compile 'com.android.support:recyclerview-v7:24.2.1' testcompile 'junit:junit:4.12' } 13

14 Create a RecyclerView - 2 Add a RecyclerView in your layout <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android=" xmlns:tools=" android:id="@+id/activity_main" android:layout_width="match_parent" android:layout_height="match_parent > <android.support.v7.widget.recyclerview android:id="@+id/recyclerview" android:layout_width="match_parent" android:layout_height="wrap_content"> </android.support.v7.widget.recyclerview> </RelativeLayout> 14

15 Create a RecyclerView - 3 Once you have added a RecyclerView widget to your layout obtain a handle to the object connect it to a layout manager attach an adapter for the data to be displayed public class MainActivity extends AppCompatActivity { private String[] mydataset; private RecyclerView recyclerview; private RecyclerView.Adapter adapter; private RecyclerView.LayoutManager protected void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.activity_main); recyclerview = (RecyclerView) findviewbyid(r.id.recyclerview); // use a linear layout manager layoutmanager = new LinearLayoutManager(this); recyclerview.setlayoutmanager(layoutmanager); // specify an adapter (see also next example) adapter = new RecyclerView.Adapter(myDataset); recyclerview.setadapter(adapter); } } 15

16 public class MyAdapter extends RecyclerView.Adapter<MyAdapter.ViewHolder> { private String[] mdataset; // Provide a reference to the views for each data item public static class ViewHolder extends RecyclerView.ViewHolder { // each data item is just a string in this case public TextView mtextview; public ViewHolder(View view) { super(view); mtextview = (TextView) view.findviewbyid(r.id.message); } } // Provide a suitable constructor (depends on the kind of dataset) public MyAdapter(String[] mydataset) { mdataset = mydataset; } // Create new views (invoked by the layout public MyAdapter.ViewHolder oncreateviewholder(viewgroup parent, int viewtype) { // create a new view View v = LayoutInflater.from(parent.getContext()).inflate(R.layout.list_item_view, parent, false); return new ViewHolder(v); } // Replace the contents of a view (invoked by the layout public void onbindviewholder(viewholder holder, int position) { // - get element from your dataset at this position and replace the contents of the view with that element holder.mtextview.settext(mdataset[position]); } // Return the size of your dataset (invoked by the layout 16 public int getitemcount() { return mdataset.length; } } Create a RecyclerView - 4 Create a custom adapter

17 oncreateviewholder Called when RecyclerView needs a new RecyclerView.ViewHolder of the given type to represent an item Parameters parent viewtype The ViewGroup into which the new View will be added a@er it is bound to an adapter posibon The view type of the new View Returns A new ViewHolder that holds a View of the given view type Return 17

18 onbindviewholder Called by RecyclerView to display the data at the specified position. This method should update the contents of the itemview to reflect the item at the given position Parameters holder posibon The ViewHolder which should be updated to represent the contents of the item at the given posibon in the data set The posibon of the item within the adapter's data set 18

19 Creating Cards 19

20 CardView CardView lets you show information inside cards that have a consistent look across the platform CardView widgets can have shadows and rounded corners. 20

21 Card Properties background color corner radius card with a shadow 21

22 Create a CardView - 1 Add required Gradle dependency to your app's module build.gradle file apply plugin: 'com.android.application' android { } dependencies { compile filetree(dir: 'libs', include: ['*.jar']) androidtestcompile('com.android.support.test.espresso:espresso-core:2.2.2', { exclude group: 'com.android.support', module: 'support-annotations' }) compile 'com.android.support:appcompat-v7: compile 'com.android.support:cardview-v7:24.2.1' testcompile 'junit:junit:4.12' } 22

23 Create a CardView - 2 Add a CardView in your layout <LinearLayout xmlns:android=" xmlns:tools=" xmlns:card_view=" > <-- A CardView that contains a TextView --> <android.support.v7.widget.cardview xmlns:card_view=" android:id="@+id/card_view" android:layout_gravity="center" android:layout_width="200dp" android:layout_height="200dp" card_view:cardcornerradius="4dp"> <TextView android:id="@+id/info_text" android:layout_width="match_parent" android:layout_height="match_parent" /> </android.support.v7.widget.cardview> </LinearLayout> 23

24 Application Bar Menu 24

25 What is Application Bar The App Bar ActionBar - available for Version >=Android 3.0 (API 11) Toolbar - available for Version >=Android 5.0 (API 21) The key functions of the app bar are as follows: A dedicated space for giving your app an identity and indicating the user's location in the app Access to important actions in a predictable way, such as search Support for navigation and view switching (with tabs or drop-down lists) 25

26 How to add Action Buttons to App Bar 1. Create menu layout that contains app bar items res/menu/main_menu.xml 2. Attach menu layout to activity oncreateoptionsmenu() 3. Implement actions for user selecting one of the app bar items onoptionsitemselected() 26

27 1- Create Menu Layout To add actions to the app bar, create a new XML file in your project's res/menu/ <?xml version="1.0" encoding="utf-8"?> directory. <menu xmlns:app=" xmlns:android=" <item android:id="@+id/menu_list" android:icon="@drawable/list" app:showasaction="always" android:title="list"> </item> <item android:id="@+id/menu_grid" android:icon="@drawable/grid" app:showasaction="always" android:title="grid"> </item> </menu> 27

28 1- Create Menu Layout The app:showasaction attribute specifies whether the action should be shown as a button on the app bar ShowAsAc<on Parameters ifroom never always Only place this item in the app bar if there is room for it Never place this item in the app bar Always place this item in the app bar 28

29 2- Attach Menu Layout Inflate menu.xml in oncreateoptionsmenu() method public class MainActivity extends AppCompatActivity protected void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.activity_main); public boolean oncreateoptionsmenu(menu menu) { MenuInflater inflater = getmenuinflater(); inflater.inflate(r.menu.menu_main, menu); return true; } } 29

30 3- Implement Actions When the user selects one of the app bar items, the system calls your activity's onoptionsitemselected() callback method passes a MenuItem object to indicate which item was public boolean onoptionsitemselected(menuitem item) { // Handle item selection switch (item.getitemid()) { case R.id.menu_list: recyclerview.setlayoutmanager(new LinearLayoutManager(this)); return true; case R.id.menu_grid: recyclerview.setlayoutmanager(new GridLayoutManager(this, 2)); return true; default: return super.onoptionsitemselected(item); } } 30

31 MenuInflator MenuInflator is used to instantiate menu XML files into Menu objects inflate() method attaches a menu hierarchy from the specified XML resource inflate Method Parameters menures menu Resource ID for an XML layout resource to load The Menu to inflate into. The items and submenus will be added to this Menu 31

32 Nested Menu Items <menu xmlns:android= <item android:title="options"> <menu> </item> <group android:checkablebehavior="all"> <item android:checked="true android:title="editable"> </item> </group> </menu> <item android:title="orientation"> <menu> <group android:checkablebehavior="single"> </group> </menu> </item> </menu> <item android:title="list > </item> <item android:title="grid > </item> 32

Open Lecture Mobile Programming. Intro to Material Design

Open Lecture Mobile Programming Intro to Material Design Agenda Introduction to Material Design Applying a Material Theme Toolbar/Action Bar Navigation Drawer RecyclerView CardView Support Design Widgets/Tools