After creating a Navigation Drawer activity in my Android Studio project I want to add a search view into the toolbar instead of my app name. How do I do it? Can the toolbar be customized based on my needs or creation of custom toolbar is required?
If you have selected Navigation Drawer activity while creating new project Android studio would have by default created the file app_bar_main.xml file
You should be able to find the below code given by default
<android.support.v7.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" />
Replace the above code with below code to get search view within toolbar
<android.support.v7.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">
<SearchView
android:layout_width="match_parent"
android:layout_height="wrap_content" /></android.support.v7.widget.Toolbar>
Related
Right now, as an example, the app looks like this:
How do I programatically or using xml make the appbar look like this:
I've tried setting the appbar icon as if it were a background, but it looks rather odd.
You can add the application icon as a menu item to appbar with android:show="always".
Another workaround is to place an imageView in your toolbar, which is inside the appBar. You can then change the position of this imageview through xml code or programmatically.
<android.support.design.widget.AppBarLayout
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="?actionBarSize"
android:background="?attr/colorPrimary"
android:theme="#style/ToolbarColoredBackArrow"
app:popupTheme="#style/AppTheme.PopupOverlay" >
<ImageView
android:id="#+id/indicator"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="#dimen/margin_small"/>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
When I use the new Android Support Library 23.2 (specifically com.android.support:design:23.2.0), the toolbar used in the Android Studio implementation of Navigation Drawer pushes down the icons and title. Take a look:
With 'com.android.support:design:23.1.1'
With 'com.android.support:design:23.2.0'
My Navigation Drawer implementation is just the one generated by Android Studio, no custom changes.
Any clue how can I fix this?
Thanks in advance!
Update
Toolbar resource file (XML):
<?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:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context="net.sqoops.sqoops.activity.TimelineActivity">
<android.support.design.widget.AppBarLayout
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"
android:fitsSystemWindows="true"
android:background="?attr/colorPrimary"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
<include layout="#layout/content_timeline"/>
</android.support.design.widget.CoordinatorLayout>
Removing android:fitsSystemWindows="true" from the Toolbar tag should help.
That’s what the default behavior of the android:fitsSystemWindows=“true” attribute gives you: it sets the padding of the View to ensure the contents don’t overlay the system windows.
The quote above is from one of Android Development Patterns blogpost.
Added comment as answer as requested.
I m very new to android studio,first sorry for my bad English,I m using new version of android studio 1.4 version ,using default navigation drawer it working fine but action bar overlap my list content any body help me how to resolve this
app_bar_main
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context=".MainActivity">
<android.support.design.widget.AppBarLayout
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.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" />
here i draw a line for identification,when my activity start It will show like this ,action bar over lap my list without scrolling my fragment
Add android:paddingTop="?android:attr/actionBarSize" to your layout.
In pre-5.0 documentation there is an example that shows tabs inside the Action bar:
https://developer.android.com/guide/topics/ui/actionbar.html#Tabs
What is the correct way to achieve that in 5.0+ interface with new Toolbar?
Do I just place widget.TabLayout inside widget.Toolbar?
You can place the tablayout widget inside the toolbarwidget like
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:id="#+id/toolbar"
android:background="?attr/colorPrimary">
<android.support.design.widget.TabLayout
android:id="#+id/tabLayout"
android:layout_height="wrap_content"
android:layout_width="match_parent"/>
</android.support.v7.widget.Toolbar>
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.