I am looking to make a floating action button for my android app that turns into search bar when clicked.
I've seen them turn into actionbar toolbar ,but I want to use it for searching. Any help on making this happen would be appreciated.
Thanks!
You can do this in 3 steps.
Floating Action Button, which you can use Google Support Library, which I have explained here.
On click of floating action button, you need to show toolbar,
For that your main page should have FAB as well as toolbar, like the following:
<LinearLayout android:id="#+id/mainView"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1.0"
android:orientation="vertical">
<include
android:id="#+id/toolbar"
layout="#layout/app_bar"/>
<View android:id="#+id/stripBelowToolbar"
android:layout_height="0dp"
android:layout_width="fill_parent"/>
<android.support.design.widget.CoordinatorLayout
android:id="#+id/rootLayout"
android:layout_height="match_parent"
android:layout_width="match_parent">
<android.support.design.widget.FloatingActionButton
style="#style/fab_style"
android:id="#+id/fabBtn"
android:layout_gravity="bottom|right"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
fab:backgroundTint="#color/sap_uex_dark_yellow"
fab:rippleColor="#color/white"/>
code behind files should have
FloatingActionButton fab = (FloatingActionButton)findViewById(R.id.fab);
fab.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
toolbar.setvisibility(View.VISIBLE)// show the searchbox and bla bla...
}
});
You need to animate the hiding of floating action button, which can be achieved like this.
Related
I am working on Android project and I've created a new Settings Activity from Android. When I created the activity, and tried running, it the Settings Activity that Android Studio created, didn't include an action bar for some reason. I googled around and found that it seems to be a common thing and add the action bar manually, so I've done the following:
private void setupActionBar()
{
getLayoutInflater().inflate(R.layout.toolbar, (ViewGroup)findViewById(android.R.id.content));
Toolbar toolbar = findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
ActionBar actionBar = getSupportActionBar();
if (actionBar != null)
{
// Show the Up button in the action bar.
actionBar.setDisplayHomeAsUpEnabled(true);
}
}
I found that the first preference header is hidden under the action bar, again Googled around, found you need to add padding to the list view which I did using the following in the onCreate()
getListView().setPadding(0, 180, 0, 0);
Doing the above seems a little odd, and it only works on the initial settings activity screen with the list of preference headers. Once you click on the preference headers to view the settings, the first setting is hidden under the action bar as shown in the screenshot below:
I think I figured it out.
I created a toolbar XML as below
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:local="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/settings_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
Then in the SettingsActivity in the setupActionBar method as below:
private void setupActionBar()
{
ViewGroup rootView = (ViewGroup)findViewById(R.id.action_bar_root);
View view = getLayoutInflater().inflate(R.layout.settings_toolbar, rootView, false);
rootView.addView(view, 0);
Toolbar toolbar = (Toolbar)findViewById(R.id.settings_toolbar);
setSupportActionBar(toolbar);
ActionBar actionBar = getSupportActionBar();
if (actionBar != null) {
// Show the Up button in the action bar.
actionBar.setDisplayHomeAsUpEnabled(true);
}
}
I suggest to remove your Action Bar and make a custom toolbar which will be described by other layout file and will contain a widget that cancels your current activity.
For example:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/relLayout1">
<include layout="#layout/snippet_comments_toolbar"/>
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/relLayout2"
android:layout_below="#+id/relLayout1"
android:layout_marginBottom="60dp">
<ListView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/listView"></ListView>
</RelativeLayout>
and then snippet_comments_toolbar which is that toolbar I am talking about:
<merge xmlns:android="http://schemas.android.com/apk/res/android"
>
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#drawable/white_grey_border_bottom"
>
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/profileToolBar">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_marginEnd="20dp"
android:layout_centerVertical="true"
android:id="#+id/backArrow"
android:src="#drawable/ic_backarrow"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Comments"
android:layout_toRightOf="#+id/backArrow"
android:layout_marginRight="15dp"
android:textSize="20sp"
android:textColor="#color/black"
android:layout_centerVertical="true"
android:id="#+id/tvNext"
/>
</RelativeLayout>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
</merge>
I have a RecyclerView that contains CardViews.
I would like to add a Toolbar to each of those CardViews that would look and behave like the main Toolbar:
[Icon] [Title] .......... [Button] [Button] [Menu]
I've seen from here (http://blog.grafixartist.com/create-a-card-toolbar/) that it is possible to set an actual android.support.v7.widget.Toolbar object inside a CardView. But it relies on setSupportActionBar(...) to inflate the menu and respond to actions.
Do you think it's possible to reproduce that behaviour in each of my CardViews?
You don't need setSupportActionBar for your cardviews with toolbars until you would need to set some ActionBar specific actions up/back navigation actions.
Take a look at this fine example (link to whole page below):
Thanks Gabriele for all the help. Here is working code:
Activity :
public class MainActivity extends ActionBarActivity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_mai);
Toolbar toolbar = (Toolbar) findViewById(R.id.card_toolbar);
toolbar.setTitle("Card Toolbar");
if (toolbar != null) {
// inflate your menu
toolbar.inflateMenu(R.menu.main);
toolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
#Override
public boolean onMenuItemClick(MenuItem menuItem) {
return true;
}
});
}
Toolbar maintoolbar = (Toolbar) findViewById(R.id.toolbar_main);
if (toolbar != null) {
// inflate your menu
maintoolbar.inflateMenu(R.menu.main);
maintoolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
#Override
public boolean onMenuItemClick(MenuItem menuItem) {
return true;
}
});
}
}
}
Layout XML File:
<RelativeLayout 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.support.v7.widget.Toolbar
android:id="#+id/toolbar_main"
android:layout_width="match_parent"
android:layout_height="#dimen/action_bar_size_x2"
android:background="#android:color/holo_orange_dark"
android:minHeight="?attr/actionBarSize" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/toolbar_main"
android:layout_marginLeft="15dp"
android:layout_marginRight="15dp"
android:layout_marginTop="#dimen/action_bar_size"
android:orientation="vertical" >
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="match_parent" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<android.support.v7.widget.Toolbar
android:id="#+id/card_toolbar"
android:layout_width="match_parent"
android:layout_height="#dimen/action_bar_size"
android:background="#android:color/white" />
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#android:color/darker_gray" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:text="#string/app_name"
android:textSize="24sp" />
</LinearLayout>
</android.support.v7.widget.CardView>
</LinearLayout>
</RelativeLayout>
Make sure your activity theme is extending Theme.AppCompat.Light.NoActionBar.
Here is what it will look like:
Few things to note:
If you are using card elevation then you need to altar the margin top so that your card aligns with the main toolbar
I am still seeing 1-2 pixel margin between bottom of main toolbar and card toolbar. Not sure about what to do in this case. For now, i
am aligning it manually.
From: How to create a card toolbar using appcompat v7
Notice that author of this post hadn't used it at all, so I'm pretty sure you would also don't need that for implementation your idea
Hope it help
Sure. setSupportActionBar is used to set target for setTitle, menu inflation and up/back action. You can use Toolbar anywhere you want without using setSupportActionBar. It will behave like a ViewGroup.
Previous answers are correct but I would like to mention they there are times where the menu items become duplicate. In order to get around this, you need to clear the toolbar's menu for each CardView by invoking toolBar.getMenu().clear();
I have the following layout in my activity.xml
`
<?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:layout_height="match_parent"
android:id="#+id/store_page_layout"
tools:context=".StorePage">
<include
android:id="#+id/store_page_toolbar"
layout="#layout/toolbar"/>
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/store_drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/store_page_toolbar">
<FrameLayout
android:id="#+id/container_body"
android:layout_width="fill_parent"
android:layout_height="#dimen/container_body_height"
android:layout_weight="1">
<android.support.v7.widget.CardView
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:id="#+id/card_view"
android:layout_gravity="center"
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_marginRight="16dp"
android:layout_marginLeft="16dp"
android:elevation="6dp"
card_view:cardCornerRadius="4dp"
android:background="#drawable/landing_animated_button_background">
</android.support.v7.widget.CardView>
</FrameLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/store_menu_drawer"
android:layout_width="#dimen/navigation_drawer_width"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="#color/black_200"/>
<android.support.v7.widget.RecyclerView
android:id="#+id/store_cart_drawer"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="end"
android:layout_marginLeft="#dimen/nav_drawer_left_min_margin"
android:background="#color/black_200"/>
</android.support.v4.widget.DrawerLayout>
</RelativeLayout>
`
No I went ahead and added ActionBarDrawerToggle on my Toolbar widget, the behavior I wanted from the hamburger icon is if I click on it left drawer open up (Working), I click it again left drawer closes (Working), I open right drawer by dragging from right to left plus the hamburger icon changes to arrow (Working), if I click on arrow icon it closes right drawer as well (Not working)
As you can see, I want the hamburger icon to close both right and left drawers based on which one is open, my approach is to listen to click on arrow icon and decide which drawer is open then close it. I am unable to figure out how to set onClickListener on the hamburger or arrow icon automatically added by ActionBarDrawerToggle class.
This is explained in the documentation
http://developer.android.com/reference/android/support/v7/app/ActionBarDrawerToggle.html#setToolbarNavigationClickListener(android.view.View.OnClickListener)
public void setToolbarNavigationClickListener (View.OnClickListener onToolbarNavigationClickListener)
When DrawerToggle is constructed with a Toolbar, it sets the click
listener on the Navigation icon. If you want to listen for clicks on
the Navigation icon when DrawerToggle is disabled
(setDrawerIndicatorEnabled(boolean), you should call this method with
your listener and DrawerToggle will forward click events to that
listener when drawer indicator is disabled.
I finally figured out the solution. Instead of setting setToolbarNavigationClickListener on actionBarDrawerToggle setting setNavigationOnClickListener on Toolbar works perfectly. my code is given below.
toolbar.setNavigationOnClickListener(new toolBarNavigationIconListener());
And OnClickListener is as follows.
private class toolBarNavigationIconListener implements View.OnClickListener {
#Override
public void onClick(View v) {
if(!storeDrawer.isDrawerOpen(Gravity.RIGHT) && !storeDrawer.isDrawerOpen(Gravity.LEFT)) {
storeDrawer.openDrawer(Gravity.LEFT);
} else if(storeDrawer.isDrawerOpen(Gravity.LEFT)) {
storeDrawer.closeDrawer(Gravity.LEFT);
} else if(storeDrawer.isDrawerOpen(Gravity.RIGHT)) {
storeDrawer.closeDrawer(Gravity.RIGHT);
}
}
}
I used this code for implementing new actionbar using AppCompact v7 and everything was fine:
supportRequestWindowFeature(Window.FEATURE_ACTION_BAR_OVERLAY);
setContentView(R.layout.activity_main);
mActionbar = getSupportActionBar();
mActionbar.setHideOffset(10);
But i had to use xml Toolbar in order to use new animated navigation drawer indicator.
so this is my new activity_main xml:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="match_parent"
android:layout_width="match_parent">
<android.support.v4.widget.DrawerLayout
android:id="#+id/MainMenu_drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<RelativeLayout
android:id="#+id/contents"
android:layout_height="match_parent"
android:layout_width="match_parent">
</RelativeLayout>
<RelativeLayout
android:id="#+id/list"
android:layout_height="match_parent"
android:layout_width="match_parent">
</RelativeLayout>
</android.support.v4.widget.DrawerLayout>
<android.support.v7.widget.Toolbar
android:id="#+id/content_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="#style/Actionbar"/>
</RelativeLayout>
and this is my new code:
supportRequestWindowFeature(Window.FEATURE_ACTION_BAR_OVERLAY);
setContentView(R.layout.activity_main);
mToolbar = (Toolbar) findViewById(R.id.content_toolbar);
setSupportActionBar(mToolbar);
getSupportActionBar().setHideOffset(10);
And force close occurs at last line.
It doesn't show any errors in logcat , just force close!
Sorry for bad English :)
Change it to
getSupportActionBar().setHideOffset(0);
Set the current hide offset of the action bar.
The action bar's current hide offset is the distance that the action
bar is currently scrolled offscreen in pixels. The valid range is 0
(fully visible) to the action bar's current measured height (fully
invisible).
Hello everyone I'm try to make custom action bar. My codes below. Everything is good at the right side of Action Bar but at the left side custom action bar does not match. How can I solve this problem.
Thanks in helpings.
EDIT 1 :
My main activity xml, it has not got anything interest with action bar but I could not figure out where the problem is
activity_main.xml
<RelativeLayout 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:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:paddingBottom="#dimen/activity_vertical_margin" tools:context=".MainActivity"
android:id="#+id/hh">
</RelativeLayout>
Here is my custom action bar xml file:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Button"
android:id="#+id/button"
android:background="#ffff2301" />
</RelativeLayout>
My Java Code;
public class MainActivity extends ActionBarActivity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
getSupportActionBar().setCustomView(R.layout.action_bar);
getSupportActionBar().setDisplayOptions(ActionBar.DISPLAY_SHOW_CUSTOM);
}
}
You are using setCustomView() on the default toolbar provided by the theme. Custom views are meant to be loaded in the toolbar space that is not occupied by other views (logo, title, overflow menu..).
So your custom layout becomes part of the toolbar, and does not replace it. So either:
You want things to be this way. In this case your issue is just background color. I don't know how you set the custom view to be yellow, but try adding android:background="#color/transparent" to the RelativeLayout and switch the whole toolbar color to yellow instead. The room in the left will be eventually loaded with navigation icons, so you want it to be there.
You want to (I'd suggest to) use the Toolbar API which makes it easier to add custom views. This is done this way:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<include layout="#layout/custom_toolbar"/>
<RelativeLayout android:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent">
</RelativeLayout>
</LinearLayout>
And then, in custom_toolbar.xml,
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:abc="http://schemas.android.com/apk/res-auto"
android:id="#+id/toolbar"
android:layout_height="?attr/actionBarSize"
android:layout_width="match_parent">
<!-- you can add any custom view here -->
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Button"
android:id="#+id/button"
android:background="#ffff2301" />
</android.support.v7.widget.Toolbar>
In your onCreate() you now have to call:
public class MainActivity extends ActionBarActivity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar tb = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(tb);
}
}