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);
Related
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");
I would like to have two search views inside a toolbar in one of my activities: the first for looking up the place of interest and the second for filtering by location.
The searchViews would be on top of each other always expanded. The top one would say "Search" as the hint. The bottom one would say "Nearby" as the hint. To the left would be the home button.
I have come up with two ways that could potentially work but I have encountered problems in both and I don't know how to resolve them.
First Solution (Current)
Here I have a linear layout and inside is a android.support.v7.widget.Toolbar, a view, and followed by a second Toolbar.
This is essentially what I want it to look like but the problem is that changing the hint text in onCreateOptionsMenu changes BOTH hints. I would like the top to say "Search" and the bottom to say "Nearby". It seems that because there are two toolbars, onCreateOptionsMenu affects both of them.
Code:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/search_container"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:orientation="vertical">
<android.support.v7.widget.Toolbar
android:id="#+id/search_toolbar"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:minHeight="?attr/actionBarSize"
android:theme="#style/ThemeOverlay.AppCompat.ActionBar">
</android.support.v7.widget.Toolbar>
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_marginLeft="72dp"
android:background="#90909090"/>
<android.support.v7.widget.Toolbar
android:id="#+id/search_toolbar2"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:minHeight="?attr/actionBarSize"
app:contentInsetStart="56dp"
android:theme="#style/ThemeOverlay.AppCompat.ActionBar">
</android.support.v7.widget.Toolbar>
<include
layout="#layout/toolbar_action_bar_shadow"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"/>
</LinearLayout>`
onCreate:
Toolbar toolbar2 = (Toolbar) findViewById(R.id.search_toolbar2);
setSupportActionBar(toolbar2);
Toolbar toolbar = (Toolbar) findViewById(R.id.search_toolbar);
setSupportActionBar(toolbar);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
getSupportActionBar().setDisplayShowHomeEnabled(false);
getSupportActionBar().setDisplayShowTitleEnabled(false);
OnCreateOptionsMenu:
SearchView searchViewTop = (SearchView) MenuItemCompat.getActionView(menu.findItem(R.id
.search_top));
SearchManager searchManager1 = (SearchManager) getActivity().getSystemService(Context
.SEARCH_SERVICE);
searchViewTop.setSearchableInfo(searchManager1.getSearchableInfo(getActivity()
.getComponentName()));
searchViewTop.setIconified(false);
searchViewTop.onActionViewExpanded();
searchViewTop.setQueryHint("Nearby");
Second Solution (Old)
The second method involves putting a searchView instead of a second toolbar in the xml file. Although the second searchview isn't inside the toolbar, it can be made to look like it is. The problem I encountered with this is that the searchView not inside the toolbar looks different from the searchView inside the toolbar and how I would like it. When not inside the toolbar, the hint text is aligned further to the right and not directly underneath the top hint text. Any new text entered inside the searchview would be aligned correctly however. I tried customizing the style of the searchview to align it properly but was unable to find a correct method.
I was wondering if there is a way to correct either of my methods to make it work or if there is a new way to setup these two searchViews. Thanks.
I realized that when you call setSupportActionBar() for more than one toolbar, changes in onCreateOptionsMenu affect all the toolbars added. To solve this problem, I just called setSupportActionBar only on my top toolbar. For the bottom toolbar, I called in onCreate
toolbar2.inflateMenu(R.menu.search2);
SearchView searchViewBottom = (SearchView)findViewById(R.id.search_bottom);
searchViewBottom.onActionViewExpanded();
Then handle all actions inside with setOnMenuItemClickListener.
Hi, i´m making an app and i want to add an activity just like the image above, and i´m having difficulties extendin the action bar, i´ve seen this on google design guidelines, how do i implement this on android lollipop(my min sdk is 21 i´m not interested in backwards compatibility)
thanks in advance.
It can be done by using Collapsing Toolbars which is provided in the android design support library and here is an example for knowing for using that library.
If you don't want a CollapsingToolbar , you can use a simple Toolbar using a custom minHeight.
Inside the Toolbar you can put your views, for example TextView or TextInputLayout.
Finally use a FloatingActionButton. It is important to set the attributes
app:layout_anchorand app:layout_anchorGravity
<android.support.design.widget.CoordinatorLayout>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar_main"
android:layout_width="match_parent"
android:layout_height="256dp"
android:minHeight="?attr/actionBarSize"
android:theme="#style/ToolbarMainTheme" >
<android.support.design.widget.TextInputLayout>
<TextView>
</android.support.v7.widget.Toolbar>
<!-- your scrollable view here -->
<android.support.design.widget.FloatingActionButton
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:borderWidth="0dp"
app:elevation="4dp"
app:pressedTranslationZ="6dp"
android:layout_marginRight="#dimen/fab_margin_card"
android:src="#drawable/ic_youricon"
app:layout_anchor="#id/toolbar_main"
app:layout_anchorGravity="bottom|right|end" />
</android.support.design.widget.CoordinatorLayout>
You just need to add an EditText and several TextViews (or wrap the EditText in a TextInputLayout) into the Toolbar in your layout xml.
https://gist.github.com/chris95x8/53214de145571d410e13
I want to include a drop down menu to android action bar like in the Google Maps app. I don not want to include any third party libraries such as actionbarsherlock since I believe we can do this using android SDK.
You can use a toolbar from the AppCompat library to act as your actionbar and then add a spinner within the toolbar because toolbar acts like a regular layout where you can add views within it.
here is a sample:
<android.support.v7.widget.Toolbar
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:minHeight="#dimen/triple_height_toolbar"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" >
<Spinner
android:id="#+id/planets_spinner"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
</android.support.v7.widget.Toolbar>
And finding the spinner within the toolbar is calling the findViewById within the toolbar.
toolbar = (Toolbar) findViewById(R.id.tool_bar);
Spinnertitle = (Spinner)toolbar.findViewById(R.id.toolbar_title);
Link Here is how to add a toolbar in your application
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" />