Search code examples
javaandroidandroid-layoutandroid-gui

Display a list in a gui - java/Android Studio


My goal is to display a list where each element (iteration) is displayed with two buttons: Exampleimage

The buttons would change a variable in the specific element of the list.

My problem: How do I create this gui in Android Studio?


Solution

  • Here I implement a simple example of RecyclerView in android (java). You can change it as you need:

    1. Add item.xml in your layout folder, and write these lines in it:

       <?xml version="1.0" encoding="utf-8"?>
       <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
           xmlns:app="http://schemas.android.com/apk/res-auto"
           android:layout_width="match_parent"
           android:layout_height="wrap_content">
      
       <TextView
           android:id="@+id/titleTextView"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:layout_margin="20dp"
           app:layout_constraintBottom_toBottomOf="parent"
           app:layout_constraintLeft_toLeftOf="parent"
           app:layout_constraintTop_toTopOf="parent" />
      
       <Button
           android:id="@+id/option2Button"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:layout_margin="20dp"
           app:layout_constraintBottom_toBottomOf="parent"
           app:layout_constraintRight_toRightOf="parent"
           app:layout_constraintTop_toTopOf="parent" />
      
       <Button
           android:id="@+id/option1Button"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:layout_margin="20dp"
           app:layout_constraintBottom_toBottomOf="parent"
           app:layout_constraintRight_toLeftOf="@+id/option2Button"
           app:layout_constraintTop_toTopOf="parent" />
      
       </androidx.constraintlayout.widget.ConstraintLayout>
      

    this is based on your sample image. this layout contains all views in a single row of list. if you want more buttons or texts in each row, you must add them in this file.

    1. You always need an Adapter class for RecyclerViews. So, add MyAdapter.java class to your project as below:

       public class MyAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder>
       {
           private Context context;
           private List<String> titles;
      
           MyAdapter(Context context, List<String> titles)
           {
               this.context = context;
               this.titles = titles;
           }
      
           @NonNull
           @Override
           public RecyclerView.ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType)
           {
               RecyclerView.ViewHolder viewHolder;
               LayoutInflater inflater = LayoutInflater.from(parent.getContext());
      
               viewHolder = getViewHolder(parent, inflater);
      
               return viewHolder;
           }
      
           private RecyclerView.ViewHolder getViewHolder(ViewGroup parent, LayoutInflater inflater)
           {
               RecyclerView.ViewHolder viewHolder;
               View v1 = inflater.inflate(R.layout.item, parent, false);
               viewHolder = new ItemVH(v1);
               return viewHolder;
           }
      
           @Override
           public void onBindViewHolder(@NonNull RecyclerView.ViewHolder holder, int position)
           {
               ItemVH itemVH = (ItemVH) holder;
      
               // set title for each item:
               itemVH.titleTextView.setText(titles.get(position));
               itemVH.option1Button.setText("option 1");
               itemVH.option2Button.setText("option 2");
      
               // click listener for first button:
               itemVH.option1Button.setOnClickListener(new View.OnClickListener()
               {
                   @Override
                   public void onClick(View v)
                   {
                       // option 1 button clicked
                   }
               });
      
               // click listener for second button:
               itemVH.option2Button.setOnClickListener(new View.OnClickListener()
               {
                   @Override
                   public void onClick(View v)
                   {
                       // option 2 button clicked
                   }
               });
           }
      
           @Override
           public int getItemCount()
           {
               return titles.size();
           }
      
           // add item to list:
           public void addItem(String title)
           {
               titles.add(title);
               notifyItemInserted(titles.size() - 1);
           }
      
           // remove item from list:
           public void remove(String title)
           {
               int position = titles.indexOf(title);
               if (position > -1)
               {
                   titles.remove(position);
                   notifyItemRemoved(position);
               }
           }
      
           protected class ItemVH extends RecyclerView.ViewHolder
           {
               private TextView titleTextView;
               private Button option1Button;
               private Button option2Button;
      
               public ItemVH(View itemView)
               {
                   super(itemView);
      
                   titleTextView = itemView.findViewById(R.id.titleTextView);
                   option1Button = itemView.findViewById(R.id.option1Button);
                   option2Button = itemView.findViewById(R.id.option2Button);
               }
           }
       }
      

    The titles list is list of Strings shown on items. You create this list and send it to the MyAdapter class from MainActivity. all views in single item are find in ItemVH class, and you can work with these views in onBindViewHolder function.

    1. In activity_main.xml add a RecyclerView:

       <androidx.recyclerview.widget.RecyclerView
           android:layout_width="match_parent"
           android:layout_height="match_parent"
           android:id="@+id/recyclerView"/>
      
    2. In MainActivity.java add these lines in onCreate:

       // create list:
       List<String> titles = new ArrayList<>();
       titles.add("first item");
       titles.add("second item");
       titles.add("third item");
      
       // define the adapter:
       MyAdapter adapter = new MyAdapter(this, titles);
      
       // set the RecyclerView:
       RecyclerView recyclerView = findViewById(R.id.recyclerView);
       RecyclerView.LayoutManager layoutManager = new LinearLayoutManager(this);
       recyclerView.setLayoutManager(layoutManager);
       recyclerView.setAdapter(adapter);
       recyclerView.addItemDecoration(new DividerItemDecoration(this, DividerItemDecoration.VERTICAL));
      

    Result:

    enter image description here