BadCodersHub BadCodersHub - 2 months ago 12
Java Question

Create whitespace to add textView

I am following [this][1] tutorial, I have successfully created the albums, what I would like to do now is say or example after 4 albums. I would like to add some whitespace so I can add a TextField here my question is:


  1. How would I create the whitespace required?

  2. How would I add in the textfield in this specific location?



This is what I have tried. The example code has a method to prepare the albums, I have split the method up into two methods as follows:

private void prepareAlbums() {
int[] covers = new int[]{
R.drawable.album1,
R.drawable.album2,
R.drawable.album3,
R.drawable.album4,
R.drawable.album5,
R.drawable.album6,
R.drawable.album7,
R.drawable.album8,
R.drawable.album9,
R.drawable.album10,
R.drawable.album11};

Album a = new Album("True Romance", 13, covers[0]);
albumList.add(a);

a = new Album("Xscpae", 8, covers[1]);
albumList.add(a);

a = new Album("Maroon 5", 11, covers[2]);
albumList.add(a);

a = new Album("Born to Die", 12, covers[3]);
albumList.add(a);

rootView.setPadding(0,100,0,0);


adapter.notifyDataSetChanged();
}


and...

private void prepareAlbums2(){
int[] covers = new int[]{
R.drawable.album1,
R.drawable.album2,
R.drawable.album3,
R.drawable.album4,
R.drawable.album5,
R.drawable.album6,
R.drawable.album7,
R.drawable.album8,
R.drawable.album9,
R.drawable.album10,
R.drawable.album11};
Album a = new Album("Honeymoon", 14, covers[4]);
albumList.add(a);

a = new Album("I Need a Doctor", 1, covers[5]);
albumList.add(a);

a = new Album("Loud", 11, covers[6]);
albumList.add(a);

a = new Album("Legend", 14, covers[7]);
albumList.add(a);

a = new Album("Hello", 11, covers[8]);
albumList.add(a);

a = new Album("Greatest Hits", 17, covers[9]);
albumList.add(a);

adapter.notifyDataSetChanged();

}
}


Then inside of my onCreate method I did the following:

public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {

...

prepareAlbums();
rootView.setPadding(0,100,0,0);
prepareAlbums2();

...
return rootView;
}


However, nothing seems to happen when I do this, also I have no idea how to add the text in that position once I created the spacing, any help is much appreciated.

If any other info is needed please ask and ill update this post.

Answer

Modify the GridSpacingItemDecoration class to add extra space at the bottom of the two cards that fall at position X and X+1.

Update:

Given that you want a text view in there, it turns out not to be too difficult. There is a great example here

The solution involves creating a callback to dynamically determine the column count based on the position. You will have to modify the span size to return a one when the position you hit the 4th position.

GridLayoutManager manager = new GridLayoutManager(this, 3);
manager.setSpanSizeLookup(new GridLayoutManager.SpanSizeLookup() {
  @Override
  public int getSpanSize(int position) {
    return (3 - position % 3);
  }
});
recyclerView.setLayoutManager(manager);

You'll also need to create a case in the adapter to present a TextView instead of the normal card view.

Update 8/19/2016 Added Detail:

In the MainActivity, add a callback to return the span size according to the position. We will determine the position, by adding a dummy value to the dataset.

 ((GridLayoutManager)mLayoutManager).setSpanSizeLookup(new GridLayoutManager.SpanSizeLookup() {
         @Override
         public int getSpanSize(int position) {
            if ( albumList.get(position).getName().length() == 0)
               return 2;
            return 1;
         }
      });

When adding the data, add a dummy value where you want the text to go. Ideally, you could ether change the class or add an attribute to the class. For simplicity, an album with no name will be a text row.

a = new Album("Born to Die", 12, covers[3]);
albumList.add(a);

albumList.add(new Album("",0, 0));

a = new Album("Honeymoon", 14, covers[4]);
albumList.add(a);

Finally, in your adapter code, override the getItemViewType() method so that your RecyclerView can support multiple view types.

// Change the extending class type
public class AlbumsAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder> {

// Add this 
public class TextViewHolder extends RecyclerView.ViewHolder {
      public TextView textView;
      public TextViewHolder(View itemView) {
         super(itemView);
         textView = (TextView) itemView.findViewById(R.id.text3);
      }
   }

// Add this
@Override
public int getItemViewType(int position) {
   if ( albumList.get(position).getName().length() == 0)
      return 1;
   return 0;
}

@Override
   public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
      View itemView = null;
      switch ( viewType ) {
         case 0:
            itemView = LayoutInflater.from(parent.getContext())
                  .inflate(R.layout.album_card, parent, false);
            return new MyViewHolder(itemView);
         case 1:
            itemView = LayoutInflater.from(parent.getContext())
                  .inflate(R.layout.text_layout, parent, false);
            return new TextViewHolder(itemView);
      }

      return null;
   }

   @Override
   public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {
      Album album = albumList.get(position);
      if ( album.getName().length() == 0) {
         TextViewHolder text = (TextViewHolder)holder;
         text.textView.setText("New Text");
      } else {
         final MyViewHolder myHolder = (MyViewHolder)holder;
         myHolder.title.setText(album.getName());
         myHolder.count.setText(album.getNumOfSongs() + " songs");

         // loading album cover using Glide library
         Glide.with(mContext).load(album.getThumbnail()).into(myHolder.thumbnail);

         myHolder.overflow.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
               showPopupMenu(myHolder.overflow);
            }
         });
      }
   }
}

You'll also need a layout for the TextView row

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:orientation="vertical"
              android:layout_width="match_parent"
              android:layout_height="wrap_content">
<TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:id="@+id/text3"/>
</LinearLayout>