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
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'm currently making an app with backwards support for toolbars, and thus I have this file
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/toolbar"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:minHeight="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:elevation="4dp"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light">
</android.support.v7.widget.Toolbar>
I then programatically add it in to the views by doing something like:
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
However, I want to be able to add custom views into the Toolbar, such as EditText and TextView's without hard-coding them into the toolbar.xml above.
Is there any way to do this? It might be worth noting that I'm using the V7 support library.
Thanks,
Liam
Just give a try to the following
Step 1 : Add LinearLayout to the toolbar in xml file
<android.support.v7.widget.Toolbar xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/toolbar"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:minHeight="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:elevation="4dp"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light">
<LinearLayout
android:id=#+id/toolbar_item_container
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" />
</android.support.v7.widget.Toolbar>
Step 2 : Get this LinearLayout in code
Toolbar mToolbar = (Toolbar)findViewById(R.id.toolbar_transaction);
LinearLayout layoutToolbar = (LinearLayout)
mToolbar.findViewById(R.id.toolbar_item_container);
Step3 : Add and Remove view to this LinearLayout using following code
layoutToolbar.addView();
layoutToolbar.removeView();
This can be done without LinearLayout also, by directly adding and removing elements from Toolbar. You can try both the ways.
Hope it'll help.
if you dont have toolbar in xml, can set custom view programmatically
actionBar.setCustomView(R.layout.custom_view);
View view = actionBar.getCustomView();
TextView locationTitle = view.findViewById(R.id.tv_custom_toolbar);
locationTitle.setText("some text");
actionBar.setDisplayOptions(ActionBar.DISPLAY_SHOW_CUSTOM);
actionBar.setDisplayHomeAsUpEnabled(true);
I am adding toolbar with PreferenceActivity using following code:
<?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_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/actionbar_color"
android:minHeight="?attr/actionBarSize"
android:paddingTop="0dp"
app:navigationContentDescription="#string/abc_action_bar_up_description"
app:navigationIcon="?attr/homeAsUpIndicator"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:theme="#style/Base.ThemeOverlay.AppCompat.Dark.ActionBar" />
Code Snippet:
LinearLayout root = (LinearLayout) findViewById(android.R.id.list).getParent().getParent().getParent();
Toolbar bar = (Toolbar) LayoutInflater.from(this).inflate(R.layout.app_bar_settings, root, false);
root.addView(bar, 0); // insert at top
It is successfully showing the Toolbar with PreferenceActivity
but actionbar up arrow, title and action overflow button is black in color, according to my Theme app:theme="#style/Base.ThemeOverlay.AppCompat.Dark.ActionBar
these should be white in color. How do i solve this issue.
By accessing navigation icon from toolbar we can change color
toolbar.getNavigationIcon().setColorFilter(color, PorterDuff.Mode.SRC_IN);
if it's not working try this
toolbar.getNavigationIcon().mutate().setColorFilter(color, PorterDuff.Mode.SRC_IN);
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.
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.