Add Collapsing toolbar with image

Question

I want to add Collapsing toolbar with image i tried a lot of codes but i get a lot problems i want to add it in layout which i used RecyclerView and navigation drawer

please help me to add Collapsing toolbar like this

content_r_arabic

<RelativeLayout 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"
xmlns:ads="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.kamal.ahmed.rewaya.R_arabic"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
android:background="@drawable/bg"
tools:showIn="@layout/app_bar_r_arabic">

<android.support.v7.widget.RecyclerView
    android:id="@+id/recyclerView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_above="@+id/adView"
    android:layout_alignParentTop="true"
    android:layout_marginRight="23dp">
</android.support.v7.widget.RecyclerView>

<LinearLayout
    android:orientation="horizontal"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/progress_layout"
    android:gravity="center_vertical"
    android:layout_marginTop="270dp"
    android:layout_alignParentTop="true"
    android:layout_centerHorizontal="true">

    <ProgressBar
        android:id="@+id/progress_bar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginLeft="100dp"
        android:layout_marginBottom="5dp"
        android:layout_weight="1"/>

    <TextView
        android:text="جاري التحميل"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/progress_txt"
        android:textSize="22sp"
        android:textStyle="bold"
        android:textColor="#e873400c"
        android:layout_gravity="center"
        android:layout_marginRight="90dp"
        android:layout_marginBottom="5dp"
        android:layout_weight="1" />

</LinearLayout></RelativeLayout>

app_bar_r_arabic

<RelativeLayout 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"
xmlns:ads="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.kamal.ahmed.rewaya.R_arabic"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
android:background="@drawable/bg"
tools:showIn="@layout/app_bar_r_arabic">

<android.support.v7.widget.RecyclerView
    android:id="@+id/recyclerView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_above="@+id/adView"
    android:layout_alignParentTop="true"
    android:layout_marginRight="23dp">
</android.support.v7.widget.RecyclerView>

<LinearLayout
    android:orientation="horizontal"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/progress_layout"
    android:gravity="center_vertical"
    android:layout_marginTop="270dp"
    android:layout_alignParentTop="true"
    android:layout_centerHorizontal="true">

    <ProgressBar
        android:id="@+id/progress_bar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginLeft="100dp"
        android:layout_marginBottom="5dp"
        android:layout_weight="1"/>

    <TextView
        android:text="جاري التحميل"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/progress_txt"
        android:textSize="22sp"
        android:textStyle="bold"
        android:textColor="#e873400c"
        android:layout_gravity="center"
        android:layout_marginRight="90dp"
        android:layout_marginBottom="5dp"
        android:layout_weight="1" /></LinearLayout>


<com.google.android.gms.ads.AdView
    android:id="@+id/adView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerHorizontal="true"
    android:layout_alignParentBottom="true"
    ads:adSize="SMART_BANNER"
    ads:adUnitId="@string/banner_ad_unit_id">
</com.google.android.gms.ads.AdView></RelativeLayout>

activity_r_arabic

<android.support.v4.widget.DrawerLayout 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/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:openDrawer="start"
tools:context=".R_arabic">

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

<android.support.design.widget.NavigationView
    android:id="@+id/nav_view"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_gravity="start"
    android:fitsSystemWindows="true"
    app:headerLayout="@layout/nav_header_navigation"
    app:menu="@menu/activity_navigation_drawer1" />

Activity

public class R_arabic extends AppCompatActivity
    implements NavigationView.OnNavigationItemSelectedListener {


ProgressBar progressBar;
LinearLayout progress_layout;


List<listitem_gib> GetDataAdapter1;

RecyclerView recyclerView;

RecyclerView.LayoutManager recyclerViewlayoutManager;

RecyclerView.Adapter recyclerViewadapter;


String id = "id";
String name = "name";
String url = "url";
String img = "img";
String num = "num";
String size = "size";

JsonArrayRequest jsonArrayRequest ;

RequestQueue requestQueue ;


@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_r_arabic);


    Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
    setSupportActionBar(toolbar);


    DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
    ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(
            this, drawer, toolbar, R.string.navigation_drawer_open, R.string.navigation_drawer_close);
    drawer.setDrawerListener(toggle);
    toggle.syncState();

    NavigationView navigationView = (NavigationView) findViewById(R.id.nav_view);
    navigationView.setNavigationItemSelectedListener(this);

    GetDataAdapter1 = new ArrayList<>();

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

    progressBar = (ProgressBar) findViewById(R.id.progress_bar);

    recyclerView.setHasFixedSize(true);

    recyclerViewlayoutManager = new LinearLayoutManager(this);

    recyclerView.setLayoutManager(recyclerViewlayoutManager);


    progress_layout = (LinearLayout) findViewById(R.id.progress_layout);
    progress_layout.setVisibility(View.VISIBLE);

    JSON_DATA_WEB_CALL();

}


public void JSON_DATA_WEB_CALL(){


    String GET_JSON_DATA_HTTP_URL = "http://grassyhat.com/android/arabic.php";

    jsonArrayRequest = new JsonArrayRequest(GET_JSON_DATA_HTTP_URL,

            new Response.Listener<JSONArray>() {
                @Override
                public void onResponse(JSONArray response) {

                    progress_layout.setVisibility(View.GONE);

                    JSON_PARSE_DATA_AFTER_WEBCALL(response);
                }
            },
            new Response.ErrorListener() {
                @Override
                public void onErrorResponse(VolleyError error) {

                }
            });

    requestQueue = Volley.newRequestQueue(this);

    requestQueue.add(jsonArrayRequest);
}

public void JSON_PARSE_DATA_AFTER_WEBCALL(JSONArray array){

    for(int i = 0; i<array.length(); i++) {

        listitem_gib GetDataAdapter2 = new listitem_gib();

        JSONObject json = null;
        try {
            json = array.getJSONObject(i);

            GetDataAdapter2.setId(json.getString(id));

            GetDataAdapter2.setName(json.getString(name));

            GetDataAdapter2.seturl(json.getString(url));

            GetDataAdapter2.setimg(json.getString(img));

            GetDataAdapter2.setnum(json.getString(num));

            GetDataAdapter2.setsize(json.getString(size));

        } catch (JSONException e) {

            e.printStackTrace();
        }
        GetDataAdapter1.add(GetDataAdapter2);
    }

    recyclerViewadapter = new RecyclerViewAdapter(GetDataAdapter1, this);


    //RecyclerView needs a layout manager in order to display data so here we create one
    StaggeredGridLayoutManager layoutManager = new StaggeredGridLayoutManager(3, StaggeredGridLayoutManager.VERTICAL);

    //Here we set the layout manager and the adapter to the listview
    recyclerView.setLayoutManager(layoutManager);
    recyclerView.setAdapter(recyclerViewadapter);

}

@Override
public void onBackPressed() {
    DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
    if (drawer.isDrawerOpen(GravityCompat.START)) {
        drawer.closeDrawer(GravityCompat.START);
    } else {
        super.onBackPressed();
    }
}


@Override
public boolean onCreateOptionsMenu(Menu menu) {
    getMenuInflater().inflate(R.menu.category, menu);
    return true;
}


@Override
public boolean onOptionsItemSelected(MenuItem item) {

    int id = item.getItemId();
       if (id == R.id.exit) {
        AlertDialog alertbox = new AlertDialog.Builder(this)
                .setMessage("هل تريد الخروج ؟")
                .setPositiveButton("نعم", new DialogInterface.OnClickListener() {

                    public void onClick(DialogInterface arg0, int arg1) {

                        finishAffinity();

                    }
                })
                .setNegativeButton("لا", new DialogInterface.OnClickListener() {

                    public void onClick(DialogInterface arg0, int arg1) {
                    }
                })
                .show();
    }


    return super.onOptionsItemSelected(item);
}


@SuppressWarnings("StatementWithEmptyBody")
@Override
public boolean onNavigationItemSelected(MenuItem item) {
    int id = item.getItemId();

    if (id == R.id.home) {

        Intent intent = new Intent(R_arabic.this, Navigation.class);
        finishAffinity();
        startActivity(intent);

    } 
    }


    DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
    drawer.closeDrawer(GravityCompat.START);
    return true;
}

}

Answer 1

Here is the full xml layout code with recyclerview that you can use,

<?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"
    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"
        android:layout_width="match_parent"
        android:layout_height="@dimen/detail_backdrop_height"
        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"
            android:fitsSystemWindows="true"
            app:statusBarScrim="@android:color/transparent"
            app:contentScrim="@android:color/transparent">

            <ImageView
                android:id="@+id/backdrop"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="centerCrop"
                android:fitsSystemWindows="true"
                app:layout_collapseMode="parallax" />

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="100dp"
                android:background="@android:color/transparent"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
                app:layout_collapseMode="pin" />

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

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

   <android.support.v7.widget.RecyclerView
      android:id="@+id/recyclerView"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      app:layout_behavior="@string/appbar_scrolling_view_behavior"
      android:layout_marginRight="23dp"/>

Answer 2

Based on @Multidots Solutions answer. I used the theme color for the app:contentScrim attribute and did not use transparency:

<com.google.android.material.appbar.AppBarLayout
    android:id="@+id/app_bar"
    android:layout_width="match_parent"
    android:layout_height="@dimen/appbar_big_height"
    android:fitsSystemWindows="true"
    android:theme="@style/ActionBarCollapse">

    <com.google.android.material.appbar.CollapsingToolbarLayout
        android:id="@+id/toolbar_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true"
        app:contentScrim="?attr/colorPrimary"
        app:layout_scrollFlags="scroll|exitUntilCollapsed"
        app:toolbarId="@+id/detail_toolbar" >

        <ImageView
            android:id="@+id/image_toolbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:scaleType="centerCrop"
            android:fitsSystemWindows="true"
            app:layout_collapseMode="parallax"
            android:contentDescription="@string/image_toolbar" />

        <androidx.appcompat.widget.Toolbar
            android:id="@+id/detail_toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:layout_collapseMode="pin"
            app:popupTheme="@style/AppTheme"
            app:contentInsetStartWithNavigation="0dp"
            app:titleMarginStart="20dp">

        </androidx.appcompat.widget.Toolbar>
    </com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>

And this also works for me: