I need to add an image to the navigation drawer toolbar/actionbar. A small round image that appears on the right of the menu icon and left of the activity title.
I also need to change the background of the toolbar/actionbar to my own custom image.
Is this possible and if yes how do I accomplish this in my android app?
For anyone confused, OP is using Android Studio's NavigationView Activity and not an Empty Activity.
Image to the right of the Hamburger menu icon and to the left of the Title is achieved like this:
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
if (getSupportActionBar() != null) {
getSupportActionBar().setDisplayShowTitleEnabled(false); // hide built-in Title
// Setting background using a drawable
Drawable toolbarBackground = getResources().getDrawable(R.drawable.ic_menu_gallery);
getSupportActionBar().setBackgroundDrawable(toolbarBackground);
}
Now that we've hidden the title, we're going to add our own title TextView and icon ImageView to the toolbar, this would be your app_bar_main.xml layout (res/layout).
<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">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/my_custom_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_menu_share"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="My Custom Title"
android:id="#+id/my_custom_title"
android:layout_toRightOf="#id/menu_icon"/>
</RelativeLayout>
</android.support.v7.widget.Toolbar>
Now, you can reference my_custom_title and my_custom_icon and add whatever title and icon you want (you may have to tinker with the layout, I'm just pointing you in the right direction).
TextView myCustomTitleTV = (TextView) findViewById(R.id.my_custom_title);
myCustomTitleTV.setText("My Custom Title");
Related
I am writing an AccessibilityService, which opens a fullscreen view via the WindowManager on a certain event. I am currently designing the view to be opened. I'd like to add a navigation bar at the top of this view, as it is automatically added by Android Studio when you create an empty activity, for example. This navigation bar should not contain any buttons or the like. However, it should have exactly the same size as it is given to a default activity by Android or Android Studio. Below is the result I would like to have. I don't know with which xml element I can add this bar/navigation bar.
Just add this code to your activity :
<android.support.v7.widget.Toolbar
android:id="#+id/my_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
style="#style/HeaderBar"
app:theme="#style/ActionBarThemeOverlay"
app:popupTheme="#style/ActionBarPopupThemeOverlay"
android:elevation="4dp"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="DataCollector"
android:id="#+id/toolbar_title" />
</toolbar>
And then in your activity in onCreate() method add this :
private Toolbar mTopToolbar;
mTopToolbar = (Toolbar) findViewById(R.id.my_toolbar);
setSupportActionBar(mTopToolbar);
I am using right to left support for my app. I have a custom arrow set to toolbar as the navigation icon. When I switch to arabic language, everything aligns to right including the toolbar custom navigation arrow. But the problem is the custom navigation icon is not flipping, that is it should be pointing to the right instead of left(default). This works fine with the default indicator if I dont specify any navigation icon. Have anyone encountered this?
Any solution?
Here is my code for the toolbar
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/white"
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"
app:contentInsetStartWithNavigation="0dp"
app:elevation="0dp"
app:navigationIcon="#drawable/ic_back"
app:popupTheme="#style/AppTheme.PopupOverlay"
app:logo="#drawable/ic_logo"
android:gravity="center_vertical|start"
>
in Activity
Toolbar toolbar = (Toolbar) findViewById(R.id.tb_venue_filter);
setSupportActionBar(toolbar);
setDisplayHomeAsUpEnabled(true);
If you are on android API 21+, you can just flip your icon by adding android:autoMirrored="true" to your vector icon or layer-list XML icon, this will alleviate the hasle of adding it to every toolbar manually, but if you want to support 21- versions you will have to go with the accepted answer.
This is a feature of the Drawable, not so much the Toolbar.
Try with:
toolbar.getNavigationIcon().setAutoMirrored(true);
Hi am developing an android application which has a toolbar and hamburger icon to open drawer. I have written below to implement toolbar.
xml file:
<android.support.v7.widget.Toolbar>
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorPrimary"
android:minHeight="?attr/actionBarSize">
</android.support.v7.widget.Toolbar>
Java file:
Toolbar toolbar = (Toolbar) view.findViewById(R.id.toolbar);
((AppCompatActivity)getActivity()).setSupportActionBar(toolbar);
((AppCompatActivity)getActivity()).getSupportActionBar().setDisplayHomeAsUpEnabled(true);
((AppCompatActivity)getActivity()).getSupportActionBar().setHomeButtonEnabled(true);
When I click on drawer layout, fragment opens and hamburger button changes to back arrow button.
I don't want this back arrow button. I want that irrespective of which fragment is selected there should always be hamburger icon.
remove this if you don't want any icon:
((AppCompatActivity)getActivity()).getSupportActionBar().setDisplayHomeAsUpEnabled(false);
If you want to set custom icon then add this:
((AppCompatActivity)getActivity()).getSupportActionBar().setHomeAsUpIndicator(R.mipmap.backarrow);
Set your icon in the toolbar, the example is using the default arrow:
mToolbar.setNavigationIcon(R.drawable.abc_ic_ab_back_material);
And to hide, and show:
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
I'm using the AppCompat toolbar, and for the most part its great. However, dealing with the title has been a nightmare. It's set to the app name by default, and I cannot find a way to hide it.
I was trying to hide it so that I can add my own textview so that I could properly align the title text to the top currently its left-aligned but vertically centered. I could not figure out how to position it where it would be normally if I didn't make my toolbar height longer than usual.
How have you guys been managing the toolbar? How can I align the title text to be at the top position where the title's normally are?
Edit: I've added a screenshot of what it looks like. I'm trying to keep my project private for now so I erased any identifying elements. But notice that the D (which is the title) is not aligned to the top.
If you have set your toolbar as action bar setSupportActionBar(toolbar);
then you can sipmly disable the title by using
getSupportActionBar().setDisplayShowTitleEnabled(false);
and add a textview as your Title in your toolbar layout as toolbar is also a view. See following
<LinearLayout
android:id="#+id/toolbar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<android.support.v7.widget.Toolbar
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/material_blue"
android:elevation="5dp"
android:minHeight="?attr/actionBarSize"
android:theme="#style/ThemeOverlay.AppCompat.Dark"
app:theme="#style/ToolbarCustomIconColor" >
<TextView
android:id="#+id/textview_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:gravity="center"
android:text="#string/app_name"
android:textColor="#android:color/white" />
</android.support.v7.widget.Toolbar>
</LinearLayout>
This way you can arrange your title anywhere and customize accordingly.
You are using ToolBar from support v7 AppCompat
after that set that toolbar as action bar and then set action bar title for simple title or you want to set your custom layout inside toolbar then same as we are doing in action bar hence.. now your toolbar work as a actionbar..
See below example from ActionBarActivity..
mToolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(mToolbar);
getSupportActionBar().setTitle("Your Title");
Now if you do anything with action bar related methods it is ultimately affected in ToolBar.
to change Toolbar title try this
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
getSupportActionBar().setTitle("Text");
for custom layout for Toolbar try this
getSupportActionBar().setDisplayOptions(ActionBar.DISPLAY_SHOW_CUSTOM);
getSupportActionBar().setCustomView(R.layout.actionbar); //replace with your custom toolbar title
I've been working in material design using the latest Toolbar Widget provided in AppCompact-V21, with the navigation drawer.
My concern is How can I set navigation drawer icon to right side of the toolbar.
Although I can open navigation drawer from right by setting the android:layout_gravity="right" but navigation icon still appears to be on left side in toolbar.
When Using old Action Bar, I can crate custom action bar with button to right side with custom drawer icon and on click of custom navigation drawer icon open/close the drawer.
What is way to set navigation drawer icon on right side using toolbar ?
How to create custom view for it ?
Well, to customize toolbar and setting your own navigation button, you can add your own imagebutton to the toolbar :
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/toolbar"
android:minHeight="?attr/actionBarSize"
android:layout_height="?attr/actionBarSize"
android:layout_width="match_parent" >
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end"
android:onClick="backButtonHandler"
android:background="#drawable/ic_launcher" />
</android.support.v7.widget.Toolbar>
Then, you can define your backButtonHandler(View v) in your activity class, and add functionality as desired.
I want to move ActionBarDrawerToggle from left to right and I am using appcompat 21 support library.
I haven't found a solution for this. It seems that we need to create a custom item in actionbar/toolbar as Abhinav Puri suggested.
You said you don't know how to add a custom view to your toolbar, hope this helps you or anybody who is fighting with this problem:
toolbar = (Toolbar) findViewById(R.id.toolbar);
if (toolbar != null) {
setSupportActionBar(toolbar);
}
actionBar = getSupportActionBar();
actionBar.setDisplayHomeAsUpEnabled(true);
actionBar.setHomeButtonEnabled(true);
actionBar.setDisplayShowHomeEnabled(true);
actionBar.setDisplayShowCustomEnabled(true);
ActionBar.LayoutParams layoutParams = new ActionBar.LayoutParams(
LayoutParams.WRAP_CONTENT, LayoutParams.MATCH_PARENT);
layoutParams.gravity = Gravity.RIGHT;
actionBar.setCustomView(
getLayoutInflater().inflate(R.layout.custom_top_bar, null),
layoutParams);
ImageButton rightToggle =(ImageButton) toolbar.findViewById(R.id.rightToggle);
rightToggle.setOnClickListener(new OnClickListener() {
#Override
public void onClick(View v) {
if (mDrawerLayout.isDrawerOpen(Gravity.RIGHT)) {
mDrawerLayout.closeDrawer(Gravity.RIGHT);
} else {
mDrawerLayout.openDrawer(Gravity.RIGHT);
}
}
});
custom_top_bar.xml:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/rightLayout"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="horizontal" >
<ImageButton
android:id="#+id/rightToggle"
android:layout_width="?attr/actionBarSize"
android:layout_height="?attr/actionBarSize"
android:src="#drawable/ic_launcher" />
</LinearLayout>
You can do that very easily if you know how it works.
Most android drawers use the application's home button as a drawer button, this button's gravity cannot be changed,
All you have to do is to assign to the drawer button another button that you create yourself in the action bar (menu button), you give it an icon and an action in the onOptionsItemSelected.
if (item.getItemId() == android.R.id.home) {
if(mDrawerLayout.isDrawerOpen(mLinearLayout)) {
mDrawerLayout.closeDrawer(mmLinearLayout);
}
else {
// open the drawer
}
}
you will have approximately the same code as this, change the android.R.id.home by the button's Id I've talked about above.