I have tried to implement the material components bottom app bar, following these guidelines and doing a refactor to AndroidX + updating my AppTheme.
Material components - bottom app bar
So far so good, all working, but the button is cut off in my fragment.
The xml preview however shows this, which seems like everything is fine:
Here is my xml code:
<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"
android:fitsSystemWindows="true">
<!-- Other components and views -->
<com.google.android.material.bottomappbar.BottomAppBar
android:id="#+id/bottombar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
app:elevation="2dp"
app:fabAlignmentMode="center"
app:fabCradleVerticalOffset="10dp"
app:fabCradleMargin="10dp" />
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top|center_horizontal"
android:adjustViewBounds="true"
app:layout_anchor="#id/bottombar"
app:layout_anchorGravity="top|center"
app:srcCompat="#drawable/marker" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
I even increased the fabCradleMargin and the fabCradleOffset - otherwise the button is completely in the bottom and not at all floating in that half circle as it is supposed to...
anyone got any clues for this? Thanks a lot!
So I noticed it has to do with the height of the bottom app bar. If i manually set it to 80dp, the Fab shows as it is supposed to.
I tried around a bit more and noticed this manual height setting is only necessary in fragments. I only placed the bottom app bar in a fragment to test it anyways.
So now I implemented it the same way as in the guideline in my MainActivityand then set up a function showFab(Boolean enable) that can then be called in different fragments based on the need.
Works like a charm, if anyone faces the same issues. I guess this might be as it is not supposed to be implemented in a single fragment only.
I am trying to achieve a similar look like the Google Play Store App
For now I got this
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/image"
android:layout_width="match_parent"
android:layout_height="200dp" />
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipToPadding="false"
android:paddingTop="200dp" />
</FrameLayout>
Looks great but since the Recyclerview is overlapping the ImageView, it's not clickable anymore. I am looking for a solution.
You can make use of scrolling activity template in the android studio it has similar behaviour to what you want to do.
and put ImageView in AppBarLayout
and handle the click events like any other view.
this won't give you the exact behaviour of google play app but if it's the eases way to do it.
if you want the exact behaviour I know an open source library that do that let me know if you want it and I will search for it.
I added a ripple effect on a ImageButton, however it is hidden by an ImageView used as a background for the parent view RelativeLayout.
Here's the layout 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="172dp"
android:orientation="vertical"
android:theme="#style/ThemeOverlay.AppCompat.Dark">
<ImageView
android:id="#+id/drawerBackgroundImageView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:src="#drawable/drawer_background"/>
[...]
<ImageButton
android:id="#+id/drawerLogoutButton"
android:layout_width="32dp"
android:layout_height="32dp"
android:layout_alignBottom="#id/drawerEmailTextView"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_marginEnd="#dimen/activity_horizontal_margin"
android:layout_marginRight="#dimen/activity_horizontal_margin"
style="#style/FlatButtonStyle"
android:scaleType="centerInside"
android:src="#drawable/ic_logout_white_24dp"/>
</RelativeLayout>
(there's a bunch of other views but they're irrelevant here)
I'm using an ImageView as the background for the RelativeLayout as I need to set a specific scaleType for the image, so I can't use the basic android:background property.
The ripple effect is hidden as it doesn't have a mask layer (I want it to extend out of the button's bounds) and thus uses the ImageButton's parent view to be displayed. The effect is perfectly visible if I remove the ImageView.
Is there a way to get the ripple effect to be shown above the problematic ImageView?
I had exactly the same issue and solved it using this thread: https://code.google.com/p/android/issues/detail?id=155880
Issue preview:
Before solved:
After solved:
Explanation:
"Borderless buttons draw their content on the closest background. Your button might not be having background between itself and the ImageView, so it draws underneath the ImageView."
Solution:
"Use a transparent background (android:background="#android:color/transparent") on some layout containing the button (beneath the ImageView). This will dictate what the maximum bounds of the ripple effect is."
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
...>
<!-- Your background ImageView -->
<ImageView
android:id="#+id/drawerBackgroundImageView"
android:src="#drawable/drawer_background"
... />
<!-- ... -->
<!-- HERE, you need a container for the button with the transparent
background. Let's say you'll use a FrameLayout -->
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#android:color/transparent">
<!-- Maybe more items -->
<!-- Button with borderless ripple effect -->
<ImageButton
android:id="#+id/drawerLogoutButton"
android:background="?selectableItemBackgroundBorderless"
... />
</FrameLayout>
</FrameLayout>
Hope it helps.
I am experiencing same issue. Only solution I have found so far is not 100% okay since ripple is masked by view (its not borderless).
The solution (workaround):
surround your ImageButton with other view and set ripple to the foreground instead of the background in your layout like this:
<ImageView ... />
<FrameLayout
...
android:clickable="true"
android:focusable="true"
android:foreground="?attr/selectableItemBackgroundBorderless" >
<ImageButton />
</FrameLayout>
I would be really glad if someone explain why the ripple is drawn behind the image. Also if you look at Google Photos app, in image detail they have transparent icons over image view with ripple. I would like to replicate this, but I am not able to make the ripple to be in foreground. Does anybody know how to put transparent imagebuttons over everything but still have the ripple?
EDIT final solution
here you can find exactly same question link
with great explanation what is happening. the solution is the same but on top of that it solves rectangular mask by adding
android:clipChildren="false"
android:clipToPadding="false"
to your layout. now your ripple should be borderless (it worked for me).
The layout xml could be something like this:
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
...
android:clipChildren="false"
android:clipToPadding="false">
<ImageView ... />
<FrameLayout
...
android:clickable="true"
android:foreground="?attr/selectableItemBackgroundBorderless">
<ImageView ... />
</FrameLayout>
</FrameLayout>
I'm aware this is an old post but I did struggle with this quite a bit today hence I'm posting what I was finally able to figure out and maybe someone else might benefit from it. One key emphasis beforehand, please do always RTFM!
1) The story
I aimed to use the unbounded ripple effect on Tab Items and consequently have it spread all over the AppBarLayout area. I had applied #android:color/transparent to TabLayout as the first wrapping parent and gave AppBarLayout a background color, nevertheless the ripple was still being cut off right at the borders of TabLayout's height.
2) The moral of the story (RTFM)
So I run to the nest of Android knowledge: The Documentation, and spotted this:
?android:attr/selectableItemBackgroundBorderless for a ripple that extends beyond the view. It will be drawn upon, and bounded by, the nearest parent of the view with a non-null background.
3) The course of action
Using Layout Inspector, I realized that #android:color/transparent although transparent (duh!) it actually assigns 0 as the value of the bg attribute of a View, but zero is not null hence the ripple gets bounded at the nearest parent.
4) The conclusion
With that in hand, I went and set the android:background property of my TabLayout to #null rather than transparent, and now I have a fancy little ripple spread onto the area of the AppBarLayout.
5) Outro: **ANDROID & SO FTW!
Props to everyone in this post who shed light on the matter in word. Cheers!
After wrapping ImageButton inside FrameLayout, I was getting rectangular shape on touch. Applied background with oval shape on FrameLayout and got the circular shape on touch.
Had the same issue. Used the solutions described above and worked. Managed to avoid the wrapping FrameLayout by setting foreground as ?attr/actionBarItemBackground and background as #null.
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center|end"
android:background="#null"
android:contentDescription="#string/app_name"
android:foreground="?attr/actionBarItemBackground"
android:padding="#dimen/small_margin"
android:src="#drawable/ic_clear_text_icon" />
I'm updating an app to use the new Toolbar instead of the regular ActionBar.
In my app the user must be able to select a contact from their contact list. To do so, I've added a SearchView to the menu.
The contacts are already in the list; the SearchView is used to filter the list using the ArrayAdapter.getFilter() method.
It all worked fine using the ActionBar, but the Toolbar's height gets stretched to just behind the keyboard. Using the XML inspection from Android Device Monitor I can see the ListView exists behind my keyboard.
It almost seems as if the SearchView wants to display suggestions, but I have no such thing configured. Any idea what's going wrong?
The images illustrate the problem. They show the normal, expanded and focused state of the SearchView.
This is my XML menu:
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item android:id="#+id/action_forwarding_contact_search"
app:showAsAction="always"
android:title="#string/forwarding_contact_search"
app:actionViewClass="android.support.v7.widget.SearchView"
android:icon="#drawable/abc_ic_search_api_mtrl_alpha"/>
</menu>
Edit
Giving the Toolbar a fixed height doesn't solve the problem, because it will make SearchView disappear when it has focus. Changing the gravity of either item seems to have no effect on the SearchView.
I had the same problem than OP, I tried the android:fitsSystemWindows="true" solution, but it was half resolved: the searchview didn't expand anymore but the notification bar (top of screen) became totally white (like the layout background) instead of red (my app theme).
I found an alternative way and it's working like a charm, so for those who are stuck, try this:
In your manifest, just add this line in your activity section:
android:windowSoftInputMode="adjustPan"
Example:
<activity
android:name=".MainActivity"
android:windowSoftInputMode="adjustPan"
android:label="My main activity" >
</activity>
Ok, I figured it out. There was no problem with the SearchView, because the same happened with ordinary EditTexts which were placed normally inside a layout xml. The Toolbar wasn't the problem either.
I created an empty activity and played around with anything I changed in my app and finally came to my theme. On KitKat and later I had <item name="android:windowTranslucentStatus">true</item> set on the theme, so the navigation drawer would appear behind the status bar.
Disabling/removing this would resolve the issue. This reminded me of the android:fitsSystemWindows="true" property. It is set on the Toolbar, but not in the layout xml of the main activity that contains the DrawerLayout.
I guess the DrawerLayout sets itself to fit the system windows.
E.g. there's no fitSystemWindows property here:
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".DashboardActivity">
The activity where the problem occurred did not have a NavigationDrawer, it was a new activity. Setting android:fitsSystemWindows="true" on the root node of the layout of the activity made things work fine.
So, for anyone to read this: if you have <item name="android:windowTranslucentStatus">true</item> in your theme, make sure any root node containing a toolbar contains a android:fitsSystemWindows="true".
Working sample:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:orientation="vertical">
<include layout="#layout/toolbar" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<EditText
android:id="#+id/editText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:singleLine="true" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Button" />
</LinearLayout>
</LinearLayout>
I had same issue like this but did't help above answers but after lots of search found something.
may help you too.!!
after add this attribute in toolbar
android:layout_height="?attr/actionBarSize"
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
style="#style/ToolBarStyle"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/myPrimaryColor"
android:minHeight="#dimen/abc_action_bar_default_height_material" >
<TextView
android:id="#+id/toolbar_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="18sp"
android:textColor="#color/myTextPrimaryColor"
android:layout_gravity="center" />
</android.support.v7.widget.Toolbar>
The accepted answer works fine, however I needed an alternative that would allow to view the Toolbar under translucent status bar.
The problem is that Toolbar uses paddings to cover for system components. As a result, the paddingBottom of the Toolbar is being set to soft keyboard's height whenever the keyboard appears. Solution was to reset the padding before calling super.onMeasure in my custom Toolbar class:
public class MyToolbar extends Toolbar {
(...)
#Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
setPadding(getPaddingLeft(), getPaddingTop(), getPaddingRight(), 0);
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
}
}
It seems like a old question but I want to address the real cause about this issue.
In fact, the fitsSystemWindows does not only add statusBar insets into your views padding, but also keyboard's height. So, when keyboard showed, your toolbar(which is the view who consumes window insets) will gain a bottom padding equals to your keyboard's height.
Move fitSystemWindows to root node do solve this problem, but sometimes we can't do that, for example we need toolbar's background to fill the statusbar.
So, the real solution for this issue, I think, is to tell view only consume top insets. Luckily, Android do offer a method for us to do that.
private static final View.OnApplyWindowInsetsListener CONSUME_TOP_INSET_LISTENER = new View.OnApplyWindowInsetsListener() {
#RequiresApi(api = Build.VERSION_CODES.KITKAT_WATCH)
#Override
public WindowInsets onApplyWindowInsets(View v, WindowInsets insets) {
int b = v.getPaddingBottom();
int l = v.getPaddingLeft();
int r = v.getPaddingRight();
v.setPadding(l, insets.getSystemWindowInsetTop(), r, b);
int il = insets.getSystemWindowInsetLeft();
int ir = insets.getSystemWindowInsetRight();
int ib = insets.getSystemWindowInsetBottom();
return insets.replaceSystemWindowInsets(il, 0, ir, ib);
}
};
public static void makeViewConsumeTopWindowInsetsOnly(#NonNull View view) {
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT_WATCH) {
view.setOnApplyWindowInsetsListener(CONSUME_TOP_INSET_LISTENER);
}
}
Add above code to some place, and call this method with the view you want to consumes top insets.
I ran into a similar issue and setting showAsAction="always|collapseActionView" inside the Search Menu Item (menu.xml) solved the stretching of the toolbar for me.
I had the same issue with a SearchView on a Toolbar with a TextView and Spinner in it. Closing the SearchView (either by pressing the Toolbar back button or by switching to a different tab in the ViewPager) caused the Toolbar to stretch out to just below the top of the keyboard.
I solved it by placing an extra layout around the views in my Toolbar.
Before:
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<Spinner
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</android.support.v7.widget.Toolbar>
After
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<Spinner
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</LinearLayout>
</android.support.v7.widget.Toolbar>
simplest solution without changing xml and keeping translucent system bar is to add:
kotlin:
toolbar.setOnApplyWindowInsetsListener { toolbar, windowInsets ->
toolbar.updatePadding(
windowInsets.systemWindowInsetLeft,
windowInsets.systemWindowInsetTop,
windowInsets.systemWindowInsetRight,
0
)
windowInsets.consumeSystemWindowInsets()
}
please check if your fitsSystemWindows=true are placed correctly.
I would like to share my experience but before that I want to dropped this comment. So far, I really find this CoordinatorLayout shenanigans buggy and not worthy of being dropped in the SDK. Its just buggy. When it behaves like this erratically, the architecture on the xml layout is not much of a help to figure out whats going on. I followed the examples religiously and none of them worked.
Having said that, I am using the build tools version v24.0.2 (The latest as of this writing) and my situation may be of different than the rest. So I am putting this answer along with other answers here.
In my case, I am using this library for NavigationDrawer
As some answers here pointed out, its the navigation drawer. I tried not using that library and still having the problem. I have CoordinatorLayout as the parent layout of my two activities and programatically inserts the NavigationDrawer as instructed by the library author. The expanding Toolbar the size of the screen when focusing on an EditText is still there. Therefore, in my case, the problem is not coming from there.
Here's what I did in my case:
I removedfitsSystemWindows from the CoordinatorLayout layout of the activity. Contrary to what other people suggested here.
I am pasting my entire activity layout here:
<?xml version="1.0" encoding="utf-8"?>
<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/coordinatorlayout_homescreen"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".activity.HomeScreenActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsingtoolbarlayout_homescreen"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginStart="64dp"
app:expandedTitleMarginEnd="48dp"
app:layout_scrollFlags="scroll|enterAlwaysCollapsed">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar_homescreen"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
app:layout_collapseMode="pin"/>
</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"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<FrameLayout
android:id="#+id/framelayout_homescreen"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</android.support.v4.widget.NestedScrollView>
<!--
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab_homescreen"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="#dimen/fab_margin"
android:src="#android:drawable/ic_dialog_email" />
-->
</android.support.design.widget.CoordinatorLayout>
I did this on another activity and it works as expected. I don't have the expanding Toolbar anymore. But this problem occurred. I am about to pull my hair out. The status bar became white. Phoenix Wang solution on that post fix it for me and I quote his answer:
I found the answer in this link:Status Bar Color not changing with
Relative Layout as root element
So it turns out we need remove the
<item name="android:statusBarColor">#android:color/transparent</item> in
styles.xml(v21). And it works just fine for me.
My only concern is how will this solution holds in the upcoming updates. CoordinatorLayout should not be behaving like that.
In case you are using an EditText inside Toolbar, adding "flagNoExtractUi" in imeOptions , will solve the stretching edit area.
EditText for Search Action without stretching:
android:id="#+id/toolbar_editText"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:inputType="text"
android:imeOptions="actionSearch|flagNoExtractUi"
android:singleLine="true" />
I am migrating to the new Toolbar feature in appcompat v21 from the previous action bar. I still want to keep the logo on the top left part of the actionbar (toolbar). For doing I added in my layout the support toolbar and I created a new thene for it.
app:theme="#style/NewToolBarStyle"
I am adding the log programmatically as there is some logic in the app for this.
actionBar.setLogo(R.drawable.myicon);
Referring to my new style (empty for the moment):
<style name="NewToolBarStyle" parent="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
</style>
However the result is showing an image the is too big for what I am looking for, and I am wondering how to reduce the size of the icon.
Is there any way (style, layout or programming) that I can reduce the logo size?
There is no logo icon in material design : http://www.google.com/design/spec/layout/structure.html#, so I suppose this is not well tested scenerio - or simply (broken) by design. You can add ImageView as a child widget of your toolbar and use it to show any image. It will show on the right of all the other internal widgets - like spinner - but list navigation mode is also deprecated.
If you insist on having logo then my workaround for this is to make sure toolbar is of fixed height - this takes care of wrong icon height. Even after that you will have to set setAdjustViewBounds to true on toolbars internal logo ImageView - otherwise it will create large left and right padding.
This is how my toolbar looks like (height set to ?attr/actionBarSize):
<?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="?attr/actionBarSize"
android:layout_width="match_parent"
android:minHeight="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light">
</android.support.v7.widget.Toolbar>
reference it inside your activity layout using:
<include layout="#layout/toolbar_actionbar"/>
dont change layout_height in include.
The second step is to setAdjustViewBounds(true) on logo icon:
Drawable logo = getDrawable(iconRes);
toolbar.setLogo(logo);
for (int i = 0; i < toolbar.getChildCount(); i++) {
View child = toolbar.getChildAt(i);
if (child != null)
if (child.getClass() == ImageView.class) {
ImageView iv2 = (ImageView) child;
if ( iv2.getDrawable() == logo ) {
iv2.setAdjustViewBounds(true);
}
}
}
Following the suggestiong give by #brightstar I would like to develop further the answer.
The best way to control the size and position of the Logo in the new Toolbar is by actually not using it. The concept is completely different, what you need to do is create a toolbar from scratch. So you need to make a decision, either you use the layout given by the actionBar or include everything new including the title.
If you stop using the logo but you keep using the title you finally will see that the logo is over the title creating and ood situation.
So, an example of what to do is the following:
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<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/my_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/action_bar_background"
app:theme="#style/NewToolBarStyle"
android:minHeight="?attr/actionBarSize" />
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<TextView
android:id="#+id/text_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginLeft="17dp"
android:textSize="20sp"
android:layout_toRightOf="#+id/logo_image"
android:text="#string/app_name"
android:textColor="#color/white" />
<ImageView
android:id="#+id/logo_image"
android:layout_width="45dp"
android:layout_height="45dp"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:scaleType="centerInside" />
</RelativeLayout>
</FrameLayout>
You create this file as my_toolbar.xml. Notice the following details:
I did not include an src of my ImageView because I am changing it dinamically. But works adding it.
I used a relative layout for being able to center the icon and the text.
I need still to include the Home button.
Later on as described by #brightstar you need to include in the top of your layouts by an include, however.... remember to add an id so that you can refere all your other Views to it.
<include layout="#layout/toolbar_sharemup"
android:id="#+id/including" />