I am working with a DrawerLayout and on press of one of the item, I want to show a Toolbar inside a CoordinatorLayout. Because, Android's standard ActionBar creates problems with ToolBar, I decided to use an Activity with Theme.AppCompat.NoActionBar instead and decided to use a ToolBar instead of an ActionBar.
Now, there is one normal Toolbar that serves as an ActionBar and as I click on one of the items from the drawer, I want to display a Fragment with another custom Toolbar replacing the "normal" Toolbar. So, I did that, removing the normal Toolbar but the Toolbar that is displaying now is without the title and overflow menu:
You can see the layout hierarchy here. The Toolbar is buried inside several ViewGroups and its not properly displaying. Although it's displaying like this, the Drawer layout is opening and closing on clicking the Home menu in the Toolbar. Again, the icon doesn't change on Drawer open/close.
I have tried setting the title explicitly with no avail. Does anyone know, what I am doing wrong here.
Here is the code for reference:
// Code for the Fragment 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.support.design.widget.AppBarLayout
android:id="#+id/main.appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
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:title="#string/app_name"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:elevation="4dp"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light">
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<de.hdodenhof.circleimageview.CircleImageView
android:id="#+id/profile_pic"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/avatar_boy_2"
app:layout_anchor="#id/main.appbar"
app:layout_anchorGravity="bottom|center"/>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_anchor="#id/profile_pic"
app:layout_anchorGravity="bottom"
>
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/user_name"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:lineSpacingExtra="8dp"
android:padding="#dimen/activity_horizontal_margin"
android:text="#string/account_person_name_label"
android:textAlignment="center"
android:textSize="40sp"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
tools:layout_editor_absoluteY="168dp" />
</android.support.constraint.ConstraintLayout>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
I found the answer finally. The title from CollapsibleToolbarLayout interferes with that of Toolbar. So, we disable it and it works fine:
collapsingToolbarLayout.setTitleEnabled(false);
toolbar.setTitle("My Title");
Related
I have added a toolbar and i'm trying to use the hide and show feature on scroll of toolbar but for some reason it is not working i followed every step from tutorial still it is not working. I'm using toolbar in a fragment so maybe that is aslo a reason but i do not know much about it.
so i would appreciate some help
xml
<android.support.design.widget.CoordinatorLayout
android:id="#+id/main_content"
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">
<!-- AppBarLayout is a wrapper for a Toolbar in order to apply scrolling effects. -->
<!-- Note that AppBarLayout expects to be the first child nested within a CoordinatorLayout -->
<android.support.design.widget.AppBarLayout
android:id="#+id/appBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.ActionBar">
<!-- Toolbar is the actual app bar with text and the action items -->
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:titleTextColor="#color/White"
app:layout_scrollFlags="scroll|enterAlways|snap">
<com.ct.listrtrial.Custom.CustomTextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Feeds"
android:textSize="30sp"
android:textColor="#color/White"
android:layout_gravity="center"
android:id="#+id/toolbar_title"
android:layout_marginRight="#dimen/_200sdp"/>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
<!-- This could also be included from another file using the include tag -->
<!-- i.e `res/layout/content_main.xml` -->
<!-- `app:layout_behavior` is set to a pre-defined standard scrolling behavior -->
<android.support.v7.widget.RecyclerView
android:id="#+id/feed_recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipToPadding="false"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<android.support.design.widget.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_anchorGravity="bottom|center"
android:layout_marginBottom="5dp"
android:layout_gravity="end|bottom"
android:src="#drawable/ic_search_black_24dp" />
</android.support.design.widget.CoordinatorLayout>
Fragment code
toolbar = (Toolbar)view.findViewById(R.id.toolbar);
((AppCompatActivity)getActivity()).setSupportActionBar(toolbar);
CustomTextView customTextView = (CustomTextView)toolbar.findViewById(R.id.toolbar_title);
//getActivity().getTitle();
((AppCompatActivity) getActivity()).getSupportActionBar().setDisplayShowTitleEnabled(false);
if you want to hide and show tool bar when scrolling then Replace your toolbar flag with.
app:layout_scrollFlags="scroll|enterAlwaysCollapsed|snap">
add below code in your fragment onCreateView
ViewCompat.setNestedScrollingEnabled(recyclerView, true);
I think this will help you.
I have a navigation drawer activity which works fine but when I run it on Samsung s3 and such it just not showing the tool bar above but if I drag from the side it will open the drawer, I read that it is something about Samsung skin but I couldn't find a way to fix it..
How can I create a navigation drawer toolbar that will work the same and show on the Samsung skin.
here is the app_bar_main:
<?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:fitsSystemWindows="true"
tools:context="com.nightme.nightme.MainActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#14418a"
android:theme="#style/ThemeOverlay.AppCompat.Dark"
>
<TextView
android:id="#+id/toolbar_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="30dp"
android:text="App"
android:layout_gravity="center"
/>
<ImageView
android:id="#+id/add"
android:layout_width="36dp"
android:layout_height="36dp"
android:src="#drawable/add_paint"
android:layout_gravity="end"
/>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
<include layout="#layout/rec_activity" />
</android.support.design.widget.CoordinatorLayout>
If I understand your question correctly, you are saying that the toolbar icon with 3 lines that opens the navigation drawer is not showing up?
That icon is setup by the ActionBarDrawerToggle class. You have to create it in your Activity's onCreate as shown here: https://developer.android.com/training/implementing-navigation/nav-drawer.html#ActionBarIcon
I'm having a very strange issue using MaterialDesign toolbar and I haven't been able to figure out what's causing it.
I have a toolbar with a custom menu icons which I use in different layouts using <include> I wanted to use the toolbar in another layout without all the icons and menus so I included this in the xml:
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar2"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"/>
But the toolbar that shows when on this activity view is the same one I use across other activities. I even tried using a different id name but it still uses the other toolbar and not the one I have included.
The other issue is that, I want to use material design scrolling by using the coordinator layout. While the scrolling works on every other layout, it doesn't work on this particular one when I have the toolbar set. If I remove the toolbar then the scroll works for the view below it. The scroll property app:layout_scrollFlags="scroll|exitUntilCollapsed"on both the toolbar and the view below it. Here's the full code for 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"
xmlns:tools="http://schemas.android.com/tools"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<Yourtime.NonSwipeableViewpager
android:id="#+id/profileviewpager"
android:layout_width="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:layout_height="wrap_content" />
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:id="#+id/appbar">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar2"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"/>
<FrameLayout
app:layout_scrollFlags="scroll|exitUntilCollapsed"
android:id="#+id/profile_container"
android:layout_height="wrap_content"
android:layout_width="match_parent" />
<android.support.design.widget.TabLayout
android:layout_width="match_parent"
android:layout_height="#dimen/profile_tabs_height"
app:tabMode="fixed"
style="#style/MyCustomTabLayout"
app:tabGravity="center"
android:id="#+id/profiletabs" />
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>
I will really appreciate if someone can help with either of the questions.
I have a main activity with a appbar layout(also containing a navigation view) and a fragment with a tablayout . I want the user to be able to hide and show both of them while scrolling like Google Play Music app.But I just can't get the app bar to hide as it is not in the fragment although the tablayout is getting hidden fine.Also I can't move the appbar layout into the fragment as this will make my code for switching between fragments using navigation view very complicated.I am using coordinator layout for achieving this.How do I achieve this?.My code is as below-
WelcomeActivity
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<include
android:id="#+id/welcome_toolbar"
layout="#layout/default_toolbar_layout"
app:layout_scrollFlags="scroll|enterAlways"/>
<FrameLayout
android:id="#+id/welcome"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|enterAlways">
</FrameLayout>
</LinearLayout>
<android.support.design.widget.NavigationView
android:id="#+id/welcome_nav"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:menu="#menu/welcome_menu_drawer"/>
</android.support.v4.widget.DrawerLayout>
Myfragment.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:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/toolbar_gradient">
<android.support.design.widget.AppBarLayout
android:id="#+id/welcome_feeds_appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.TabLayout
android:id="#+id/welcome_feeds_tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/toolbar_gradient"
app:tabGravity="fill"
app:tabSelectedTextColor="#fff"
app:tabIndicatorColor="#color/accent"
app:layout_scrollFlags="scroll|enterAlways"/>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/welcome_feeds_viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<com.software.shell.fab.ActionButton
android:id="#+id/welcome_feeds_fab"
android:layout_width="56dp"
android:layout_height="56dp"
android:layout_gravity="bottom|right"
android:layout_marginRight="16dp"
android:layout_marginBottom="16dp"
app:button_color="#color/accent"
app:image="#mipmap/add"
app:image_size="24dp"
/>
</android.support.design.widget.CoordinatorLayout>
I haven't tried your code yet.....
Is your tabLayout correctly swipe out the screen on scrolling?
Have you tried to move inside CoordinatorLayout also the Toolbar?
To use the features by design Library all the elements have to be inside CoordinatorLayout and you have to set as your needs the correct property "app:layout_scrollFlags"
Q: How do I make the system bar be the correct color?
I've tried setting this up following the cheesesquare sample app.
When doing that, they use a coordinator layout and an appbar layout which contains a toolbar layout -- it looks like this:
Then I tried removign the coordinator layout, and app bar, and just have a LinearLayout with a toolbar and a nested scroll view inside it -- looks like this:
As you can probably tell it doesn't look like quite right. Using their nav drawer layout worked perfectly fine with the status bar being the same color as the toolbar.
I've also tried messing with fitsSystemWindows to no avail.
Q: How do I make the system bar be the correct color?
I think I heard about this potentially being a bug in the design library, so perhaps there is a workaround for now?
Here is my layout code:
<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.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.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
/>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/fixed_scroll_behavior">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:paddingTop="24dp">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="#dimen/card_margin">
<LinearLayout
style="#style/Widget.CardContent"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Info"
android:textAppearance="#style/TextAppearance.AppCompat.Title" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="blank text for now" />
</LinearLayout>
</android.support.v7.widget.CardView>
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
My style-v21 theme contains:
<item name="android:statusBarColor">#android:color/transparent</item>
Removing that fixed the problem.