Adding Dynamic Buttons to different layouts for phone and tablet using RecyclerView with GridLayoutManager

Question

I am adding dynamic buttons to a layout. Each button is added one at a time, and the layout must update itself if new buttons were added based on a user's action. So the layout could have 3 buttons, or 16, or whatever, depending on the user's action. And the buttons can be added at different times. So if the user opens the app and adds a button, then leaves and returns to the app and adds another button, the old one must remain.

I want my buttons to be added, one by one, into a layout like this:

I have looked around about how to do this, and it was recommended to me that I use a RecyclerView with a GridLayoutManager. I have added this to my code, but the problem is that when I add a button, and then if I add another button, the second one is added on top of the first. So if the user action says that 16 buttons should be made, I am just getting 16 buttons on top of each other and not in the layout that I want.

Here is my code:

My Main Fragment that Initiates the RecyclerView: I have another activity that initiates "createButton" method and passes a drawable and string. These drawables and strings are passed to this method one at a time based on the user's action, and create an image button one at a time

public class MyFragment extends Fragment {

private GridLayoutManager lLayout;



@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);



}

// onCreateView
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
    View view = inflater.inflate(R.layout.my_fragment, container, false);


    // Create an empty list to initialize the adapter (or else get nullPointerException error)
    List<ItemObject> myList = new ArrayList<ItemObject>();


    lLayout = new GridLayoutManager(getActivity(), 4, GridLayoutManager.HORIZONTAL, false);

    RecyclerView rView = (RecyclerView)view.findViewById(R.id.recycler_view);

    rView.setHasFixedSize(true);
    rView.setLayoutManager(lLayout);

    RecyclerViewAdapter rcAdapter = new RecyclerViewAdapter(getActivity(),myList);
    rView.setAdapter(rcAdapter);


    return view;
}




private List<ItemObject> getAllItemList(String applicationName, Drawable app_drawable){

    List<ItemObject> allItems = new ArrayList<ItemObject>();
    allItems.add(new ItemObject(applicationName, app_drawable));


    return allItems;
}





public void createButton (Drawable d, String appName){

    List<ItemObject> rowListItem = getAllItemList(appName, d);
    lLayout = new GridLayoutManager(getActivity(), 2, GridLayoutManager.HORIZONTAL, false);




    RecyclerView rView = (RecyclerView)getView().findViewById(R.id.recycler_view);
    rView.setHasFixedSize(true);
    rView.setLayoutManager(lLayout);

    RecyclerViewAdapter rcAdapter = new RecyclerViewAdapter(getActivity(), rowListItem);
    rView.setAdapter(rcAdapter);

}


}

Here is RecyclerViewHolders:

public class RecyclerViewHolders extends RecyclerView.ViewHolder implements View.OnClickListener{

public TextView AppName;
public ImageButton AppButton;

public RecyclerViewHolders(View itemView) {
    super(itemView);
    itemView.setOnClickListener(this);
    AppName = (TextView)itemView.findViewById(R.id.new_app_name);
    AppButton = (ImageButton)itemView.findViewById(R.id.new_app_button);
}

@Override
public void onClick(View v) {

}
}

RecyclerViewAdapter

public class RecyclerViewAdapter extends RecyclerView.Adapter<RecyclerViewHolders> {

private List<ItemObject> itemList;
private Context context;

public RecyclerViewAdapter(Context context, List<ItemObject> itemList) {
    this.itemList = itemList;
    this.context = context;
}

@Override
public RecyclerViewHolders onCreateViewHolder(ViewGroup parent, int viewType) {

    View layoutView = LayoutInflater.from(parent.getContext()).inflate(R.layout.home_fragment, null);
    RecyclerViewHolders rcv = new RecyclerViewHolders(layoutView);
    return rcv;
}

@Override
public void onBindViewHolder(RecyclerViewHolders holder, int position) {
    holder.AppName.setText(itemList.get(position).getName());
    holder.AppButton.setImageDrawable(itemList.get(position).getPhoto());
}

@Override
public int getItemCount() {
    return this.itemList.size();
}
}

ItemObject

public class ItemObject {

private String name;
private Drawable d;

public ItemObject(String name, Drawable d) {
    this.name = name;
    this.d = d;
}

public String getName() {
    return name;
}

public void setName(String name) {
    this.name = name;
}

public Drawable getPhoto() {
    return d;
}

public void setPhoto(Drawable d) {
    this.d = d;
}
}

and my layout (my_fragment)

 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_horizontal"
android:layout_marginTop="15dp"
android:id="@+id/my_fragment"
>


<android.support.v7.widget.RecyclerView
    android:id="@+id/recycler_view"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:scrollbars="horizontal" />

<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">


<ImageButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/new_app_button"
    />

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/new_app_name"
    android:gravity="center"
    android:layout_below="@+id/new_app_button"

    />


</RelativeLayout>
</LinearLayout>

ANSWER:

HERE IS HOW I GOT MY LAYOUT TO BE DIFFERENT ON THE PHONE AND TABLET (2 rows on the phone, 3 rows on the tablet)

This code was added to my onCreateView method of MyFragment

 // Get screen size so we can have different layouts for phone and tablet
    int screenSize = getResources().getConfiguration().screenLayout &
            Configuration.SCREENLAYOUT_SIZE_MASK;

    String toastMsg;
    switch(screenSize) {
        case Configuration.SCREENLAYOUT_SIZE_LARGE:
            toastMsg = "Large screen";
            Log.d("tag_name", "Large screen");
            break;
        case Configuration.SCREENLAYOUT_SIZE_NORMAL:
            toastMsg = "Normal screen";
            Log.d("tag_name", "Normal screen");
            break;
        case Configuration.SCREENLAYOUT_SIZE_SMALL:
            toastMsg = "Small screen";
            Log.d("tag_name", "Small screen");
            break;
        default:
            toastMsg = "Screen size is neither large, normal or small";
            Log.d("tag_name", "Screen size is not large, normal, or small");
    }
    Toast.makeText(getActivity(), toastMsg, Toast.LENGTH_LONG).show();




    // Create an empty list to initialize the adapter (or else get nullPointerException error)
    List<ItemObject> myList = new ArrayList<ItemObject>();


    if (screenSize == Configuration.SCREENLAYOUT_SIZE_LARGE
    || screenSize == Configuration.SCREENLAYOUT_SIZE_XLARGE) {
        lLayout = new GridLayoutManager(getActivity(), 3, GridLayoutManager.HORIZONTAL, false);
    }

    else lLayout = new GridLayoutManager(getActivity(), 2, GridLayoutManager.HORIZONTAL, false);

Answer 1

You can detect screen size with this answer.

If the screen size is Configuration.SCREENLAYOUT_SIZE_LARGE or Configuration.SCREENLAYOUT_SIZE_XLARGE then it maybe a tablet.

  int spanCount = 2;
  if (screenSize == Configuration.SCREENLAYOUT_SIZE_LARGE 
        or screenSize == Configuration.SCREENLAYOUT_SIZE_XLARGE) {
    spanCount = 3;
  }