Hi I have implemented the toolbar with translucent statusbar set to true. The textview in the toolbar is appearing correctly after padding the status bar height in "onCreate" method. However, the menu items are not aligned properly as shown in the image.
It seems the padding shifted the toolbar correctly but somehow it affected the menu items. What could be the cause and how could we align the menu item in the toolbar with transparent statusbar?
Here is the toolbar in the layout:
<RelativeLayout 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:fitsSystemWindows="false"
android:orientation="vertical">
<android.support.v7.widget.Toolbar
android:id="#+id/main_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
android:background="#drawable/toolbar_bg">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Toolbar Title"
android:textColor="#color/white"
android:textSize="16dp"
android:layout_gravity="center"
android:id="#+id/toolbar_title" />
</android.support.v7.widget.Toolbar>
In the theme it was set the translucentStatus = true:
<style name="AppThemePink" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:windowTranslucentStatus">true</item>
<item name="android:windowTranslucentNavigation">true</item>
<item name="android:clipToPadding">true</item> ...
In the Activity, onCreate method:
mainToolBar = (Toolbar) findViewById(R.id.main_toolbar);
setSupportActionBar(mainToolBar);
mainToolBar.setPadding(0, Util2.getStatusBarHeight(this), 0, 0);
final ActionBar actionbar = getSupportActionBar();
actionbar.setDisplayShowTitleEnabled(false);
Related
I have main activity with NavigationDrawer Toolbar and BottomBar. Inside the activity is container for fragments. And the fragment has RecyclerView. So when user is scrolling, I want to hide the Toolbar and BottomBar accordingly. I did that using layout behavior on recycler app:layout_behavior="#string/appbar_scrolling_view_behavior" and layout scroll flags app:layout_scrollFlags="scroll|enterAlways|snap" on Toolbar. For BottomBar I'm using this library: https://github.com/roughike/BottomBar
The problem is, that when the Toolbar and BottomBar are scrolled off the view, they are still visible under the StatusBar and NavBar
My code:
STYLE:
<style name="TranslucentStatusTheme" parent="AppTheme">
<item name="android:windowTranslucentNavigation">false</item>
<item name="android:windowTranslucentStatus">true</item>
<item name="android:windowContentOverlay">#null</item>
</style>
MAIN ACTIVITY CONTENT:
<?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:id="#+id/app_bar_main_coordinator"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.test.activity.MainActivity"
>
<android.support.design.widget.AppBarLayout
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="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:background="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways|snap"
app:popupTheme="#style/AppTheme.PopupOverlay"
/>
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/bottomBar"
android:fitsSystemWindows="true"
/>
<com.roughike.bottombar.BottomBar
android:id="#+id/bottomBar"
android:layout_width="match_parent"
android:layout_height="#dimen/bottom_bar_menu_height"
app:bb_activeTabColor="#color/colorAccent"
app:bb_behavior="shifting|shy|underNavbar"
app:bb_inActiveTabColor="#color/bottom_bar_inactive_tab_color"
app:bb_tabXmlResource="#xml/bottombar_tabs"
app:layout_anchor="#id/container"
app:layout_anchorGravity="bottom"
android:layout_gravity="bottom"
/>
</android.support.design.widget.CoordinatorLayout>
AND IMAGES OF MY PROBLEM:
When no fitsSystemWindows flag is set - the toolbar is below stauts bar
When no fitsSystemWindows flag is set and content is scrolled - the toolbar is hide properly, but the bootom bar is still visible below nav bar
When fitsSystemWindows flag is set to root coordinator - the normal state looks ok
When fitsSystemWindows flag is set to root coordinator and content is scrolled - the status bar and bottom bare are visible below the transparent status bar and nav bar
Can anybody help me what I'm doing wrong? I already tried all possible combinations of fitsSystemWindows on different views.
EDIT:
I fixed the Toolbar below status bar issue, but I don't think that the solution is clean. I'm still looking for better one. And I still cannot solve the bottom bar issue
if (android.os.Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
toolbar.setPadding(0, getStatusBarHeight(), 0, 0);
}
.....
// A method to find height of the status bar
private int getStatusBarHeight() {
int result = 0;
int resourceId = getResources().getIdentifier("status_bar_height", "dimen", "android");
if (resourceId > 0) {
result = getResources().getDimensionPixelSize(resourceId);
}
return result;
}
To hide BottomBar on scroll, you need to set app:bb_behavior="shy"
<com.roughike.bottombar.BottomBar
android:id="#+id/bottomBar"
android:layout_width="match_parent"
android:layout_height="#dimen/bottom_bar_menu_height"
app:bb_activeTabColor="#color/colorAccent"
app:bb_behavior="shy"
app:bb_inActiveTabColor="#color/bottom_bar_inactive_tab_color"
app:bb_tabXmlResource="#xml/bottombar_tabs"
app:layout_anchor="#id/container"
app:layout_anchorGravity="bottom"
android:layout_gravity="bottom"
/>
I want to display both icon and title in the action bar of an Activity. Here is the screenshot of my app now:
Now I need the app logo be displayed to the left of MyApp text in the action bar. I have already tried the following code to set the logo but nothing happened:
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
getSupportActionBar().setLogo(R.drawable.ic_launcher_web);
getSupportActionBar().setDisplayUseLogoEnabled(true);
setContentView(R.layout.activity_main);
}
I just tried with your code, and this works.
getSupportActionBar().setDisplayShowHomeEnabled(true);
getSupportActionBar().setIcon(R.mipmap.ic_launcher);
Make sure your parent theme is set to Theme.AppCompat.Light.NoActionBar.
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
</style>
You can make a new layout for Action bar and you could implement in main activity
Create new Layout
<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:minHeight="60dp"
android:id="#+id/topHeaderNav"
android:background="#color/primary"
android:layout_height="60dp"
tools:showIn="#layout/activity_main">
<ImageView
android:layout_width="50dp"
android:maxHeight="75dp"
android:maxWidth="75dp"
android:id="#+id/imgTop"
android:layout_centerVertical="true"
android:src="#drawable/mag"
android:layout_height="wrap_content" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/topTitleText"
android:layout_toRightOf="#id/imgTop"
android:layout_centerVertical="true"
android:layout_marginLeft="10dp"
android:textSize="20sp"
android:text="Magnetic Orange"
android:textColor="#FFFFFF"
/>
and implement it in Main Layout
`<include layout="#layout/navbar"
android:id="#+id/topHeaderNavMainActivity"
/>`
I think it will help you
if your require to customize a action bar then use costume layout in action bar, following was the code which explain how customize the action bar,
In your activity put this code onCreate method
getSupportActionBar().setDisplayOptions(ActionBar.DISPLAY_SHOW_CUSTOM | ActionBar.DISPLAY_SHOW_HOME);
LayoutInflater inflator = LayoutInflater.from(this);
View v = inflator.inflate(R.layout.actionbar_layout, null); //hear set your costume layout
getSupportActionBar().setCustomView(v);
getSupportActionBar().setDisplayShowCustomEnabled(true);
getSupportActionBar().setBackgroundDrawable(new ColorDrawable(Color.parseColor("#8731a0")));
it is the code which activiy inherit AppCompatActivity or if you are inheriting activity then replace getSupportActionBar() with getActionBar() and use.
getSupportActionBar().setDisplayShowHomeEnabled(true);
getSupportActionBar().setDisplayShowTitleEnabled(true);
Fist of all be sure you have used style with NoActionBar
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
</style>
Set up your toolbar in onCreate() and be sure it's V7
Toolbar toolbar = (android.support.v7.widget.Toolbar) findViewById(R.id.toolbar);
toolbar.setLogo(R.drawable.ic_launcher);
setSupportActionBar(toolbar);
Your toolbar in xml looks like
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="60dp"/>
And use those methods you have previously tried. This will work.
private ViewGroup actionBarLayout;
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_home_screen);
context = this;
actionBarLayout = (ViewGroup) getLayoutInflater().inflate(R.layout.custom_actionbar, null);
actionBarLayout.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT));
// Set up your ActionBar
/* final ActionBar actionBar = getActionBar();*/
getSupportActionBar().setDisplayShowHomeEnabled(false);
getSupportActionBar().setDisplayShowTitleEnabled(false);
getSupportActionBar().setDisplayShowCustomEnabled(true);
getSupportActionBar().setCustomView(actionBarLayout);
getSupportActionBar().setBackgroundDrawable(new ColorDrawable(getResources().getColor(R.color.green)));
init();
event();
}
and used following style.
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/green</item>
<item name="colorPrimaryDark">#color/green</item>
</style>
Try Custom ActionBar.
custom_actionbar.xml
Layout XML
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:clickable="true"
android:background="#ffffff">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:layout_alignParentBottom="true"
android:weightSum="1">
<ImageView
android:layout_width="50dp"
android:layout_height="match_parent"
android:layout_marginLeft="15sp"
android:background="#drawable/emaact"
android:layout_alignParentBottom="true"
android:layout_margin="10dp"
android:id="#+id/imageView"/>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_gravity="right">
<TextView
android:layout_width="75dp"
android:layout_height="match_parent"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="Project"
android:layout_gravity="center_vertical"
android:textSize="20sp"
android:id="#+id/textView" android:gravity="center_vertical"
android:textStyle="bold"/>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="0.99"
android:weightSum="1">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/txttitle"
android:text="title"
android:textStyle="normal"
android:textSize="20sp"
android:gravity="center"
android:layout_weight="1.06"/>
</LinearLayout>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/menuline"
android:layout_margin="10dp"
android:id="#+id/slidingmenu"
android:layout_gravity="center_vertical"/>
</LinearLayout>
</RelativeLayout>
In Your MainActivity, Use This code.
MainActivity.java
public void customBar(){
ActionBar actionBar = getSupportActionBar();
actionBar.setDisplayShowHomeEnabled(false);
actionBar.setDisplayShowTitleEnabled(false);
LayoutInflater inflater = LayoutInflater.from(this);
View customView = inflater.inflate(R.layout.custom_actionbar, null);
TextView text =(TextView) customView.findViewById(R.id.txttitle);
text.setText("Home");
ImageView menus =(ImageView) customView.findViewById(R.id.slidingmenu);
actionBar.setCustomView(customView);
actionBar.setDisplayShowCustomEnabled(true);
}
Your Action Bar looks like...
Custom ActionBar
This is the issue I am encountering
On pre-lollipop devices I have the following issue
On Lollipop and Marshmallow devices everything appears fine
I am trying to create the translucent status bar effect when opening the navigation drawer.
On Marshmallow and lollipop devices this is working fine.
Here is my code
activity_base.xml
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/drawerLayout"
android:fitsSystemWindows="true"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<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:theme="#style/ToolbarStyle"
app:theme="#style/ToolbarStyle" />
<FrameLayout
android:id="#+id/activity_content"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
<include layout="#layout/view_navigation_drawer_layout" />
</android.support.v4.widget.DrawerLayout>
view_navigation_drawer_layout.xml
<android.support.design.widget.NavigationView
android:id="#+id/navigation"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<include layout="#layout/nav_header" />
<ListView
android:id="#+id/lst_menu_items"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
</LinearLayout>
</android.support.design.widget.NavigationView>
Note that I do the above because of the answer to this question NavigationView and custom Layout
Notice that both layouts have the android:fitsSystemWindows="true"
I thought maybe its because I include the layout so I tried copying the whole layout into the activity layout. Did not help
I also have this styles xml file in my values-v19 directory (for KitKat and above)
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="AppTheme" parent="MaterialDesign">
<item name="android:windowTranslucentStatus">true</item>
</style>
</resources>
I made a solution to this issue. However, my solution requires a BaseActivity that hijacks the layout as stated in this blog post http://mateoj.com/2015/06/21/adding-toolbar-and-navigation-drawer-all-activities-android/
here is my code
public class BaseActivity extends AppCompatActivity {
#Override
public void setContentView(int layoutResID) {
ViewGroup baseView = (ViewGroup) getLayoutInflater().inflate(R.layout.activity_base_with_drawer);
FrameLayout activityContainer = (FrameLayout) baseView.findViewById(R.id.activity_content);
getLayoutInflater().inflate(layoutResID, activityContainer, true);
super.setContentView(layoutResID);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
if (useToolbar()) { //Does the activity have a toolbar?
toolbar.setFitsSystemWindows(true); //toolbar will stretch underneath the status bar and because it naturally has a semi translucent background, it will assume a darker color of the toolbar which is usually the color primary.
setSupportActionBar(toolbar); //Set the toolbar
ActionBar actionBar = getSupportActionBar();
if (actionBar != null) {
actionBar.setDisplayHomeAsUpEnabled(true);
}
} else {
toolbar.setVisibility(View.GONE);
activityContainer.setFitsSystemWindows(true); //No toolbar so we set the container to have the fitsSystemWindow attribute to ensure contents do not overlay the system window such as status bar and navigation bar.
TypedValue outValue = new TypedValue();
boolean doesThemeHaveTranslucentWindow = getTheme().resolveAttribute(android.R.attr.windowIsTranslucent, outValue, true); //Check if the current activity theme has translucent window, this includes SearchActivity
if (!doesThemeHaveTranslucentWindow) { //If it does not then set the container background to colour primary to have the same effect as the toolbar being there and avoid a white status bar. We do not want to do this for translucent windows otherwise they would not be see through
activityContainer.setBackgroundColor(ContextCompat.getColor(this, R.color.colorPrimary));
}
}
}
And this is the layout
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/drawerLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<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:theme="#style/ToolbarStyle"
app:theme="#style/ToolbarStyle" />
<FrameLayout
android:id="#+id/activity_content"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
<include layout="#layout/view_navigation_drawer_layout" />
</android.support.v4.widget.DrawerLayout>
FitsSystemWindows is no longer set in any of the XML layouts. This is done in the setContentViewMethod of the BaseActivity class.
If the activity does not have a toolbar, the activity container has the fitsSystemWindow attribute set to true otherwise, the toolbar has it applied.
If the activity does not have a toolbar, its container layout has a background colour set to the colour primary.
Why I do this is because when you set fitsSystemWindows on your toolbar it stretches underneath the status bar and because the status bar naturally has a semi translucent background, it will assume a darker color of the toolbar which is usually the color primary so we do this for the activity container to have the same effect.
Now there is a use-case I had in my app where I had an activity with a transparent window background which I check. If not true, the activity container has this colour set.
Not sure if its the best solution but its working well for me so far on Marshmallow, pre-lollipop and pre-KitKat too :P . Hope it helps out others.
I am adding toolbar with PreferenceActivity using following code:
<?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_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/actionbar_color"
android:minHeight="?attr/actionBarSize"
android:paddingTop="0dp"
app:navigationContentDescription="#string/abc_action_bar_up_description"
app:navigationIcon="?attr/homeAsUpIndicator"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:theme="#style/Base.ThemeOverlay.AppCompat.Dark.ActionBar" />
Code Snippet:
LinearLayout root = (LinearLayout) findViewById(android.R.id.list).getParent().getParent().getParent();
Toolbar bar = (Toolbar) LayoutInflater.from(this).inflate(R.layout.app_bar_settings, root, false);
root.addView(bar, 0); // insert at top
It is successfully showing the Toolbar with PreferenceActivity
but actionbar up arrow, title and action overflow button is black in color, according to my Theme app:theme="#style/Base.ThemeOverlay.AppCompat.Dark.ActionBar
these should be white in color. How do i solve this issue.
By accessing navigation icon from toolbar we can change color
toolbar.getNavigationIcon().setColorFilter(color, PorterDuff.Mode.SRC_IN);
if it's not working try this
toolbar.getNavigationIcon().mutate().setColorFilter(color, PorterDuff.Mode.SRC_IN);
I am trying to use Appcompat Toolbar based actionBar
Here is my toolbar.xml
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="bottom"
android:paddingBottom="0dp"
android:background="?attr/colorPrimaryDark">
</android.support.v7.widget.Toolbar>
I am including this in my activity.xml file.
And then in my Activity's OnCreate method, I am setting a custom PagerStrip into ActionBar
ActionBar actionBar = getSupportActionBar();
actionBar.setCustomView(R.layout.pager_strip);
actionBar.setDisplayShowCustomEnabled(true);
tabs = (PagerSlidingTabStrip) actionBar.getCustomView().findViewById(R.id.tabs_strip);
tabs.setViewPager(mPager);
There is some padding below my PagerStrip in ActionBar. I want to remove this padding.
here is a picture showing the issue.
This was working fine with ActionBarSherlock
I had a similar problem: I have migrated to the Toolbar pattern:
<?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="wrap_content"
android:layout_width="match_parent"
android:minHeight="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:theme="#style/ThemeOverlay.AppCompat.ActionBar">
<my.custom.widget.class
android:id="#+id/tab_bar"
android:layout_width="match_parent"
android:layout_height="match_parent">
</my.custom.widget.class>
</android.support.v7.widget.Toolbar>
but the AppCompat gave me a strange padding around my custom view:
My fix:
Add app:contentInsetStart="0dp" and app:contentInsetEnd="0dp" to the Toolbar attributes; and android:minHeight="?attr/actionBarSize" to the custom widget attributes.
Result:
Not sure that the solution follows the Material design guidelines, but hope it will help to someone.
Toolbar is widget replacement for Actionbar in some cases.
If you want to use Toolbar then you can try:
Toolbar=(Toolbar)findViewbyId(R.id.toolbar);
setSupportActionbar(toolbar);
I used Toolbar in DrawerLayout. My navigation drawer can always Top Toolbar.
P/S: use toolbar in ActionBarActivity