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.
Related
I'm trying to add a drawer menu in two activities, one only has the drawer menu and the other one has the drawer menu and a ConstraintLayout beneath, the one without the ConstraintLayout works good, but the drawer menu of the other one doesn't respond, it doesn't scroll and if I try to select an option it just closes the drawer and does nothing.
Both XML are exactly the same except for the extra ConstraintLayout, if I remove the ConstraintLayout it works well but I need it for some controls.
this is the XML of the activity that doesn't work:
<androidx.drawerlayout.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/drwlayout"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:fitsSystemWindows="true"
tools:context=".ac_Menu">
<androidx.appcompat.widget.LinearLayoutCompat
android:id="#+id/linearLayoutCompat"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent"
tools:layout_editor_absoluteX="395dp">
<androidx.appcompat.widget.Toolbar
android:id="#+id/mitoolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/colorPrimary"
android:theme="#style/Theme.AppCompat.Light">
</androidx.appcompat.widget.Toolbar>
</androidx.appcompat.widget.LinearLayoutCompat>
<com.google.android.material.navigation.NavigationView
android:id="#+id/navview"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true"
app:menu="#menu/drwamenu"
app:headerLayout="#layout/nav_header"
></com.google.android.material.navigation.NavigationView>
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="?attr/actionBarSize">
<ListView
.... />
<TextView
...... />
<TextView
...... />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.drawerlayout.widget.DrawerLayout>
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>
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.
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'm trying to get rid of the elevation under the toolbar by using app:elevation="0dp" but it only works in the main activity xml. When I go to other activities I can still see the elevation, any ideas how to completely get rid of the elevation under my toolbar?
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="com.example.khalid.myapplication3.MainActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay"
app:elevation="0dp">
<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>
<include layout="#layout/content_main" />
</android.support.design.widget.CoordinatorLayout>
this is what I got after including toolbar in other activities layouts
I ran into this problem before, and it looks like you're using a theme that doesn't extend #style/Theme.AppCompat.NoActionBar. When you're using a Toolbar in your XML layout, you have to hide the default ActionBar so they don't conflict.
In your AndroidManifest.xml, make sure you set the theme for the activity you're having a problem with:
<application ...>
<activity ...
android:theme="#style/AppTheme.NoActionBar">
</activity>
</application>
In your activity XML, just add app:elevation="0dp" attribute to AppBarLayout. This will cause no elevation to all fragments under this activity. Here, I use a frame layout for the fragment containers.
<layout 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">
<androidx.coordinatorlayout.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".ui.blog.BlogActivity">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:theme="#style/AppTheme.AppBarOverlay"
app:elevation="0dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:popupTheme="#style/AppTheme.PopupOverlay" />
// my code: remove for brevity
</RelativeLayout>
</com.google.android.material.appbar.AppBarLayout>
<FrameLayout
android:id="#+id/fragment_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/gray"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
</layout>