Actual result: The status bar appears over the action bar Toolbar and the MenuItem inside the action bar is cut off. Note: "Test" is the action bar's title.
Expected result:
The top bound of the action bar Toolbar should appear directly below the bottom bound of the status bar and any MenuItems inside the action bar should be completely visible.
Activity's XML layout:
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/layout_root"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/image_background"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:src="#drawable/background"
tools:ignore="ContentDescription"/>
<android.support.v7.widget.Toolbar
android:id="#+id/action_bar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#android:color/transparent"
android:fitsSystemWindows="true"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"/>
</FrameLayout>
The action bar title and MenuItem are added at runtime.
#Override
protected void onCreate(#Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.test);
setSupportActionBar((Toolbar) findViewById(R.id.action_bar));
ActionBar actionBar = getSupportActionBar();
assert actionBar != null;
actionBar.setDisplayHomeAsUpEnabled(false);
actionBar.setTitle("Test");
}
#Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.menu_test, menu);
return true;
}
Before I added fitsSystemWindows="true" to the Toolbar view, the status bar still overlayed the action bar, but the 'SKIP' MenuItem was vertically centered in the action bar, causing it to appear partially underneath the status bar. I expected the fitsSystemWindows=true flag to give me my expected result (mentioned above), but it did not. It's as if fitsSystemWindows="true" correctly positioned the 'SKIP' button but did not adjust the position of the action bar itself. Anyone know what might be the issue here?
EDIT: I realize that I could remove fitsSystemWindows="true" and add a marginTop="...statusBarHeight" to the Toolbar view, but I am looking for the a cleaner way to solve this.
My issue was due to me setting the Toolbar's layout_height to ?attr/actionBarSize. I originally thought that fitsSystemWindows repositions the Toolbar, but it appears to add a padding instead. So when top padding is added to the Toolbar, the Toolbar's contents are pushed down. Since the Toolbar's height is fixed, the contents are pushed below the lower bound of the container. I ended up setting ?attr/actionBarSize as the value for the Toolbar's minHeight attribute to solve this. Below is my updated Toolbar:
<android.support.v7.widget.Toolbar
android:id="#+id/action_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
android:background="#android:color/transparent"
android:fitsSystemWindows="true"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"/>
Caveat: This works if you aren't wanting to show anything directly below the action bar since the action bar's height, for one reason or another, is about twice the height that it needs to be to contain a single line of the home icon, title, and/or menu items. If anyone knows a way to achieve a non-overlapping status bar AND a normal size action bar, please share your insight. I would be forever grateful.
Caveat update: Okay. So apparently my action bar was receiving extra, bottom padding equivalent to the height of the navigation bar because I set <item name="android:windowTranslucentNavigation">true</item> on my Activity's theme. I verified this by removing the windowTranslucentNavigation attribute. I am testing this on a 7.1 Pixel using Android Support Libraries v25.1.1.
Try to move your Toolbar into AppBarLayout.
Like this:
<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/action_bar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#android:color/transparent"
android:fitsSystemWindows="true"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"/>
<AppBarLayout/>
I am using flags to make activity fullscreen and my style is NoActionBar.
If i set fitsSystemWindows=true to toolar or parent layout, activity content size changed because of navigation bar and status bar.
I wrapped ToolBar with AppBarLayout like in Twinkie_Monkey's answer and I set fitsSystemWindows=true to AppBarLayout and it worked.
Related
[UPDATE BELOW]
I'm trying to change the title in the default title bar after clicking an item in the RecyclerView which is inside onLoadFinished (AsyncTaskLoader) but title doesn't change. The idea is when I tab an item in the RecyclerView and data is loaded, title bar text should be changed too but it doesn't.
catsRecyclerView.addOnItemTouchListener(new RecyclerTouchListener(this, catsRecyclerView,new RecyclerTouchListener.ClickListener() {
#Override
public void onClick(View view, int position) {
Categories category = categories.get(position);
int catId = category.getId();
setTitle(category.getTitle());
drawerLayout.closeDrawer(GravityCompat.START);
commonActions(); //restarting loader and executing other methods
}
#Override
public void onLongClick(View view, int position) {
}
}));
When I log category.getTitle() I get the correct text but title doesn't change how can I achieve that?
[Update]
Replaced the default title bar with a custom action bar here's the layout of the activity:
<android.support.v4.widget.DrawerLayout 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/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:openDrawer="start">
<include layout="#layout/actionbar"/>
<android.support.design.widget.NavigationView
android:id="#+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true"
app:headerLayout="#layout/nav_header_main"
>
<android.support.v7.widget.RecyclerView
android:id="#+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scrollbars="vertical" />
</android.support.design.widget.NavigationView>
</android.support.v4.widget.DrawerLayout>
The actiobar layout
<android.support.v7.widget.Toolbar
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="40dp"
android:background="#color/colorPrimary"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
android:id="#+id/primaryToolbar">
</android.support.v7.widget.Toolbar>
The activity
toolbar = findViewById(R.id.primaryToolbar);
setSupportActionBar(toolbar);
setTitle("My new title");
getSupportActionBar().setDisplayOptions(ActionBar.DISPLAY_SHOW_TITLE);
But it's size is so large taking the whole screen
I think the problem is in the listener. When I attach a listener to recycler view I do it throughout Using interface in adapter, this blog shows the way, also check out this StackOverflow answer in which and example is provided.
You have to enable the action bar to setTitle() by setting the following flag.
getSupportActionBar().setDisplayOptions(ActionBar.DISPLAY_SHOW_TITLE);
The above code works for AppCompatActivity.
I had 2 issues. The first one is about not changing the title of the titlebar after tabbing an item in the RecyclerView to reload the AsyncTaskLoader. The problem is there's another setTitle in the Loader function in addition to onLoadFinished so I removed it and kept the one inside onLoadFinished and now it's working fine so there's no need to replace the default title bar with the action bar.
The second issue when I tried to add the action bar, the title was taking the whole screen as you see in the image because there are 2 elements in the root view which are the actionBar and the NavigationView which made the actionBar the actual content that's why it was resized to take the whole screen. So i placed it inside a LinearLayout and the actual content goes below it that fixed the second problem
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.
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 problems with implementing this guidelines in Kitkat. On Lollipop everything looks ok:
But on Kitkat Toolbar does not have any top padding:
I can fix this with https://github.com/jgilfelt/SystemBarTint library using:
SystemBarTintManager.SystemBarConfig config = tintManager.getConfig();
mainView.setPadding(0, config.getPixelInsetTop(false), config.getPixelInsetRight(), config.getPixelInsetBottom());
But I feel that I'm doing something wrong. Do you have any good practices how to achieve this effect on KitKat?
Move current layout resource in layout-v21 folder to have it as it is on the first screenshot. Then try to create new layout resource that will have just a placeholder view of same height of the status bar
Hierarchy should be following:
--Top layout
--<view layout_height="25dip"...>
-- Toolbar
-- the rest of the views
Using view аbove your Toolbar, will not push it behind the status bar, as it is on second screenshot and will mimick the padding you are trying to achieve
Do you have fitsSystemWindow set to true? Setting it to false will bring the toolbar back under the status bar.
The effect you see for Kitkat is because you have translucent status bar set and fitting to System Window goes underneath it.
For example, in your layout XML file:
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/white"
android:fitsSystemWindows="false">
<android.support.v7.widget.Toolbar
android:background="#color/blue"
android:layout_width="match_parent"
android:layout_height="?android:attr/actionBarSize"
android:id="#+id/action_bar"/>
<!-- YOUR CONTENT HERE -->
<!-- YOUR NAVIGATION VIEW HERE -->
</android.support.v4.widget.DrawerLayout>
I am using the new Android 4.4 FLAG_TRANSLUCENT_NAVIGATION flag to turn the navigation bar (back, home button etc) at the bottom of the screen translucent. This works fine but a side effect of this is the layout of my Activity now displays beneath the status bar at the top of the screen (even though I have not set the status bar as being translucent). I want to avoid a hacky fix I.e. applying padding to the top of the layout.
Is there a way to set the navigation as translucent whilst ensuring the status bar appears normally and does NOT allow the layout to display beneath it?
The code I am using is as follows:
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
Window w = getWindow();
w.setFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION, WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);
}
Thanks
ianhanniballake's answer actually works, but you shouldn't use android:fitsSystemWindows="true" on the toplevel view. Use this property as following :
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#color/colorPrimaryDark">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#ffffff"
android:fitsSystemWindows="true">
<!-- Your other views -->
</LinearLayout>
</LinearLayout>
As you can see, you have to set the color on the top-level view, and put the property on another container.
Add android:fitsSystemWindows="true" to your top level view - android:fitsSystemWindows will automatically resize the view to take into account the system windows such as the status bar.