Develop Reference

Firebase UI Recyclerview OnClick Not Working, tried everything. And it is not a duplicate question please

I'm trying to add a Firebase Recyclerview in my Android App. When I add, all the data is getting fetched from Firestore normally, but when it comes to handle onClick event, it is not working at all.
Things I followed:
Added Interface with method.
Implemented interface in my TipsActivity.java
Here is the code:
TipsActivity.java
import androidx.appcompat.app.AppCompatActivity;
import androidx.paging.PagedList;
import androidx.recyclerview.widget.LinearLayoutManager;
import androidx.recyclerview.widget.RecyclerView;
import android.os.Bundle;
import android.widget.Toast;
import android.util.Log;
import com.firebase.ui.firestore.paging.FirestorePagingOptions;
import com.google.firebase.firestore.FirebaseFirestore;
import com.google.firebase.firestore.Query;
public class TipsActivity extends AppCompatActivity implements FirestoreTipsAdapter.OnListItemClick {
FirestoreTipsAdapter firestoreTipsAdapter;
FirebaseFirestore firebaseFirestore;
RecyclerView recyclerView;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_tips);
firebaseFirestore = FirebaseFirestore.getInstance();
recyclerView = findViewById(R.id.list);
Query query = firebaseFirestore.collection("DailyTips").document("MyTips").collection("Tips");
PagedList.Config config = new PagedList.Config.Builder()
.setInitialLoadSizeHint(10)
.setPageSize(5)
.build();
FirestorePagingOptions<TipsModel> firestorePagingOptions = new FirestorePagingOptions.Builder<TipsModel>()
.setLifecycleOwner(this)
.setQuery(query,config,TipsModel.class)
.build();
firestoreTipsAdapter = new FirestoreTipsAdapter(firestorePagingOptions,this,this);
recyclerView.setHasFixedSize(true);
recyclerView.setLayoutManager(new LinearLayoutManager(this));
recyclerView.setAdapter(firestoreTipsAdapter);
}
#Override
public void onItemClick() {
Toast.makeText(this, "Show up bruh!", Toast.LENGTH_SHORT).show();
Log.d("AT_LEAST","You should work");
}
}
And here goes my:
FirestoreTipsAdapter.java
package com.mycompany.company;
import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
import android.widget.Toast;
import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;
import com.firebase.ui.firestore.paging.FirestorePagingAdapter;
import com.firebase.ui.firestore.paging.FirestorePagingOptions;
public class FirestoreTipsAdapter extends FirestorePagingAdapter<TipsModel, FirestoreTipsAdapter.TipsViewHolder> {
private OnListItemClick onListItemClick;
Context context;
public FirestoreTipsAdapter(#NonNull FirestorePagingOptions<TipsModel> options,OnListItemClick onListItemClick,Context context) {
super(options);
this.onListItemClick = onListItemClick;
this.context = context;
}
#Override
protected void onBindViewHolder(#NonNull TipsViewHolder holder, int position, #NonNull TipsModel model) {
holder.title.setText(model.getTitle());
holder.description.setText(model.getDescription());
}
#NonNull
#Override
public TipsViewHolder onCreateViewHolder(#NonNull ViewGroup parent, int viewType) {
View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.list_item,parent,false);
return new TipsViewHolder(view);
}
public class TipsViewHolder extends RecyclerView.ViewHolder implements View.OnClickListener {
TextView title,description;
public TipsViewHolder(#NonNull View itemView) {
super(itemView);
title = itemView.findViewById(R.id.list_title);
description = itemView.findViewById(R.id.list_desc);
itemView.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
Toast.makeText(context, "Are you working bro?", Toast.LENGTH_SHORT).show();
}
});
}
#Override
public void onClick(View v) {
onListItemClick.onItemClick();
}
}
public interface OnListItemClick{
void onItemClick();
}
}
Here is the code of list_item.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView android:layout_width="match_parent"
android:layout_height="wrap_content"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_margin="10dp"
android:id="#+id/tipCardView"
app:cardElevation="5dp"
app:cardBackgroundColor="#E2E0EE"
app:cardCornerRadius="5dp"
xmlns:android="http://schemas.android.com/apk/res/android">
<LinearLayout
android:id="#+id/list_root"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:clickable="true"
android:focusable="true"
android:orientation="vertical"
android:background="?attr/selectableItemBackground"
android:padding="16dp">
<TextView
android:id="#+id/list_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Title"
android:textColor="#android:color/black"
android:textSize="16sp"
android:textStyle="bold" />
<TextView
android:id="#+id/list_desc"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:text="Description" />
</LinearLayout>
<ImageView
android:layout_width="100dp"
android:layout_height="100dp"
android:src="#drawable/curveshape"
android:layout_gravity="end|bottom"
android:layout_marginBottom="-30dp"
android:alpha="0.2"
/>
<ImageView
android:layout_width="50dp"
android:layout_height="50dp"
android:src="#drawable/tips"
android:layout_gravity="end|bottom"
android:layout_marginBottom="-10dp"
android:layout_marginRight="25dp"
android:alpha="0.2"
/>
</androidx.cardview.widget.CardView>
Note: I'm able to fetch data from Firestore, it is showing data properly.
Please help. I followed all other answers from Stack Overflow.

In the given setup, the OnClickListener is being set on the ViewHolder's itemView, which will be the root View in its layout, which is the CardView. However, the clickable and focusable attributes set on the LinearLayout cause it to get first grabs on touch events, so it's basically intercepting them before the CardView would handle them to respond to a click. There's no listener on the LinearLayout, though, so nothing happens.
Assuming that you want the entire item View clickable, simply remove the android:clickable="true" and android:focusable="true" attributes from the <LinearLayout>. With no clickable or focusable children, the CardView will then end up registering the click.
If instead you might want only a certain child clickable – e.g., the LinearLayout – then you would set the OnClickListener on that child, rather than the whole CardView. You still wouldn't need those attributes anywhere, though, if that's to be the only clickable child or grandchild. Those attributes usually aren't necessary in basic, relatively flat layouts, like that for your list items.

NestedScrollView stops scrolling as soon as CollapsingToolbarLayout collapses

First let me clarify that i have found a few questions similar to this question, but none worked for me.
So i have one activity (MainActivity.java), which has a bottom navigation tab, each tab has its own fragment, the third fragment is named 'ServiceFragment.java' (also the third tab in Bottom navigation).
Classes:
ServiceFragment.java
package in.ikleen.ikleenservices;
import android.content.Context;
import android.os.Bundle;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.view.ViewPager;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
public class ServiceFragment extends Fragment {
Context context;
public ServiceFragment() {
// Required empty public constructor
}
#Override
public void onAttach (Context context){
super.onAttach(context);
this.context = context;
}
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// Inflate the layout for this fragment
View rootView = inflater.inflate(R.layout.fragment_service, container, false);
ViewPager viewPager = rootView.findViewById(R.id.service_view_pager);
viewPager.setOffscreenPageLimit(3);
TabLayout tabLayout = rootView.findViewById(R.id.service_tab_layout);
ServiceFragmentPageAdapter pageAdapter = new ServiceFragmentPageAdapter(context, getChildFragmentManager());
viewPager.setAdapter(pageAdapter);
tabLayout.setupWithViewPager(viewPager);
return rootView;
}
}
ServiceFragmentPageAdapter.java
package in.ikleen.ikleenservices;
import android.content.Context;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
public class ServiceFragmentPageAdapter extends FragmentPagerAdapter {
private Context mContext;
Fragment zero, first, second;
public ServiceFragmentPageAdapter (Context context, FragmentManager fm){
super(fm);
mContext = context;
zero = new WashDryServiceFragment();
first = new WashDryIronServiceFragment();
second = new AdditionalProductsServiceFragment();
}
#Override
public Fragment getItem(int position){
switch (position){
case 0:
return zero;
case 1:
return first;
case 2:
return second;
default:
return zero;
}
}
#Override
public int getCount(){
return 3;
}
#Override
public CharSequence getPageTitle(int position){
switch (position){
case 0:
return mContext.getString(R.string.wash_dry);
case 1:
return mContext.getString(R.string.wash_dry_iron);
case 2:
return mContext.getString(R.string.additional_products);
default:
return mContext.getString(R.string.wash_dry);
}
}
}
WashDryServiceFragment.java (the first tab of viewpager tablayout, also the one bearing the problem)
package in.ikleen.ikleenservices;
import android.annotation.TargetApi;
import android.os.Bundle;
import android.support.design.widget.AppBarLayout;
import android.support.design.widget.CollapsingToolbarLayout;
import android.support.design.widget.CoordinatorLayout;
import android.support.v4.app.Fragment;
import android.support.v4.widget.NestedScrollView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.ListAdapter;
import android.widget.ListView;
import android.widget.Toolbar;
import java.lang.annotation.Target;
import java.util.ArrayList;
import java.util.List;
public class WashDryServiceFragment extends Fragment {
public WashDryServiceFragment() {
// Required empty public constructor
}
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// Inflate the layout for this fragment
View rootView = inflater.inflate(R.layout.fragment_wash_dry_service, container, false);
ListView listView = (ListView) rootView.findViewById(R.id.listViewWashDryService);
ArrayList<String> stringList = new ArrayList<>();
for(int i=0; i<20; i++) {
stringList.add("Hello");
}
ArrayAdapter<String> adapter = new ArrayAdapter<String>(getActivity(), android.R.layout.simple_list_item_1, stringList);
listView.setAdapter(adapter);
//TESTED BELOW CODE BUT CANNOT EVEN SCROLL A LITTLE BIT SO COMMENTED IT
//Toolbar toolbar = (Toolbar) rootView.findViewById(R.id.toolbar1);
//NestedScrollView nestedScrollView = (NestedScrollView) rootView.findViewById(R.id.nestedScroll);
//CoordinatorLayout.LayoutParams params = (CoordinatorLayout.LayoutParams) nestedScrollView.getLayoutParams();
//params.setBehavior(new ConstrainedScrollBehavior());
return rootView;
}
}
Layouts:
fragment_service.xml
<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"
xmlns:app="http://schemas.android.com/apk/res-auto"
tools:context="in.ikleen.ikleenservices.ServiceFragment">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.design.widget.TabLayout
android:id="#+id/service_tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabTextAppearance="#style/Base.TextAppearance.AppCompat.Small"
app:tabMode="fixed"/>
<android.support.v4.view.ViewPager
android:id="#+id/service_view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</LinearLayout>
</FrameLayout>
fragment_wash_dry_service.xml (THE PROBLEM LIES HERE)
<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"
xmlns:app="http://schemas.android.com/apk/res-auto"
tools:context="in.ikleen.ikleenservices.WashDryServiceFragment">
<android.support.design.widget.CoordinatorLayout
android:id="#+id/coordinatorlayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="150dp"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center_horizontal"
app:layout_collapseMode="parallax"
android:scaleType="centerInside"
app:layout_collapseParallaxMultiplier="0.5"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
android:src="#mipmap/ld_00"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:id="#+id/nestedScroll"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:fillViewport="true"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:layout_gravity="fill_vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clickable="true"
android:orientation="vertical">
<ListView
android:id="#+id/listViewWashDryService"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/appBarLayout"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="JUST FOR TESTS"
android:textAppearance="#style/TextAppearance.AppCompat.Large"/>
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
</FrameLayout>
Thanks

The problem in this case was: (p.s. i am stupid)
listview cannot scroll inside nestedscrollview, so as soon as the collapsingtoolbar collapsed, there was no need for the nestedscrollview to scroll more as it already filled the parent and listview could not scroll anyways. (i know, dumb explanation)
Solution:
1: either remove listview inside the nestedscrollview
OR
2: add this attribute android:nestedScrollingEnabled="true" inside nestedscrollview (not tested, but should work)

Elevated RecyclerView items get progressively deformed (elevation changes)

Any idea why RecyclerView items get deformed , each consecutive item gets worse?
UPDATE: I'm using CardViews and now there's no view "deformation" but the shadow/elevation height changes.
It seems that elevation gets higher depending on where on the screen the item is located vertically, the shadow grows as the item gets scrolled down. Please see the video here: https://youtu.be/nROYq8rpUMs.
I've set up a new project leaving only the code necessary to demonstrate the issue:
MainActivity.java
package tzig.schm00.masterdetail;
import android.os.Bundle;
import android.support.annotation.NonNull;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
import tzig.schm00.masterdetail.dummy.DummyContent;
import java.util.List;
public class MainActivity extends AppCompatActivity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
View recyclerView = findViewById(R.id.item_list);
setupRecyclerView((RecyclerView) recyclerView);
}
private void setupRecyclerView(#NonNull RecyclerView recyclerView) {
recyclerView.setAdapter(new SimpleItemRecyclerViewAdapter(DummyContent.ITEMS));
}
public class SimpleItemRecyclerViewAdapter
extends RecyclerView.Adapter<SimpleItemRecyclerViewAdapter.ViewHolder> {
private final List<DummyContent.DummyItem> mValues;
public SimpleItemRecyclerViewAdapter(List<DummyContent.DummyItem> items) {
mValues = items;
}
#Override
public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
View view = LayoutInflater.from(parent.getContext())
.inflate(R.layout.list_item, parent, false);
return new ViewHolder(view);
}
#Override
public void onBindViewHolder(final ViewHolder holder, int position) {
holder.mItem = mValues.get(position);
holder.mIdView.setText(mValues.get(position).id);
holder.mContentView.setText(mValues.get(position).content);
}
#Override
public int getItemCount() {
return mValues.size();
}
public class ViewHolder extends RecyclerView.ViewHolder {
public final View mView;
public final TextView mIdView;
public final TextView mContentView;
public DummyContent.DummyItem mItem;
public ViewHolder(View view) {
super(view);
mView = view;
mIdView = (TextView) view.findViewById(R.id.id);
mContentView = (TextView) view.findViewById(R.id.content);
}
#Override
public String toString() {
return super.toString() + " '" + mContentView.getText() + "'";
}
}
}
}
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
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/frameLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.RecyclerView
android:id="#+id/item_list"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
app:layoutManager="LinearLayoutManager"
tools:context="tzig.schm00.myapplication.MainActivity" />
</FrameLayout>
list_item.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView
xmlns:card_view="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/cont_item_root"
android:layout_width="match_parent"
android:layout_height="wrap_content"
card_view:cardCornerRadius="8dp"
card_view:cardElevation="10dp"
card_view:cardMaxElevation="10dp"
card_view:cardUseCompatPadding="true">
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:id="#+id/id"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="#dimen/text_margin"
android:textAppearance="?attr/textAppearanceListItem" />
<TextView
android:id="#+id/content"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="#dimen/text_margin"
android:textAppearance="?attr/textAppearanceListItem" />
</LinearLayout>
</android.support.v7.widget.CardView>
New observation: seems like it's a standard behavior. Looks the same with the Image Picker displaying folders using CardViews...
Any help is greatly appreciated!
Thanks!!

This is how it's intended to be according to Material Design: Environment: Light and shadows: Light.
Also see answer https://stackoverflow.com/a/51216164/6685260

Add a background to your RelativeLayout - seems that elevation needs it to work properly. I have tested this with your layout and it does work.

I had the same issue, and in my case the problem was caused by a background drawable which I set in my RecyclerViewAdapter#onBindViewHolder:
// this spoiled the shadows!
cardView.setBackgroundDrawable(ContextCompat.getDrawable(context, myColorResourceId);
After I removed the line above the problem has disappeared!
(To have both a background and nice shadows I used an inner element filling the CardView and applied background to it instead of CardView)

How to make ViewPager scroll and making header image as a collapsing toolbar?

I have a recipe fragment that has a header image and a ViewPager, and I'm facing two problems with the current design:
1- The tabs content are not scrolling vertically unless I press on the header image and start scrolling. What I mean by this is that if I swipe vertically on the header image the view will scroll. BUT if I try to swipe vertically from the text area it doesn't scroll. (I have an image below)
2- The header image is not all the way up to replace the toolbar like the current version Google Play Store displays apps like the the first screenshot below, and the second screenshot is how my app looks like.
Here is my my fragment_recipe.xml:
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:id="#+id/tab_app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/tab_collapse_toolbar"
android:layout_width="match_parent"
android:layout_marginTop="25dp"
android:layout_height="256dp"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="#+id/recipe_header"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/header"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
/>
<android.widget.Toolbar
android:id="#+id/tab_toolbar"
android:layout_width="match_parent"
android:layout_height="104dp"
android:gravity="top"
android:minHeight="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:titleMarginTop="13dp" />
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:textStyle="bold"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="bottom"
app:layout_scrollFlags="scroll|enterAlways"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
app:tabIndicatorColor="#android:color/white" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:tabMode="scrollable"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
And here is my FargmentRecipe.java:
import android.annotation.TargetApi;
import android.graphics.Color;
import android.graphics.drawable.BitmapDrawable;
import android.graphics.drawable.Drawable;
import android.os.Build;
import android.os.Bundle;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentStatePagerAdapter;
import android.support.v4.view.ViewPager;
import android.widget.Toolbar;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.Toast;
import com.android.volley.VolleyError;
import com.android.volley.toolbox.ImageLoader;
import java.util.ArrayList;
import java.util.List;
import mamoonbraiga.MealMate.activities.MainActivity;
import mamoonbraiga.MealMate.extras.Recipe;
import mamoonbraiga.MealMate.network.VolleySingleton;
import mamoonbraiga.poodle_v3.R;
public class FragmentRecipe extends Fragment{
private ImageView header;
private VolleySingleton volleySingleton = VolleySingleton.getsInstance();;
private ImageLoader imageLoader=volleySingleton.getImageLoader();;
private Bundle bundle;
#TargetApi(Build.VERSION_CODES.LOLLIPOP)
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState){
final View view = inflater.inflate(R.layout.fragment_recipe, container, false);
MainActivity mainActivity = (MainActivity) getActivity();
header = (ImageView) view.findViewById(R.id.recipe_header); //setting up the header
bundle = mainActivity.getSavedData();
Recipe recipe = bundle.getParcelable("recipe");
//load the header
loadHeader(recipe);
((MainActivity) getActivity()).getSupportActionBar().hide();
Toolbar toolbar = (Toolbar) view.findViewById(R.id.tab_toolbar);
mainActivity.setActionBar(toolbar);
mainActivity.getActionBar().setDisplayHomeAsUpEnabled(true);
/** view pager and tab setup **/
final ViewPager viewPager = (ViewPager) view.findViewById(R.id.viewpager);
viewPager.setVerticalScrollBarEnabled(true);
setUpViewPager(viewPager);
final TabLayout tabLayout = (TabLayout) view.findViewById(R.id.tabs);
tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);
tabLayout.setSelectedTabIndicatorColor(Color.parseColor("#FF5722"));
tabLayout.setupWithViewPager(viewPager);
/** view pager and tab setup **/
return view;
}
private void loadHeader(Recipe recipe) {
imageLoader.get(recipe.getImageUrl(), new ImageLoader.ImageListener() {
#Override
public void onResponse(ImageLoader.ImageContainer response, boolean isImmediate) {
Drawable d = new BitmapDrawable(getResources(), response.getBitmap());
header.setBackground(d);
}
#Override
public void onErrorResponse(VolleyError error) {
}
});
}
private void showToast(String msg) {
Toast.makeText(getContext(), msg, Toast.LENGTH_SHORT).show();
}
private void setUpViewPager(ViewPager viewPager) {
ViewPagerAdapter adapter = new ViewPagerAdapter(getActivity().getSupportFragmentManager());
adapter.addFrag(new FragmentDescription(), "Description");
adapter.addFrag(new FragmentIngredients(), "Ingredients");
adapter.addFrag(new FragmentNutrition(), "Nutrition");
viewPager.setAdapter(adapter);
}
static class ViewPagerAdapter extends FragmentStatePagerAdapter{
private final List<String> mFragmentTitleList = new ArrayList<>();
private final List<Fragment> mFragmentList = new ArrayList<>();
public ViewPagerAdapter(FragmentManager fm) {
super(fm);
}
#Override
public Fragment getItem(int position) {
return mFragmentList.get(position);
}
#Override
public int getCount() {
return mFragmentList.size();
}
public void addFrag(Fragment fragment, String title){
mFragmentList.add(fragment);
mFragmentTitleList.add(title);
}
#Override
public CharSequence getPageTitle(int position){
return mFragmentTitleList.get(position);
}
}
#Override
public void onPause(){
super.onPause();
((MainActivity) getActivity()).getSupportActionBar().show();
}
}

1) I don't have your fragments layouts xml (FragmentDescription, FragmentIngredients and FragmentNutrition layouts) but I am guessing your are using ScrollView instead of NestedScrollView. Try this at the root of your nested fragments:<android.support.v4.widget.NestedScrollView>
2) When your header collapse, do you still have the black status bar? If so, you have to add transparency to your status bar.So in your theme: <item name="android:statusBarColor">#80000000</item>
(here I am using a dark transparent color, to make it look nicer, but it's up to you)
Note also that you cannot get full transparent status bar on pre-Lollipop devices.
2bis) if you already have a transparent statusbar (you see the image passing behind after a bit of scrolling up), then you can try this hack:
<ImageView
android:id="#+id/recipe_header"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/header"
android:layout_marginTop="-24dp"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
/>
This will move the image up by the height of the status bar, thus making it fit with the top of the window. There is probably a proper solution, but it is the one I am using at the moment.

How to put a complex Layout within CollapsingToolbarLayout

I am trying to put a complex layout within a CollapsingToolbarLayout. Attached image describes the details.
What I want - Add the described custom layout in my CollapsingToolbarLayout.
What are the problems
CirclePageIndicator is not visible (screenshot below)
ViewPager swiping through the ViewPager gives blank Screens. This is
depite PagerAdapter configured.
Any attempt to bring my custom layout outside CollapsingToolbarLayout
and make it a direct child of AppBarLayout brings a blank screen.
What I have done -
Tried creating a child LinearLayout of CollapsingToolbarLayout - this does not show the CirclePageIndicator and inconsistently shows the ViewPager
Tried creating a child LinearLayout of AppBarLayout - This shows a blank screen.
How do I go about resolving the issue ??
Any help is really appreciated !
activity_main.xml
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar_layout"
android:layout_width="match_parent"
android:layout_height="250dp"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:fitsSystemWindows="true" >
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:contentScrim="#android:color/darker_gray"
app:expandedTitleMarginStart="48dp"
app:expandedTitleMarginEnd="64dp"
android:fitsSystemWindows="true">
<!--<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/charts"
android:scaleType="centerCrop"
android:fitsSystemWindows="true"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.1" />-->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#drawable/charts" >
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<com.viewpagerindicator.CirclePageIndicator
android:id="#+id/circlePageInd"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
</LinearLayout>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:layout_collapseMode="pin"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
app:layout_anchor="#id/appbar_layout"
app:layout_anchorGravity="bottom|right|end"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation = "vertical" >
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Info
Jarlsberg lancashire edam. Dolcelatte hard cheese brie st. agur blue
cheese caerphilly bavarian bergkase cheese and biscuits mascarpone. Cheeseburger swiss bavarian
bergkase cream cheese fromage frais cheesy feet port-salut airedale. St. agur blue cheese rubber
cheese caerphilly cheddar cheesecake cream cheese manchego lancashire. Roquefort squirty cheese
the big cheese."
android:textAppearance="#style/TextAppearance.AppCompat.Title" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Jarlsberg lancashire edam. Dolcelatte hard cheese brie st. agur blue
cheese caerphilly bavarian bergkase cheese and biscuits mascarpone. Cheeseburger swiss bavarian
bergkase cream cheese fromage frais cheesy feet port-salut airedale. St. agur blue cheese rubber
cheese caerphilly cheddar cheesecake cream cheese manchego lancashire. Roquefort squirty cheese
the big cheese." />
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
MainActivity.java
package com.deep.;
import android.content.res.Configuration;
import android.graphics.Color;
import android.support.annotation.Nullable;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentStatePagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBar;
import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.support.v4.app.ActionBarDrawerToggle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ListView;
import android.widget.TableLayout;
import com.viewpagerindicator.CirclePageIndicator;
import java.util.List;
public class MainActivity extends AppCompatActivity {
private static final int VIEW_PAGER_COUNT = 3;
/* private ListView listView;
private DrawerLayout drawerLayout;
private ActionBarDrawerToggle actionBarDrawerToggle;*/
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
// toolbar.setBackgroundColor(Color.BLUE);
// toolbar.setTitle("Wealth Tracker");
setSupportActionBar(toolbar);
final ActionBar ab = getSupportActionBar();
ab.setTitle("WealthTracker");
ab.setHomeAsUpIndicator(R.drawable.ic_drawer);
ab.setDisplayHomeAsUpEnabled(true);
ViewPager viewPager = (ViewPager) findViewById(R.id.pager);
ScreenSlidePagerAdapter pagerAdapter = new ScreenSlidePagerAdapter(getSupportFragmentManager());
viewPager.setAdapter(pagerAdapter);
CirclePageIndicator circlePageIndicator = (CirclePageIndicator) findViewById(R.id.circlePageInd);
circlePageIndicator.setViewPager(viewPager);
}
private class ScreenSlidePagerAdapter extends FragmentStatePagerAdapter {
public ScreenSlidePagerAdapter(FragmentManager fm) {
super(fm);
}
#Override
public Fragment getItem(int position) {
return new ScreenSlidePagerFragment();
}
#Override
public int getCount() {
return VIEW_PAGER_COUNT;
}
}
public static class ScreenSlidePagerFragment extends Fragment {
#Nullable
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
// return super.onCreateView(inflater, container, savedInstanceState);
// View view = inflater.inflate(R.layout.fragment_main, container, false);
// return view;
TabLayout tabLayout = new TabLayout(getActivity());
tabLayout.addTab(tabLayout.newTab().setText("Expense"));
tabLayout.addTab(tabLayout.newTab().setText("Inflow"));
tabLayout.addTab(tabLayout.newTab().setText("Investment"));
tabLayout.setTabMode(TabLayout.MODE_FIXED);
tabLayout.setTabGravity(TabLayout.GRAVITY_FILL);
tabLayout.setTabTextColors(Color.WHITE, Color.YELLOW);
Log.i("ScreenSlidePagerFrag", "Returning tab layout");
return tabLayout;
}
}
#Override
public boolean onPrepareOptionsMenu(Menu menu) {
// If the nav drawer is open, hide action items related to the content view
// boolean drawerOpen = drawerLayout.isDrawerOpen(listView);
// menu.findItem(R.id.action_websearch).setVisible(!drawerOpen);
return super.onPrepareOptionsMenu(menu);
}
#Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.menu_main, menu);
return true;
}
#Override
public boolean onOptionsItemSelected(MenuItem item) {
// Handle action bar item clicks here. The action bar will
// automatically handle clicks on the Home/Up button, so long
// as you specify a parent activity in AndroidManifest.xml.
// if(actionBarDrawerToggle.onOptionsItemSelected(item)){ return true; }
int id = item.getItemId();
//noinspection SimplifiableIfStatement
if (id == R.id.action_settings) {
return true;
}
return super.onOptionsItemSelected(item);
}
}