I'm using Android Studio 2.2.3, created new Tabs project, add few fragment for each tab. And then added icon for tabs. Everything look ok.
But,
When i scroll, specifically the Action Bar move up and down. It looks ugly to me. Please look at the screenshot (the title and padding area, which I did't add):
ugly screen when actionbar move up
My questions are:
How can I do to stop ActionBar move up and down like that? I want to
handle it later (maybe hidden and unhidden it when user scroll the
view like Contact App of Android 5.1).
If I can't stop the movement,
what can I do (with XML file) to get rid of the padding Area?
I'm just starting to learn android, so please forgive me if these questions not good enough.
And here's my main activity layout file (It's original as Android Studio created it):
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="#dimen/appbar_padding_top"
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:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/AppTheme.PopupOverlay">
</android.support.v7.widget.Toolbar>
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/container"
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="end|bottom"
android:layout_margin="#dimen/fab_margin"
app:srcCompat="#android:drawable/ic_dialog_email" />
Thanks.
Add android:fitsSystemWindows="true" in your root layout i.e. modify it like below:
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="#dimen/appbar_padding_top"
android:fitsSystemWindows="true"
android:theme="#style/AppTheme.AppBarOverlay">
<!-- rest of your layout here -->
</android.support.design.widget.AppBarLayout>
More on android:fitsSystemWindows from Android docs:
internal attribute to adjust view layout based on system windows such
as the status bar. If true, adjusts the padding of this view to leave
space for the system windows. Will only take effect if this view is in
a non-embedded activity.
Must be a boolean value, either "true" or "false".
This may also be a reference to a resource (in the form
"#[package:]type:name") or theme attribute (in the form
"?[package:][type:]name") containing a value of this type.
This corresponds to the global attribute resource symbol
fitsSystemWindows.
For the scrolling issue, remove the following line from your fragment layout -
app:layout_behavior="#string/appbar_scrolling_view_behavior"
And from your main activity's layout, remove the following line from under toolbar tag -
app:layout_scrollFlags="scroll|enterAlways"
Related
In my app, when the keyboard is invoked, the toolbar is moved upwards. How do I prevent the toolbar from moving upwards?
Here's the code to make the activity full screen:
getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,WindowManager.LayoutParams.FLAG_FULLSCREEN);
getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_STABLE);
Layout:
<RelativeLayout xmlns:android=".."
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:layout_alignParentTop="true"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/toolbar_background">
<include layout="#layout/layout_toolbar" />
</android.support.design.widget.AppBarLayout>
<ScrollView.......>
<RelativeLayout......>
<EditText....><!--There are multiple EditTexts here.-->
</RelativeLayout>
Add this line in menifests for Activity
android:windowSoftInputMode="adjustResize"
add android:fitsSystemWindows="true" in your toolbar's root layout
Most of the time, your app won’t need to draw under the status bar or
the navigation bar, but if you do: you need to make sure interactive
elements (like buttons) aren’t hidden underneath them. That’s what the
default behavior of the android:fitsSystemWindows="true" attribute
gives you: it sets the padding of the View to ensure the contents
don’t overlay the system windows.
A few things to keep in mind:
fitsSystemWindows is applied depth first — ordering matters: it’s the
first View that consumes the insets that makes a difference
from https://medium.com/androiddevelopers/why-would-i-want-to-fitssystemwindows-4e26d9ce1eec
basically you're telling the toolbar not to move & stay on top & instead move the views underneath it upwards below it
You can use a CollapsingToolBarLayout if it fits your UI requirement inside of the AppBarLayout.
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:ripple="http://schemas.android.com/apk/res-auto"
android:id="#+id/tv_toolbar"
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#fff"
ripple:contentInsetStart="0dp">
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
I recently implemented a navigation drawer into the main screen of my app. For some reason a small grey (or transparent black) bar is being rendered on top of it.
Screenshot:
Layout code:
<android.support.design.widget.CoordinatorLayout
... >
<LinearLayout
... >
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="#dimen/appbar_padding_top"
android:theme="#style/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:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/PopupOverlay"/>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.DrawerLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/drawer_layout">
<fragment
... />
<android.support.design.widget.NavigationView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:id="#+id/navigation"
android:layout_gravity="start">
<ListView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/list_nav"/>
</android.support.design.widget.NavigationView>
</android.support.v4.widget.DrawerLayout>
</LinearLayout>
<android.support.design.widget.FloatingActionButton
... />
</android.support.design.widget.CoordinatorLayout>
The Java portion is just your generic list-filling stuff. Let me know if you need more code.
How can I remove this weird bar?
For me, it worked to add
app:insetForeground="#color/transparent"
to the NavigationView's XML definition.
NavigationView is a very specialized ViewGroup that builds its own internal structure from provided resources. It's not meant to be used as a regular ViewGroup. That is, it's not meant to have child Views added directly to it, either in layout XML, or in code.
This is not immediately apparent, though, since no fatal error will occur if you do add children to it manually. It is further muddled by the fact that Android Studio's recent Navigation Drawer templates use NavigationView as the default drawer View in the DrawerLayout, with no indication that it is not mandatory that the drawer be a NavigationView. A drawer can be virtually any kind of View or ViewGroup.
In this case, the shadow is apparently coming from something internal to the NavigationView. However, since it's not being used for any of its specialized features, the NavigationView can be removed completely, and the ListView can act as the drawer on its own.
Simply remove the <NavigationView> element, and any code associated with it. To setup the ListView as the drawer, set its layout_gravity attribute to start, and set its layout_width to an exact value; e.g., 240dp.
i add in my activity_main.xml line:
<com.google.android.material.navigation.NavigationView
...
app:insetForeground="#android:color/transparent" />
and it works fine!
I have this 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:id="#+id/coordinatorLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways|snap"/>
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
</android.support.v7.widget.RecyclerView>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fabButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end|bottom"
android:src="#drawable/ic_favorite_outline_white_24dp"/>
</android.support.design.widget.CoordinatorLayout>
Setting #string/appbar_scrolling_view_behavior attribute shifts the RecyclerView by the height of the Toolbar.
But what if I need the first element of the RecyclerView to be aligned to the status bar.
I want the Toolbar to cover (be above) the first element.
In other words, I don't want any offset which #string/appbar_scrolling_view_behavior behaviour entails.
Could you please tell me how to do that?
I had the same problem and I just wrapped the AppbarLayout and the rest of my views (in your case the recyclerview) in a RelativeLayout and it works fine. I don't know if there are any downsides with that approach.
The offset is not by #string/appbar_scrolling_view_behavior behaviour it's due to AppBarLayout it pushes the content down.
I'm not sure if there is any other better solution. But I'd suggest to remove the AppBarLayout to have your content go under the Toolbar. Moreover you might be need the scrolling behaviour for that you can check the library below.
It's been used by lots of apps like Jair Music Player even WhatsApp too uses it.
Library:
Android Observable Scroll View
Update
I was looking into this because when I changed the size of the spacer manually it caused stuttering and thought the CollapsingToolbarLayout will help fix it.
Reading https://stackoverflow.com/a/16103503/2482564 help me fix the stuttering by using ObjectAnimator and setting its duration to 0.
I'm keeping the question open in case someone has a solution with CollapsingToolbarLayout
Original question
I'm trying to achieve the following behavior with CoordinatorLayout, AppBarLayout, CollapsingToolbarLayout, Toolbar and TabLayout - whichever is appropriate for the task...
I want my initial view to look like this mockup
and the behavior when scrolling up should be:
the area marked in yellow disappears 1st
the area marked in blue disappears 2nd - it's only an area with color, no text
the area marked in pink - the tabs area, remains on the screen and is located at the top of the screen
I tried to work with the cheesesquare example and modified include_list_viewpager with the code below, but I get the normal collapsing tabs behavior with the shrinking title
<android.support.design.widget.AppBarLayout
android:id="#+id/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/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:minHeight="50dp"
android:background="#color/cardview_dark_background"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways|snap"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_marginTop="50dp"
android:background="#color/cardview_shadow_start_color"
android:gravity="top"
android:orientation="vertical"
app:layout_collapseMode="pin">
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/cardview_light_background"/>
</LinearLayout>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
any idea what should be changed to get the behavior I want? I tried other methods of changing the size of the spacer area manually, but it causes flickering on screen since I'm intruding in the middle of the scroll event
Remove the app:layout_scrollFlags="scroll|exitUntilCollapsed" from your CollapsingToolbarLayout
I want to programmatically hide / show the TabLayout in my AppBarLayout. Simply setting visibility to VISIBLE and GONE is not enough, as I want to animate the changes and reclaim the space with my content while the tab retreats and leave the space once the tab is shown back.
Below is the relevant part of my layout XML -
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"/>
<android.support.design.widget.TabLayout
android:id="#android:id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|enterAlways"
app:tabMode="scrollable"
android:layout_marginStart="42dp"
android:layout_marginLeft="42dp"
style="#style/MainTabLayout">
</android.support.design.widget.TabLayout>
</android.support.design.widget.AppBarLayout>
As any ViewGroup subclass, AppBarLayout allows for automatic animations during the adding/removal of child views. You just need to add android:animateLayoutChanges="true" (default to false) in your layout file.
As for reclaiming the space content when the view is gone, all you have to do is use setVisibility(View.GONE) rather than setVisibility(View.INVISIBLE), because the latter holds the space for the invisible view.