is it possible to set a subtitle to the CollapsingToolbarLayout like it is possible with a normal toolbar? As far as I know there is no method to do that programmatically. Also, how do I set the white back arrow to the toolbar? Using
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
does not display anything, also adding
app:navigationIcon="#drawable/abc_ic_ab_back_mtrl_am_alpha"
to the toolbar doesn't display it either:
For the subtitle question, I had a similar issue and posted the code I used to fix it here:
https://stackoverflow.com/a/31529101/834692
Hopefully you might also find this useful.
For the back icon, you need to set the toolbar first and then call setDisplayHomeAsUpEnabled():
final Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
getSupportActionBar().setHomeAsUpIndicator(R.drawable.ic_arrow_back_white);
There are some ways to have subtitle in a CollapsingToolbarLayout.
Have a TextView inside your CollapsingToolbarLayout, but then only title would be your Toolbar's title when CollapsingToolbarLayout is collapsed, no third-party library is needed.
Use my library: collapsingtoolbarlayout-subtitle.
.
Use it like you would on any CollapsingToolbarLayout, and add subtitle attribute to it:
<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.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<com.hendraanggrian.widget.SubtitleCollapsingToolbarLayout
android:id="#+id/subtitlecollapsingtoolbarlayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:contentScrim="?colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:subtitle="CollapsingToolbarLayout"
app:title="Subtitle">
<!-- collapsing toolbar content goes here -->
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="?actionBarSize"
app:layout_collapseMode="pin"/>
</com.hendraanggrian.widget.SubtitleCollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<!-- content goes here -->
</android.support.design.widget.CoordinatorLayout>
Oh and about that back arrow on Toolbar, I usually set it by using ?homeAsUpIndicator in xml:
<android.support.v7.widget.Toolbar
...
app:navigationIcon="?homeAsUpIndicator"/>
Hope it helps.
Related
I'm using navigation component and material toolbar.
I've just setup navigation component with material toolbar. By doing so whenever fragment changed the back button shown and the title of material toolbar changed by navigation component automatically.
The question is I just want to change the title gravity into center without removing those navigation components toolbar support.
How can I do that ?
Note : I`ve tried to change the toolbar style, but it seems does not work.
And creating an extra text view into toolbar view its not a solution since I want to use navigation component toolbar support.
Thanks in advance.
Starting from com.google.android.material:material:1.4.0 you can use app:titleCentered="true" to center the title.
<com.google.android.material.appbar.MaterialToolbar
android:id="#+id/materialToolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:title="Toolbar"
app:titleCentered="true"/>
I hope this helps. You can mark it as accepted if it matches your needs.
You can use a Custom Toolbar
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar_top"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:minHeight="?attr/actionBarSize"
android:background="#color/action_bar_bkgnd"
app:theme="#style/ToolBarTheme" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Toolbar Title"
android:layout_gravity="center"
android:id="#+id/toolbar_title" />
<androidx.appcompat.widget.Toolbar/>
It's just a part of view Group, You can style the TextView however you would like because it's just a regular TextView. So in your activity you can access the title like so:
Toolbar toolbarTop = (Toolbar) findViewById(R.id.toolbar_top);
TextView mTitle = (TextView) toolbarTop.findViewById(R.id.toolbar_title);
As a tricky way you can use: com.google.android.material.appbar.CollapsingToolbarLayout
<com.google.android.material.appbar.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:collapsedTitleGravity="center"
app:collapsedTitleTextAppearance="?attr/textAppearanceHeadline3"
app:expandedTitleGravity="center"
app:expandedTitleTextAppearance="?attr/textAppearanceHeadline1"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:contentInsetStart="0dp"
app:contentInsetStartWithNavigation="0dp"
app:layout_collapseMode="pin"
app:navigationIcon="#drawable/ic_back_24dp"
app:title="#string/parvaneh_personal_info" />
</com.google.android.material.appbar.CollapsingToolbarLayout>
I have a toolbar in my xml file, with no child views defined in it. I want to add a TextView on exact location of default title in toolbar when we call setSupportActionBar(toolbar). On particular events, I like to fade in or out these two views in case of particular events.
I tried to do the following in onCreate() of the activity, but nothing is visible except the default title in toolbar.
TextView tv = new TextView(this);
tv.setLayoutParams(toolbarTitle.getLayoutParams());
tv.setHeight(toolbarTitle.getHeight());
tv.setWidth(toolbarTitle.getWidth());
tv.setText("Other Title");
tv.setLeft(toolbarTitle.getLeft());
toolbar.addView(tv);
I also tried to add a RelativeLayout inside the toolbar with width and height set to match parent, but this time, default title TextView of toolbar disappears.
How can add another TextView on exact location of default title TextView in toolbar?
You can use AppBarLayout as below
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.AppBarLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/toolbar_layout"
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"
>
<TextView
android:id="#+id/toolbar_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/aadhaar_sign_up"
android:textColor="#color/white"
android:textSize="18.0sp"
app:fontName="Font-Medium.ttf"
/>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
Then you use the textview as below
Toolbar toolbar = (Toolbar) getActivity().findViewById(R.id.toolbar);
((TextView) toolbar.findViewById(R.id.toolbar_title)).setText(title);
I disable title in toolbar using getSupportActionBar().setDisplayShowTitleEnabled(false) in onCreate() method of my activity and put two overlapping textViews encapsulating them with relativeLayout inside toolbar in layout. Then I animate them as I want. While changing text, I used titleTextView.setText() rather then toolbar.setTitle() method.
Related Questions
CollapsingToolbarLayout | Scrolling and layout issues
Backgroud
I want to use 2 different fragments that will allow me to change the layout based on orientation and screen size
Header Image (Currently just an ImageView)
Scrollable content
Issues
The CollapsingToolbarLayout does not allow me to expand the Toolbar to see the full Header Image
It shows a majority of the image, but not all. Top is cut, but the bottom is visible.
The Toolbar is set to Pin but it is hidden when scrolling
Just the Header Image should disappear, but instead my whole Appbar gets hidden
When scrolling to view the Expanded Toolbar there is an empty view until the Expanded Toolbar reaches its max height.
After both the Expanded Toolbar and the Toolbar itself become hidden
The Up Arrow does not show up in the Toolbar
Code
Layout.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:fitsSystemWindows="true">
<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="wrap_content"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginEnd="16dp"
app:expandedTitleMarginStart="48dp"
app:layout_scrollFlags="scroll|enterAlways">
<ImageView
android:id="#+id/header"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/download"
android:scaleType="centerCrop" />
<android.support.v7.widget.Toolbar
android:id="#+id/anim_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_below="#+id/anim_toolbar"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<fragment
android:id="#+id/detail"
android:name="<package>.<fragment_name>"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
OnCreate
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.test);
final Toolbar toolbar = (Toolbar) findViewById(R.id.anim_toolbar);
setSupportActionBar(toolbar);
CollapsingToolbarLayout collapsingToolbar = (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar);
collapsingToolbar.setTitle("Avengers: Age of Ultron");
}
1
2
3
4
5
6
Question 1
Add android:fitsSystemWindows="true" to your AppBarLayout, CollapsingToolbarLayout, and to your ImageView.
I'm guessing a part of your image is below the status bar (due to these lines being missing) which is why you can't see the top of the image.
Question 2
collapseMode="pin" only affects how the Toolbar reacts to collapsing (hence why it is called collapseMode and not scrollFlags).
In almost all cases when using CollapsingToolbarLayout, you should be using scroll|exitUntilCollapsed for your scrollFlags - this keeps the collapsed Toolbar visible even when you scroll downward.
Question 3
This is due to using scroll|enterAlways. Change your flags as per #2
Question 4
As mentioned in the answer to your related question, you need to call getSupportActionBar().setDisplayHomeAsUpEnabled(true); to show the Up button:
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.test);
final Toolbar toolbar = (Toolbar) findViewById(R.id.anim_toolbar);
setSupportActionBar(toolbar);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
CollapsingToolbarLayout collapsingToolbar =
(CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar);
collapsingToolbar.setTitle("Avengers: Age of Ultron");
}
Remove app:contentScrim="?attr/colorPrimary" from your layout XML in CollapsingToolBarLayout tag. It will show the back button in toolbar
I want to replace the title in my Toolbar by a logo like Twitter App.
I think we can replace this programmatically like that :
mToolbar = (Toolbar) findViewById(R.id.app_toolbar);
mToolbar.setLogo(R.drawable.ic_logo);
But I want to replace it directly in my XML toolBar declaration, but I can't see the property app:logo or android:logo.
<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/app_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorPrimary"
android:minHeight="?attr/actionBarSize"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:theme="#style/MyCustomToolBarTheme" />
Please help me, thank you.
If you check source code of Toolbar and Toolbar's custom attributes, there are only a few attributes you can use to customize Toolbar, but logo is not one of them:
titleTextAppearance
subtitleTextAppearance
navigationIcon
...
Toolbar.setLogo(resId) seems to be the only option at the moment.
A toolbar contains a ViewGroup that you can populate with whatever views you wish --- you can add an ImageView there if you want a logo. Example:
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
>
<ImageView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:src="#drawable/ic_logo"/>
</android.support.v7.widget.Toolbar>
If you manually attach it to AppCompatActivity or ActionBar activity, it "becomes" an ActionBar, and then has to be manipulated using those code functions.
I am trying to use Appcompat Toolbar based actionBar
Here is my toolbar.xml
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="bottom"
android:paddingBottom="0dp"
android:background="?attr/colorPrimaryDark">
</android.support.v7.widget.Toolbar>
I am including this in my activity.xml file.
And then in my Activity's OnCreate method, I am setting a custom PagerStrip into ActionBar
ActionBar actionBar = getSupportActionBar();
actionBar.setCustomView(R.layout.pager_strip);
actionBar.setDisplayShowCustomEnabled(true);
tabs = (PagerSlidingTabStrip) actionBar.getCustomView().findViewById(R.id.tabs_strip);
tabs.setViewPager(mPager);
There is some padding below my PagerStrip in ActionBar. I want to remove this padding.
here is a picture showing the issue.
This was working fine with ActionBarSherlock
I had a similar problem: I have migrated to the Toolbar pattern:
<?xml version="1.0" encoding="utf-8"?>
<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_height="wrap_content"
android:layout_width="match_parent"
android:minHeight="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:theme="#style/ThemeOverlay.AppCompat.ActionBar">
<my.custom.widget.class
android:id="#+id/tab_bar"
android:layout_width="match_parent"
android:layout_height="match_parent">
</my.custom.widget.class>
</android.support.v7.widget.Toolbar>
but the AppCompat gave me a strange padding around my custom view:
My fix:
Add app:contentInsetStart="0dp" and app:contentInsetEnd="0dp" to the Toolbar attributes; and android:minHeight="?attr/actionBarSize" to the custom widget attributes.
Result:
Not sure that the solution follows the Material design guidelines, but hope it will help to someone.
Toolbar is widget replacement for Actionbar in some cases.
If you want to use Toolbar then you can try:
Toolbar=(Toolbar)findViewbyId(R.id.toolbar);
setSupportActionbar(toolbar);
I used Toolbar in DrawerLayout. My navigation drawer can always Top Toolbar.
P/S: use toolbar in ActionBarActivity