I wanted to make a toolbar with image above it which would collapse upon scrolling the view below it but on some devices it causes a huge performance issue. Scrolling is painfully slow and I don't get why. On Samsung Galaxy S2 it works perfect but on S7 it's super super slow.
app_bar_layout.xml
<android.support.design.widget.AppBarLayout
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/toolbar_image"
android:src="#drawable/sky"
android:layout_width="match_parent"
android:layout_height="120dp"
android:scaleType="centerCrop"
app:layout_scrollFlags="scroll|enterAlways"/>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="#dimen/actionbar_size"
android:background="#color/colorPrimary">
<me.grantland.widget.AutofitTextView
android:id="#+id/autofix_toolbar_title"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:maxLines="2"
android:gravity="center_vertical"
android:textSize="23sp"
autofit:minTextSize="23sp"
android:text="#string/app_name"
/>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:id="#+id/nested_scrollview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true">
<FrameLayout
android:id="#+id/content_main"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</android.support.v4.widget.NestedScrollView>
What folder is your sky image stored in? and what size is it? I had a very similar issue and it turned out it was because the image was in the wrong drawable folder and being scaled differently to what I expected. See this post: https://littlelostandroid.wordpress.com/2016/04/23/mishaps-with-bitmaps-part-1/
Related
I am a Android newbie programmer and I am stuck with a UI problem. My goal is to achieve something closer to this:
desirable layout
I thought about it and I decided to do it with a CoordinatorLayout, AppBarLayout / CollapsingToolbarLayout and a NestedScrollView with a CardView. Sounds just fine for this problem, right?
With my actual XML I already have the toolbar, image and the scroll feature.
However, the scroll feature isn't 100% like I wanted. First of all, it's not possible to scroll down since around mid screen (probably because of android:layout_height="275dp"), it is only possible to scroll up. (and of course collapse the toolbar). My main goal is to "open" the image fullscreen. Do you have any idea how can I achieve this behaviour? Maybe controlling % in .java?
Also have one annoying bug, but I can leave with it for now, just try to help if it also gives you some OCD condition
I tried to add an transparent property to my LinearLayout but it didn't work.
Normal scroll:
Current scroll
Buggy 'panel' as it is close to collapse:
buggy panel image
My all XML:
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/annonce.main.coordinator"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:ignore="RtlHardcoded"
>
<android.support.design.widget.AppBarLayout
android:id="#+id/flexible.example.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/flexible_example_collapsing"
android:layout_width="match_parent"
android:layout_height="275dp"
app:title="Mosteiro dos Jerónimos"
app:expandedTitleMarginBottom="94dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:expandedTitleTextAppearance="#style/CollapsingTextAppearance.Inverse"
app:contentScrim="?attr/colorPrimary"
>
<ImageView
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:src="#drawable/mosteiro_dos_jeronimos"
android:scaleType="centerCrop"
/>
<android.support.v7.widget.Toolbar
android:id="#+id/flexible.example.toolbar"
android:layout_width="match_parent"
android:layout_height="30dp"
android:background="#null"
app:layout_collapseMode="pin"
app:title="Mosteiro dos Jerónimos"
style="#style/ToolBarWithNavigationBack"
/>
</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:scrollbars="none"
app:behavior_overlapTop="78dp"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
>
<android.support.v7.widget.CardView
android:id="#+id/flexible.example.cardview"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:contentPaddingBottom="16dp"
app:contentPaddingLeft="16dp"
app:contentPaddingRight="16dp"
app:cardCornerRadius="16dp"
app:cardBackgroundColor="#android:color/white"
app:cardElevation="4dp"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
>
<View
android:id="#+id/myRectangleView"
android:layout_width="40dp"
android:layout_height="4dp"
android:layout_gravity="center"
android:layout_marginTop="4dp"
android:background="#drawable/rectangle"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Lisboa"
android:textAppearance="#style/TextAppearance.Header"
style="#style/TextComponent.ItemRow"
/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fontFamily="sans-serif-light"
android:lineSpacingExtra="8dp"
android:textSize="16sp"
android:text="#string/lorem"
/>
</LinearLayout>
</android.support.v7.widget.CardView>
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
<android.support.design.widget.FloatingActionButton
android:id="#+id/flexible.example.fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="32dp"
android:elevation="8dp"
android:src="#drawable/ic_adb_24dp"
app:layout_anchor="#id/flexible.example.cardview"
app:layout_anchorGravity="top|right|end"
tools:ignore="RtlHardcoded"
/>
</android.support.design.widget.CoordinatorLayout>
I think your layout is fine (works on my side), but maybe the behavior you want is more something like a Bottomsheet behavior.
Have you had a look at it?
Basically this will make you able something like google maps, so you would be able to scroll like you want.
Here is a tutorial to have a better understanding of what it is like.
Please let me know if this is what you're looking for.
I'm using CoordinatorLayout with CollapsingToolBar and NestedScrollView. The elements are being inserted via RecyclerView. Whenever I try to scroll up or down the scroll isn't smooth, it's very slow, regardless the velocity of the gesture. I tried the solution here but it didn't solve my problem.
So I have no idea what causes this problem or how to solve it.
Here is my xml layout
<?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"
android:id="#+id/main_screen_frame">
<android.support.design.widget.AppBarLayout
android:id="#+id/appBar"
android:layout_width="match_parent"
android:layout_height="225dp"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsingToolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|enterAlways"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginStart="48dp"
app:expandedTitleMarginEnd="64dp">
<ImageView
android:id="#+id/toolbarImage"
android:layout_width="150dp"
android:layout_height="100dp"
android:scaleType="centerCrop"
android:src="#drawable/logo"
android:layout_gravity="center"
app:layout_scrollFlags="scroll|enterAlways"
app:layout_collapseMode="parallax"/>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:layout_collapseMode="pin"
android:layout_gravity="bottom"
app:layout_scrollFlags="scroll|enterAlways">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<android.support.v7.widget.SearchView
android:id="#+id/search_view_id"
android:layoutDirection="rtl"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:queryHint="#string/search_view_hint"
android:queryBackground="#color/colorWhite"
android:layout_gravity="right"/>
</LinearLayout>
</android.support.v7.widget.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"
android:fillViewport="true"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<LinearLayout
android:id="#+id/search_panel_id"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layoutDirection="rtl">
<TextView
android:id="#+id/text_view_id"
android:layout_width="200dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:textAlignment="center"
android:text="#string/secondary_title"
android:layout_marginBottom="5dp"/>
</LinearLayout>
<FrameLayout
android:id="#+id/fragment_layout_id"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/search_panel_id"
android:layout_marginTop="10dp"
android:orientation="horizontal">
</FrameLayout>
</RelativeLayout>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
The FrameLayout is a place holder for different fragments with different scrollable RecyclerViews.
Thanks in advance.
Layout structure seems okay. So the problem might be here. android:src="#drawable/logo".
Try moving it to drawable-nodpi directory.
Also loading with Picasso / Glide will improve perfomance.
Solved my problem with this solution. The problem was that I was using RecycleView, that came from an injected fragment, inside of NestedScrollVoew. I guess they both contradict each other so that caused the slow scrolling.
recyclerViewsetNestedScrollingEnabled(false);
The above line makes recyclerview scrolling smoother in a NestedScrollView.
I want to make a scrolling at LinearLayout and disable scrolling from RecyclerView. I tried changing LinearLayout to NestedScrollView but it doesn't work and i don't know why.
I've tried this question but it doesn't work well. The content in RecyclerView can be loaded dynamically from WS and it's an endless scroll. The screen was freezing when content in RecyclerView updated.
I've seen this from Twitter, how can we do this https://drive.google.com/file/d/0B2JZggeoXKKFdG1ENmZEdWFIa0k/view?usp=sharing
Example
This is my simple screen of my app, i want scrolling at red currently, and it currently scrolls at 'blue'. Many thanks.
Code
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="match_parent"
android:layout_height="160dp"
android:layout_margin="16dp"
android:background="#CCC"
android:id="#+id/imageView2" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Image caption"
android:background="#cbffa3"
android:padding="16dp"
android:id="#+id/textView8" />
<android.support.v7.widget.RecyclerView
android:id="#+id/my_recycler_view"
android:scrollbars="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</LinearLayout>
Tried but not work, contents inside RecyclerView not showing
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="match_parent"
android:layout_height="160dp"
android:layout_margin="16dp"
android:background="#CCC"
android:id="#+id/imageView2" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Image caption"
android:background="#cbffa3"
android:padding="16dp"
android:id="#+id/textView8" />
<android.support.v7.widget.RecyclerView
android:id="#+id/my_recycler_view"
android:scrollbars="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
Option 1: Use WRAP_CONTENT on RecyclerView and put it in a scroll view along with other widgets. WRAP_CONTENT on RecyclerView works only with 23.2 though. This is not a recommended way as if use WRAP_CONTENT your RecyclerView items won't get recycled and it slow down the UI when the content gets long.
Option 2: Use types for the recycler view adapter and render a different view for index 0. This answer shows how to do it.
Option 3: The best option of achieving this kind of experience is using CollapsingToolbarLayout. Your top content will collapse when you scroll up and you'll be able to scroll the RecyclerView.
Here is one way of replicating the Twitter page with CollapsingToolbarLayout.
<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:layout_gravity="center"
android:fitsSystemWindows="false"
android:orientation="vertical"
app:statusBarBackground="#android:color/transparent">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="250dp"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
>
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="?actionBarSize"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
android:src="#android:drawable/btn_star_big_on"
app:layout_collapseMode="none"
/>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?actionBarSize"
android:background="#android:color/transparent"
android:elevation="5dp"
android:importantForAccessibility="yes"
app:layout_collapseMode="pin"
app:layout_scrollFlags="exitUntilCollapsed">
<TextView
android:layout_width="match_parent"
android:layout_height="?actionBarSize"
android:layout_centerHorizontal="true"
android:layout_gravity="center_horizontal"
android:background="#android:color/white"
android:text="Title Here"
/>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/recycler"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
</android.support.design.widget.CoordinatorLayout>
More about this is in the Android Blog - http://android-developers.blogspot.ca/2015/05/android-design-support-library.html (Scroll to "CoordinatorLayout and the app bar")
I recommend you to add a listener to the scroll view and detect if the user scrolls down, you "hide" the top. The easiest way is to use the default "Scroll Activity" that comes on the default menu when you create a new Activity in Android Studio using Material Design.
I'm using AppBarLayout in CoordinatorLayout wiht RecyclerView to have a parallax like effect.
For the most part it behaves as it should, but on ocasion when scrolling down, the AppBarLayout would collapse as if it was being scrolled up.
Problem is I can't reliably reproduce the bug to figure out why that's going on.
Here is my XML layout:
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
android:id="#+id/coordinatorLayout"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:background="#color/white_background">
<android.support.design.widget.AppBarLayout
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<RelativeLayout
android:id="#+id/relativeLayoutTop"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_collapseMode="parallax"
app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed">
<ImageView
android:id="#+id/imageViewImage"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:contentDescription="#null"
android:adjustViewBounds="true"/>
<TextView
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_margin="10dp"
android:id="#+id/textViewBuild"
android:textSize="16sp"
android:textColor="#color/white_background"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</RelativeLayout>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.SwipeRefreshLayout
android:id="#+id/swipeContainer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="smartfactory.ch.frink.widgets.PatchedScrollingViewBehavior">
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerViewNavigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scrollbars="vertical"
app:layout_behavior="smartfactory.ch.frink.widgets.PatchedScrollingViewBehavior"/>
</android.support.v4.widget.SwipeRefreshLayout>
</android.support.design.widget.CoordinatorLayout>
Here's the video showing the bug (3rd drag, at roughly 10 second)
My question: Has anyone else encountered this bug and found a way how to fix it?
EDIT:
After a lot of digging, it seems that there was an issue that was fixed with the v23.1, however the above example was compiled with the v23.1, and the bug still persists, so hoping someone will see this and either tell me what I'm doing wrong or hopefully re-open the ticket.
I used Android support design library to build a profile view for an app I'm working on.
The profile is composed of a header with a header picture as the background and a rounded profile picture on the center. Besides, there ir a small view on the bottom corner of the header.
Below the header is a viewpager with a tablayout.
The problem I'm facing is that there are inconsistencies between Android 5.1.1 and 5.0.2 and below.
Here's how the profile is shown on a Nexus 5 with 5.1.1 Android:
And here's how the profile is shown on a Xperia Z2 with 5.0.2 Android:
Here's the code:
<FrameLayout
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:fitsSystemWindows="true"
android:background="#color/white">
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_height="250dp"
android:layout_width="match_parent"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/profile_collapsingtoolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="#+id/profile_header"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax"
app:layout_scrollFlags="scroll|enterAlways"/>
<com.makeramen.roundedimageview.RoundedImageView
android:id="#+id/profile_image"
android:layout_width="90dp"
android:layout_height="90dp"
app:riv_corner_radius="45dp"
app:riv_border_color="#color/red"
app:riv_border_width="1dp"
android:layout_gravity="center"
app:layout_collapseMode="none"
app:layout_scrollFlags="scroll|enterAlways" />
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="10dp"
android:layout_margin="5dp"
android:layout_gravity="bottom|right"
android:background="#drawable/shape_usertype_background">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="12sp"
android:textColor="#color/white"
android:text="Professional"/>
</FrameLayout>
<android.support.v7.widget.Toolbar
android:id="#+id/profile_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/profile_pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:paddingTop="45dp"/>
<android.support.design.widget.TabLayout
android:id="#+id/profile_tablayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
app:tabGravity="center"
app:tabMode="scrollable"
app:tabIndicatorColor="#color/red"
app:tabTextColor="#color/main_dark"
app:tabSelectedTextColor="#color/red"
android:fitsSystemWindows="true"
app:layout_anchor="#id/appbar"
app:layout_anchorGravity="bottom"
android:background="#color/white"
/>
<android.support.design.widget.FloatingActionButton
android:id="#+id/profile_floatingbutton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:clickable="true"
android:src="#android:drawable/ic_menu_share"
app:backgroundTint="#color/red"
app:layout_anchor="#id/profile_pager"
app:layout_anchorGravity="bottom|right|end"
app:rippleColor="#android:color/darker_gray"
app:borderWidth="0dp"/>
</android.support.design.widget.CoordinatorLayout>
</FrameLayout>
So, anyone has an idea on how to fix this?
Thanks!
Design Library is unfortunately quite buggy and it should be considered "beta" rather than production ready. It looks and behaves differently depending on Android version your app is running on and problems I spotted are not only related to CoordinatorLayout, but even relatively simple widget like TextInputLayout is not working the same way everywhere. Knowing design library is quite fresh product, I am not sure it is worth spending your own time working around (not fixing) Google bugs. I'd just wait for next iteration of the library, expecting improvements and bug fixes.