Android Display Lists (PDF)

11/24/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/24/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/24/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 Listeners like setOnItemSelectedListener handle selection events. 3 Define the Spinner in XML: 4 2  11/24/2024 Prepare Data: String[] items = {"Item 1", "Item 2", "Item 3"}; 5 Create and Set an Adapter: String[] items = {"Item 1", "Item 2", "Item 3"}; Spinner spinner = findViewById(R.id.spinner); 6 3  11/24/2024 Create and Set an Adapter: String[] items = {"Item 1", "Item 2", "Item 3"}; Spinner spinner = findViewById(R.id.spinner); ArrayAdapter adapter = new ArrayAdapter( this, android.R.layout.simple_spinner_item, items ); 7 Create and Set an Adapter: String[] items = {"Item 1", "Item 2", "Item 3"}; Spinner spinner = findViewById(R.id.spinner); ArrayAdapter adapter = new ArrayAdapter( this, android.R.layout.simple_spinner_item, items ); adapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdow n_item); 8 4  11/24/2024 Create and Set an Adapter: String[] items = {"Item 1", "Item 2", "Item 3"}; Spinner spinner = findViewById(R.id.spinner); ArrayAdapter adapter = new ArrayAdapter( this, android.R.layout.simple_spinner_item, items ); adapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item); spinner.setAdapter(adapter); 9 This code creates a functional Spinner: 1.Retrieves the Spinner view from the XML layout. 2.Prepares an adapter to link the data (items) to the Spinner. 3.Specifies a layout for the dropdown menu items. 4.Binds the adapter to the Spinner so it can display the data. 10 5  11/24/2024 Handle Selection Events: spinner.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener() { 11 Handle Selection Events: spinner.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener() { @Override public void onItemSelected(AdapterView parent, View view, int position, long id) { 12 6  11/24/2024 Handle Selection Events: spinner.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener() { @Override public void onItemSelected(AdapterView parent, View view, int position, long id) { String selectedItem = items[position]; 13 Handle Selection Events: spinner.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener() { @Override public void onItemSelected(AdapterView parent, View view, int position, long id) { String selectedItem = items[position]; Toast.makeText(getApplicationContext(), "Selected: " + selectedItem, Toast.LENGTH_SHORT).show(); 14 7  11/24/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. 15 Listview A listView can just be another widget in the layout as well. 16 8  11/24/2024 Listview Or a very complex, which multiple widgets in each item in the list Also true for the spinner 17 Define the ListView in XML: 18 9  11/24/2024 Prepare Data: String[] items = {"Android", "iOS", "Windows"}; 19 Create and Set an Adapter: String[] items = {"Android", "iOS", "Windows"}; ListView listView = findViewById(R.id.list_view); 20 10  11/24/2024 Create and Set an Adapter: String[] items = {"Android", "iOS", "Windows"}; ListView listView = findViewById(R.id.list_view); ArrayAdapter adapter = new ArrayAdapter( this, android.R.layout.simple_list_item_1, items ); 21 Create and Set an Adapter: String[] items = {"Android", "iOS", "Windows"}; ListView listView = findViewById(R.id.list_view); ArrayAdapter adapter = new ArrayAdapter( this, android.R.layout.simple_list_item_1, items); listView.setAdapter(adapter); 22 11  11/24/2024 Handle Item Clicks: listView.setOnItemClickListener(new AdapterView.OnItemClickListener() { 23 Handle Item Clicks: listView.setOnItemClickListener(new AdapterView.OnItemClickListener() { @Override public void onItemClick(AdapterView parent, View view, int position, long id) { 24 12  11/24/2024 Handle Item Clicks: listView.setOnItemClickListener(new AdapterView.OnItemClickListener() { @Override public void onItemClick(AdapterView parent, View view, int position, long id) { String selectedItem = items[position]; 25 Handle Item Clicks: listView.setOnItemClickListener(new AdapterView.OnItemClickListener() { @Override public void onItemClick(AdapterView parent, View view, int position, long id) { String selectedItem = items[position]; Toast.makeText(getApplicationContext(), "Clicked: " + selectedItem, Toast.LENGTH_SHORT).show(); }); 26 13  11/24/2024 How It Works Together: 1.Register Listener 2.Handle Click 3.Fetch Data 4.Show Feedback 27 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 28 14  11/24/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. 29 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. 30 15  11/24/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 31 Add RecyclerView in XML: 32 16  11/24/2024 Prepare Data: List items = Arrays.asList("Item 1", "Item 2", "Item 3"); 33 Create a Layout Manager: List items = Arrays.asList("Item 1", "Item 2", "Item 3"); RecyclerView recyclerView = findViewById(R.id.recycler_view); 34 17  11/24/2024 Create a Layout Manager: List items = Arrays.asList("Item 1", "Item 2", "Item 3"); RecyclerView recyclerView = findViewById(R.id.recycler_view); recyclerView.setLayoutManager(new LinearLayoutManager(this)); 35 Define an Adapter: List items = Arrays.asList("Item 1", "Item 2", "Item 3"); RecyclerView recyclerView = findViewById(R.id.recycler_view); recyclerView.setLayoutManager(new LinearLayoutManager(this)); public class MyAdapter extends RecyclerView.Adapter { 36 18  11/24/2024 Define an Adapter: List items = Arrays.asList("Item 1", "Item 2", "Item 3"); RecyclerView recyclerView = findViewById(R.id.recycler_view); recyclerView.setLayoutManager(new LinearLayoutManager(this)); public class MyAdapter extends RecyclerView.Adapter { private List data; 37 Define an Adapter: List items = Arrays.asList("Item 1", "Item 2", "Item 3"); RecyclerView recyclerView = findViewById(R.id.recycler_view); recyclerView.setLayoutManager(new LinearLayoutManager(this)); public class MyAdapter extends RecyclerView.Adapter { private List data; public static class ViewHolder extends RecyclerView.ViewHolder { TextView textView; 38 19  11/24/2024 Define an Adapter: List items = Arrays.asList("Item 1", "Item 2", "Item 3"); RecyclerView recyclerView = findViewById(R.id.recycler_view); recyclerView.setLayoutManager(new LinearLayoutManager(this)); public class MyAdapter extends RecyclerView.Adapter { private List data; public static class ViewHolder extends RecyclerView.ViewHolder { TextView textView; public ViewHolder(View itemView) { super(itemView); textView = itemView.findViewById(R.id.text_view); } 39 Define an Adapter: List items = Arrays.asList("Item 1", "Item 2", "Item 3"); RecyclerView recyclerView = findViewById(R.id.recycler_view); recyclerView.setLayoutManager(new LinearLayoutManager(this)); public class MyAdapter extends RecyclerView.Adapter { private List data; public static class ViewHolder extends RecyclerView.ViewHolder { TextView textView; public ViewHolder(View itemView) { super(itemView); textView = itemView.findViewById(R.id.text_view); } 40 20  11/24/2024 Define an Adapter: List items = Arrays.asList("Item 1", "Item 2", "Item 3"); RecyclerView recyclerView = findViewById(R.id.recycler_view); recyclerView.setLayoutManager(new LinearLayoutManager(this)); public class MyAdapter extends RecyclerView.Adapter { private List data; public static class ViewHolder extends RecyclerView.ViewHolder { TextView textView; public ViewHolder(View itemView) { super(itemView); textView = itemView.findViewById(R.id.text_view); } public MyAdapter(List data) { this.data = data; } 41 Define an Adapter: @Override public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) { View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.recycler_item, parent, false); return new ViewHolder(view); 42 21  11/24/2024 Define an Adapter: @Override public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) { View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.recycler_item, parent, false); return new ViewHolder(view); public void onBindViewHolder(ViewHolder holder, int position) { holder.textView.setText(data.get(position)); } 43 Define an Adapter: @Override public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) { View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.recycler_item, parent, false); return new ViewHolder(view); public void onBindViewHolder(ViewHolder holder, int position) { holder.textView.setText(data.get(position)); } @Override public int getItemCount() { return data.size(); } 44 22  11/24/2024 Looking like 45 Refresh and swipes. Swipes down from the top allows a refresh Swipe left or right can trigger other actions In the case, swipe right deletes an item. 46 23  11/24/2024 Swiping and Refreshing 47 Swipe Down/refresh Uses the SwipeRefreshLayout wrapped around the recyclerview.