How to make a collapsing toolbar in android? - android

so im trying to implement a simple collapsing toolbar, but I don't think my xml layout is correct. The text is appearing the image and when I scroll down, I can't scroll back up to see the image. Hope you guys can help!
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:ignore="RtlHardcoded">
<android.support.design.widget.AppBarLayout
android:id="#+id/cardInfo_appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/cardInfo_collapsing"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/image_kyoto"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content">
<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="Hello there"
android:textSize="30dp"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Hello there"
android:textSize="30dp"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Hello there"
android:textSize="30dp"/> <TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Hello there"
android:textSize="30dp"/>
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
Here's the image

Your ImageView should have attribute called
app:layout_collapseMode="parallax"
If you want to add Toolbar to your Layout there should be attribute called
app:layout_collapseMode="pin"
And finally You missed one attribute for NestedScrollView.
app:layout_behavior="#string/appbar_scrolling_view_behavior"

in your ImageView, add the following attribute:
app:layout_collapseMode="parallax"
Also, in your NestedScrollView tag, add the following:
app:layout_behavior="#string/appbar_scrolling_view_behavior"

Related

RecyclerView overlays ImageView on scroll [duplicate]

so im trying to implement a simple collapsing toolbar, but I don't think my xml layout is correct. The text is appearing the image and when I scroll down, I can't scroll back up to see the image. Hope you guys can help!
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:ignore="RtlHardcoded">
<android.support.design.widget.AppBarLayout
android:id="#+id/cardInfo_appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/cardInfo_collapsing"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/image_kyoto"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content">
<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="Hello there"
android:textSize="30dp"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Hello there"
android:textSize="30dp"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Hello there"
android:textSize="30dp"/> <TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Hello there"
android:textSize="30dp"/>
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
Here's the image
Your ImageView should have attribute called
app:layout_collapseMode="parallax"
If you want to add Toolbar to your Layout there should be attribute called
app:layout_collapseMode="pin"
And finally You missed one attribute for NestedScrollView.
app:layout_behavior="#string/appbar_scrolling_view_behavior"
in your ImageView, add the following attribute:
app:layout_collapseMode="parallax"
Also, in your NestedScrollView tag, add the following:
app:layout_behavior="#string/appbar_scrolling_view_behavior"

Making recyclerview fill entire page

I have a page that has a custom recyclerview. I want items I add to the recyclerview to pop up in a list. App was working just fine before I updated my AppCompact library. But essentially, I had anchored my FAB to a Coordinator layout, but I got an IllegalStateException and to resolve that, I had to anchor it to one of the Coordinator layout's children. I picked the recyclerview. But the problem now is that the recycler view does not fill the entire page. It only shows one item (I can scroll through them) but they only take up the space of one - like viewing one at a time. How do I make the layout work like it did before the update?
This is my xml:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:orientation="vertical"
android:gravity="center"
android:layout_height="match_parent">
<!--<include layout="#layout/base_toolbar"/>-->
<android.support.design.widget.CoordinatorLayout
android:id="#+id/myCoordinatorLayout"
android:layout_width="match_parent"
android:gravity="center"
android:layout_height="match_parent"
>
<LinearLayout
android:id="#+id/reminderEmptyView"
android:orientation="vertical"
android:gravity="center"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:src="#drawable/empty_view_bg"
android:layout_width="100dp"
android:layout_height="100dp"/>
<TextView
android:text="Nothing added yet"
android:textColor="#color/secondary_text"
android:textSize="16sp"
android:paddingTop="4dp"
android:paddingBottom="8dp"
android:gravity="center"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</LinearLayout>
<!--<include layout="#layout/base_toolbar"/>-->
<!--</android.support.design.widget.AppBarLayout>-->
<apps.todo.Utility.RecyclerViewEmptySupport
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:id="#+id/toDoRecyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<android.support.design.widget.FloatingActionBut
You probably don't need that parent LinearLayout.
Just copy
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
These into your CoordinatorLayout.
Then remove gravity from your Coordinator Layout and change your FloatingActionButton to:
<android.support.design.widget.FloatingActionButton
android:src="#drawable/ic_add_white_24dp"
android:id="#+id/addToDoItemFAB"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:layout_gravity="bottom|end"/>
This fixes the connection between your RecyclerView and FAB.
This Blog post may help you as well: https://android.jlelse.eu/coordinatorlayout-basic-8040c74cf426
Try like this:
<?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:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
<RelativeLayout
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/reminderEmptyView"
android:orientation="vertical"
android:gravity="center"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:src="#drawable/empty_view_bg"
android:layout_width="100dp"
android:layout_height="100dp"/>
<TextView
android:text="Nothing added yet"
android:textColor="#color/secondary_text"
android:textSize="16sp"
android:paddingTop="4dp"
android:paddingBottom="8dp"
android:gravity="center"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</LinearLayout>
<apps.rtkay.pookiev2.todo.Utility.RecyclerViewEmptySupport
android:id="#+id/toDoRecyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</RelativeLayout>
<android.support.design.widget.FloatingActionButton
android:src="#drawable/ic_add_white_24dp"
android:id="#+id/addToDoItemFAB"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="#dimen/fab_margin" />
</android.support.design.widget.CoordinatorLayout>

Toolbar overlap relative layout

I having a problem with my xml file. The toolbar is over the relative layout. I tried whit some properties like fitsSystemWindows and others but I cant fix it. Any idea abput which property could fix it?
So, this is my xml file. I tried adding to the relavite layout the fitsSystemWindows property but doesnt work yet
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:layout_width="match_parent"
android:fitsSystemWindows="false"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar_main"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:layout_collapseMode="pin">
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
<RelativeLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<RelativeLayout
android:id="#+id/layout_progress"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ProgressBar
android:id="#+id/progress_bar"
android:layout_width="wrap_content"
android:indeterminateOnly="true"
android:layout_height="wrap_content"
android:layout_centerInParent="true" />
</RelativeLayout>
<com.theapplabperu.queestudiar.Utils.EmptyRecyclerView
android:layout_width="match_parent"
android:id="#+id/rv_universities"
android:layout_height="match_parent"
android:fillViewport="true"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
<LinearLayout
android:id="#+id/empty_main"
android:visibility="gone"
android:layout_width="match_parent"
android:orientation="vertical"
android:layout_height="match_parent"
android:layout_gravity="center">
<LinearLayout
android:layout_width="match_parent"
android:gravity="center_vertical"
android:layout_marginRight="24dp"
android:layout_marginLeft="24dp"
android:orientation="vertical"
android:layout_height="match_parent">
<ImageView
android:src="#drawable/ic_intro_brain"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<TextView
android:id="#+id/txt_empty_title"
android:layout_margin="12dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:textSize="24sp"
android:textStyle="bold"
android:text="Ups!"/>
<TextView
android:id="#+id/txt_empty_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:textSize="14sp"
android:text="No hay resultados para mostrar."/>
</LinearLayout>
</LinearLayout>
</RelativeLayout>
Just add app:layout_behavior="#string/appbar_scrolling_view_behavior" to your RelativeLayout. That should put that layout under the appbar

How to make my collapsingToolbar work correctly?

I have implemented this horizontal scroll view inside my collapsing toolbar (because I want users to horizontally scroll through images). And my collapsing toolbar isnt collapsing correctly (there's this random space (in color orange) after it has collapsed. I was hoping you guys can look at my xml and tell me what im doing wrong here.
Here we have it not collapsed.
Here we have it collapsed (and we have this orange space). Also how do i put a margin from my horizontal scroll view and the toolbar so that it would work on all devices?
Here is my xml code.
<android.support.design.widget.CoordinatorLayout
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:layout_width="match_parent"
android:layout_height="match_parent"
tools:ignore="RtlHardcoded"
android:focusable="true"
android:focusableInTouchMode="true">
<android.support.design.widget.AppBarLayout
android:id="#+id/cardInfo_appbar"
android:layout_width="match_parent"
android:layout_height="300dp"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/cardInfo_collapsing"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">
<include
android:layout_width="match_parent"
android:layout_height="50dp"
layout="#layout/toolbar_layout_edit_card"
app:layout_collapseMode="pin">
</include>
<HorizontalScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:id="#+id/cardInfo_HSV_LL">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/image_kyoto"
android:id="#+id/cardInfo_imageView"
android:layout_marginLeft="5dp"
android:layout_marginTop="5dp"
/>
</LinearLayout>
</HorizontalScrollView>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
and my toolbar layout xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar
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="wrap_content"
android:id="#+id/toolbar_edit_card_ID"
android:minHeight="?attr/actionBarSize"
android:fitsSystemWindows="true"
app:theme="#style/Frontier2017_2"
android:background="#color/orange_test"
android:elevation="10dp">
<TextView
android:layout_width="150dp"
android:layout_height="55dp"
android:gravity="bottom|center"
android:textSize="25sp"
android:id="#+id/toolbar_textview"
android:textColor="#color/white"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Edit"
android:background="#color/orange_test"
android:textColor="#color/white"
android:layout_gravity="right"/>
</android.support.v7.widget.Toolbar>

Coordinator layout shifts content at the height of a AppbarLayout

After including Coordinator layout in my project I have a problem. I'll post my layout.
Here is my main_layout.xml:
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_scrollFlags="scroll|enterAlways"/>
</android.support.design.widget.AppBarLayout>
<LinearLayout
android:id="#+id/frame_content_keeper"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Top Text"/>
</LinearLayout>
<LinearLayout
android:id="#+id/login_buttons"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Bottom text"/>
</LinearLayout>
</LinearLayout>
</android.support.design.widget.CoordinatorLayout>
I don't see textview with 'Bottom text'. Looks like it under screen. I think it is a defect.
It's normal because you should remove this line
app:layout_scrollFlags="scroll|enterAlways"
from your
android.support.v7.widget.Toolbar
This attribute is for when you have a list and when you will scroll down the action bar will hiding

Categories

Resources