How can I create a toolbar/actionbar that combines the default actiondrawertoggle button (with the burger-arrow animation) with an edittext and a simple button like this?
Toolbar is a ViewGroup, so, you can use a Toolbar as a FrameLayout.
Here is a simple example, take a look at it:
<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_appcompat"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:minHeight="?attr/actionBarSize"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
>
//customize your toolbar content layout here.
</LinearLayout >
</android.support.v7.widget.Toolbar>
Hope you'll be inspired.
Related
I add drawable as background in my toolbar, but the image stretched it to its own height.
Possible solution is restrict toolbar to 56dp or something, but I don't want this, as it also will be used for extended toolbar with tabs.
I want gradient similar behaviour for it, "dynamic height"
<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="#drawable/background_gradient"
android:contentInsetLeft="0dp"
android:contentInsetStart="0dp"
android:minHeight="56dp"
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"
app:popupTheme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:theme="#style/ToolbarTheme" />
You can set your image as textview background. Use android:background="#drawable/toolbartitle". and setTitle("") in your code.
your final toolbar will look like this:
<?xml version="1.0" encoding="utf-8"?>
<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="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
android:background="#drawable/toolbartitle"
local:theme="#style/MyMaterialTheme.Base"
local:popupTheme="#style/ThemeOverlay.AppCompat.Light" >
</android.support.v7.widget.Toolbar>
Right now, I have a normal looking Toolbar. What I want to do is add a custom layout between the Toolbar and the TabLayout, as shown in the picture below:
On the left is what my Toolbar looks like now, and on the right is what I want it to look like.
As you can see, I want to add an ImageView and two TextViews to the layout.
How can I achieve this?
Here is my current layout:
<?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"
android:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/AppTheme.PopupOverlay" />
<android.support.design.widget.TabLayout
android:id="#+id/tablayout"
android:layout_width="match_parent"
android:layout_height="48dp"
app:layout_scrollFlags="scroll|enterAlways" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
AppBarLayout extends LinearLayout, so you can add any number of views to your AppBarLayout: there's no reason to add the views specifically to your Toolbar.
You'll want to make sure you use the same layout_scrollFlags as your Toolbar if you want them to scroll the same.
Toolbar is just a ViewGroup, you can customize is as much as you want.
Try this :
<android.support.v7.widget.Toolbar
style="#style/ToolBarStyle"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:minHeight="#dimen/abc_action_bar_default_height_material">
<ImageView
android:layout_width="wrap_content"
android:contentDescription="#string/logo"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:src="#drawable/ic_launcher"/>
This should bring your imageView in center of toolbar.
I want to put spaces between toolbar icon and toolbar title and also I want to change the color of statusbar in my app as same as the color of toolbar can anyone help
currently it looks like this:
here is my code:
public class AbstractActivity extends AppCompatActivity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_abstract);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
getSupportActionBar().setDisplayShowHomeEnabled(true);
getSupportActionBar().setIcon(R.drawable.ic_astrological_sun);
}
}
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#0F6177"
app:popupTheme="#style/AppTheme.PopupOverlay" >
</android.support.v7.widget.Toolbar>
</LinearLayout>
Here adding app:titleMarginStart="32dp" solve.
pay attention on app prefix
in context:
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar_main"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:layout_scrollFlags="scroll|enterAlways"
app:logo="#drawable/ic_launcher"
app:title="#string/app_name"
app:titleMarginStart="32dp" />
Use Toolbar default title margin left 16dp
And we can change it with app:contentInsetStart="100dp"
Or if you had a navigation icon,the title marigin left 56+16=72dp defalt,
So you can change it with app:contentInsetStartWithNavigation="56dp"
add app:titleMarginStart="12dp" and it works like charm
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_scrollFlags="scroll|enterAlways"
app:logo="#drawable/ic_arrow_back_white_24dp"
app:title="#string/app_name"
app:titleMarginStart="12dp" />
Option 1: Don't recommend:
Set title with space before your text. For example " Your title"
Option 2: Add your custom TextView under your Toolbar and you can custom this TextView in your xml layout or your activity class
For example:
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#0F6177"
app:popupTheme="#style/AppTheme.PopupOverlay" >
<TextView
android:id="#+id/text_toolbar_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left|center_vertical"
android:layout_marginLeft="5dp"
android:text="#string/app_name"
android:textColor="#android:color/white"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textStyle="bold" />
</android.support.v7.widget.Toolbar>
I am using the following setup to theme my toolbar in 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="wrap_content"
android:background="?attr/colorPrimaryDark"
android:elevation="4dp"
app:title="#string/app_name"
>
</android.support.v7.widget.Toolbar>
And in layout my_layout.xml:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
>
<include
app:title="#string/my.toolbar.title"
layout="#layout/toolbar"
>
</include>
</LinearLayout>
Unfortunately, the title of the toolbar does not get the value of my.toolbar.title.
http://developer.android.com/training/improving-layouts/reusing-layouts.html#Include suggest that you can override any android: attributes but what about app: .
Note: I have also tried to use android:title instead of app:title and still no success.
Any ideas?
You can do it programmatically:
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
getSupportActionBar().setTitle("Your title");
You will want to use the <merge> tag around the toolbar, that will allow you to use the tags that you would use on the toolbar in the include tag.
Included in my activity_main.xml's DrawerLayout is a CoordinatorLayout called content_layout.xml. Within this CoordinatorLayout is my AppBarLayout containing a Toolbar, then a LinearLayout for a fragment's content.
When a fragment containing a RecyclerView is scrolled up, the toolbar exits successfully. The problem lies when scrolling down to bring the toolbar back. The toolbar does not appear until the full height of the toolbar has been scrolled and as such leaves an unsightly white box in its place as shown.
content_layout.xml
<android.support.design.widget.CoordinatorLayout
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/container_frame"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
</android.support.design.widget.AppBarLayout>
<!-- The main content view for fragments-->
<LinearLayout
android:id="#+id/content_frame"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
</android.support.design.widget.CoordinatorLayout>
The toolbar is initialized via MainActivity's onCreate():
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
getSupportActionBar().setHomeButtonEnabled(true);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
I would appreciate any suggestions as to resolving this. Thank you.
I was having this same issue and the only thing I found that solved it was by having something else other than the toolbar inside the AppBarLayout. I placed an invisible view in my layout underneath the toolbar. Not the most ideal solution, but it worked.
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
<View
android:id="#+id/appbar_bottom"
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#android:color/transparent"
android:visibility="invisible"/>
</android.support.design.widget.AppBarLayout>