Android Display Lists and Lists of Data PDF

11/16/2024 Display Lists of data 1 Display lists of data In Android there are three main way to display data for the user to interact with A Drop-Down List box, which android calls a spinner widget. ListView Used mostly to display dat...

11/16/2024 Display Lists of data 1 Display lists of data In Android there are three main way to display data for the user to interact with A Drop-Down List box, which android calls a spinner widget. ListView Used mostly to display data in a simple format, but it be can be very complex. RecyclerView The successor to a ListView, can be very simple or complex in the way it displays data These each take a "list" of data and use an adapter to display the data to the user. 2 1  11/16/2024 Spinner Uses a spinner widget in the XML An array of data is provided Uses likely a built in Android adapter to display the data ArrayAdapter uses a simple layout, which can be one of the android.R.layout.X http://developer.android.com/intl/zh- CN/reference/android/R.layout.html for the full list We can get very fancy, like listview. 3 Spinner A spinner needs "items" to fill the drop-down box. This is done using an ArrayAdapter Using a string[] items, we can ArrayAdapter adapter = new ArrayAdapter(this,android.R.layout.simple_spinner_item, items); adapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item); Then use setAdapter(adapter); //fills the list Add listener, setOnItemSelectedListener(this) implement AdapterView.OnItemSelectedListener public void onItemSelected(AdapterView parent, View view, int position, long id) Where position is the position in the array for the item selected. 4 2  11/16/2024 Listview The spinner shown before is a very similar to a list view A listView can be the only widget on the screen (no layout is needed) and can get very complex with the adapter. The items in the list are normally clickable. 5 Listview A listView can just be another widget in the layout as well. 6 3  11/16/2024 Listview Or a very complex, which multiple widgets in each item in the list Also true for the spinner 7 Listview and listFragment There is a listfragment that can be used (also a listactivity too). It has a default layout which contains a listview. You use the setListAdapter(adapter) method And you override the OnListItemClick Or you can just use a fragment, create the layout with a listview (and other views/widgets) And provide you own code to run the listview. 8 4  11/16/2024 Listview and listFragment public class Simple extends ListFragment { @Override The layout is how the items public void onActivityCreated(Bundle savedInstanceState) { will be displayed super.onActivityCreated(savedInstanceState); // NOTE, there is no xml layout for this activity! String[] values = new String[] { "Android", "iPhone", "WindowsMobile", "Blackberry", "WebOS", "Ubuntu", "Windows7", "Max OS X", "Linux", "OS/2" }; ArrayAdapter adapter = new ArrayAdapter(requireActivity(),android.R.layout.simple_list_item_1, values); setListAdapter(adapter); } //This responses to the click event. @Override protected void onListItemClick(ListView l, View v, int position, long id) { String item = (String) getListAdapter().getItem(position); Toast.makeText(this, item + " selected", Toast.LENGTH_LONG).show(); } } 9 Changing the layout ArrayAdapter adapter = new ArrayAdapter(requireActivity() , R.layout.rowlayout, R.id.label, values); setListAdapter(adapter); Uses a layout we created and the label is where the item is go. In this case with an picture. 10 5  11/16/2024 rowlayout.xml Using our custom layout, the listView displays an picture (the same picture for all items) And we need a textview to display the “item” for each one. Which is called label in this case (you can choose whatever name). 11 More complex ListViews. If you want to display more then one piece of information per item, then you can have not only change the layout, but extend the ArrayAdapter or BaseAdapter. 12 6  11/16/2024 ArrayAdapter The ArrayAdapter already extends the BaseAdapter and provides a lot of built in methods. In the ListFragment (or Fragment) you would do something like this: ArrayAdapter adapter = new InteractiveArrayAdapter(this, myModelList); setListAdapter(adapter); Where myModleList is a list Where model is a class you created. 13 ArrayAdapter (2) public class InterActive_myArrayAdapter extends ArrayAdapter { private final List list; private final Activity context; InteractiveRowlayoutBinding binding; public InterActive_myArrayAdapter(Activity context, List list) { super(context, R.layout.interactive_rowlayout, list); this.context = context; this.list = list; } @Override public View getView(int position, View convertView, ViewGroup parent) { //this will look very similar to onCreate or OnCreateView, using binding. } } 14 7  11/16/2024 getView So for this one, we have TextView and checkBox. The List tells us if it’s checked or not. In getView, we create the View 15 getView if (convertView == null) { binding = InteractiveRowlayoutBinding.inflate(context.getLayoutInflater()); } else { binding = InteractiveRowlayoutBinding.bind(convertView); } binding.label.setText(list.get(position).getName()); binding.check.setChecked(list.get(position).isSelected()); binding.check.setOnCheckedChangeListener(new OnCheckedChangeListener() { … see the code. }); //Tag is an like a temp space, in a widget where you can set some information as an Object Class //in this case, the position variable. binding.check.setTag(String.valueOf(position)); //used to find the list position when we change the check mark onBind = false; //end of setting data. return binding.getRoot(); 16 8  11/16/2024 Custom ListViews We want to very complex and provide our own interface, then normally we extend the baseAdapter to create “fragments” for each item in the ListView. In this case a Phone class is created to hold all the Information, which passed to an extended baseAdapter. 17 RecyclerView 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. Provides built Layout manages for positions default animations for common item operations, such as removal or addition of items https://developer.android.com/training/material/lists-cards.html 18 9  11/16/2024 RecyclerView (2) Like the listview, uses an adapter We normally use a cardview as the default layout for each item in the list. Similar to a fragment. 19 CardView extends the FrameLayout class and lets you show information inside cards that have a consistent look across the platform. CardView widgets can have shadows and rounded corners. Android 5.0+ (API 21+) use card_view:cardElevation attribute. CardView is not required with the recyclerView. They are just commonly used together. 20 10  11/16/2024 Including You need to include the them in the dependencies (build.gradle module) implementation 'androidx.recyclerview:recyclerview:1.3.2' implementation 'androidx.cardview:cardview:1.0.0' versions as of Aug 23, 2024 21 RecyclerView Add the following to your layout In your activity use the following code, (very similar to a listview) binding.list.setLayoutManager(new LinearLayoutManager(this)); binding.list.setItemAnimator(new DefaultItemAnimator()); setup the adapter, which is myAdapter, see the next slide for code. There is no simple adapter version, you need to extend it. mAdapter = new myAdapter(values, R.layout.my_row, this); binding.list.setAdapter(mAdapter); 22 11  11/16/2024 Recyclerview.Adapter public class myAdapter extends RecyclerView.Adapter { private List myList; private int rowLayout; private Context mContext; //constructor public myAdapter(List myList, int rowLayout, Context context) { this.myList = myList; this.rowLayout = rowLayout; this.mContext = context; } // Create new views (invoked by the layout manager) @Override public ViewHolder onCreateViewHolder(ViewGroup viewGroup, int i) { MyRowBinding v = MyRowBinding.inflate(LayoutInflater.from(mContext), viewGroup, false); return new ViewHolder(v); } // Return the size of your dataset (invoked by the layout manager) @Override public int getItemCount() { return myList == null ? 0 : myList.size(); } 23 Recyclerview.Adapter (2) //viewbinding provides the references now. public static class ViewHolder extends RecyclerView.ViewHolder { public MyRowBinding viewBinding; public ViewHolder(MyRowBinding viewBinding) { super(viewBinding.getRoot()); this.viewBinding = viewBinding; } } 24 12  11/16/2024 My_row.xml and cardView 29 Swipe Down/refresh (2) Java code, then setups a listener for it. And optionally set colors for the refresh loop. setup some colors for the refresh circle. Optional. binding.mSwipeRefreshLayout.setColorSchemeResources(R.color.orange, R.color.green, R.color.blue); now setup the swiperefrestlayout listener where the main work is done. binding.mSwipeRefreshLayout.setOnRefreshListener(new SwipeRefreshLayout.OnRefreshListener() { @Override public void onRefresh() { Do/Call refresh code here } }); When the refresh is done, make this call to turn off the refresh UI. binding.mSwipeRefreshLayout.setRefreshing(false); 30 15  11/16/2024 Swipe left/right code. No changes to the xml are necessary. Uses the ItemTouchHelper callbacks First setup a simplecallback (next slide) Then attach the recyclerview to it. ItemTouchHelper itemTouchHelper = new ItemTouchHelper(simpleItemTouchCallback); itemTouchHelper.attachToRecyclerView(binding.mRecyclerView); 31 ItemTouchHelper.SimpleCallback Create the callback ItemTouchHelper.SimpleCallback simpleItemTouchCallback = new ItemTouchHelper.SimpleCallback(0, ItemTouchHelper.RIGHT) { For both Left and right use: ItemTouchHelper.RIGHT |ItemTouchHelper.LEFT @Override public boolean onMove(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder, RecyclerView.ViewHolder target) { //likely allows to for animations? or moving items in the view I think. return false; } @Override public void onSwiped(RecyclerView.ViewHolder viewHolder, int direction) { if (direction == ItemTouchHelper.RIGHT) { //Now remove the item from the list (likely in the adapter) int item = viewHolder.getAdapterPosition(); //Which item it is in the list. // don’t forget notifyDataSetChanged(); in the adapter as well. //you can combine this with a snackbar as simple, Do you really want to delete this. } } }; 32 16