So I've implemented collapsable Toolbar inside my app and in Java class I override onCreateOptionsMenu and onOptionsItemSelected like this:
#Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.menu_details, menu);
return true;
}
#Override
public boolean onOptionsItemSelected(MenuItem item) {
switch (item.getItemId()) {
case R.id.action_share:
break;
case R.id.action_addToFavorites:
break;
}
return super.onOptionsItemSelected(item);
}
And now when I open the activity I can see the menu icons and do stuff with them until the toolbar is colapsed. When user colapses the toolbar the icons disappears.
Second problem, with using the getSupportActionBar().setDisplayHomeAsUpEnabled(true); method i get back button of black color instead of white so now I'm using this method:
tToolbar.setNavigationIcon(getResources().getDrawable(R.drawable.ic_action_navigation_arrow_back));
My question for this problem is how to handle click events for this navigation icon? This icon also disappears when toolbar colapses and leaves the left padding like it's there, but it's not.
Here's my code:
<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"
tools:context="com.darioradecic.topmusicandartists.Details">
<android.support.design.widget.AppBarLayout
android:id="#+id/MyAppbar"
android:layout_width="match_parent"
android:layout_height="256dp"
android:fitsSystemWindows="true">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapse_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="#color/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<com.android.volley.toolbox.NetworkImageView
android:id="#+id/imageViewDetailsTopGlobalSongs"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
app:layout_collapseMode="pin" />
<android.support.v7.widget.Toolbar
android:id="#+id/tToolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="fill_vertical"
android:padding="10dp"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
What am I doing wrong?
Are you using old version of Support Library(23.0.1) ? If yes then see if the icons doesn't disappear with the latest version .
To use white color back button , add this to style.xml
<style name="MyToolbarLight" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="colorControlNormal">#color/white</item>
</style>
Then in your layout xml , add the style .
<android.support.v7.widget.Toolbar
android:id="#+id/tToolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:theme="#style/MyToolbarLight"
/>
Your icon is disappearing because you haven't set collapse mode for the toolbar so it doesn't stay fixed when you start scrolling, simpy add this to your toolbar :
app:layout_collapseMode="pin"
Note: if you're including your toolbar layout you must specify (or repeat) the width and height values, collapseMode will not be enough:
<include layout="#layout/view_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"/>
Related
I am using "Navigation Drawer Activity" template from latest Android Studio (2021.2.1 Patch 2) as a start. (no change on layouts.)
With following code I was able to hide navigation bar:
WindowCompat.setDecorFitsSystemWindows(getWindow(), false);
getWindow().getInsetsController().hide(WindowInsetsCompat.Type.systemBars());
getWindow().getInsetsController().setSystemBarsBehavior(WindowInsetsController.BEHAVIOR_SHOW_TRANSIENT_BARS_BY_SWIPE);
Although buttons are hidden in navigation bar, still gray background of navigation bar exists.
My question is, how to increase the width of blue area? (named "Grid")
activity_main.xml:
<?xml version="1.0" encoding="utf-8"?>
<androidx.drawerlayout.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
android:id="#+id/app_bar_main"
layout="#layout/app_bar_main"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<com.google.android.material.navigation.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"
app:menu="#menu/activity_main_drawer" />
</androidx.drawerlayout.widget.DrawerLayout>
app_bar_main.xml:
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.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"
tools:context=".MainActivity">
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/Theme.Try6.AppBarOverlay">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/Theme.Try6.PopupOverlay" />
</com.google.android.material.appbar.AppBarLayout>
<include layout="#layout/content_main" />
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_marginEnd="#dimen/fab_margin"
android:layout_marginBottom="16dp"
app:srcCompat="#android:drawable/ic_dialog_email" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
content_main.xml:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:showIn="#layout/app_bar_main">
<fragment
android:id="#+id/nav_host_fragment_content_main"
android:name="androidx.navigation.fragment.NavHostFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:defaultNavHost="true"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:navGraph="#navigation/mobile_navigation" />
</androidx.constraintlayout.widget.ConstraintLayout>
Thanks.
I have found the solution, it may helpful.
Hide the Navigation Bar
Put this code in your onResume() of your corresponding Activity.
You can hide the navigation bar using the SYSTEM_UI_FLAG_HIDE_NAVIGATION flag. This snippet hides both the navigation bar and the status bar:
JAVA
View decorView = getWindow().getDecorView();
// Hide both the navigation bar and the status bar.
// SYSTEM_UI_FLAG_FULLSCREEN is only available on Android 4.1 and higher, but as
// a general rule, you should design your app to hide the status bar whenever you
// hide the navigation bar.
int uiOptions = View.SYSTEM_UI_FLAG_HIDE_NAVIGATION
| View.SYSTEM_UI_FLAG_FULLSCREEN;
decorView.setSystemUiVisibility(uiOptions);
Kotlin
window.decorView.apply {
// Hide both the navigation bar and the status bar.
// SYSTEM_UI_FLAG_FULLSCREEN is only available on Android 4.1 and higher, but as
// a general rule, you should design your app to hide the status bar whenever you
// hide the navigation bar.
systemUiVisibility = View.SYSTEM_UI_FLAG_HIDE_NAVIGATION or View.SYSTEM_UI_FLAG_FULLSCREEN
}
For more details follow this link.
I'm using the layout below, The CoordinatorLayout holds inside it AppBarLayout (With Toolbar) and the fragment layout.
I'm using app:layout_scrollFlags in my Toolbar and app:layout_behavior="#string/appbar_scrolling_view_behavior" in the fragment, so the Toolbar appear and disappear (hide/show) with scrolling my fragment content.
My problem: when I scroll in fragment A and therefore the toolbar disappear, then I use the BottomNavigationView to go to fragment B the toolbar remains hidden.
I want the toolbar to appear every time I open new fragment.
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/containerMain"
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.coordinatorlayout.widget.CoordinatorLayout
android:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/AppBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_gravity="top"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar" />
</com.google.android.material.appbar.AppBarLayout>
<fragment
android:id="#+id/nav_host_fragment"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:name="androidx.navigation.fragment.NavHostFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:defaultNavHost="true"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:navGraph="#navigation/mobile_navigation" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/nav_view"
android:layout_width="0dp"
android:layout_height="#dimen/nav_bar"
android:layout_marginStart="0dp"
android:layout_marginEnd="0dp"
android:background="?android:attr/windowBackground"
app:itemIconTint="#drawable/bottom_color_nav"
app:itemTextColor="#drawable/bottom_color_nav"
app:layout_constraintBottom_toBottomOf="#id/main_content"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:menu="#menu/bottom_nav_menu" />
</androidx.constraintlayout.widget.ConstraintLayout>
I would assume that the xml you posted is your layout for your MainActivity(), if so create a reference to your Toolbar in your MainActivty and create a function in your MainActivty() to access/change your Toolbar collapse states.
In your Fragments, create a reference to your MainActivity to then access the function to change the state of your Toolbar.
I cannot test as from work, but I have used same code flow to do the same stuff when using only MainActivity with Inner Fragments as the navigation flow of the app.
Below not exact working or tested code, but same idea/flow
//my fragment function to access MainActivity().changeToolbarState(boolean)
changeToolbar(state: boolean) {
if(state){
//true
//show toolbar
MainActivty().changeToolbarState(true)
}else{
//false
//collapse/hidetoolbar
MainActivty().changeToolbarState(false)
}
}
The best alternative could be enabling setExpanded property of app bar layout to true with the following code inside the fragment. Here, MainActivity.appBarLayout is the static variable defined in Main Activity referenced to App Bar Layout.
#Override
public void onPause() {
super.onPause();
MainActivity.appBarLayout.setExpanded(true);
}
I have been having trouble with my action bars, I got it set up on my xml front end like this:
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar4"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:label="#string/dadosCadastrais"
android:minHeight="?attr/actionBarSize"
android:theme="?attr/actionBarTheme" />
And on the Java activity:
Toolbar toolbar = findViewById(R.id.toolbar4);
setSupportActionBar(toolbar);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
getSupportActionBar().setDisplayShowHomeEnabled(true);
I have already tried changing the theme the app uses, the theme the layout uses and even the activities theme to allow/forbid a toolbar to show up. Even though my java class extends AppCompatActivity it does not show!
PS: Got it working now! The problem was the setup on java code itself, there was an hidden method which was overwritting my setup, thx for the help!
Make sure your activity inflates the correct layout containing your ToolBar.
protected void setContentView() {
setContentView(R.layout.your_activity_layout);
}
Your activity layout should contain your ToolBar. Here is a code example:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:keepScreenOn="true"
android:orientation="vertical">
<android.support.v7.widget.Toolbar
android:id="#id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:theme="#style/ThemeOverlay.AppCompat.ActionBar" />
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/frameLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"></FrameLayout>
</LinearLayout>
I'd like to make the status bar transparent by adding <item name="android:statusBarColor">#android:color/transparent</item> to v21/styles.xml on style name="AppTheme.NoActionBar" but I keep getting a shadow above the app bar, is it possible to remove it?
EDIT:
Ok I think the solution is to move the app bar occupying the status bar space and extending the app bar of an additional dp to match it size so my question is, is it possible to move or extend the app bar height upwards?
activity_search.xml
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:theme="#style/MyMaterialTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="?attr/colorPrimary"
app:popupTheme="#style/MyMaterialTheme.PopupOverlay"/>
</android.support.design.widget.AppBarLayout>
<include layout="#layout/content_search"/>
I believe this question is pointing to same problem
Android appbarlayout elevation appears in status bar
Possible solutions:
Your root layout should have android:fitsSystemWindows="true" at all times, otherwise your UI will not draw behind status bar.
Now wrap the AppBarLayout inside another CoordinatorLayout which has
android:fitsSystemWindows="false".
This will prevent the shadow from overflowing into statusbar.
Add elevation 0dp to AppBarLayout
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:elevation="0dp">
Call below method in the onCreate of your activity with the desired status bar color.
public void changeStatusBarColor(String hexColor)
{
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
Window window = getWindow();
window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
window.setStatusBarColor(Color.parseColor("#AD2525"));
}
}
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="com.example.bharath.myapplication.MainActivity">
<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:background="?attr/colorPrimary"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#AD2525"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<!--
Other views
-->
</RelativeLayout></android.support.design.widget.CoordinatorLayout>
Result
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:elevation="0dp"
android:theme="#style/AppTheme.AppBarOverlay">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/colorPrimaryDark"
app:popupTheme="#style/AppTheme.PopupOverlay"
/>
</com.google.android.material.appbar.AppBarLayout>
You could also add padding on app bar based on status bar height:
ViewCompat.setOnApplyWindowInsetsListener(binding.root) { _, insets ->
val statusBarInsets = insets.getInsets(WindowInsetsCompat.Type.statusBars())
val bottomBarInsets = insets.getInsets(WindowInsetsCompat.Type.navigationBars())
binding.appBarLayout.setPadding(0, statusBarInsets.top, 0, 0)
binding.root.setPadding(0, 0, 0, bottomBarInsets.bottom)
insets
}
You can put this in your onCreateView() or onViewCreated() methods.
Remember to remove android:fitsSystemWindows="true" from your layout, because you're manually setting the padding to the views, and the insets must remains like it's a full screen fragment.
put this line in the oncreate() method of activity file of which activity you want to remove the elevation of the action bar
getSupportActionBar().setElevation(0);
I'm using a layout with an AppBarLayout containing a Toolbar and a TabLayout, a ViewPager and a FloatingActionMenu.
My problem is that using an AppBarLayout causes other Views inside the CoordinatorLayout to not match the entire screen when using layout_height=match_parent, instead this other Views match what's left of the parent excluding the AppBarLayout. This behavior is perfect for my ViewPager, because otherwise its content would be covered by the AppBarLayout, but I need my FloatingActionMenu to match the entire screen, so that when my menu opens I can dim the screen.
So my question is: How do I make it so my FloatingActionMenu takes over the entire screen?
My XML:
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
android:id="#+id/main_content"
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="com.example.Home">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<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/AppBaseTheme.ToolbarPopup"
app:theme="#style/AppBaseTheme.Toolbar">
</android.support.v7.widget.Toolbar>
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
app:tabTextAppearance="#style/AppBaseTheme.TabText"
app:theme="#style/AppBaseTheme.Toolbar"/>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/home_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
<com.example.FloatingActionMenu
android:id="#+id/fam"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="bottom|end"
android:padding="#dimen/fab_margin"
app:menu_backgroundColor="#BB8b8b8b">
<com.example.FloatingActionButton
android:id="#+id/fab"
style="#style/MenuButtonsStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</com.example.FloatingActionMenu>
Using a RelativeLayout as my root view or using a LinearLayout to hold my Toolbar and TabLayout would solve my problem, but I need to use CoordinatorLayout and AppBarLayout to add scrolling functionality.
EDIT:
After testing in different devices I found out that this problem only happens on newer versions, as you can see in the next photos.
On API 19:
On API 23:
The problem was that I wasn't specifying an android:elevation for my FloatingActionMenu, so the AppBarLayout was appearing on top of the Menu