12

I have to create layout like HotStar App, but I am bit confuse that what would be the best way of doing this:

enter image description here

  1. Do I need multiple RecyclerViews or single RecyclerView is enough ?

  2. Do I need to call multiple JSONs or single JSON is enough to fetch data from server?

  3. How Do I use different - different layouts for You May Also Like and Must Watch Clips

13
  • Use a recyclerview with GridLayoutManager. A single JSON response is enough if you format it correctly Mar 22, 2016 at 4:25
  • Can I have a Layout Example ?
    – Sophie
    Mar 22, 2016 at 4:28
  • Layout Example : One ImageView and two TextViews in vertical LinearLayout or CardView and inflate that layout in Adapter of RecyclerView, that's all.
    – Apurva
    Mar 22, 2016 at 4:32
  • @Apurva I mean How Do I use different - different layouts for You May Also Like and Must Watch Clips
    – Sophie
    Mar 22, 2016 at 4:32
  • There's one method called getItemViewType() in RecyclerView's Adapter, you can override that method and can inflate different layouts as per your need. Open this link to learn how to inflate different views in RecyclerView stackoverflow.com/questions/26245139/…
    – Apurva
    Mar 22, 2016 at 4:36

9 Answers 9

12
+50

With this you will be able to create same Look-And-Feel

1.- For upper menu tab, you have to layout TABS

2.- For detail section, please add CARDS

3.- Divider for your sections, use SUBHEADERS

Now, regarding your questions:

1. You can handle everything with just one single RecyclerViews

2. Best approach, is to get a separated JSON for each section, since you never know how big each section will be. That will help a lot with a better performance and clean code.

**

NEW UPDATE

**

Your Main Layout Activity

<?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout
        xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context="com.alphasystech.hotvideos.MainActivity">

        <android.support.design.widget.AppBarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

            <include
                android:layout_height="wrap_content"
                android:layout_width="match_parent"
                layout="@layout/toolbar_layout">

            </include>

            <android.support.design.widget.TabLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:id="@+id/tabLayout"
                app:tabMode="fixed"
                app:tabGravity="fill"
                app:tabTextAppearance="@style/MyTabStyle">
            </android.support.design.widget.TabLayout>

        </android.support.design.widget.AppBarLayout>

        <android.support.v4.view.ViewPager
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:id="@+id/viewPager">

        </android.support.v4.view.ViewPager>

    </RelativeLayout>

Your Home Fragment Layout (Also you can clone this for MOVIES, SPORTS...)

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".HomeFragment">

<!-- A RecyclerView with some commonly used attributes -->
<android.support.v7.widget.RecyclerView
    android:id="@+id/home_recyclerview"
    android:scrollbars="vertical"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"/>

Your Cards Layout for your Home Fragment(Also you can clone this for MOVIES, SPORTS...)

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:id="@+id/card_view"
    android:layout_margin="5dp"
    card_view:cardBackgroundColor="#81C784"
    card_view:cardCornerRadius="12dp"
    card_view:cardElevation="3dp"
    card_view:contentPadding="4dp" >

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="16dp" >

        <ImageView
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:id="@+id/item_image"
            android:layout_alignParentLeft="true"
            android:layout_alignParentTop="true"
            android:layout_marginRight="16dp"
            />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/item_title"
            android:layout_toRightOf="@+id/item_image"
            android:layout_alignParentTop="true"
            android:textSize="30sp"
            />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/item_detail"
            android:layout_toRightOf="@+id/item_image"
            android:layout_below="@+id/item_title"
            />

    </RelativeLayout>
</android.support.v7.widget.CardView>

Screenshot:

screenshot sample

I think, the above sample will give you a good direction :)

5
  • What about if I want to add movable buttons? I mean if user scroll the view up-and-down?
    – Chale CS
    Mar 25, 2016 at 15:51
  • It's really simple, if you use Floating Action Buttons google.com/design/spec/components/…
    – Carlos
    Mar 25, 2016 at 15:53
  • Can you share an xml script with me, where I can get some Idea how to show data in single recyclerview from different - different jsons ? or If possible so could you write share a small demo to achieve that...
    – Sophie
    Mar 28, 2016 at 11:14
  • Please, take a look at my UPDATED post. I am giving you the xmls sample.
    – Carlos
    Mar 30, 2016 at 15:12
  • How can we achieve it with single recycler view? lets say we have a recycler view with vertical scroll as a parent, then for each row of items we need another recycler view with horizontal scroll (LinearLayoutManager) right? If so there will be a total of (no of categories + parent) recycler views right?. If we put everything inside a single grid recycler view how will be achieve individual horizontal scroll? Mar 21, 2018 at 13:56
5
  1. Do I need multiple RecyclerViews or single RecyclerView is enough?

Single RecyclerView is enough.

  1. Do I need to call multiple JSONs or single JSON is enough to fetch data from server?

Single JSON response is enough.

  1. How Do I use different - different layouts for You May Also Like and Must Watch Clips

Make this part of UI as RecyclerView row.

RecyclerView row

This is the simplest solution if you known max number of items in row. Your model need to have each row data.

Row layout xml example:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ddd"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">


        <TextView
            android:id="@+id/textView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="16dp"
            android:text="You May Also Like"
            android:textAppearance="?android:attr/textAppearanceLarge"
            android:textStyle="bold" />

        <View
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_weight="1" />

        <Button
            android:id="@+id/button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginRight="16dp"
            android:text="MORE" />
    </LinearLayout>


    <TableLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal">


        <TableRow
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <android.support.v7.widget.CardView
                android:id="@+id/item1_CV"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_marginBottom="4dp"
                android:layout_marginLeft="8dp"
                android:layout_marginRight="4dp"
                android:layout_marginTop="8dp"
                android:layout_weight="1"
                card_view:cardCornerRadius="4dp">

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

                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_alignParentEnd="true"
                        android:layout_alignParentLeft="true"
                        android:layout_alignParentRight="true"
                        android:layout_alignParentStart="true"
                        android:layout_below="@+id/item1_image"
                        android:background="#fff"
                        android:orientation="vertical"
                        android:padding="8dp">

                        <TextView
                            android:id="@+id/item1_title"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:text="Mere Rang Mein"
                            android:textColor="#000"
                            android:textSize="16sp" />

                        <TextView
                            android:id="@+id/item1_subTitle"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:singleLine="true"
                            android:text="Romance, Hindi, Life OK"
                            android:textAppearance="?android:attr/textAppearanceSmall"
                            android:textSize="12sp" />
                    </LinearLayout>

                    <ImageView
                        android:id="@+id/item1_image"
                        android:layout_width="match_parent"
                        android:layout_height="80dp"
                        android:background="#FF78aa" />
                </RelativeLayout>
            </android.support.v7.widget.CardView>


            <android.support.v7.widget.CardView
                android:id="@+id/item2_CV"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_marginBottom="4dp"
                android:layout_marginLeft="4dp"
                android:layout_marginRight="8dp"
                android:layout_marginTop="8dp"
                android:layout_weight="1"
                card_view:cardCornerRadius="4dp">

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

                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_alignParentEnd="true"
                        android:layout_alignParentLeft="true"
                        android:layout_alignParentRight="true"
                        android:layout_alignParentStart="true"
                        android:layout_below="@+id/item2_image"
                        android:background="#fff"
                        android:orientation="vertical"
                        android:padding="8dp">

                        <TextView
                            android:id="@+id/item2_title"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:text="Mere Rang Mein"
                            android:textColor="#000"
                            android:textSize="16sp" />

                        <TextView
                            android:id="@+id/item2_subTitle"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:singleLine="true"
                            android:text="Romance, Hindi, Life OK"
                            android:textAppearance="?android:attr/textAppearanceSmall"
                            android:textSize="12sp" />
                    </LinearLayout>

                    <ImageView
                        android:id="@+id/item2_image"
                        android:layout_width="match_parent"
                        android:layout_height="80dp"
                        android:background="#FF78aa" />
                </RelativeLayout>
            </android.support.v7.widget.CardView>

        </TableRow>

        <TableRow
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <android.support.v7.widget.CardView
                android:id="@+id/item3_CV"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_marginBottom="8dp"
                android:layout_marginLeft="8dp"
                android:layout_marginRight="4dp"
                android:layout_marginTop="4dp"
                android:layout_weight="1"
                card_view:cardCornerRadius="4dp">

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

                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_alignParentEnd="true"
                        android:layout_alignParentLeft="true"
                        android:layout_alignParentRight="true"
                        android:layout_alignParentStart="true"
                        android:layout_below="@+id/item3_image"
                        android:background="#fff"
                        android:orientation="vertical"
                        android:padding="8dp">

                        <TextView
                            android:id="@+id/item3_title"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:text="Mere Rang Mein"
                            android:textColor="#000"
                            android:textSize="16sp" />

                        <TextView
                            android:id="@+id/item3_subTitle"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:singleLine="true"
                            android:text="Romance, Hindi, Life OK"
                            android:textAppearance="?android:attr/textAppearanceSmall"
                            android:textSize="12sp" />
                    </LinearLayout>

                    <ImageView
                        android:id="@+id/item3_image"
                        android:layout_width="match_parent"
                        android:layout_height="80dp"
                        android:background="#FF78aa" />
                </RelativeLayout>
            </android.support.v7.widget.CardView>


            <android.support.v7.widget.CardView
                android:id="@+id/item4_CV"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_marginBottom="8dp"
                android:layout_marginLeft="4dp"
                android:layout_marginRight="8dp"
                android:layout_marginTop="4dp"
                android:layout_weight="1"
                card_view:cardCornerRadius="4dp">

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

                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_alignParentEnd="true"
                        android:layout_alignParentLeft="true"
                        android:layout_alignParentRight="true"
                        android:layout_alignParentStart="true"
                        android:layout_below="@+id/item4_image"
                        android:background="#fff"
                        android:orientation="vertical"
                        android:padding="8dp">

                        <TextView
                            android:id="@+id/item4_title"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:text="Mere Rang Mein"
                            android:textColor="#000"
                            android:textSize="16sp" />

                        <TextView
                            android:id="@+id/item4_subTitle"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:singleLine="true"
                            android:text="Romance, Hindi, Life OK"
                            android:textAppearance="?android:attr/textAppearanceSmall"
                            android:textSize="12sp" />
                    </LinearLayout>

                    <ImageView
                        android:id="@+id/item4_image"
                        android:layout_width="match_parent"
                        android:layout_height="80dp"
                        android:background="#FF78aa" />
                </RelativeLayout>
            </android.support.v7.widget.CardView>

        </TableRow>
    </TableLayout>
</LinearLayout>

Result: Row layout result

3
  1. Do I need multiple RecyclerViews or single RecyclerView is enough ?

Single Recyclerview with GridLayoutManager is enough for this purpose.

  1. Do I need to call multiple JSONs or single JSON is enough to fetch data from server?

Single JSON response will fulfill your job.

0
3

You can accomplish this just laying out first the TABS and display your CARDS inside of a ViewPager.

Something like this....

@Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        toolbar = (Toolbar)findViewById(R.id.toolBar);
        setSupportActionBar(toolbar);
        tabLayout = (TabLayout)findViewById(R.id.tabLayout);
        viewPager = (ViewPager)findViewById(R.id.viewPager);

        viewPagerAdapter = new ViewPagerAdapter(getSupportFragmentManager());
        viewPagerAdapter.addFragments...
3

Q1. Do I need multiple RecyclerViews or single RecyclerView is enough?

In HotStar App there are two scrollings:

  1. Main layout - Vertical scrolling
  2. Each section - Horizontal scrolling

If you want the same, you have to use two RecyclerView, one for each.
If you want only vertical scrolling, then one is more than enough.

Q2. Do I need to call multiple JSONs or single JSON is enough to fetch data from server?

Use splash screen and call single JSON, then on tab click parse particular JSON for clicked tab.

Note: If you feel it takes too much time, then do separate call for each tab.

2
    Do I need multiple RecyclerViews or single RecyclerView is enough?

single RecyclerView.

    Do I need to call multiple JSONs or single JSON is enough to fetch data from server?

single JSON data from server will do your job.

    How Do I use different - different layouts for You May Also Like and Must Watch Clips

use recyclerview with multiple view type

public class MyAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder> {
    class ViewHolder0 extends RecyclerView.ViewHolder {
        ...
    }

    class ViewHolder2 extends RecyclerView.ViewHolder {
        ...
    }

    @Override
    public int getItemViewType(int position) {
        // Just as an example, return 0 or 2 depending on position
        // Note that unlike in ListView adapters, types don't have to be contiguous
        return position % 2 * 2;
    }

    @Override
    public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
         switch (viewType) {
             case 0: return new ViewHolder0(...);
             case 2: return new ViewHolder2(...);
             ...
         }
    }
}

Use RecyclerView with header and normal item type

2

Use this as your layout

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/coordinator"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:tag="iv"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="@color/primary"
            android:theme="@style/ToolbarStyle"
            android:gravity="center_vertical"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
            app:layout_scrollFlags="scroll|enterAlways|snap"
            style="@style/bold" />

        <android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:theme="@style/TabLayoutStyle"
            android:animateLayoutChanges="true"
            app:tabMode="scrollable"
            app:tabTextAppearance="@style/TabStyle"/>

    </android.support.design.widget.AppBarLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/main_container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="fill_vertical"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

</android.support.design.widget.CoordinatorLayout>
  • The CoordinatorLayout+AppBarLayout will make the toolbar scroll up as you scroll your layout

  • Create a fragment for pages in your ViewPager and write a FragmentStatePagerAdapter for it

  • Don't forget to call tabLayout.setupWithViewPager(viewPager) to inflate the TabLayout

  • See this for an example project

  • Inside your fragment, use a RecyclerView with GridLayoutManager and spanCount 2

  • Inside your RecyclerView.Adapter implementation, use getItemViewType to specify number of view types you want. In the screenshot it looks like you only have 2 types (or 3 if you want the video tile to be a separate viewtype. Note that you can still use same layout for different view types, just hide/show the views you want in each view holder. This will reduce layout duplicacy). Read this to know how to make one.

  • Use CardView to make the the image card

  • Use Picasso, Glide, or Fresco to load images inside those Cards (Picasso and Glide are easier to use compared to Fresco but fresco is better with memory)

Do I need to call multiple JSONs or single JSON is enough to fetch data from server?

That completely depends on you, you can go either way, however getting all data in single request will make fetching faster.

PS: You can use GSON to parse your Json and keep yourself a little sane

1

Do I need multiple RecyclerViews or single RecyclerView is enough ?

A single one is enough.

Do I need to call multiple JSONs or single JSON is enough to fetch data from server?

A single JSON is enough.

How Do I use different - different layouts for You May Also Like and Must Watch Clips

  • 1 single layout for the section headers, as they look the same
  • 1 layout for "You May Also Like" items
  • 1 layout for "Must Watch Clips" items, because they are different: they have the "minutes" label and the "play" button. You could use the same layout and hide these views when not needed, it's up to you

With the library SectionedRecyclerViewAdapter you can add different "sections" to your RecyclerView, each section can have its own header, like on the image below:

Grid Section with Header

You need to create your "section" classes:

class MustWatchClipsSection extends StatelessSection {

    String title;
    List<Clip> clipList;

    public MustWatchClipsSection(String title, List<Clip> clipList) {
        // call constructor with layout resources for this Section header, footer and items 
        super(R.layout.section_header, R.layout.section_footer,  R.layout.section_item);

        this.title = title;
        this.clipList = clipList;
    }

    @Override
    public int getContentItemsTotal() {
        return clipList.size(); // number of items of this section
    }

    @Override
    public RecyclerView.ViewHolder getItemViewHolder(View view) {
        // return a custom instance of ViewHolder for the items of this section
        return new MyItemViewHolder(view);
    }

    @Override
    public void onBindItemViewHolder(RecyclerView.ViewHolder holder, int position) {
        MyItemViewHolder itemHolder = (MyItemViewHolder) holder;

        // bind your view here
        itemHolder.tvItem.setText(clipList.get(position).getName());
    }

    @Override
    public RecyclerView.ViewHolder getHeaderViewHolder(View view) {
        return new SimpleHeaderViewHolder(view);
    }

    @Override
    public void onBindHeaderViewHolder(RecyclerView.ViewHolder holder) {
        MyHeaderViewHolder headerHolder = (MyHeaderViewHolder) holder;

        // bind your header view here
        headerHolder.tvItem.setText(date);
    }
}

Then you set up the RecyclerView with your sections:

// Create an instance of SectionedRecyclerViewAdapter 
SectionedRecyclerViewAdapter sectionAdapter = new SectionedRecyclerViewAdapter();

MayAlsoLikeSection mySection1 = new MayAlsoLikeSection("You May Also Like", mediaList);
MustWatchClipsSection mySection2 = new MustWatchClipsSection("Must Watch Clips", clipList);

// Add your Sections
sectionAdapter.addSection(mySection1);
sectionAdapter.addSection(mySection2);

// Set up your RecyclerView with the SectionedRecyclerViewAdapter
RecyclerView recyclerView = (RecyclerView) findViewById(R.id.recyclerview);
GridLayoutManager glm = new GridLayoutManager(getContext(), 2);
glm.setSpanSizeLookup(new GridLayoutManager.SpanSizeLookup() {
    @Override
    public int getSpanSize(int position) {
        switch(sectionAdapter.getSectionItemViewType(position)) {
            case SectionedRecyclerViewAdapter.VIEW_TYPE_HEADER:
                return 2;
            default:
                return 1;
        }
    }
});
recyclerView.setLayoutManager(glm);
recyclerView.setAdapter(sectionAdapter);

You can see the full code here, layouts are also available in the repository.

0

I think you not need to use multiple recycler view or Layout

You can just make logic in recycler view on position of item. like if first item don't have play button and text view of time then you can just make by default its visibility gone and when you need that play button and time text view in that position you can make it visible.

for example you have video layout in second position then in get view method you get Position in that you can make logic of this to visible.

I have just create custom listview row for it now what ever you want you can do with this logic and no need to make multiple layout also.

Try this logic hope its help you

Not the answer you're looking for? Browse other questions tagged or ask your own question.