Apps Multiple XML layouts in RecyclerView

[John Foer]

Hi all,


I want to use these two XML layout to display my new items. I want the first row to display using h_item.xml and then I want the second row and third row to display using g_item.xml.



At the moment I’m only inflating the g_item.xml in my MyRecyclerViewAdapter. How do I inflate the second one to achieve my goal stated above?


Here is h_item.xml:

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="match_parent"

android:layout_height="wrap_content">


<ImageView

android:layout_alignParentTop="true"

android:layout_alignParentLeft="true"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:adjustViewBounds="true"

android:id="@+id/h_item_image"/>


<TextView

android:layout_alignParentTop="true"

android:layout_toRightOf="@id/g_item_image"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:textAppearance="?android:attr/textAppearanceLarge"

androidadding="16dp"

android:id="@+id/hero_item_title"/>


<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_toRightOf="@id/g_item_image"

android:layout_below="@id/g_item_title"

androidaddingLeft="16dp"

androidaddingRight="16dp"

androidaddingBottom="16dp"

android:textAppearance="?android:attr/textAppearanceMedium"

android:id="@+id/h_item_body"/>


</RelativeLayout>




g_item.xml:

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

androidrientation="vertical"

androidadding="8dp"

android:layout_width="match_parent"

android:layout_height="match_parent">



<ImageView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:adjustViewBounds="true"

android:id="@+id/g_item_image"/>



<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:textAppearance="?android:attr/textAppearanceMedium"

android:id="@+id/g_item_title"/>


<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:textAppearance="?android:attr/textAppearanceSmall"

android:id="@+id/g_item_body"/>




</LinearLayout>



MainAcitivity.java

public class MainActivity extends AppCompatActivity {


public static final String TAG = MainActivity.class.getSimpleName();


@override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);


RecyclerView recyclerView = (RecyclerView) findViewById(R.id.recycler_view);


GridLayoutManager manager = new GridLayoutManager(this

, 2

,GridLayoutManager.VERTICAL

,false);


manager.setSpanSizeLookup(new GridLayoutManager.SpanSizeLookup() {

@override

public int getSpanSize(int position) {


return ( position % 5 == 0 ? 2 : 1);


}

});


recyclerView.setLayoutManager(manager);


final MyRecyclerViewAdapter adapter = new MyRecyclerViewAdapter();

recyclerView.setAdapter(adapter);


IApi api = new RetrofitIApi();

api.fetchNewsItem(new IApi.Callback() {


@override

public void onSuccess(List<NewsItem> newsItems) {

Log.d(TAG, "Got newsItems");

adapter.setNewsItems(newsItems);

}


@override

public void onFailure(String error) {

Log.d(TAG, "Failed to get articles");

}


});

}

}



MyRecyclerViewAdapter.java

public class MyRecyclerViewAdapter extends RecyclerView.Adapter<MyRecyclerViewAdapter.GridViewHolder> {


private final List<NewsItem> newsItems = new ArrayList<>();



@override

public GridViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {

View v = LayoutInflater.from(parent.getContext()).inflate(R.layout.g_item, parent, false);

return new GridViewHolder(v);

}


@override

public void onBindViewHolder(GridViewHolder holder, int position) {

NewsItem newsItem = newsItems.get(position);

holder.title.setText(newsItem.getTitle());

holder.body.setText(newsItem.getBody());


NewsItemWrapper newsItemWrapper = new NewsItemWrapper(newsItem);

if (newsItemWrapper.getHImage() != null) {

Picasso.with(holder.itemView.getContext()).load(newsItemWrapper.getThumbNailImage()).into(holder.image);

} else {

holder.image.setImageBitmap(null);

}

}


@override

public int getItemCount() {

return newsItems.size();

}


public void setNewsItems(List<NewsItem> newsItems){

this.newsItems.clear();

if(newsItems != null) {

this.newsItems.addAll(newsItems);

}

notifyDataSetChanged();

}


static class GridViewHolder extends RecyclerView.ViewHolder {


ImageView image;

TextView title;

TextView body;


public GridViewHolder(View itemView) {

super(itemView);

image = (ImageView) itemView.findViewById(R.id.g_item_image);

title = (TextView) itemView.findViewById(R.id.g_item_title);

body = (TextView) itemView.findViewById(R.id.g_item_body);

}


}




}

 

[Deleted User]

This may help, in the accepted answer, he's using the viewType parameter in onCreateViewHolder to determine what type of layout to inflate:

http://stackoverflow.com/questions/26708525/getting-position-in-oncreateviewholder