Toolbar title is being drawn behind status bar - android

I faced a problem with CoordinatorLayout and AppBarLayot. I have windowTranslucentStatus = true in my style resource, and android:fitsSystemWindows="true" in top layout (CoordinatorLayout) of an Activity. But there is a problem: when I scroll donw, Toolbar goes up(that's OK), and Toolbar title stays visible through StatusBar.
Start state
End state. Here you can see text below StatusBar
Xml:
<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/coordinatorLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context="com.wldev.lawbite.enquerie.ChooseRecepientActivity">
<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="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark"
app:title="#string/activity_chose_recipient_title"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/ThemeOverlay.AppCompat.Dark" />
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:cardCornerRadius="0dp"
app:cardElevation="0dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:alpha="0.9"
android:contentDescription="#string/search_icon_cd"
android:padding="14dp"
android:src="#drawable/ic_search"
android:tint="#color/black" />
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="16dp"
android:layout_marginTop="16dp"
android:background="#null"
android:hint="#string/find_by_name_hint"
android:textColor="#color/black"
android:textColorHint="#color/gray_50_transparent"
android:textSize="14sp" />
</LinearLayout>
</android.support.v7.widget.CardView>
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipToPadding="false"
android:paddingTop="2dp"
android:visibility="visible"
app:dataSource="#{recipients}"
app:layoutManager="LinearLayoutManager"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
One more thing
If I wrap some layout around CoordinatorLayout all will be OK and Toolbar will hide properly.

Add this to your AppBarLayout
android:fitsSystemWindows="true
And, it will work.

Related

How to align elements properly in a CoordinatorLayout under a CollapsingLayout?

I want to achieve the hierarchy shown in the preview picture below, I have no prior knowledge of collapsible layout and coordinator layout but what I did caused the view pager to NOT to show it's content.
I am working in a main activity that has a Coordinator layout as a root layout, a collapsing toolbar, a viewpager, a bottom navigation bar and a hidden bottom sheet
PS: I am working with AndroidX support library.
This is my XML Layout activity_main.xml
<androidx.coordinatorlayout.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/parent"
android:fitsSystemWindows="true">
<!-- RETRACTABLE TOOLBAR -->
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="#dimen/appbar_header_height"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<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="?attr/colorPrimary"
app:expandedTitleMarginStart="#dimen/activity_margin_content"
app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">
<ImageView
android:id="#+id/iv_banner_img"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
android:src="#drawable/banner"
android:tintMode="multiply"
app:layout_collapseMode="parallax" />
<View
android:layout_width="match_parent"
android:layout_height="80dp"
android:layout_gravity="top"
android:background="#drawable/scrim_topdown"
android:fitsSystemWindows="true"/>
<View
android:layout_width="match_parent"
android:layout_height="160dp"
android:layout_gravity="bottom"
android:background="#drawable/scrim"/>
<LinearLayout
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:layout_marginEnd="16dp"
android:layout_gravity="end">
<ImageView
android:src="#drawable/ic_user_placeholder"
android:id="#+id/iv_parent_profile_sm"
android:layout_width="32dp"
android:layout_height="32dp"/>
</LinearLayout>
<androidx.appcompat.widget.Toolbar
android:id="#+id/anim_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"/>
<LinearLayout
android:gravity="center_vertical"
android:layout_gravity="bottom"
android:layout_marginStart="12dp"
android:layout_marginEnd="12dp"
android:layout_marginBottom="12dp"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:gravity="center_vertical"
android:layout_gravity="bottom"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:padding="4dp"
android:layout_marginEnd="6dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:id="#+id/tv_name"
android:drawableStart="#drawable/ic_person"/>
<TextView
android:layout_marginEnd="6dp"
android:padding="4dp"
android:id="#+id/tv_birth"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:drawableStart="#drawable/ic_cake"/>
<ImageView
android:padding="8dp"
android:id="#+id/iv_gender"
android:layout_width="32dp"
android:layout_height="32dp" />
</LinearLayout>
</LinearLayout>
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
<!-- VIEW PAGER -->
<androidx.viewpager.widget.ViewPager
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:id="#+id/view_pager"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<!-- NAVIGATION BAR -->
<com.gauravk.bubblenavigation.BubbleNavigationLinearView
android:layout_alignParentBottom="true"
android:id="#+id/bottom_navigation_view_linear"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorWhite"
android:elevation="12dp"
android:padding="6dp"
android:animateLayoutChanges="true"
android:layout_gravity="bottom">
<!-- bottom navigation bar elements -->
</com.gauravk.bubblenavigation.BubbleNavigationLinearView>
<!-- BOTTOM SHEETS -->
<include layout="#layout/details_sheet" />
<include layout="#layout/add_sheet"/>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
This is the desired result:
You can try gravity to align inside the CoordinatorLayout.
android:layout_gravity="end"
This worked for me.
I got what I needed by wrapping everything in a RelativeLayout then I kept tweaking android:layout_above and android:layout_below until I got right
to set element in the beginning add this android:layout_gravity="start"
and to set element in the end add this android:layout_gravity="end"
and to set it in bottom add this: android:layout_gravity="bottom"

android - navigation drawer icon causing the custom toolbar text out from the center [duplicate]

When using ActionBarDrawerToggle with my custom Toolbar, the TextViews in the Toolbar are no longer centered.
main_layout.xml
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<include layout="#layout/toolbar" />
<FrameLayout
android:id="#+id/flContent"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="?attr/actionBarSize"
android:fitsSystemWindows="true" />
</RelativeLayout>
<android.support.design.widget.NavigationView
android:id="#+id/nvView"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="#android:color/white"
app:headerLayout="#layout/nav_header"
app:menu="#menu/drawer_view" />
</android.support.v4.widget.DrawerLayout>
toolbar.xml
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimaryDark"
android:elevation="5dp"
android:minHeight="?attr/actionBarSize"
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"
app:contentInsetStartWithNavigation="0dp"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:gravity="center_horizontal|center_vertical"
android:orientation="vertical">
<TextView
android:id="#+id/tvNavTitle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorBackgroundBlack"
android:gravity="center"
android:textColor="#color/colorWhite"
android:textSize="#dimen/text_size_large" />
<TextView
android:id="#+id/tvNavDate"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorBackgroundBlack"
android:gravity="center"
android:textColor="#color/colorWhite"
android:textSize="#dimen/text_size_small" />
</LinearLayout>
<ImageView
android:layout_width="35dp"
android:layout_height="35dp"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:src="#mipmap/ic_launcher" />
</RelativeLayout>
</android.support.v7.widget.Toolbar>
I tried setting the contentInsetStart and other attributes on the Toolbar, but nothing changed.
The problem here is that ActionBarDrawerToggle's icon is set as the navigation button on the Toolbar. This button is a special child of Toolbar that will take precedence in the layout. Any other child Views added to the Toolbar will be allotted only the space remaining after that ImageButton is placed. This is pushing the left side of your RelativeLayout to the right, so the TextViews you have centered in that will not be centered with respect to the Toolbar itself.
Fortunately, Toolbar's LayoutParams has a gravity property that we can utilize to center the LinearLayout and its TextViews directly in the Toolbar, without having to wrap them in another ViewGroup. We can also set the gravity appropriately on your ImageView to similarly align that to the right side.
In this example, we apply that center gravity by setting the LinearLayout's layout_gravity to center. Be sure to also change the layout_width values to wrap_content, or you'll be in the same boat as before. The ImageView here has its layout_gravity set to right|center_vertical, replacing those layout_* attributes specific to RelativeLayout.
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimaryDark"
android:elevation="5dp"
android:minHeight="?attr/actionBarSize"
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"
app:contentInsetStartWithNavigation="0dp"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center"
android:orientation="vertical">
<TextView
android:id="#+id/tvNavTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/colorWhite"
android:textSize="#dimen/text_size_large" />
<TextView
android:id="#+id/tvNavDate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/colorWhite"
android:textSize="#dimen/text_size_small" />
</LinearLayout>
<ImageView
android:layout_width="35dp"
android:layout_height="35dp"
android:layout_gravity="right|center_vertical"
android:src="#mipmap/ic_launcher" />
</android.support.v7.widget.Toolbar>
I had the same issue and I fixed with the android:contentInset
Try with this code:
<android.support.design.widget.CoordinatorLayout
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/colorPrimary"
android:contentInsetEnd="50dp"
android:contentInsetLeft="50dp"
android:contentInsetRight="50dp"
android:contentInsetStart="50dp"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:contentInsetEnd="50dp"
app:contentInsetLeft="50dp"
app:contentInsetRight="50dp"
app:contentInsetStart="50dp"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:layout_centerInParent="true"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginLeft="5dp"
android:text="#string/app_name_short"
android:textColor="#fff"
android:textSize="20dp" />
</LinearLayout>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:id="#+id/main_fragment_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/app_bar_layout" />
</RelativeLayout>
</android.support.design.widget.CoordinatorLayout>

Image in collapsing toolbar doesn't fill the whole AppBar layout on all mobile screens

I've used two screen mobile to test my app . The item inside collapsing toolbar layout works fine for the smaller screen device but it cuts from bottom when using larger device . NOTE:-TAB COLOR IS done RED MANUALLY . NO CODE ISSUE THERE .
the code for the single items of collapsing toolbar is as follow,
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="150dp"
android:layout_height="match_parent"
android:background="#color/recyclervire_back"
android:weightSum="4"
android:layout_marginRight="2dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="3">
<com.android.volley.toolbox.NetworkImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitXY"
android:id="#+id/hori_item_image"/>
<TextView
android:layout_width="70dp"
android:layout_height="20dp"
android:textColor="#00b704"
android:layout_alignParentRight="true"
android:textAllCaps="true"
android:layout_alignParentTop="true"
android:id="#+id/hori_item_source"
android:gravity="center"
android:layout_marginRight="2dp"
android:layout_marginTop="2dp"
android:textSize="8sp"/>
</RelativeLayout>
<TextView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:text="Loading ..."
android:textSize="10sp"
android:gravity="center"
android:padding="1dp"
android:textColor="#color/black"
android:id="#+id/hori_item_title"/>
</LinearLayout>
Now the main layout where the collapsing toolbar is written is as follow,
<?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:context="com.sixteenmb.abhishekint.stack.MainActivity"
android:fitsSystemWindows="true"
android:id="#+id/main_coordinator">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="180dp"
android:fitsSystemWindows="true"
android:id="#+id/main_appbarlayout">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:id="#+id/main_collapsing"
app:collapsedTitleGravity="left"
app:collapsedTitleTextAppearance="#color/white"
app:contentScrim="#color/toolbar_main_activity"
app:expandedTitleMarginEnd="20dp"
app:expandedTitleMarginStart="40dp"
app:expandedTitleGravity="bottom"
app:expandedTitleTextAppearance="#color/white"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<android.support.v7.widget.RecyclerView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="fill_vertical"
android:id="#+id/main_recyclerview"
android:background="#color/white">
</android.support.v7.widget.RecyclerView>
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:id="#+id/main_toolbar"
android:titleTextColor="#color/white"
app:layout_collapseMode="pin"
android:elevation="10dp"
android:title="#string/app_name">
</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"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:fadeScrollbars="false"
android:scrollbarFadeDuration="0"
android:fitsSystemWindows="true"
android:id="#+id/main_nested">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.design.widget.TabLayout
android:layout_width="match_parent"
android:layout_height="35dp"
app:tabSelectedTextColor="#color/white"
android:background="#6e000000"
app:tabIndicatorColor="#color/white"
app:tabIndicatorHeight="1.5dp"
android:id="#+id/tab">
</android.support.design.widget.TabLayout>
<android.support.v4.view.ViewPager
android:layout_width="match_parent"
android:layout_height="500dp"
android:id="#+id/main_pager">
</android.support.v4.view.ViewPager>
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
the receycler view in collapsing toolbar is where i inflate these items .
can anyone suggest where am i going wrong?
Actually setting wrap_content and fitsSystemWindow=true in both AppBarlayout and recyclerview and then setting the desired item layout height to the parent linear layout of the recycler item worked for me . in my case I set 180dp

Bottom sheet below toolbar

I have a main Activity with a Drawer Layout and multiple Fragments that I replace on Menu Item click.
In one of the fragment I'm using Bottom Sheet to display some info. The bottom sheet behavior is working fine : I can switch between different STATES with no problem. The problem is that in EXPANDED state the bottom sheet stays below the activity toolbar even though I set it's Height to match_parent. Here is the XMl (I also would like to implement a collapsing toolbar but I don't know how to override the current one).
<android.support.design.widget.CoordinatorLayout
android:id="#+id/coordinator"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:theme="#style/Theme.AppCompat.NoActionBar"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<RelativeLayout
android:id="#+id/search_relativeLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:theme="#style/Theme.AppCompat.NoActionBar">
<com.google.android.gms.maps.MapView
android:id="#+id/mapView"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</RelativeLayout>
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/Theme.AppCompat.NoActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar_bottomSheet"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:id="#+id/bottom_sheet"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/white"
android:elevation="20dp"
app:behavior_hideable="true"
app:behavior_peekHeight="0dp"
app:layout_behavior="#string/bottom_sheet_behavior">
<RelativeLayout
android:id="#+id/bottom_sheet_relative_layout"
android:layout_width="match_parent"
android:layout_height="100dp"
android:orientation="vertical">
<de.hdodenhof.circleimageview.CircleImageView
android:id="#+id/circle_picture"
android:src="#mipmap/login_background"
android:layout_margin="10dp"
android:layout_width="50dp"
android:layout_height="50dp" />
<TextView
android:id="#+id/name_bottom_sheet"
android:layout_toEndOf="#id/circle_picture"
android:text="Title"
android:textColor="#color/buttonLoginColor"
android:layout_margin="10dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:id="#+id/address_bottom_sheet"
android:layout_below="#id/name_bottom_sheet"
android:layout_toEndOf="#id/circle_picture"
android:layout_marginStart="10dp"
android:textColor="#color/btn_create"
android:text=""
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<LinearLayout
android:layout_below="#id/circle_picture"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:clickable="true"
android:foreground="?android:attr/selectableItemBackground"
android:layout_margin="5dp"
app:cardCornerRadius="2dp">
</android.support.v7.widget.CardView>
</LinearLayout>
</RelativeLayout>
</android.support.v4.widget.NestedScrollView>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="invisible"
android:layout_margin="15dp"
app:layout_anchor="#id/bottom_sheet"
app:layout_anchorGravity="top|end"/>
<android.support.design.widget.FloatingActionButton
android:id="#+id/floatingButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="15dp"
android:layout_marginBottom="50dp"
android:layout_marginEnd="15dp"
app:backgroundTint="#color/buttonLoginColor"
app:borderWidth="0dp"
app:elevation="6dp"
app:layout_anchor="#id/fab2"
app:layout_anchorGravity="top"/>
Do you have any clue on how to set the bottom sheet's height so it matches the full screen ?

Custom Toolbar Views not centered

When using ActionBarDrawerToggle with my custom Toolbar, the TextViews in the Toolbar are no longer centered.
main_layout.xml
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<include layout="#layout/toolbar" />
<FrameLayout
android:id="#+id/flContent"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="?attr/actionBarSize"
android:fitsSystemWindows="true" />
</RelativeLayout>
<android.support.design.widget.NavigationView
android:id="#+id/nvView"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="#android:color/white"
app:headerLayout="#layout/nav_header"
app:menu="#menu/drawer_view" />
</android.support.v4.widget.DrawerLayout>
toolbar.xml
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimaryDark"
android:elevation="5dp"
android:minHeight="?attr/actionBarSize"
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"
app:contentInsetStartWithNavigation="0dp"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:gravity="center_horizontal|center_vertical"
android:orientation="vertical">
<TextView
android:id="#+id/tvNavTitle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorBackgroundBlack"
android:gravity="center"
android:textColor="#color/colorWhite"
android:textSize="#dimen/text_size_large" />
<TextView
android:id="#+id/tvNavDate"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorBackgroundBlack"
android:gravity="center"
android:textColor="#color/colorWhite"
android:textSize="#dimen/text_size_small" />
</LinearLayout>
<ImageView
android:layout_width="35dp"
android:layout_height="35dp"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:src="#mipmap/ic_launcher" />
</RelativeLayout>
</android.support.v7.widget.Toolbar>
I tried setting the contentInsetStart and other attributes on the Toolbar, but nothing changed.
The problem here is that ActionBarDrawerToggle's icon is set as the navigation button on the Toolbar. This button is a special child of Toolbar that will take precedence in the layout. Any other child Views added to the Toolbar will be allotted only the space remaining after that ImageButton is placed. This is pushing the left side of your RelativeLayout to the right, so the TextViews you have centered in that will not be centered with respect to the Toolbar itself.
Fortunately, Toolbar's LayoutParams has a gravity property that we can utilize to center the LinearLayout and its TextViews directly in the Toolbar, without having to wrap them in another ViewGroup. We can also set the gravity appropriately on your ImageView to similarly align that to the right side.
In this example, we apply that center gravity by setting the LinearLayout's layout_gravity to center. Be sure to also change the layout_width values to wrap_content, or you'll be in the same boat as before. The ImageView here has its layout_gravity set to right|center_vertical, replacing those layout_* attributes specific to RelativeLayout.
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimaryDark"
android:elevation="5dp"
android:minHeight="?attr/actionBarSize"
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"
app:contentInsetStartWithNavigation="0dp"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center"
android:orientation="vertical">
<TextView
android:id="#+id/tvNavTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/colorWhite"
android:textSize="#dimen/text_size_large" />
<TextView
android:id="#+id/tvNavDate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/colorWhite"
android:textSize="#dimen/text_size_small" />
</LinearLayout>
<ImageView
android:layout_width="35dp"
android:layout_height="35dp"
android:layout_gravity="right|center_vertical"
android:src="#mipmap/ic_launcher" />
</android.support.v7.widget.Toolbar>
I had the same issue and I fixed with the android:contentInset
Try with this code:
<android.support.design.widget.CoordinatorLayout
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/colorPrimary"
android:contentInsetEnd="50dp"
android:contentInsetLeft="50dp"
android:contentInsetRight="50dp"
android:contentInsetStart="50dp"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:contentInsetEnd="50dp"
app:contentInsetLeft="50dp"
app:contentInsetRight="50dp"
app:contentInsetStart="50dp"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:layout_centerInParent="true"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginLeft="5dp"
android:text="#string/app_name_short"
android:textColor="#fff"
android:textSize="20dp" />
</LinearLayout>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:id="#+id/main_fragment_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/app_bar_layout" />
</RelativeLayout>
</android.support.design.widget.CoordinatorLayout>

Categories

Resources