Develop Reference

How to have the title of a toolbar on top of the menu

I'm trying to figure out how to have the title of a toolbar on top of the menu but I don't find anything online.
basically I want to have the same toolbar as google maps on that screenshot at the bottom:
their app
but at the moment I only have this:
my app
Here is how I add menu in my toolbar
toolbar = this.findViewById(R.id.toolbar);
toolbar.inflateMenu(R.menu.a_menu);
toolbar.setTitle("Title");
Here is the XML for my toolbar
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="156dp"
android:layout_gravity="bottom"
android:layout_margin="5dp"
android:animateLayoutChanges="true"
android:background="#fff"
android:elevation="8dp"
android:gravity="top|left"
></androidx.appcompat.widget.Toolbar>

I guess you can use a custom title by adding a TextView within the Toolbar.
That actually won't solve the problem, but it will allow you to add your menu below this TextView by using custom layout within the Toolbar.
and to add the menu in certain place within the Toolbar, you can use ActionMenuView, and add the menu programmatically within onCreateOptionsMenu() activity callback, and handle menu clicks with onOptionsItemSelected
MainActivity
public class MainActivity extends AppCompatActivity {
private ActionMenuView mMenuView;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// Inflating ActionMenuView
mMenuView = findViewById(R.id.menu_view);
}
#Override
public boolean onCreateOptionsMenu(Menu menu) {
// Adding menu to the ActionMenuView
getMenuInflater().inflate(R.menu.a_menu, mMenuView.getMenu());
return true;
}
#Override
public boolean onOptionsItemSelected(#NonNull MenuItem item) {
// handle menu clicks
return super.onOptionsItemSelected(item);
}
}
Your Toolbar
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="156dp"
android:layout_alignParentBottom="true"
android:layout_gravity="bottom"
android:layout_margin="5dp"
android:animateLayoutChanges="true"
android:background="#fff"
android:elevation="8dp"
android:gravity="top">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:orientation="vertical">
<TextView
android:id="#+id/toolbar_title"
style="#style/TextAppearance.AppCompat.Widget.ActionBar.Title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingTop="16dp"
android:text="3 E Main Street" />
<androidx.appcompat.widget.ActionMenuView
android:id="#+id/menu_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
</androidx.appcompat.widget.Toolbar>
How it looks

Remove gap at the top of fragment when actionBar is hidden

I have a problem with a gap being displayed at the top of a fragment when I do actionBar.hide() (btw I don't see this gap on the simulator, only on a real device). I tried this answer and that one, but nothing works. This fragment is inside MainActivity, which loads different fragments when I click on the menu. It's the only fragment where the actionBar (which is custom) should be hidden, so I cannot set the fullscreen flag on MainActivity onCreate() method. How can I redraw the view so the actionBar empty space disappear?
Here is how it looks now:
This is the mainActivty where I load the fragment:
public void onCreate(Bundle savedInstanceState) {
getWindow().requestFeature(Window.FEATURE_ACTION_BAR);
getWindow().requestFeature(Window.FEATURE_ACTION_BAR_OVERLAY);
super.onCreate(savedInstanceState);
showActionBar();
if(Build.VERSION.SDK_INT >= 21){
getWindow().getDecorView().setSystemUiVisibility(
View.SYSTEM_UI_FLAG_LAYOUT_STABLE
| View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN);
}
setContentView(R.layout.activity_main);
setUpMenu();
}
On click on the menu, I change the fragment accordingly:
#Override
public void onClick(View view) {
if (view == itemProfile){
mActionBar.hide();
ProfileFragment profile = new ProfileFragment();
profile.setUser(AppController.getInstance().getLoggedInUser());
changeFragment(profile);
}
}
And the custom actionBar
private void showActionBar() {
mActionBar = getSupportActionBar();
mActionBar.setDisplayShowHomeEnabled(false);
mActionBar.setDisplayShowTitleEnabled(false);
ColorDrawable colorDrawable = new ColorDrawable(Color.parseColor("#ffffff"));
mActionBar.setBackgroundDrawable(colorDrawable);
LayoutInflater mInflater = LayoutInflater.from(this);
View mCustomView = mInflater.inflate(R.layout.custom_actionbar, null);
mTitleTextView = (TextView) mCustomView.findViewById(R.id.title_text);
mLogo = (ImageView) mCustomView.findViewById(R.id.logo);
ImageButton menuButton = (ImageButton) mCustomView
.findViewById(R.id.menu);
menuButton.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
if (resideMenu.isOpened()) {
resideMenu.closeMenu();
} else {
resideMenu.openMenu();
}
}
});
ImageButton mapButton = (ImageButton) mCustomView
.findViewById(R.id.map);
mapButton.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
Intent i = new Intent(getApplicationContext(), MapsActivity.class);
startActivity(i);
}
});
mActionBar.setCustomView(mCustomView);
mActionBar.setDisplayShowCustomEnabled(true);
}
My theme:
<style name="AppTheme" parent="Theme.AppCompat.Light">
<item name="android:colorPrimaryDark">#android:color/black</item>
<item name="android:windowActionBarOverlay">true</item>
</style>
My mainActivity layout:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:fitsSystemWindows="true"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<FrameLayout
android:id="#+id/main"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:id="#+id/main_fragment">
</FrameLayout>
</LinearLayout>
</FrameLayout>
</FrameLayout>
My custom actionBar
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#color/transparent">
<FrameLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#color/transparent">
<TextView
android:id="#+id/title_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="7dp"
android:fontFamily="sans-serif-light"
android:text="#string/app_title"
android:textSize="#dimen/textsize_large"
android:textColor="#android:color/black"
android:layout_gravity="center"
android:visibility="gone"/>
<ImageView
android:id="#+id/logo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="7dp"
android:layout_gravity="center"
android:src="#drawable/logo"
android:background="#color/transparent" />
<ImageButton android:src="#drawable/earth"
android:background="?attr/actionBarItemBackground"
android:layout_width="?attr/actionBarSize"
android:layout_height="20dp"
android:scaleType="centerInside"
android:id="#+id/map"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_gravity="right|center_vertical"
android:layout_marginRight="-15dp"
android:tint="#color/black"/>
<ImageButton android:src="#drawable/titlebar_menu_selector"
android:background="?attr/actionBarItemBackground"
android:layout_width="?attr/actionBarSize"
android:layout_height="match_parent"
android:scaleType="centerInside"
android:id="#+id/menu"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginLeft="-15dp"
android:layout_gravity="left|center_vertical"
android:tint="#color/black"/>
</FrameLayout>
</RelativeLayout>
Any help would be great, I've been fighting with it for days now and I really don't know what to do...

If you have created Bottom Navigation Activity and you don't want the hidden ActionBar's blank gap, Check the Host activities layout XML file,
delete the line mentioned below
android:paddingTop="?attr/actionBarSize"

replace
mActionBar.hide();
with
mActionBar.setVisibility(View.GONE);
You need to add Toolbar to your Activity layout. Find the code snippet below for simple Toolbar Layout.
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:minHeight="?attr/actionBarSize"
android:background="#2196F3"
android:layout_width="match_parent"
android:layout_height="wrap_content">
</android.support.v7.widget.Toolbar>
Apply the theme to Activity. Here in this step you need to apply the theme which we have created in step-1 to your activity. This can be done, by using android:theme attribute in your application AndroidManifest.xml.
<activity
android:name="com.javatechig.sample.MyActivity"
android:label="#string/app_name"
android:theme="#style/AppTheme" >
</activity>
Now you are almost ready. You just need to instantiate the Toolbar and add it to your activity by using setSupportActionBar(Toolbar) method.
import android.support.v7.app.ActionBarActivity;
import android.support.v7.widget.Toolbar;
public class MyActivity extends ActionBarActivity{
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_my);
// Set a toolbar to replace the action bar.
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
}
}
Visit the below link to know more..
Using Toolbar as ActionBar

Put this line on your toolbar help me clear the gap, don't know will it works on other components like ur Relative layout. Hope helpful :)
android:fitsSystemWindows="true"
like this
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:fitsSystemWindows="true" //add this line
android:background="#color/transparent">

toolbar not showing in the bottom of the screen

why the toolbar is not showing at the bottom ?
private void initToolbars() {
Toolbar toolbarTop = (Toolbar) findViewById(R.id.toolbar_top);
setSupportActionBar(toolbarTop);
Toolbar toolbarBottom = (Toolbar) findViewById(R.id.drawer_layout);
toolbarBottom.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
#Override
public boolean onMenuItemClick(MenuItem item) {
switch(item.getItemId()){
case R.id.action_settings:
// TODO
break;
// TODO: Other cases
}
return true;
}
});
toolbarBottom.inflateMenu(R.menu.menu_main);
}
this xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar_top"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:minHeight="?attr/actionBarSize" />
<android.support.v7.widget.Toolbar
android:id="#+id/drawer_layout"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:layout_alignParentBottom="true"
android:layout_gravity="bottom"
android:minHeight="?attr/actionBarSize" />
</RelativeLayout>
I am getting toolbar at top only

Try this way
<RelativeLayout ...>
<!-- top toolbar -->
<Toolbar
android:id="#+id/top_toolbar"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:background="?attr/colorPrimary"
>
...
</Toolbar>
<ImageView
android:id="#+id/image"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#id/top_toolbar"
android:src="#drawable/week1"
/>
<!-- bottom toolbar -->
<Toolbar
android:id="#+id/bottom_toolbar"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#000000"
android:layout_alignParentBottom="true">
</Toolbar>
<!-- scrollable pane -->
<ScrollView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_below="#id/image"
android:layout_above="#id/bottom_toolbar">
...
</ScrollView>
</RelativeLayout>

When you already defined android:layout_alignParentBottom="true" then no need to add android:layout_gravity="bottom".
For more problem you can visit here .I hope it will help you .
How to show action items at the bottom using Toolbar

Try the below, this is working for me
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
>
<!--Begin Top Bar-->
<android.support.v7.widget.Toolbar
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary" />
</LinearLayout>
<!--Bottom bar-->
<android.support.v7.widget.Toolbar
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#000000"
android:alignParentBottom="true"/></LinearLayout>

May be problem is with tw toolbar.
Try to use below code :
<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.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_alignParentBottom="true"
android:background="?attr/colorPrimary" />
Your MainActivity.java
public class MainActivityextends AppCompatActivity {
private Toolbar toolbar;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_home);
toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
getSupportActionBar().setDisplayShowHomeEnabled(true);
}
#Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.menu_home, menu);
return true;
}
#Override
public boolean onOptionsItemSelected(MenuItem item) {
// Handle action bar item clicks here. The action bar will
// automatically handle clicks on the Home/Up button, so long
// as you specify a parent activity in AndroidManifest.xml.
int id = item.getItemId();
//noinspection SimplifiableIfStatement
if (id == R.id.action_settings) {
return true;
}
return super.onOptionsItemSelected(item);
}
Hope it helps you.

How is this layout implemented? [duplicate]

I want to create a toolbar like the following image as proposed in the material design guidelines:
I can achieve this via using the toolbar with an relative layout:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<Toolbar/>
<LinearLayout android:layout_marginTop="-17dp" />
</RelativeLayout>
I am not sure this is the correct way or not. Any help is appreciated.

Thanks Gabriele for all the help. Here is working code:
Activity :
public class MainActivity extends ActionBarActivity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_mai);
Toolbar toolbar = (Toolbar) findViewById(R.id.card_toolbar);
if (toolbar != null) {
// inflate your menu
toolbar.inflateMenu(R.menu.main);
toolbar.setTitle("Card Toolbar");
toolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
#Override
public boolean onMenuItemClick(MenuItem menuItem) {
return true;
}
});
}
Toolbar maintoolbar = (Toolbar) findViewById(R.id.toolbar_main);
if (maintoolbar != null) {
// inflate your menu
maintoolbar.inflateMenu(R.menu.main);
maintoolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
#Override
public boolean onMenuItemClick(MenuItem menuItem) {
return true;
}
});
}
}
}
Layout XML File:
<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" >
<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="#android:color/holo_orange_dark"
android:minHeight="?attr/actionBarSize" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/toolbar_main"
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" >
<android.support.v7.widget.Toolbar
android:id="#+id/card_toolbar"
android:layout_width="match_parent"
android:layout_height="#dimen/action_bar_size"
android:background="#android:color/white" />
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#android:color/darker_gray" />
<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>
</RelativeLayout>
Make sure your activity theme is extending Theme.AppCompat.Light.NoActionBar.
Here is what it will look like:
Few things to note:
If you are using card elevation then you need to alter the margin top so that your card aligns with the main toolbar.
I am still seeing 1-2 pixel margin between bottom of main toolbar and card toolbar. Not sure about what to do in this case. For now, I am aligning it manually.

You can obtain it using a Toolbar as ActionBar, a CardView and another Toolbar(standalone) inside the Card.
For the Toolbar standalone inside a Card you can use something like this:
<android.support.v7.widget.CardView>
<LinearLayout>
<Toolbar android:id="#+id/card_toolbar" />
//......
</LinearLayout>
</CardView>
Then you can inflate your menu to obtain the icon actions.
Toolbar toolbar = (Toolbar) mActivity.findViewById(R.id.card_toolbar);
if (toolbar != null) {
//inflate your menu
toolbar.inflateMenu(R.menu.card_toolbar);
toolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
#Override
public boolean onMenuItemClick(MenuItem menuItem) {
//.....
}
});
}
For the toolbar used as action bar and the main layout you can use:
option1:
<RelativeLayout>
<toolbar/> //Main toolbar
<View
android:background="#color/primary_color"
android:layout_height="#dimen/subtoolbar_height"/>
<CardView /> //described above
</RelativeLayout>
Option2: An extended toolbar (as actionbar) and a CardView as described above playing with margins.

Setting a toolbar in a List Activity

I have a ListActivity that I want to use the toolbar in but I get the error can't resolve getSupportToolbar. Everything works fine in my main activity but here I get errors.

found this excerpt on an Android dev blog post. You have to use the toolbar as a standalone object and add your own items.
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.blah);
Toolbar toolbar = (Toolbar) findViewById(R.id.my_awesome_toolbar);
// Set an OnMenuItemClickListener to handle menu item clicks
toolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
#Override
public boolean onMenuItemClick(MenuItem item) {
// Handle the menu item
return true;
}
});
// Inflate a menu to be displayed in the toolbar
toolbar.inflateMenu(R.menu.your_toolbar_menu);
}

According to me, you haven't set the toolbar in your activity. First you have to set the app theme to#style/Theme.AppCompat.Light.NoActionBar,
Then you have to set the custom toolbar in your MainActivity like
Toolbar toolbar = (Toolbar) findViewById(R.id.tool_bar_main_activity);
setSupportActionBar(toolbar);
TextView toolbar_title = (TextView) toolbar.findViewById(R.id.title_toolbar);
getSupportActionBar().setDisplayOptions(0, ActionBar.DISPLAY_SHOW_TITLE);
I hope this might solve your problem.

This is how I had set up a toolbar in my List Activity. I will post the layout file details
activity1.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<include
android:id="#+id/toolbar"
layout="#layout/toolbar_activity" />
<ListView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#android:id/list" />
</LinearLayout>
toolbar_activity.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:id="#+id/toolbar_parent"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:local="http://schemas.android.com/apk/res-auto"
android:id="#+id/toolbar"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:minHeight="?attr/actionBarSize"
android:background="#color/windowBackground"
local:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
local:popupTheme="#style/ThemeOverlay.AppCompat.Light"/>
<Button
android:id="#+id/buttonReturn"
android:layout_width="60dp"
android:layout_height="60dp"
android:layout_alignParentLeft="true"
android:background="#drawable/arrow_left" />
</RelativeLayout>