I have to create layout like HotStar App, but I am bit confuse that what would be the best way of doing this:
Do I need multiple RecyclerViews or single RecyclerView is enough ?
Do I need to call multiple JSONs or single JSON is enough to fetch data from server?
How Do I use different - different layouts for You May Also Like and Must Watch Clips
8 Answers
Answers 1
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:
I think, the above sample will give you a good direction :)
Answers 2
- Do I need multiple RecyclerViews or single RecyclerView is enough?
Single RecyclerView is enough.
- Do I need to call multiple JSONs or single JSON is enough to fetch data from server?
Single JSON response is enough.
- How Do I use different - different layouts for You May Also Like and Must Watch Clips
Make this part of UI as 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:
Answers 3
- Do I need multiple RecyclerViews or single RecyclerView is enough ?
Single Recyclerview with GridLayoutManager is enough for this purpose.
- Do I need to call multiple JSONs or single JSON is enough to fetch data from server?
Single JSON response will fulfill your job.
Answers 4
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... Answers 5
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
Answers 6
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+AppBarLayoutwill make the toolbar scroll up as you scroll your layoutCreate a fragment for pages in your ViewPager and write a
FragmentStatePagerAdapterfor itDon't forget to call tabLayout.setupWithViewPager(viewPager) to inflate the
TabLayoutSee this for an example project
Inside your fragment, use a
RecyclerViewwithGridLayoutManagerand spanCount2Inside your
RecyclerView.Adapterimplementation, usegetItemViewTypeto 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
CardViewto make the the image cardUse 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
Answers 7
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
Answers 8
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:
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 comments:
Post a Comment