I'm following the steps outlined at https://developer.android.com/training/appbar/index.html to add an action bar to my activity.
However, adding it as described covers my ListView. The list has 2 entries. Before I tried to add the Action Bar, this is what it looked like:
Here I followed the steps and adjusted the manifest and my activity layout:
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:elevation="4dp"
android:popupTheme="#style/ThemeOverlay.AppCompat.Light"
android:theme="#style/ThemeOverlay.AppCompat.ActionBar" />
<ListView
android:id="#+id/listView"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</RelativeLayout>
Now it looks like this:
I tried wrapping the Toolbar with an AppBarLayout object as shown at https://stackoverflow.com/questions/35845629/actionbar-covering-my-activity, but that didn't work.
How do I add an ActionBar to my activity and not cover the ListView. I would like to add a couple of buttons to the activity's action bar (not the overflow menu) so I can give options for adding to the list.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:elevation="4dp"
android:popupTheme="#style/ThemeOverlay.AppCompat.Light"
android:theme="#style/ThemeOverlay.AppCompat.ActionBar" />
<ListView
android:id="#+id/listView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/toolbar" />
</RelativeLayout>
I think you forget to add android:layout_below="#+id/toolbar" in listview as your layout is relative.
Related
I've noticed that if I place an android.support.v7.widget.SearchView inside of an android.support.v7.widget.Toolbar with its height set to wrap_content that the SearchView behaves very strangely. It appears fine at first but then as soon is it gains focus it disappears and no longer takes up space in a layout. This can be resolved by setting an explicit height to the Toolbar but I'm trying to use wrap_content specifically because my use-case requires the Toolbar to resize dynamically.
It might also be worth mentioning that the SearchView is still functional after it disappears. If I add a SearchView.OnQueryTextListener to the SearchView then I can observe that the query text is indeed being updated as I type. Neither this text nor any other part of the SearchView takes up space in the layout though and if you force it to be unobscured in the layout then it is still not visible.
This kind of seems like a bug in SearchView to me. Does anybody have some more insight into why it's happening or how to work around it?
Here's a working example of the issue:
<?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.me.MyActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="#dimen/appbar_padding_top"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/AppTheme.PopupOverlay">
<android.support.v7.widget.SearchView
android:id="#+id/internalSearchView"
app:queryHint="To..."
android:layout_weight="1"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
</android.support.v7.widget.SearchView>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>
It certainly looks like it should work... I have two suggestions.
If it doesn't interfere with your design goals, set android:minHeight="?attr/actionBarSize" on your toolbar. This may be desired anyway.
Try setting android:layout_height="48dp" on the SearchView.
No No No...
set the search view with these params:
<FrameLayout
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:theme="#style/AppTheme.AppBarOverlay"
android:animateLayoutChanges="true">
<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/AppTheme.PopupOverlay"/>
<com.lapism.searchview.widget.SearchView
android:id="#+id/searchView"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/search_behavior"
app:search_version="menu_item"
app:search_version_margins="menu_item"/>
</FrameLayout>
I need to show buttons below toolbar while scroll down like below video. Any samples? I have tried lot but confused.
https://www.youtube.com/watch?v=enWVNP3Gifg
You can use two toolbar one with search view and one with widgets.
You design be like below.
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"/>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar2"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"/>
<ImageButton
android:id="#+id/fabButton"
android:layout_width="56dp"
android:layout_height="56dp"
android:layout_gravity="bottom|right"
android:layout_marginBottom="16dp"
android:layout_marginRight="16dp"
android:background="#drawable/fab_background"
android:src="#drawable/ic_favorite_outline_white_24dp"
android:contentDescription="#null"/>
</FrameLayout>
then you can hide one on scroll like below
Complete Demo of hide toolbar on scroll.
You need to use CoordinatorLayout which you can find a good tutorial in here:
Tutorial
Simply put, you need to have a CoordinatorLayout which contains a AppBarLayout (which must be the first child) and the AppBarLayout must contain two chilren like this:
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
.../>
<android.support.design.widget.TabLayout
android:id="#+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|enterAlways"/>
</android.support.design.widget.AppBarLayout>
The line app:layout_scrollFlags="scroll|enterAlways" makes it like you want it.
I have just made the app using android studio template of Navigation view. Its all working fine but I have the following two requirements
I want to center the toolbar title.
I want to put the image beside the title.
Here is my 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.abdulsalam.lahoreqalander.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>
<include layout="#layout/content_main" />
<!--<android.support.design.widget.FloatingActionButton-->
<!--android:id="#+id/fab"-->
<!--android:layout_width="wrap_content"-->
<!--android:layout_height="wrap_content"-->
<!--android:layout_gravity="bottom|end"-->
<!--android:layout_margin="#dimen/fab_margin"-->
<!--android:src="#android:drawable/ic_dialog_email" />-->
Problem :
I do not know where the title string is saved, I have checked the string.xml and there is the app name and that is exactly showing on the toolbar title.
So Any suggestion where can I change the title string without changing the app name , In fact I want to change it custom and also how to put the image beside it.
Note I am using the template made by Android studio
.
You can implement like this in XML.
<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">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_gravity="center">
<ImageView
android:src="#mipmap/ic_launcher"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
style="#style/TextAppearance.Widget.AppCompat.Toolbar.Title"
android:text="#string/app_name"
android:background="?attr/selectableItemBackground"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
</android.support.v7.widget.Toolbar>
in you activity class do this on create
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
toolbar.setTitle("example");
toolbar.setLogo(R.drawable.icon);
or edit the string resourse and change the title value and icon
First of all from the documentation:
The use of application icon plus title as a standard layout is discouraged on API 21 devices and newer.
For setting an icon through xml you could use android:navigationIcon inside your Toolbar.
For setting the text I would also go with the Java code approach as I could not find anything with xml in the documentation. The text would not be centered anyway.
If you want to center the text you have to modify your Toolbar. Toolbar is a view and you can put anything inside the Toolbar you want.
<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">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingEnd="#dimen/activity_horizontal_margin"
android:id="#+id/toolbar_content">
// define text and icon here
</RelativeLayout>
</android.support.v7.widget.Toolbar>
I try to built a preference screen with a toolbar, but I got some issues:
The status bar is white. I want it to look like my main screen (same theme). Somehow it does not apply the color
The toolbar overlays the content. I tried a a layout_marginTop on the list view, but it does not change anything.
Here is the code of my activity_settings.xml:
<LinearLayout 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:orientation="vertical">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/colorPrimary"
app:navigationIcon="?attr/homeAsUpIndicator"
app:title="#string/action_settings"
android:theme="#style/ThemeOverlay.AppCompat.Dark" />
<ListView
android:id="#android:id/list"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:layout_below="#+id/toolbar" />
</LinearLayout>
This is the AndroidManifest entry:
<activity
android:name=".activities.SettingsActivity"
android:label="#string/activity_settings"
android:theme="#style/AppTheme.NoActionBar" />
Can anybody help me?
Add android:layout_marginTop="?attr/actionBarSize" to your ListView in the xml.
Replace fill_parent with match_parent it's deprecated.
Remove android:layout_below="#+id/toolbar" it's not working in LinearLayout
So, I have this main activity layout using CoordinatorLayout to display a toolbar and tabs below it:
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:local="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:elevation="0dp"
local:layout_scrollFlags="scroll|enterAlways"
local:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:elevation="4dp"
local:tabMode="fixed"
local:tabGravity="fill"/>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:foreground="#drawable/header_shadow"
local:layout_behavior="#string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
Then I have 2 fragment layouts, each for each of the 2 tabs I'll have. One fragment displays a ListView on its content:
<FrameLayout
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:foreground="#drawable/header_shadow"
tools:context=".StationsFragment">
<android.support.v4.widget.SwipeRefreshLayout
android:id="#+id/swipe_refresh_layout"
android:layout_height="wrap_content"
android:layout_width="match_parent">
<ListView
android:id="#+id/stations_listview"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</android.support.v4.widget.SwipeRefreshLayout>
</FrameLayout>
I want my toolbar to hide when I scroll the listview above, and it should be ok with the code I have, at least from what I read in this answer, but it's not working. At the moment I've tried to remove the FrameLayout from the fragment activity but that didn't solve the issue. I've considered hard coding the scroll event from the listview but if possible I really want this to be working with no code behind..
Thanks in advance.
This is because you are using CoordinatorLayout with ListView. You can change your implementation to RecyclerView to achieve correct scroll.
check my answer here. This may help you.
try change from
local:layout_scrollFlags="scroll|enterAlways"
to
local:layout_scrollFlags="scroll|exitUntilCollapsed"