What is the default height of the android toolbar if it contains a menu with icons?
If I use
<android.support.v7.widget.Toolbar android:layout_height="?android:attr/actionBarSize" />
then it looks cut-off like this
If I use
<android.support.v7.widget.Toolbar android:layout_height="wrap_content" />
it works correctly. But it flickers for a moment when initializing the Activity, because it starts smaller and gets adjusted a few miliseconds later.
How to set the correct height right from the beginning?
Update
The full XML looks like this
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:fitsSystemWindows="true"
tools:context=".MyActivity" >
<android.support.design.widget.AppBarLayout
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:theme="#style/AppTheme.AppBarOverlay"
android:fitsSystemWindows="true" >
<android.support.v7.widget.Toolbar
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/myToolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/colorPrimary"
app:popupTheme="#style/AppTheme.PopupOverlay"
android:elevation="#dimen/elevation"
android:fitsSystemWindows="true" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="start"
android:layout_alignParentTop="true"
android:layout_alignParentStart="true" />
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>
The menu file looks like this
<menu 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"
tools:context=".MyActivity" >
<item
android:id="#+id/action_save"
android:orderInCategory="100"
android:icon="#drawable/ic_save"
app:showAsAction="always" />
</menu>
In my Activity onCreate() method I do this
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_mine);
Toolbar toolbar = (Toolbar) findViewById(R.id.myToolbar);
setSupportActionBar(toolbar);
}
The actionBarSize is correct approach but it looks like your Toolbar is under StatusBar.
To avoid drawing under the Android StatusBar you should disable fitsSystemWindows for your root layout (CoordinatorLayout). If you want to read more, check out this article.
For others, if android:fitsSystemWindows="false" doesn't help you can check if the problem is connected with a transparency of status bar - look for android:windowTranslucentStatus, android:statusBarColor in the project.
Even if you didn't set any of these settings by yourself, these could come from default Android Studio template.
Related
I have a screen with some TextViews and EditTexts, and a toolbar.
When I click on an edit text to input some text, the toolbar disappears
How can I make the toolbar be on the screen all the time, even when I introduce the text(or when I scroll, if I introduce a scroll view)
<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:id="#+id/createTreasureScreen"
android:layout_width="match_parent"
android:layout_height="wrap_content"
tools:context=".view.fragment.CreateTreasureFragment">
<Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="#dimen/toolbarTreasureHeight"
android:background="#color/Blue"
android:elevation="#dimen/loginToolbarElevation"
android:title="#string/page_title"
android:titleMarginStart="#dimen/toolbarMarginStart"
android:titleTextAppearance="#style/toolbarStyle"
android:titleTextColor="#color/White"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#id/parent"
app:titleEnabled="false" />
</androidx.constraintlayout.widget.ConstraintLayout>
Try using FrameLayout. This will allow you to keep your Toolbar always on top of the other views, and being visible if you add a ScrollView.
<FrameLayout 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">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/createTreasureScreen"
android:layout_width="match_parent"
android:layout_height="wrap_content"
tools:context=".view.fragment.CreateTreasureFragment">
<!--Add your other views here-->
</androidx.constraintlayout.widget.ConstraintLayout>
<Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="#dimen/toolbarTreasureHeight"
android:background="#color/Blue"
android:elevation="#dimen/loginToolbarElevation"
android:title="#string/page_title"
android:titleMarginStart="#dimen/toolbarMarginStart"
android:titleTextAppearance="#style/toolbarStyle"
android:titleTextColor="#color/White"
android:layout_gravity="top"
app:titleEnabled="false" />
</FrameLayout>
I have defined the tabs in side one of the AppCompatActivity.
<?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/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".activity.TestActivity">
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:minHeight="?attr/actionBarSize"
app:tabIndicatorColor="#android:color/white"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"/>
</android.support.v4.view.ViewPager>
</android.support.design.widget.CoordinatorLayout>
The tool bar I set it inside activity like below
getSupportActionBar().setTitle("Test");
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
viewPager = (ViewPager) findViewById(R.id.viewpager);
setupViewPager(viewPager);
tabLayout = (TabLayout) findViewById(R.id.tabs);
tabLayout.setupWithViewPager(viewPager);
After tab attached, I see the color separation between toolbar and tab.
How can I avoid this ?
Wherever you are setting up your action bar, add this line:
getSupportActionBar().setElevation(0);
The "color separation" you're seeing is the shadow cast by the action bar on your activity's contents. The TabLayout is part of that contents, so if you don't want a shadow you should remove the action bar's elevation.
Update
If you need to support older API versions, you will probably want to create your own Toolbar in xml and then call setSupportActionBar(toolbar) so that you can modify its appearance however you'd like. This xml should work for you:
<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.Dark.ActionBar"/>
And then call this before you start calling getSupportActionBar()
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
Try adding your TabLayout inside an AppBarLayout, I leave the following code that you can adapt to your design
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/main.coordinator"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:ignore="RtlHardcoded"
/>
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
/>
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/example.collapsing"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:title="#string/flexible_title"
app:expandedTitleMarginBottom="12dp"
app:layout_scrollFlags="scroll"
app:expandedTitleTextAppearance="#style/CollapsingTextAppearance.Inverse"
app:contentScrim="?colorPrimary"
/>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#null"
app:layout_collapseMode="pin"
app:layout_scrollFlags="enterAlways"
style="#style/ToolBarWithNavigationBack"
/>
<TextView
android:id="#+id/toolbar_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="Toolbar Title"
android:textColor="#android:color/white"
android:textSize="18sp"
android:textStyle="bold"/>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="fill_parent"
android:layout_height="?attr/actionBarSize"
app:tabSelectedTextColor="?android:attr/textColorPrimaryInverse"
app:tabIndicatorColor="?android:attr/textColorPrimaryInverse"
app:tabIndicatorHeight="4dp"
/>
</android.support.design.widget.AppBarLayout>
<!-- The top margin value equals half height of the blue box -->
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
/>
Try to use the theme Theme.AppCompat . As I know this does not have delimiter between actionbar and tabs.
Or try inserting the attribute windowContentOverlay to your theme:
<style name="AppTheme" parent="android:Theme.AppCompat">
<item name="android:windowContentOverlay">#null</item>
</style>
I'm creating a fragment with a collapsing Toolbar Layout using a ViewPager. This is the XML for the Layout:
<?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/htab_maincontent"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context=".activities.AppActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/htab_appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:fitsSystemWindows="true"
android:backgroundTint="#color/completeWhite">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/htab_collapse_toolbar"
android:layout_width="match_parent"
android:layout_height="420dp"
android:fitsSystemWindows="true"
app:contentScrim="#color/completeWhite"
app:layout_scrollFlags="scroll|exitUntilCollapsed|snap"
app:titleEnabled="false">
<RelativeLayout
android:id="#+id/brand_page"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_collapseMode="parallax"
android:paddingTop="24dp"
android:layout_marginTop="?attr/actionBarSize">
//Lots of images and texts that are collapsed
</RelativeLayout>
<android.support.v7.widget.Toolbar
android:id="#+id/htab_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="top"
android:layout_marginBottom="75dp"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"/>
<android.support.design.widget.TabLayout
android:id="#+id/htab_tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
app:tabIndicatorColor="#android:color/white"
app:tabSelectedTextColor="#color/lightGreen"
app:tabTextColor="#color/grey"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<io.brandie.brandie.custom.NoSwipeViewPager
android:id="#+id/htab_viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:layout_marginBottom="#dimen/spacing_giant"
android:background="#color/white"/>
</android.support.design.widget.CoordinatorLayout>
The viewPager is filled with fragments that use a gridview to display different cards, this is the xml for the Fragment of the first tab:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.NestedScrollView
android:id="#+id/NestedScroll"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:fillViewport="true"
android:fitsSystemWindows="true"
android:layout_gravity="fill_vertical"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/all_campaigns_frame"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="io.brandie.brandie.fragments.AllCampaignsFragment">
<GridView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/all_campaigns_grid"
android:descendantFocusability="blocksDescendants"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:numColumns="2"
android:verticalSpacing="10dp"
android:horizontalSpacing="10dp"
android:stretchMode="columnWidth"
android:gravity="center" />
</FrameLayout>
</android.support.v4.widget.NestedScrollView>
With this I can scroll down anywhere on the screen to make the toolbar collapse and the view-pager expand. The problem is, when the tool-bar is completely collapsed and only the tabs are showing, I can't scroll the viewPager anymore. Since it holds a gridView with a lot of items, it results in that I can't scroll through them all, since the scroll just "stops".
I want it to look like this
But instead, when the toolbar is collapsed, I can't scroll the viewPager down anymore. I can however scroll it up to reveal the toolbar again, that works without issues. I am using Android API 16, is that an issue?
How do I fix this very irritating problem?
EDIT:
If I remove the NestedScrollView from the fragment XML, the collapsed Toolbar only collapses if I scroll on the toolbar. If I scroll the ViewPager, I can scroll through all content correctly, but the toolbar doesn't collapse.
Answer for your EDIT: Try using setNestedScrollingEnabled(false) on your GridView
I was doing final touches on my app and noticed strange behavior on my toolbar on devices running 5.0 and above. On devices that are below 5.0 there is no strange line below my image which I setup as a backgroundDrawablefor toolbar but on devices 5.0 and above seems like toolbar is visible behind the image. I tried many approaches that I found mostly here on stackoverflow but nothing seems to work. I tried with transparent background but that didn't work. I created custom theme with also with transparent background but that didn't work too. Here are the images:
Code:
<?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"
android:orientation="vertical"
android:layout_width="match_parent"
android:background="?attr/colorPrimary"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true">
<android.support.v7.widget.Toolbar
android:id="#+id/toolBar"
android:layout_width="match_parent"
android:layout_height="100dp"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
android:background="#android:color/transparent"
app:layout_scrollFlags="scroll|enterAlways">
<ImageView
android:id="#+id/icon"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/ic_logo_final"
android:layout_gravity="center"
android:gravity="center"
android:layout_marginRight="50dp"
android:layout_marginTop="5dp"
android:layout_marginBottom="15dp"
/>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:id="#+id/recyclerView">
</android.support.v7.widget.RecyclerView>
</android.support.design.widget.CoordinatorLayout>
Thanks in advance.
try this to remove shadow from toolbar:
<style name="MyAppTheme" parent="android:Theme.Holo.Light">
<item name="android:windowContentOverlay">#null</item>
</style>
Also set app:elevation="0dp" in AppBarLayout for hiding shadow in appbar
It's due to the shadow feature of Toolbar.. so hide it..
Try..applying "app:elevation="0dp" in the "android.support.design.widget.AppBarLayout" to resolve this issue.
I'm trying to add a simple SearchView to the toolbar in my app. Everything it's working fine expect for the layout.
There is this "space" between the NavigationDrawer icon and the SearchView.
If I set a title the space is filled with that string, otherwise is empty.
Empty string:
With a string in title:
How do I remove that annoying empty space?
Edit:
I'm using as base code the NavigationDrawer example from Android Studio
main.xml
<menu 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"
tools:context=".MainActivity"
>
<item
android:id="#+id/action_search"
android:icon="#android:drawable/ic_menu_search"
android:title="Search"
app:actionViewClass="android.support.v7.widget.SearchView"
app:showAsAction="always" />
</menu>
app_bar_main.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="ga.musicforyou.musicforyou.MainActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
app:contentInsetEnd="0dp"
app:contentInsetStart="0dp"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
/>
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<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/app_bar_main"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<android.support.design.widget.NavigationView
android:id="#+id/nav_view"
app:theme="#style/ThemeOverlay.AppCompat.Dark"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true"
app:itemTextColor="#FFF"
app:itemIconTint="#FFF"
app:menu="#menu/activity_main_drawer" />
</android.support.v4.widget.DrawerLayout>
Toolbar extends from FrameLayout and you can put views inside it. Like this:
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/toolbar"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/primary_color">
<SearchView
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</android.support.v7.widget.Toolbar>
Edit: You put it inside the layout as a menu. It always will be on the right side of the toolbar, because it is a menu. If you want to have a more direct control over views inside a toolbar, just put it there as I did show you.
I have set actionBar.setDisplayHomeAsUpEnabled(true) in code. So only adding SearchView in the toolbar didn't work for me and there is some extra space between Navigation Back and SearchView. I don't have Title in Toolbar. So I customized whole toolbar like this:
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_alignParentTop="true" // If parent layout is RelativeLayout
android:background="?attr/colorPrimary"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:contentInsetLeft="0dp" // This is important,
app:contentInsetStart="0dp" // Otherwise there will be extra space on Left Side
app:popupTheme="#style/ThemeOverlay.AppCompat.Light">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_vertical"
android:orientation="horizontal">
<ImageView
android:id="#+id/ivNavBack"
android:layout_width="56dp"
android:layout_height="56dp"
android:background="#drawable/your_drawable" // Custom background (optional), if you want to have a press effect
android:padding="16dp"
android:src="#drawable/ic_nav_back" /> // You can set icon of your choice here
<android.support.v7.widget.SearchView
android:id="#+id/searchView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:queryHint="#string/search_view_hint"
app:queryHint="#string/search_view_hint" />
</LinearLayout>
</android.support.v7.widget.Toolbar>
...& in your Activity:
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
SearchView searchView = (SearchView) toolbar.findViewById(R.id.searchView);
searchView.onActionViewExpanded(); // Expands searchView by default
// If this is not set, then you will see default search icon and you have to click it to expand SearchView.
Now no need to set actionBar.setDisplayHomeAsUpEnabled(true) in code. Just handle click event of ivNavBack for it.