Jude Fernandes
Jude Fernandes

Reputation: 7517

App Bar Layout Not Working

Material Design

I am trying to achieve this.


My app

This i what i have achieved so far.


    <?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/cor_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/app_bar_layout"
        android:layout_width="match_parent"
        android:layout_height="256dp">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsingToolbarLayout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <android.support.v7.widget.Toolbar
                android:id="@+id/app_bar"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@color/primaryColor"
                android:minHeight="?attr/actionBarSize"
                android:popupTheme="@style/ThemeOverlay.AppCompat.Dark"
                android:theme="@style/MyCustomToolbarTheme"
                app:layout_collapseMode="pin" />
        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>

    <android.support.v7.widget.RecyclerView
        android:id="@+id/rv"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="16dp"
        android:layout_marginBottom="16dp"
        android:layout_marginEnd="16dp"
        android:layout_marginRight="16dp"
        android:elevation="6dp"
        android:src="@drawable/ic_add_white_24dp"
        app:borderWidth="0dp"
        app:fabSize="normal"
        app:pressedTranslationZ="12dp"
        app:rippleColor="?attr/colorControlHighlight" />

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

The problem is no matter how many items i add to the recycler view the app bar layout does not scroll,it just stays pinned.I know the image has not been added but that's okay for now.Could someone tell me what is missing here and why it is not scrolling?

Upvotes: 0

Views: 3518

Answers (1)

Aakash
Aakash

Reputation: 5251

check this out:

<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.support.design.widget.AppBarLayout
        android:id="@+id/appBar"
        android:layout_width="match_parent"
        android:layout_height="192dp"
        android:fitsSystemWindows="true">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapseToolbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleMarginEnd="80dp"
            app:expandedTitleMarginStart="30dp"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:title="Custom Layout">

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:fitsSystemWindows="true"
                android:scaleType="fitXY"
                android:src="@drawable/bridge"
                app:layout_collapseMode="pin"
                app:layout_collapseParallaxMultiplier="1.5"/>


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

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

    </android.support.design.widget.AppBarLayout>
    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:backgroundTint="@android:color/holo_blue_dark"
        app:elevation="10dp"
        android:translationZ="10dp"
        android:layout_marginRight="20dp"
        app:layout_anchor="@+id/appBar"
        app:layout_anchorGravity="bottom|right|end"
        app:borderWidth="0dp"
        android:visibility="gone"
        android:src="@drawable/plus" />
    <android.support.v7.widget.RecyclerView
        android:id="@+id/uid"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>

In your activity:

Toolbar toolbar;
    FloatingActionButton floatingActionButton;
    CollapsingToolbarLayout collapse;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        toolbar= (Toolbar) findViewById(R.id.toolbar);
        floatingActionButton=(FloatingActionButton) findViewById(R.id.fab);
        collapse=(CollapsingToolbarLayout) findViewById(R.id.collapseToolbar);
        setSupportActionBar(toolbar);
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
        collapse.setTitle("Title");
        collapse.setCollapsedTitleTextColor(Color.parseColor("#FFFFFF"));
        collapse.setExpandedTitleColor(Color.parseColor("#FFFFFF"));
        collapse.setStatusBarScrimColor(Color.parseColor("#FFFFFF"));

Upvotes: 2

Related Questions