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.
Related
Question 1) How to delete the border line of the tablayout?
Question 2) How to set the padding for the action bar icon?
Here with the code in activity_main.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:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/bg2"
android:orientation="vertical">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorTransparent"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabIndicatorColor="#android:color/transparent"
app:tabIndicatorHeight="0dp"
app:tabPaddingStart="0dp"
app:tabPaddingEnd="0dp"
app:tabGravity="fill"
app:tabMode="fixed" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
Here with the code I wrote in the Main_Activity.kt file:
//Action Bar
val actionBar = supportActionBar
actionBar!!.setDisplayShowHomeEnabled(true)
actionBar.setBackgroundDrawable(ColorDrawable(Color.parseColor("#00FFFFFF")))
actionBar.setIcon(R.drawable.title)
actionBar.setDisplayShowTitleEnabled(false)
You could create a custom layout for your action bar that lets you control how the icon will look. However due to the millions of problems that you will encounter doing that, can I suggest you move from using ActionBar to its successor, the Toolbar, introduced in API 21, which you should be using:
https://guides.codepath.com/android/Using-the-App-ToolBar
You can easily introduced a fully customizable Toolbar within your CoordinatorLayout, and do cool things thanks to the design library.
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/background_light"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:contentInsetStart="0dp">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/qpon_drawable"
android:layout_margin="20dp"
android:layout_gravity="center"/>
</FrameLayout>
</android.support.v7.widget.Toolbar>
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabIndicatorColor="#android:color/transparent"
app:tabIndicatorHeight="0dp"
app:tabPaddingStart="0dp"
app:tabPaddingEnd="0dp"
app:tabGravity="fill"
app:tabMode="fixed" />
</android.support.design.widget.AppBarLayout>
I can add any margins I want, and taking the app:contentInsetStart="0dp" it has no start padding. You can add the toolbar as a support action bar in your code:
// Find the toolbar view inside the activity layout
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
// Sets the Toolbar to act as the ActionBar for this Activity window.
// Make sure the toolbar exists in the activity and is not null
setSupportActionBar(toolbar);
I had the same problem of a border when I set the background color of the AppBarLayout as transparent:
When I set the AppBarLayout's background to the same colour as the background, it seems to draw over the edges and the border disappears. Bear in mind that it automatically gives it a shadow in the bottom since it is above the content of the Viewpager:
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
<!-- This is what you want to change !-->
android:background="#android:color/background_light"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
No more border edges on the side. I don't quite know why it does that, it seems to be like it is a card layout in its natural form if you don't color over it.
Hope it helps. No matter your reasoning, do try to change to the Toolbar I think that is the only right answer!
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");
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 just made the app using android studio template of Navigation view. Its all working fine but I have the following two requirements
I want to center the toolbar title.
I want to put the image beside the title.
Here is my xml:
<?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.abdulsalam.lahoreqalander.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="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
<include layout="#layout/content_main" />
<!--<android.support.design.widget.FloatingActionButton-->
<!--android:id="#+id/fab"-->
<!--android:layout_width="wrap_content"-->
<!--android:layout_height="wrap_content"-->
<!--android:layout_gravity="bottom|end"-->
<!--android:layout_margin="#dimen/fab_margin"-->
<!--android:src="#android:drawable/ic_dialog_email" />-->
Problem :
I do not know where the title string is saved, I have checked the string.xml and there is the app name and that is exactly showing on the toolbar title.
So Any suggestion where can I change the title string without changing the app name , In fact I want to change it custom and also how to put the image beside it.
Note I am using the template made by Android studio
.
You can implement like this in XML.
<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/AppTheme.PopupOverlay">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_gravity="center">
<ImageView
android:src="#mipmap/ic_launcher"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
style="#style/TextAppearance.Widget.AppCompat.Toolbar.Title"
android:text="#string/app_name"
android:background="?attr/selectableItemBackground"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
</android.support.v7.widget.Toolbar>
in you activity class do this on create
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
toolbar.setTitle("example");
toolbar.setLogo(R.drawable.icon);
or edit the string resourse and change the title value and icon
First of all from the documentation:
The use of application icon plus title as a standard layout is discouraged on API 21 devices and newer.
For setting an icon through xml you could use android:navigationIcon inside your Toolbar.
For setting the text I would also go with the Java code approach as I could not find anything with xml in the documentation. The text would not be centered anyway.
If you want to center the text you have to modify your Toolbar. Toolbar is a view and you can put anything inside the Toolbar you want.
<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/AppTheme.PopupOverlay">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingEnd="#dimen/activity_horizontal_margin"
android:id="#+id/toolbar_content">
// define text and icon here
</RelativeLayout>
</android.support.v7.widget.Toolbar>
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.