片段内的CollapsingToolbarLayout菜单

Question

I am crious if there is a way to make CollapsingToolbarLayout menu inside a fragment without we define custom layout inside it. On phone layout, i made DetailActivity that has menus inside it.

On tablet layout, i made the detail into fragment on the right side. The CollapsingToolbarLayout working fine actually, but i can't add any menu directly to it.

I know about Fragment.setHasOptionsMenu(true); , but i don't want to merge my detail menu with activity menu.

PS: The images i used here is retrieved from TMDb and it is free of use.

Answer 1

I already dive to the CollapsingToolbarLayout and googling about it, but i don't think it is possible to do. So for workaround, i make an ImageView with menu overflow icon, and show list pop up under it to imitate action menu behavior. Here is my CollapsingToolbarLayout looks like in XML

<android.support.design.widget.CollapsingToolbarLayout
    android:fitsSystemWindows="false"
    android:id="@+id/collapsing_toolbar"
    android:layout_height="wrap_content"
    android:layout_width="match_parent"
    app:contentInsetStartWithNavigation="0dp"
    app:contentScrim="?attr/colorPrimary"
    app:expandedTitleMarginEnd="64dp"
    app:expandedTitleMarginStart="48dp"
    app:layout_scrollFlags="exitUntilCollapsed|scroll">

    <your.app.AutoFitImageView
        android:fitsSystemWindows="false"
        android:id="@+id/iv_backdrop_image"
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        android:scaleType="fitCenter"
        android:transitionName="image"
        app:layout_collapseMode="parallax"
        tools:targetApi="lollipop"/>

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_height="?attr/actionBarSize"
        android:layout_width="match_parent"
        app:layout_collapseMode="pin"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light">

        <ImageView
            android:id="@+id/button_menu"
            android:layout_gravity="right"
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:minHeight="48dp"
            android:minWidth="48dp"
            android:scaleType="centerInside"
            android:src="@drawable/ic_action_overflow"/>
    </android.support.v7.widget.Toolbar>

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

Then i set clickListener to ImageView with R.id.button_menu id to call this method:

private void showListMenu(View anchor) {
    final ListPopupWindow popupWindow = new ListPopupWindow(getActivity());

    List<HashMap<String, String>> data = new ArrayList<>();

    HashMap<String, String> map1 = new HashMap<>();
    map1.put("menu", "Share Detail");

    HashMap<String, String> map2 = new HashMap<>();
    map2.put("menu", "Share First Trailer");

    data.add(map1);
    data.add(map2);

    final Movie movieData = getMovieData();
    HashMap<String, String> map3 = new HashMap<>();
    if (DbHelper.movieInDb(movieData)) {
        map3.put("menu", getString(R.string.unfavorite));
    } else {
        map3.put("menu", getString(R.string.favorite));
    }
    data.add(map3);

    ListAdapter adapter = new SimpleAdapter(
            getActivity(),
            data,
            android.R.layout.simple_list_item_1, // You may want to use your own cool layout
            new String[]{"menu"}, // These are just the keys that the data uses
            new int[]{android.R.id.text1}); // The view ids to map the data to

    popupWindow.setAnchorView(anchor);
    popupWindow.setAdapter(adapter);

    DisplayMetrics displaymetrics = new DisplayMetrics();
    getActivity().getWindowManager().getDefaultDisplay().getMetrics(displaymetrics);
    popupWindow.setWidth(displaymetrics.widthPixels / 3); // note: don't use pixels, use a dimen resource

    popupWindow.setOnItemClickListener(yourListener); // the callback for when a list item is selected
    popupWindow.show();
}

The method will show ListPopUpWindow that has same style as overflow action menu when clicked. Here is the final layout looks like