I am using Toolbar as a widget in the bottom sheet. But the title doesn't show.
My Toolbar content in bottomsheet layout is like this:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/white"
android:orientation="vertical">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:title="This is my title"
app:theme="#style/ThemeOverlay.AppCompat.Light"
app:popupTheme="#style/AppTheme.PopupOverlay">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end"
android:background="?attr/selectableItemBackgroundBorderless"
android:onClick="#{() -> handler.hideBottomSheet()}"
android:src="#drawable/ic_keyboard_arrow_down_black_24dp" />
</android.support.v7.widget.Toolbar>
//...
</LinearLayout>
Everything looks good. But title doesn't just show up. This is not a support ActionBar. I am using this as a widget.
I don't know why, but it just doesn't show. I've tried different themes and also changing background color of the root LinearLayout, but no luck.
It just doesn't show up. I've also tried setting android:titleTextColor but that also didn't worked.
Can title only used when using as ActionBar? Or Am I doing something wrong here? Thanks.
As stated in the documents
Using XML attributes from the support library
Notice that the showAsAction attribute above uses a custom namespace
defined in the tag. This is necessary when using any XML attributes
defined by the support library, because these attributes do not exist
in the Android framework on older devices. So you must use your own
namespace as a prefix for all attributes defined by the support
library.
You need to use custom prefix for that. So use app:title in place of android:title as follows.
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
app:title="This is my title"
app:theme="#style/ThemeOverlay.AppCompat.Light"
app:popupTheme="#style/AppTheme.PopupOverlay">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end"
android:background="?attr/selectableItemBackgroundBorderless"
android:onClick="#{() -> handler.hideBottomSheet()}"
android:src="#drawable/ic_keyboard_arrow_down_black_24dp" />
</android.support.v7.widget.Toolbar>
Can title only used when using as ActionBar?
It is not necessary. You can get toolbar name without setting it as actionbar
try this code
mActionBarToolbar = (Toolbar) findViewById(R.id.toolbar_actionbar);
mActionBarToolbar.setTitle("");
setSupportActionBar(mActionBarToolbar);
now you can set your title
mActionBarToolbar.setTitle(title);
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 want to achieve something like that. (not the FAB or the Snackbar). How can i create a layout, overlaying the AppBarLayout? Like this! (For Example)
Like Play Store:
My AppBarLayout with CoordinatorLayout and NestedScrollView with RelativeLayout as content looks like this:
<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/rootLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="#dimen/_118sdp"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsingToolbarLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:contentScrim="#color/mpc_pink"
app:expandedTitleMarginStart="#dimen/_40sdp"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<de.mypostcardstore.widgets.ItemImageView
android:id="#+id/header"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:src="#color/mpc_pink"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.7" />
<android.support.v7.widget.Toolbar
android:id="#+id/article_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:minHeight="?attr/actionBarSize"
app:contentScrim="#color/mpc_pink"
app:layout_collapseMode="pin"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar" />
</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"
android:background="?android:colorBackground"
android:fillViewport="true"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<RelativeLayout
android:layout_width="match_parent".....>
It would be awesome if someone could help me out. I can not find anything on the internet...
Thanks in advance!
Just add something like
app:behavior_overlapTop="64dp"
to your NestedScrollView and it will be placed above the expanded toolbar.
In addition, you should add something like
app:expandedTitleMarginBottom="70dp"
to your CollapsingToolbarLayout so the title does not appear under your overlaid scroll content.
It's quite simple, really. You could achieve that by using a combination of ToolBar, FrameLayout, and your content view (could be a ListView like your first example, or anything).
The idea is to make your FrameLayout possess the same color as your ToolBar, giving the illusion of ToolBar being much larger than it is. Then all that is left to do is to make your content view be the last (or in API 21 and above: possess the highest elevation attribute) so that it would appear as if it floats above the aforementioned FrameLayout.
See my illustration below:
Now that you got the big idea, below is some real live XML snippet for doing such thing. (I actually use this layout in one of my apps) :
<!-- Somewhere in your layout.xml -->
....
<android.support.v7.widget.Toolbar
android:id="#+id/tb_toolbar"
android:layout_width="match_parent"
android:layout_height="#dimen/abc_action_bar_default_height_material"
android:background="?attr/colorPrimary"
android:minHeight="?attr/actionBarSize"
app:contentInsetStart="72dp"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"/>
<!-- This is the 'faux' ToolBar I've been telling you about. This is the part that will be overlaid by the content view below. -->
<FrameLayout
android:id="#+id/v_toolbar_extension"
android:layout_width="match_parent"
android:layout_height="64dp"
android:layout_below="#+id/tb_toolbar"
android:background="?attr/colorPrimary"
android:elevation="2dp"/>
<!-- Normally, I use this FrameLayout as a base for inflating my fragments. You could just use put your content view here. -->
<FrameLayout
android:id="#+id/ly_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/tb_toolbar"
android:elevation="3dp"/>
....
Note that my ly_content has higher elevation value than that of v_toolbar_extension. This is what will give you that desired 'overlaid toolbar' effect.
Last but not least, you would want to add this line somewhere in your activity's onCreate() :
/* Assuming mToolbar exists as a reference to your ToolBar in XML. */
setSupportActionBar(mTbToolbar);
getSupportActionBar().setElevation(0);
What that codes woud do is to set your ToolBar elevation to zero; removing preset shadows that were given as a default to ToolBars. If you don't do this, said shadow will create a "seam" between your ToolBar and your FrameLayout, thus breaking the illusion of those two being the same.
p.s., It is also important to give your content view a padding on each side. Doing so, your content view will not cover the entire width of the screen (which would render this effect useless).
Note: I see some good answers here that mentioned the absence of FrameLayout and instead making the ToolBar taller. While in theory it might work as well as my proposed solution, you might have problems when trying to manipulate scrolling; by doing that, you won't be able to separate ToolBar and its extension. You'll be forced to either make the Toolbar static or scroll all of the ToolBar altogether (makes scrolling a bit weird).
Add to that, the fact that you can't easily assign a custom drawable into a Toolbar. Hence makes it hard to follow the Google Play example you've given above. While if you're using my solution, all you'd need to do is just make your Toolbar transparent and assign the drawable to the FrameLayout instead.
I had a similar requirement and I achieved it as below.
Your activity theme should extend Theme.AppCompat.Light.NoActionBar.
I created a Layout XML File as:
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar_main"
android:layout_width="match_parent"
android:layout_height="#dimen/action_bar_size_x2"
android:background="#color/colorPrimary"
android:minHeight="?attr/actionBarSize" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginLeft="15dp"
android:layout_marginRight="15dp"
android:layout_marginTop="#dimen/action_bar_size"
android:orientation="vertical" >
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="match_parent" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:text="#string/app_name"
android:textSize="24sp" />
</LinearLayout>
</android.support.v7.widget.CardView>
</LinearLayout>
And the Activity should be something like this:
public class MainActivity extends ActionBarActivity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar maintoolbar = (Toolbar) findViewById(R.id.toolbar_main);
setSupportActionBar(maintoolbar);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
}
}
I got a view like this :
I did try to implement effects like you referred which is called Card Toolbar in Android, and it did work as expected. Here is my layout, Take a look at it:
<FrameLayout 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="#color/background_material_light" >
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="#dimen/toolbar_double_height"
android:background="?attr/colorPrimary" />
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginLeft="#dimen/cardview_toolbar_spacer"
android:layout_marginRight="#dimen/cardview_toolbar_spacer"
android:layout_marginTop="?attr/actionBarSize"
app:cardBackgroundColor="#android:color/white">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize" />
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:alpha="0.12"
android:background="#android:color/black" />
</LinearLayout>
</android.support.v7.widget.CardView>
</FrameLayout>
Hope you'll be inspired.
In the following layout
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark">
<TextView
android:id="#+id/name"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
TextView is not using themed text colors on pre-L devices. If I move this theme declaration to TextView it works on all devices. Chris Banes in his article wrote:
In 22.1.0 we now have expanded that functionality so that you can set
a theme on any view in your layouts.
https://chris.banes.me/2015/04/22/support-libraries-v22-1-0/
So I'm confused, bug?
EDIT:
I looked into Toolbar and Toolbar also seems to have this issue—the following layout doesn't work as intended too:
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:minHeight="?attr/actionBarSize"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<TextView
android:layout_width="wrap_content"
android:text="####SDAG"
android:layout_height="wrap_content" />
</android.support.v7.widget.Toolbar>
I've found source of the problem. I was directly adding items to R.id.content. Like LayoutInflater.from(this).inflate(R.layout.my_activity, findViewById(R.id.content); instead of using setContentView method that does all the magic stuff. Unfortunately in documentation there is no word that you must use setContentXXX method.
With new version (v22.1) of support lib your activity should extend AppCompatActivity instead of ActionBarActivity you used to extend so far.
Here's Google devs' post: http://android-developers.blogspot.com/2015/04/android-support-library-221.html
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.
How do I get rid of the extra padding in the new Toolbar with Android SDK API version 21 (the support library)?
I am talking about the red arrows on this picture:
Here is the code I am using:
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:background="?attr/colorPrimary"
android:padding="0dp"
android:layout_margin="0dp">
<RelativeLayout
android:id="#+id/action_bar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="0dp"
android:padding="0dp"
android:background="#000000">
<Spinner
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</RelativeLayout>
</Toolbar>
As you can see I've set all the relevant padding to 0, but there is still padding around the Spinner. What have I done wrong or what do I need to do to get rid of the extra padding?
Edit
Some have questioned why I am trying to do this.
As per the Material Design specs, the spinner should be 72dp from the left side
I need to neutralize the padding Google have put there in order to properly place my spinner:
Edit 2
As per Chris Bane's answer below I set the contentInsetStart to 0. For the support library you will need to use the app namespace:
<android.support.v4.widget.DrawerLayout
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.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:minHeight="#dimen/action_bar_height"
android:background="?attr/colorPrimary"
android:contentInsetStart="0dp"
android:contentInsetLeft="0dp"
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light">
</android.support.v4.widget.DrawerLayout>
The left inset is caused by Toolbar's contentInsetStart which by default is 16dp.
Change this to 72dp to align to the keyline.
Update for support library v24.0.0:
To match the Material Design spec there's an additional attribute contentInsetStartWithNavigation which by default is 16dp. Change this if you also have a navigation icon.
Above answer is correct but there is still one thing that might create issues (At least it did create an issue for me)
I used the following and it doesn't work properly on older devices -
android:contentInsetStart="0dp"
android:contentInsetLeft="0dp"
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"
The trick is here just use the following -
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"
and get rid of -
android:contentInsetStart="0dp"
android:contentInsetLeft="0dp"
And now it should work fine throughout all the devices.
Simpley add this two line in toolbar. Then we get new removed left side space bcoz by default it 16dp.
android:contentInsetStart="0dp"
app:contentInsetStart="0dp"
In case someone else stumbles here... you can set padding as well, for instance:
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
int padding = 200 // padding left and right
toolbar.setPadding(padding, toolbar.getPaddingTop(), padding, toolbar.getPaddingBottom());
Or contentInset:
toolbar.setContentInsetsAbsolute(toolbar.getContentInsetLeft(), 200);
A combination of
android:padding="0dp"
In the xml for the Toolbar
and
mToolbar.setContentInsetsAbsolute(0, 0)
In the code
This worked for me.
Here is what I did and it works perfectly on every version of Android.
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="56dp"
android:background="#color/primary_color"
app:theme="#style/ThemeOverlay.AppCompat"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light">
<TextView
android:id="#+id/toolbar_title"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginLeft="16dp" <!-- Add margin -->
android:layout_marginStart="16dp"
android:gravity="left|center"
android:text="Toolbar Title" <!-- Your title text -->
android:textColor="#color/white" <!-- Matches default title styles -->
android:textSize="20sp"
android:fontFamily="sans-serif-medium"/>
</android.support.v7.widget.Toolbar>
MyActivity.java (To hide default toolbar title)
getSupportActionBar().setDisplayShowTitleEnabled(false); // Hide default toolbar title
Result with Keylines Shown
Make your toolbar like:
<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/menuToolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="0dp"
android:background="#color/white"
android:contentInsetLeft="10dp"
android:contentInsetRight="10dp"
android:contentInsetStart="10dp"
android:minHeight="?attr/actionBarSize"
android:padding="0dp"
app:contentInsetLeft="10dp"
app:contentInsetRight="10dp"
app:contentInsetStart="10dp"></android.support.v7.widget.Toolbar>
You need to add
contentInset
attribute to add spacing
please follow this link for more - Android Tips
Update AndroidX toolbar:
<!-- TOOLBAR -->
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:contentInsetStart="0dp">
<TextView
style="#style/TextAppearance.AppCompat.Widget.ActionBar.Title"
android:id="#+id/toolbar_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/create_account_title"
android:textColor="#color/color_dark_grey"/>
</androidx.appcompat.widget.Toolbar>
Ok so if you need 72dp, couldn't you just add the difference in padding in the xml file? This way you keep Androids default Inset/Padding that they want us to use.
So: 72-16=56
Therefor: add 56dp padding to put yourself at an indent/margin total of 72dp.
Or you could just change the values in the Dimen.xml files.
that's what I am doing now. It changes everything, the entire layout, including the ToolBar when implemented in the new proper Android way.
Dimen Resource File
The link I added shows the Dimen values at 2dp because I changed it but it was default set at 16dp. Just FYI...
((Toolbar)actionBar.getCustomView().getParent()).setContentInsetsAbsolute(0,0);