I'm trying to show a snackbar (via appcompat) to display a message to the user. It works perfectly fine on phones, however on tablets I'm getting
and
The code I'm using to generate the snackbar is
Snackbar.make(mHomeContainer, R.string.rate_snackbar, Snackbar.LENGTH_LONG)
.setAction("Rate", ...)
.show();
Any guidance on how to make this snackbar centered would be greatly appreciated
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<View
android:id="#+id/status_bar"
android:layout_width="match_parent"
android:layout_height="0dp"
android:background="#color/main"
android:elevation="8dp"/>
<include layout="#layout/toolbar" />
<RelativeLayout
android:id="#+id/home_container"
android:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout
android:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentBottom="true" />
<ListView
android:id="#+id/home_search_list"
android:visibility="gone"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#88000000"/>
</RelativeLayout>
</LinearLayout>
<include layout="#layout/navigation_list" />
</android.support.v4.widget.DrawerLayout>
You need to use the CoordinatorLayout in order to make this happen. Here is an article that describes how to do that. Additionally you will likely need to now provide layout files that you want to use for non-tablets vs. tablets so that you can retain full-width for your phones. This is also the layout component that you need to use if you use a combination of FAB, app bar and Snackbar.
In v22.2.0 of Design Support Library, Snackbar's default gravity was just Gravity.BOTTOM.
In v22.2.1 this issue was fixed: https://code.google.com/p/android/issues/detail?id=176383
Related
I have a layout that contains a tree of views like below:
- ConstraintLayout
-- TextView
- WebView
- TabLayout (1) (3 tabs)
- ViewPager (1)
- TabLayout (2) (4 tabs)
- ViewPager (2)
When user scrolls to ViewPager (1), TabLayout (1) will stick at top and able to interact like below GIF in Huobi app. And if user scrolls more to ViewPager (2), it will push TabLayout (1) out and TabLayout (2) will be sticked on top.
I tried some articles like (https://stackoverflow.com/a/44327350 -- It creates fake view and not able to interact header) and libs like (https://github.com/emilsjolander/StickyScrollViewItems -- quite too long no update) but i don't feel it good.
Any good practice on this? I see many apps used it but not sure will Google supports it natively and not sure what I missed.
Any help would be appreciated. Thanks.
Update 13/12/2021
<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<data />
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/background_color">
// Header
<include
android:id="#+id/layout_header"
layout="#layout/layout_header" />
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<WebView
android:id="#+id/wvChart"
android:layout_width="match_parent"
android:layout_height="#dimen/webview_height" />
<com.google.android.material.tabs.TabLayout
android:id="#+id/tl1"
android:layout_width="match_parent"
android:layout_height="#dimen/tablayout_height"
style="#style/TabLayoutStyle"
app:layout_constraintTop_toBottomOf="#id/wvChart"
app:tabTextAppearance="#style/TabLayoutTextStyle"/>
<androidx.viewpager2.widget.ViewPager2
android:id="#+id/vpg1"
android:minHeight="#dimen/viewpager_market_info"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/background_color"
app:layout_constraintTop_toBottomOf="#id/tl1"/>
<com.google.android.material.tabs.TabLayout
android:id="#+id/tl2"
android:layout_width="match_parent"
android:layout_height="#dimen/tablayout_height"
style="#style/TabLayoutStyle"
app:layout_constraintTop_toBottomOf="#id/vpg1"
app:tabTextAppearance="#style/TabLayoutTextStyle"/>
<androidx.viewpager2.widget.ViewPager2
android:id="#+id/vpg2"
android:minHeight="#dimen/viewpager_market_info"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/background_color"
app:layout_constraintTop_toBottomOf="#id/tl2"/>
</androidx.constraintlayout.widget.ConstraintLayout>
</LinearLayout>
</layout>
I am currently using this lib StickyScrollView, it works as expected but contains minor bugs. I still want to find other stable way. Thanks.
As I had no source code from you, I just started to make an own little project to achieve that. First of all you need to take a CoordinatorLayout as base frame. In that you use an AppBarLayout that is the parent of a CollapsingToolbarLayout and in that you can put your content (here e.g. TextView). The second Toolbar in it needs to be pinned (app:layout_collapseMode="pin")
Below that you will continue with the NestedScrollView to have no glitches etc., for a smooth UX.
There you go with your activity_main.xml:
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.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:context=".MainActivity">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="150dp"
android:fitsSystemWindows="true">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="#6200EA"
app:layout_scrollFlags="scroll|snap|exitUntilCollapsed"
app:title="Collapsing Toolbar">
<TextView
android:layout_width="250dp"
android:layout_height="40dp"
android:layout_gravity="center|end"
android:layout_marginBottom="15dp"
android:scaleType="centerCrop"
android:text="Trade your Bitcoins here:"
android:textSize="18sp"
android:textStyle="bold"
app:layout_collapseMode="parallax" />
<Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin" />
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
<androidx.core.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="com.google.android.material.appbar.AppBarLayout$ScrollingViewBehavior">
</androidx.core.widget.NestedScrollView>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
Collapsed Toolbar:
Extended Toolbar:
I think now you should have a good inspiration how to design further. It's the same principal. In terms of time I just made a ruff version. In your shown GIF it's just an additional Toolbar at the top, that's normally known as "DarkActionbar" in themes.xml. And the RecyclerView (in your example "Order Book") will be added as a child in NestedScrollView. Cheers!
i want to create fixed navigation layout, but there is a problem when i rotate device, margin-top of this layout is more than it has to be, so the question - how can i find height of this dark-blue header ( to use it as margin ), or maybe there is another way
<RelativeLayout
android:layout_width="match_parent"
android:layout_marginTop="55dp"
android:layout_height="80dp"
android:background="#drawable/panel_border"
android:layout_alignParentTop="true">
If I were you, I would go with this:
android:layout_marginTop="?attr/actionBarSize"
This attribute indicates correct height of the ActionBar / Toolbar.
The Toolbars height may be different for different APIs and that's the reason you should use ?android:attr or ?attr (when using support library).
? means that it comes from internal Android resources.
Let the android support library do it for you. Like this
<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">
<! -- Your View -->
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/panel_border"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|enterAlways">
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>
take a look at this
I have a custom View within the NavigationView. The problem is no matter in what combination, fitsSystemWindows is not working within the NavigationView. and the top item in the drawer always stays behind the transcludent statusbar.
main_layout
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:openDrawer="start">
<include
layout="#layout/app_bar_main"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<android.support.design.widget.NavigationView
android:id="#+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="#color/colorPrimaryBottomBar"
android:fitsSystemWindows="true">
<include layout="#layout/navigation_main_drawer" />
</android.support.design.widget.NavigationView>
</android.support.v4.widget.DrawerLayout>
navigation_main_drawer
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipToPadding="false"
android:fillViewport="true"
android:fitsSystemWindows="true"
android:paddingBottom="#dimen/default_margin">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="#dimen/default_margin"
android:fitsSystemWindows="true"
android:orientation="vertical">
<LinearLayout
...
</LinearLayout>
<View
... />
<LinearLayout
...
</LinearLayout>
<View
... />
<LinearLayout
...
</LinearLayout>
<View
... />
</LinearLayout>
</ScrollView>
</android.support.design.widget.CoordinatorLayout>
So, if I've understood correctly, you want your custom view to get the necessary padding so that its contents are not clipped by the status bar right?
If that's the case then you need to set
android:fitsSystemWindows="true"
in your root DrawerLayout, and then set
android:fitsSystemWindows="false"
in your NavigationView component. Note that's false, not true :)
REASONING:
The new NavigationView component designed by Google uses the 'fitsSystemWindows' property to customize how its content relates to the status bar. Note that "customize" here is the key word, because the hardcoded behaviour for this particular component is that its contents should overlap the status bar and reach the top of the screen, while the status bar itself should be transparent to allow the drawer's content to be seen through it. This is specified as part of the new Material Design, as can be seen in https://material.io/guidelines/patterns/navigation-drawer.html.
So, the only way to disable this behaviour is to tell the NavigationView to not signal the fitsSystemWindow property, and only set this in the root DrawerLayout that contains all other views, which will do what you would expect and pad all its children views appropriately.
Note that this reasoning is confirmed also by this comment from Android developer Ian Lake in a blog post talking about this specific property.
P.S.
I would also remove all mentions to the 'fitsSystemWindows' property in all the child elements in your navigation_main_drawer XML, just in case, although it probably does have no effect whatsoever as it is..
First things first, I've checked that answer: How to add shadow to the FAB provided with the android support design library?
But even adding the app:borderWidth="0dp" or elevation="6dp" it didn't work. I have checked this answer: https://stackoverflow.com/a/30752754/1121139 it says as bigger my elevation, bigger is the shadow, and here goes the funny thing, at the preview screen it shows the shadow, but when runs at smartphone I got no shadow.
Here goes an screenshot from smartphone:
and here goes and screenshot from preview screen at android studio:
My layout code:
<RelativeLayout 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:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="amaz1ngc0de.com.br.materialdesign.MainActivity">
<include android:id="#+id/app_bar" layout="#layout/toolbar_app_bar"/>
<android.support.v7.widget.RecyclerView
android:id="#+id/rv_test_fab"
android:layout_below="#id/app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content">
</android.support.v7.widget.RecyclerView>
<android.support.design.widget.FloatingActionButton
android:layout_margin="16dp"
android:layout_alignParentRight="true"
android:layout_alignParentBottom="true"
android:src="#drawable/ic_add_white_24dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:elevation="140dp"
app:borderWidth="0dp"
app:pressedTranslationZ="12dp"
android:clickable="true"/>
Try wrapping your layout inside a CoordinatorLayout and put the FAB at the same level, instead of a RelativeLayout, example:
<!-- main_layout.xml -->
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:animateLayoutChanges="true"
android:fitsSystemWindows="true"
tools:context=".activity.MainActivity">
<include layout="#layout/toolbar_app_bar" />
<android.support.v7.widget.RecyclerView
android:id="#+id/rv_test_fab"
android:layout_below="#id/app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<android.support.design.widget.FloatingActionButton
... />
</android.support.design.widget.CoordinatorLayout>
Edit:
This widget is from the design library, you should have it added in your app's build.gradle file:
compile 'com.android.support:design:24.0.0'
OK so I have tried around a bit and it seems shadowing with elevation doesn't work as you imagined. This code gives quite a shadow:
<android.support.design.widget.FloatingActionButton
android:id="#+id/name_add"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="15dp"
android:src="#drawable/ic_add"
app:elevation="20dp"/>
But if I set elevation to 200, the shadow disappears. So there is only a range at which the shadow is working.
Maybe you can understand it as an object, casting a shadow onto an underlaying object. The higher the elevation, the greater is the distance between the two objects and the less shadow is cast...
I'm looking for a custom TabLayout. The icon of the Tab in the middle needs a margin to overlay the content. Please check out the image below.
What I've tried so far
Tab.setCustomView() with a margin. That doesn't overlay the content though.
Looked for TabLayout libraries that give such flexibility. Didn't find anything that fits my need.
Re-invent the wheel?
Since I don't need any complicated scrolling functionality, I could develop my own TabLayout with a couple ViewGroups,TextView and ImageView. Before I have to do that:
Do you know of any library that would do that?
How would you approach it?
Any help would be greatly appreciated!
I achieved that by the combination of a custom library and the floating action button.
The library: MagicIndicator on GitHub
I set the icon of the middle fragment to an empty icon and positioned the floating action button in the middle to overlay the TabLayout. It looks like this:
My activity 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:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context=".MainActivity">
<android.support.v4.view.ViewPager
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="top"
android:layout_marginBottom="50dp"
app:layout_behavior="#string/appbar_scrolling_behavior" />
<net.lucode.hackware.magicindicator.MagicIndicator
android:id="#+id/magic_indicator"
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#color/light_gray"
android:layout_gravity="bottom" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center|bottom"
android:layout_margin="10dp"
app:srcCompat="#drawable/add_icon"
app:backgroundTint="#color/colorPrimary"/>
</android.support.design.widget.CoordinatorLayout>