How to add views under collapsing toolbar layout?

Question

I want to add collapsing toolbar in my app. I want to add a graph layout also image view and text views inside the collapsing toolbar layout. Like this image.

This graph is in collapsing toolbar layout. When we do scroll up graph goes up and remains as a toolbar.

Now I am trying to add views under collapsing toolbar layout. But I am not able to move them and align them. How to do?

Layout:

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/parentPanel"
xmlns:fab="http://schemas.android.com/apk/res-auto">

<android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="250dp"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    android:id="@+id/appbar">
    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize">

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/ic_reorder_black_48dp"
            android:id="@+id/navigationMenu" />

    </android.support.v7.widget.Toolbar>

    <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/collapsing_toolbar"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:contentScrim="?attr/colorPrimary"
        app:layout_scrollFlags="scroll|exitUntilCollapsed">



        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/ic_check_box_white_24dp"/>



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


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

<android.support.v4.widget.NestedScrollView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ffe5e5e5"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    android:id="@+id/scrollView">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:paddingTop="10dp">

        <include layout="@layout/card_layout" />

        <include layout="@layout/card_layout" />


        <include layout="@layout/card_layout" />



    </LinearLayout>


</android.support.v4.widget.NestedScrollView>

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab"
    app:layout_anchor="@id/appbar"
    app:layout_anchorGravity="bottom|right|end"
    style="@style/FabStyle"/>
<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_anchor = "@id/parentPanel"
    app:layout_anchorGravity  = "bottom|right|end"
    android:padding="20dp"
    android:weightSum="1">

    <com.github.clans.fab.FloatingActionMenu
        android:id="@+id/menu1"
        android:layout_width="match_parent"
        android:layout_height="219dp"
        android:paddingRight="10dp"
        android:paddingBottom="10dp"
        android:paddingLeft="10dp"
        fab:menu_labels_ellipsize="end"
        fab:menu_labels_singleLine="true"
        fab:menu_backgroundColor="#ccffffff"
        fab:menu_fab_label="Menu label"
        android:layout_gravity="bottom">

        <com.github.clans.fab.FloatingActionButton
            android:id="@+id/fab1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_add_white_24dp"
            fab:fab_size="mini"
            fab:fab_label="addList" />

        <com.github.clans.fab.FloatingActionButton
            android:id="@+id/fab2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_list_white_24dp"
            fab:fab_size="mini"
            fab:fab_label="list1" />

        <com.github.clans.fab.FloatingActionButton
            android:id="@+id/fab3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_list_white_24dp"
            fab:fab_size="mini"
            fab:fab_label="list2" />

        <com.github.clans.fab.FloatingActionButton
            android:id="@+id/fab4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_list_white_24dp"
            fab:fab_size="mini"
            fab:fab_label="list3" />

    </com.github.clans.fab.FloatingActionMenu>
</LinearLayout>

Activity:

public class MainActivity extends AppCompatActivity {

private CollapsingToolbarLayout collapsingToolbarLayout = null;

private FloatingActionButton fab1;
private FloatingActionButton fab2;
private FloatingActionButton fab3;


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

    Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
    setSupportActionBar(toolbar);
    final FloatingActionMenu menu1 = (FloatingActionMenu) findViewById(R.id.menu1);
    collapsingToolbarLayout = (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar);
    collapsingToolbarLayout.setTitle("List Title");

    ImageView navigationMenu = (ImageView)findViewById(R.id.navigationMenu);

    fab1 = (FloatingActionButton) findViewById(R.id.fab1);
    fab2 = (FloatingActionButton) findViewById(R.id.fab2);
    fab3 = (FloatingActionButton) findViewById(R.id.fab3);

    fab1.setOnClickListener(clickListener);
    fab2.setOnClickListener(clickListener);
    fab3.setOnClickListener(clickListener);


    navigationMenu.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {


            startActivity(new Intent(MainActivity.this,NavigationMenuActivity.class));
            overridePendingTransition(R.anim.left, R.anim.enter);

        }
    });

    menu1.setOnMenuButtonClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            if (menu1.isOpened()) {
                Toast.makeText(MainActivity.this, menu1.getMenuButtonLabelText(), Toast.LENGTH_SHORT).show();
            }

            menu1.toggle(true);
        }
    });
    menu1.setClosedOnTouchOutside(true);


    dynamicToolbarColor();

    toolbarTextAppernce();
}


private void dynamicToolbarColor() {

    Bitmap bitmap = BitmapFactory.decodeResource(getResources(),
            R.drawable.b);
    Palette.from(bitmap).generate(new Palette.PaletteAsyncListener() {
        @Override
        public void onGenerated(Palette palette) {
            collapsingToolbarLayout.setContentScrimColor(palette.getMutedColor(getResources().getColor(R.color.colorPrimary)));
            collapsingToolbarLayout.setStatusBarScrimColor(palette.getMutedColor(getResources().getColor(R.color.colorPrimaryDark)));
        }
    });
}


private void toolbarTextAppernce() {
    collapsingToolbarLayout.setCollapsedTitleTextAppearance(R.style.collapsedappbar);
    collapsingToolbarLayout.setExpandedTitleTextAppearance(R.style.expandedappbar);
}


private View.OnClickListener clickListener = new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        String text = "";

        switch (v.getId()) {
            case R.id.fab1:
                text = fab1.getLabelText();
                break;
            case R.id.fab2:
                text = fab2.getLabelText();
                fab2.setVisibility(View.GONE);
                break;
            case R.id.fab3:
                text = fab3.getLabelText();
                fab2.setVisibility(View.VISIBLE);
                break;

        }
    }
    };
}

Now I have a single image view inside collapsing toolbar layout and that I can't move or align. How to align view and add views under collapsing toolbar?

Thank you..

Check this post you may find some hints. https://stackoverflow.com/questions/32523188/coordinatorlayout-appbarlayout-navigationdrawer/32523537#32523537 — vijay, Feb 22 '18 at 21:40

kris larson · Answer 1 · 2017-03-07T20:58:02.803

CollapsingToolbarLayout is a subclass of FrameLayout.

For maximum flexibility, put all your widgets inside a LinearLayout or RelativeLayout and make it the only child of the CollapsingToolbarLayout. Also for best results with vertical sizing, set the height to a specific dimension.

    <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/collapsing_toolbar"
        android:layout_width="match_parent"
        android:layout_height="@dimen/graph_toolbar_height"
        app:contentScrim="?attr/colorPrimary"
        app:layout_scrollFlags="scroll|exitUntilCollapsed">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_collapseMode="parallax">

            <!-- graph UI here -->

        </RelativeLayout>

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

>public class CollapsingToolbarLayout extends FrameLayout – Dogcat Mar 07 '17 at 06:17 — Dogcat, Mar 07 '17 at 06:17
Oh, right. Confused with `AppBarLayout`. Updated answer. – kris larson Mar 07 '17 at 20:56 — kris larson, Mar 07 '17 at 20:56

score 0 · Answer 2 · answered Feb 08 '17 at 08:53

Create a layout inside collapsingtoolbarlayout and add your views in there.

<android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.design.widget.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:contentScrim="@color/colorPrimary"
            app:expandedTitleGravity="bottom|center_horizontal"
            app:expandedTitleMarginBottom="64dp"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

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

                <ImageView
                    android:layout_width="match_parent"
                    android:layout_height="230dp"
                    android:scaleType="centerCrop"
                    android:src="@drawable/ic_about"
                    app:layout_collapseMode="parallax" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="48dp"
                    android:background="@color/colorAccent"
                    android:text="@string/about_title"
                    android:textSize="@dimen/text_size_large" />
            </LinearLayout>

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?actionBarSize"
                android:layout_marginTop="@dimen/status_bar_height"
                app:layout_collapseMode="pin"
                app:popupTheme="@style/AppTheme.PopupOverlay" />

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

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

How to add views under collapsing toolbar layout?

2 Answers2