I am using Appcompat library to get the supportActionBar in my ActionBarActivity. Now I am facing another challenge and it's how to add toolbar under that actionbar, something like facebook app has. Any ideas how to do it?
Once you call setSupportActionBar(toolbar), you agreed that the ActionBar will be replaced with Toolbar. I believe that Facebook app uses sliding Tab, instead of ActionBar below Toolbar, but they designed it as pretty as possible. Android only allows us to set one ActionBar, no more. Think that you override onCreateOptionsMenu, where are the Menu items will be placed?
I believe they implement something like a slidingtablayout. Have a look at this link, the Google developers docs have example code for it.
https://developer.android.com/samples/SlidingTabsBasic/src/com.example.android.common/view/SlidingTabLayout.html
Just add android.support.v7.widget.Toolbar in your layout for that activity but don't call setActionBar(Toolbar) in your onCreate(). The Toolbar can have normal Views inside it, like Button, TextView, etc. which you can get handles of using the usual findViewById().
toolbar.xml
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/bg_gradient_start"
app:contentInsetEnd="0dp"
app:contentInsetStart="0dp">
<FrameLayout
android:layout_width="fill_parent"
android:layout_height="match_parent">
<Button
android:id="#+id/toolbarBackButton"
android:layout_width="72dp"
android:layout_height="48dp"
android:layout_gravity="left|center_vertical"
android:background="#android:color/transparent"
android:text="#string/back"
android:textColor="#drawable/button_text_color" />
<TextView
android:id="#+id/toolbarTitleText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
tools:text="Title" />
<Button
android:id="#+id/toolbarNextButton"
android:layout_width="72dp"
android:layout_height="48dp"
android:layout_gravity="right|center_vertical"
android:background="#android:color/transparent"
android:text="#string/next"
android:visibility="gone"
tools:visibility="visible"
android:textColor="#drawable/button_text_color" />
</FrameLayout>
</android.support.v7.widget.Toolbar>
In activity_main.xml I have
<include layout="#layout/toolbar" />
Then in your onCreate() you can just findViewById(R.id.toolbarBackButton) or any id you want to use, same as other views.
Related
Background
In the past, Google always shown the toolbar to have the title aligned to the left:
https://material.io/develop/android/components/app-bar-layout/
However, recently, it seems that on some of its apps, the title is centered, even if it doesn't have symmetric content on the left and right. Example is on "Messages" app:
And on "Google News" app :
It also got updated on the material guidelines, here. Example:
Some people like to call it "material design 2.0", as it got various things updated.
The problem
While there are plenty of similar questions on StackOverflow from the time it was called "ActionBar" (example here ), here it's different, because it should have the support library (AKA "Android-X") have a way to handle it correctly, because things have changed, and now Google should support it as it's a part of the guidelines and part of various Android apps.
What I've tried
I tried to add a view within the toolbar, but even by coloring the view, you can see that it's not really centered, automatically, and that's before adding more action-items or up-button :
activity_main.xml
<androidx.coordinatorlayout.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"
tools:context=".MainActivity">
<com.google.android.material.appbar.AppBarLayout
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:theme="#style/AppTheme.AppBarOverlay">
<androidx.appcompat.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">
<TextView android:layout_width="match_parent" android:layout_height="match_parent" android:text="title"
android:gravity="center" android:background="#33ff0000"
android:id="#+id/titleTextView"/>
</androidx.appcompat.widget.Toolbar>
</com.google.android.material.appbar.AppBarLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
This solution is similar to many others presented on other StackOverflow threads similar to this question, and just like there, it fails to really center the text, while on Google's attempt, it gets centered correctly, no matter the number of action items and other views around.
There is also a nicer workaround that I've come up with: have one toolbar on each side, and make the TextView have margin that is the max of both. There is even a library for this, "Toolbar-Center-Title"... But again, this is a workaround. Not what I'm asking about.
The question
Is there now an official way to have a centered title on the Toolbar, no matter how many action items there are, and no matter what's on the other side (up button, for example) ?
If so, how can this be done?
NOTE: Again, I'm not interested in workarounds. There are plenty of workarounds and I can think of such by myself.
TL;DR: No, there's currently no official way to center the title on a toolbar.
I don't think there is an official way to do it, at least not yet. But I know that the Flutter framework supports it and it's pretty straight forward: you simply need to pass centerTitle: true to the appbar constructor, as described in this answer. And there's a good chance that the apps you've mentioned in your question were built with Flutter, since both are from Google.
I think the closest workaround to your expected layout is having the TextView on top of the Toolbar, as shown here:
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<RelativeLayout
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="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.ActionBar">
</android.support.v7.widget.Toolbar>
<TextView
android:layout_centerInParent="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/app_name"/>
</RelativeLayout>
</android.support.design.widget.AppBarLayout>
But it would be really nice if the official Android API could support this the same way flutter does. Maybe you'd like to send a feature request to the Material Components Android Issue Tracker?
Now We have an official way to center the title on a toolbar using Material Design 3
Using Material Design 3 we can align the title in the center without doing extra work or without adding text view in toolbar
To align the title in the center We need to use the below properly
app:titleCentered="true"
To align subtitles in the center we need to use the below property
app:subtitleCentered="true"
Sample Code
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<com.google.android.material.appbar.MaterialToolbar
android:id="#+id/topAppBar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:title="Center Aligned title"
app:subtitle="Sub title"
app:subtitleCentered="true"
app:menu="#menu/top_app_bar"
app:titleCentered="true"
app:navigationIcon="#drawable/ic_android_black_24dp" />
</com.google.android.material.appbar.AppBarLayout>
OUTPUT
How about textAlignment="center"? a RelativeLayout does the trick, when AppCompatTextView has set layout_width="match_parent"; for example:
<?xml version="1.0" encoding="utf-8"?>
<layout
xmlns:android="http://schemas.android.com/apk/res/android">
<androidx.appcompat.widget.LinearLayoutCompat
android:id="#+id/customView"
android:minHeight="?android:attr/actionBarSize"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:orientation="vertical"
android:gravity="top">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- Home Button -->
<include
layout="#layout/button_home_menu"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="start"/>
<androidx.appcompat.widget.LinearLayoutCompat
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="8dp">
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/app_name"
android:textAlignment="center"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textSize="18sp"
android:textStyle="bold"/>
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/subtitle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/app_version"
android:textAlignment="center"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textSize="12sp"
android:textStyle="bold"/>
</androidx.appcompat.widget.LinearLayoutCompat>
</RelativeLayout>
</androidx.appcompat.widget.LinearLayoutCompat>
</layout>
the down-side is, that when showing several menu-items as action buttons - or when displaying extraordinary long strings as title, the title may overlap them - but when only showing one or two action buttons in combination with a title that fits the visually available width, this works just fine - that's because menu config ifRoom would always apply, because there is room. else one could only measure, which side of the toolbar has the most wide items' container - and then adjust the width on the other side's items' container. scaling the font-size depending on the available room might also be an option, to make it fit dynamically.
No official way to do it but subclassing provides most coverage without crazy tricks.
https://gist.github.com/bmc08gt/40a151e93969f2633b9b92bca4b31e83
app:contentInsetStart="#dimen/margin_64" //64dp
app:contentInsetEnd="#dimen/margin_64" // 64dp
toolabr section
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<com.google.android.material.appbar.MaterialToolbar
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:gravity="center_horizontal"
app:contentInsetEnd="#dimen/margin_64"
app:contentInsetStart="#dimen/margin_64">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Create"
android:gravity="center_horizontal"
android:textColor="#color/white"
android:textSize="18sp" />
</com.google.android.material.appbar.MaterialToolbar>
</com.google.android.material.appbar.AppBarLayout>
I am new to Android and I want to know how to best develop my app.
My app is going to be only on tablets and I have a navigation menu on the header (not side menu like a NavDrawer but a navigation menu on header like in websites).
The question is if it's better to make a header.xml file that contains all the navigation buttons and include it in every activity, and then in order to handle click events make it inside some base activity that every activity will inherit from.
Or it's better to make the header as a fragment and handle the click events inside the fragment itself.
Thanks.
Current practice is to use a Toolbar with either a navigation tab with a spinner or Tabs/Icons for each of your views. If you don't want to build this yourself you can use the TabbedActivity template when you set up your project.
The way it works is it's a Toolbar(new version of the ActionBar) included on the top of an Activity that has a fragment for the rest of the view. You can use a ViewPager or a FragmentManager to change the content of the fragment as the user makes his/her selection.
Here is the main activity of an app I built like this recently:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity"
android:background="#dfdfdf">
<include
android:id="#+id/tool_bar"
layout="#layout/tool_bar"
android:layout_height="wrap_content"
android:layout_width="match_parent"
/>
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorPrimary"
android:layout_below="#id/tool_bar"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true" />
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/tabs"
/>
</RelativeLayout>
and the toolbar looks something like this:
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorPrimary"
android:elevation="6dp"
android:theme="#style/Base.ThemeOverlay.AppCompat.Dark">
</android.support.v7.widget.Toolbar>
I've searched for this question but haven't found a useful answer yet.
I am trying to create a Toolbar with some kind of edittext inside of it.
It should look like this:
How should my XML file look like? Currently it looks like this:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.Toolbar
android:id="#+id/activity_main_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:elevation="8dp"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText
android:id="#+id/activity_main_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/title"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:layout_marginEnd="16dp"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:textSize="22sp"/>
</LinearLayout>
</android.support.v7.widget.Toolbar>
</LinearLayout>
The activity looks like this:
private Toolbar toolbar;
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.acitivty_main);
toolbar = (Toolbar)findViewbyid(R.id.activity_main_toolbar);
setSupportActionbar(toolbar);
}
But the result is some Edittext which is right in the center of the Toolbar, letting no space for the toolbar title (please ignore the "save" menu button)
Now my question is,
How do I correctly add one or more views to the toolbar below the main actionbar height?
Could you recommend me some example or tutorial page?
What kind of EditText is used in the shown image with the floating hint?
Thanks in advance
Well first I think it easy to answer the second and third question first, you can find that information in the "Android Developer Blog" in "Android Design Support Library". Here the link:
http://android-developers.blogspot.co.uk/2015_05_01_archive.html
Just scroll down till you find the section called "Floating labels for editing text" and sorted.
Now for the first question, what I did was I made a "Toolbar" layout (won't be able to elaborate too much here as I'm busy at the moment) and then added it to the layout. The code is below:
Toolbar Layout:
<?xml version="1.0" encoding="utf-8"?>
<!-- NOTE: Use To Maintain Structure Of Actionbar -->
<Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:background="#009688"
android:id="#+id/toolBar"
android:elevation="2dp">
<!-- NOTE: Required For Top Section Structure -->
<LinearLayout
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:orientation="vertical">
<EditText
android:background="#android:color/transparent"
android:hint="#string/note_title"
android:textColorHint="#FFFFFF"
android:id="#+id/actionTitle"
android:paddingRight="16dp"
style="#style/ActionText"/>
<TextView
android:id="#+id/textDate"
style="#style/ActionDate"/>
</LinearLayout>
</Toolbar>
Adding it to the Layout File
<?xml version="1.0" encoding="utf-8"?>
<!-- NOTE: Layout For Edit Note Activity -->
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:fitsSystemWindows="true">
<!-- NOTE: Assigned Custom Toolbar -->
<include
android:id="#+id/toolBar"
layout="#layout/tool"/>
</RelativeLayout>
And that should sort you out (You can then mess about with the actionbar properties to clean it up aka: getActionBar().setElevation(0); and
getActionBar().setTitle("");
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
With the new Lollipop API, we have to use a Toolbar if we want to personalize the action bar aspect.
Adding a ProgressBar to the Toolbar is as simple as adding it to the Toolbar ViewGroup, as Chris Banes said.
<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/material_green_500"
android:minHeight="?attr/actionBarSize"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<!-- Color is Brown 500 -->
<ProgressBar
android:id="#+id/toolbar_progress_bar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:indeterminateTint="#795548"
android:indeterminateTintMode="src_in"/>
</android.support.v7.widget.Toolbar>
But how can we place it at the right of the Toolbar, where it belongs?
The layout_gravity attribute seems to not be defined for the Toolbar. Setting it from the xml has no effect.
I tried to change the width of the ProgressBar, with no success.
What do I do?
EDIT: There is a programmatical solution to this problem, see #mdelolmo reply for that.
You can try this. It worked for me. Key here is to define layout_gravity in the xml: android:layout_gravity="right"
<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/material_green_500"
android:minHeight="?attr/actionBarSize"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<!-- Color is Brown 500 -->
<ProgressBar
android:id="#+id/toolbar_progress_bar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:indeterminateTint="#795548"
android:indeterminateTintMode="src_in"
android:layout_gravity="right"
/>
</android.support.v7.widget.Toolbar>
I also hit the same wall, but programmatically it works:
Toolbar.LayoutParams layoutParams = new Toolbar.LayoutParams(
ViewGroup.LayoutParams.WRAP_CONTENT,
ViewGroup.LayoutParams.WRAP_CONTENT,
Gravity.TOP | Gravity.RIGHT);
In my snippet, I align it to the top, to match the alignment of the menu.
A workaround to create the layout completely in xml would be replacing the toolbar content with your own relative layout. To do that, you need to fake the activity title (and also the navigation icon if you are using one), which is literally nesting the following in your Toolbar block.
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="#dimen/toolbar_height"
android:paddingRight="2dp" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:text="#string/app_name"
android:textColor="#android:color/white"
android:textSize="20sp"
android:fontFamily="sans-serif-medium" />
<ProgressBar
android:id="#+id/toolbar_progress_bar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:indeterminateTint="#795548"
android:indeterminateTintMode="src_in" />
</RelativeLayout>
Note that 20sp sans-serif-medium is the font used in lollipop toolbar, you might need to adjust the text view parameters to make it look natural in earlier versions.