I am trying to achieve something like the image below. The goal is to have an overlay with an editText that that can scroll and hide the content under it. I'm not sure how to do this with Java or XML. The image on the left is the desired initial screen and the second screen is when the scrollView overlays the content, and a header appears.
You might achieve that with a Collapsing Toolbar
<com.google.android.material.appbar.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleGravity="top"
app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">
<ImageView
android:id="#+id/backdrop"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax"
android:src="#drawable/appbar_image" />
<androidx.appcompat.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"/>
</com.google.android.material.appbar.CollapsingToolbarLayout>
Related
In my ProfileFragment.java I have a Collapsing Toolbar. When I collapse the toolbar, this problem happens (it's easier to show it in image):
Please, ignore those objects in the right upper corner
The profile image gets cut. It's the android:id="#+id/picFotoPerfil3" that disappears.
This is my XML:
<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:background="#color/colorWhite"
android:orientation="vertical"
xmlns:tools="http://schemas.android.com/tools">
<android.support.design.widget.AppBarLayout
android:id="#+id/testeparabackground"
android:layout_width="match_parent"
android:layout_height="203dp"
android:background="?attr/actionBarDivider">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/backgroundcollapsedtoolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp"
app:layout_scrollFlags="exitUntilCollapsed|scroll">
<ImageView
android:id="#+id/imgFotoCapa"
android:layout_width="446dp"
android:layout_height="203dp"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:paddingLeft="-32dp"
android:visibility="visible"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:srcCompat="#drawable/banner_profile"
tools:layout_editor_absoluteY="1dp" />
<android.support.v7.widget.Toolbar
android:id="#+id/toolbarid"
android:layout_width="match_parent"
android:layout_height="110dp"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light">
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<ImageView
android:id="#+id/picFotoPerfil3"
android:layout_width="117dp"
android:layout_height="103dp"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
app:layout_anchor="#+id/testeparabackground"
app:layout_anchorGravity="bottom|center"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#android:color/black" />
</android.support.design.widget.CoordinatorLayout>
Set the attribute android:elevation="50dp" to your imageview
use layout_collapseParallaxMultiplier used in CollapsingToolbarLayout as below:
<android.support.design.widget.CollapsingToolbarLayout ... >
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:src="#drawable/random_pattern"
android:scaleType="fitXY"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.75"/>
</android.support.design.widget.CollapsingToolbarLayout>
When scrolling we see the following - appbar image starts hiding under the content and beyond the top edge of the screen. Parameter layout_collapseParallaxMultiplier determines what part of the image (in percent) will be hidden under the bottom content.
So, for example, setting this parameter to value 1.0 means that top boundary of appbar's image is bound to the top edge of the screen and doesn't move when scrolling. And main content is moving up the top of the image.
When the parameter is not set this corresponds to the value 0.5 and image will be overlapped above and below synchronously.
I'm using the following code to expand/collapse the toolbar. Everything is working fine but I want to expand the toolbar to it's height when user do the scroll down.
Currently it is expanding only when recyclerview reaches to the top. I want to expand the tool bar even if recyclerview is just scrolled down.
Is it possible to expand/collapse the toolbar just by dragging up/down the imageview ?
I tried enterAlways and other flags but it is not maintaining the minimum height set to toolbar.
<android.support.design.widget.AppBarLayout
android:id="#+id/apbarlayout"
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/collapsingToolbarLayout"
android:layout_width="match_parent"
android:layout_height="250dp"
android:background="#000000"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="#+id/image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="centerInside"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.7"/>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="150dp"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:layout_collapseMode="pin" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
This is a basic model of my XML:
<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/background_colour"
>
<android.support.design.widget.AppBarLayout
app:layout_scrollFlags="scroll|exitUntilCollapsed"
android:id="#+id/profile_screen_appBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:fitsSystemWindows="true"
android:minHeight="150dp"
>
<android.support.design.widget.CollapsingToolbarLayout
app:layout_scrollFlags="scroll|exitUntilCollapsed"
android:fitsSystemWindows="true"
android:id="#+id/collapsingToolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:expandedTitleMarginTop="32dp"
app:expandedTitleMarginBottom="32dp"
app:expandedTitleMarginEnd="4dp"
app:expandedTitleMarginStart="32dp"
android:minHeight="100dp"
>
<android.support.v7.widget.Toolbar
android:minHeight="100dp"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
android:background="#color/fab_material_red_500"
>
</android.support.v7.widget.Toolbar>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/blue"
>
<!-- the ViewPager is programatically set to be have the height and width equivalent to that of the screen width of the device --> <com.example.heavymagikhq.MyViewPager
android:padding="0dp"
android:fitsSystemWindows="true"
android:id="#+id/viewPager"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_scrollFlags="scroll|enterAlways"/>
/>
</RelativeLayout>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:layout_marginTop="15dp"
android:layout_marginLeft="6dp"
android:layout_marginRight="6dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/profile_info_recycler"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
/>
</android.support.design.widget.CoordinatorLayout>
The problem
At the moment some of the content in the RecyclerView is slightly off screen and I am able to reveal it by scrolling. The problem is that although only a slight amount of content is off screen the entire screen scrolls up until only the RecyclerView's content is showing at the top of the screen below the CollapsingToolbarLayout at a collapsed height equivalent to that of the Toolbar . I've tried adding android:layout_gravity="fill_vertical" to the RecyclerView but this didn't solve the issue
A Note
When the CollapsingToolbarLayout's height is set to 625dp the screen doesn't scroll at all, but, when I set it to 626dp the content of the screen scrolls until the CollapsingToolbarLayout is collapsed to the height of a Toolbar, so this extra 1dp of height makes the screen go from not scrolling to scrolling much more than 1dp. The 625dp figure is presumably related to the device's (Nexus 7 2013) screen size. Also, regardless of what minHeight I set the CollapsingToolbarLayout to, the CollapsingToolbarLayout always collapses at the height equaivalent to a Toolbar's.
My Question in a nutshell
How can I make it so the screen only scrolls to reveal the content that is not on screen/beyond the content of the RecyclerView?
Thanks in advance.
I found solution，you can set "minHeight" for AppBarLayout childView, and set app:layout_scrollFlags="scroll|exitUntilCollapsed"
I have an floating button in my app. The xml layout of my floating button is the below
<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.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
/>
</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"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
</android.support.v4.widget.NestedScrollView>
<android.support.design.widget.FloatingActionButton
android:id="#+id/chrono_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="#dimen/fab_margin"
android:clickable="true"
android:src="#drawable/ic_add_black_48dp"
app:layout_anchor="#+id/appbar"
app:layout_anchorGravity="bottom|right|end" />
</android.support.design.widget.CoordinatorLayout>
What i want is to change the floating button image src programatically when somethings happens. What i tried so far is
chrono_button.setBackground(getDrawable(R.drawable.ic_done_black_48dp));
But i always get this error
I/FloatingActionButton: Setting a custom background is not supported.
What is wrong in my code or is there any ather approach to change the drawable image of a floating button programatically?
You don't need change the background, set the image.
floatingActionButton.setImageDrawable(getResources().getDrawable(R.drawable.ic_full_sad));
One details that might be good clarifying is the setImageDrawable method is available for the FloatingActionButton class but not for View. So if you are having issues finding this method just cast the fab like:
((FloatingActionButton)mItemPlaying.getRootView().findViewById(R.id.fab)).setImageDrawable(ContextCompat.getDrawable(context, R.drawable.ic_play_arrow_white_24dp));
fab.setImageResource(R.drawable.yourimagename);
I have a horizontal scroll of a couple images. I have it in its own XML file that handles just the scrolling, now I want to add an image (Which shouldnt be the size of a background) behind these scrollable items so that the image is visible between and behind the scrollable images?
How can I go about doing this?
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="0dp">
<include
android:layout_width="wrap_content"
android:layout_height="wrap_content"
layout="#layout/dotw_scrollable"/>
</LinearLayout>
I have to add the background programatically as this is a dynamic image
Change your layout to something like this:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="0dp">
<ImageView
android:id="#+id/my_background"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView>
<include
android:layout_width="wrap_content"
android:layout_height="wrap_content"
layout="#layout/dotw_scrollable"/>
</RelativeLayout>