Android how to create overlay drop-down menu similar to Google+ app - android

I am attempting to create a drop-down menu like the one found in the Google+ app. A screenshot can be found below. I have looked at Spinners and Popup Menus, but neither of these fit exactly for what I am trying to create. The first image shows the closed menu, and the second shows what the drop-down menu looks like when opened.
http://www.droid-life.com/wp-content/uploads/2014/05/google-plus-4.4-1.jpg
The menu should not appear inside the action bar, and when scrolling, the menu displaying the selected option remains at the top of the screen.

Sorry I don't have enough reputation to add comments, So I'll post as an answer, hope it'll help anybody. This is just my alternative solution trying to achieve a ui like google plus app as you've posted.
My current solution is to use a toolbar beneath the actionbar(which is a toolbar also set as actionbar). Then I add onClickListener for the toolbar. When the toolbar is tapped, a recyclerview will be visible. Which the recyclerview can be populate by dynamic data or custom data you put in the layout. Example code :
main_layout.xml
<LinearLayout .... >
// the actionbar toolbar
<android.support.v7.widget.Toolbar
android:id="#+id/action_toolbar"
android:layout_width="match_parent"
android:layout_height="?android:attr/actionBarSize"
app:theme="#style/toolbarStyle"/>
// second toolbar act as the spinner
<android.support.v7.widget.Toolbar
android:id="#+id/dropdown_toolbar"
android:layout_width="match_parent"
android:layout_height="?android:attr/actionBarSize"
style="#style/dropdownToolbar">
..... // add a spinner indicator (imageview)
</android.support.v7.widget.Toolbar>
//separator line
<View
android:id="#+id/separator_line"
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_marginLeft="0dp"
android:layout_marginRight="0dp"
android:background="#adacad"/>
// two child overlaps in framelayout
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/white">
// the visible layout example
<android.support.v7.widget.RecyclerView
android:id="#+id/default_recyclerview"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
// the layout that is visible when toolbar is tapped
// this is spinner content, put anything u want here
<android.support.v7.widget.RecyclerView
android:id="#+id/dropdown_recyclerview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:visibility="gone"/>
</LinearLayout>
This will give u a full width and length layout. the dropdown_recyclerview content depends on what u want. I added an imageview to indicate if the fake spinner is open or close. Sample code for java :
MainActivity.java
//action toolbar
Toolbar actionToolbar = (Toolbar) findViewById(R.id.action_toolbar);
setSupportActionBar(actionToolbar);
RecyclerView dropdownRecyclerView = (RecyclerView) findViewById(R.id.dropdown_recyclerview);
//second toolbar
Toolbar dropdownToolbar = (Toolbar) findViewById(R.id.dropdown_toolbar);
//Listen for toolbar onClick
dropdownToolbar.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
//toggle visibility of dropdown spinner
if (!SHOW_SPINNER_FLAG) {
//set indicator close / open
dropdownRecyclerView.setVisibility(View.VISIBLE);
} else {
//set indicator close / open
dropdownRecyclerView.setVisibility(View.VISIBLE);
}
}
});
Later on you can customized the layout and add some animation to reveal the fake spinner layout. If there's other way, please share. For the moment this is what i use in my app and it works fine for me. Sorry for my poor english.
example app image

Related

Android: setTitle inside RecyclerView addOnItemTouchListener is not working

[UPDATE BELOW]
I'm trying to change the title in the default title bar after clicking an item in the RecyclerView which is inside onLoadFinished (AsyncTaskLoader) but title doesn't change. The idea is when I tab an item in the RecyclerView and data is loaded, title bar text should be changed too but it doesn't.
catsRecyclerView.addOnItemTouchListener(new RecyclerTouchListener(this, catsRecyclerView,new RecyclerTouchListener.ClickListener() {
#Override
public void onClick(View view, int position) {
Categories category = categories.get(position);
int catId = category.getId();
setTitle(category.getTitle());
drawerLayout.closeDrawer(GravityCompat.START);
commonActions(); //restarting loader and executing other methods
}
#Override
public void onLongClick(View view, int position) {
}
}));
When I log category.getTitle() I get the correct text but title doesn't change how can I achieve that?
[Update]
Replaced the default title bar with a custom action bar here's the layout of the activity:
<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/actionbar"/>
<android.support.design.widget.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"
>
<android.support.v7.widget.RecyclerView
android:id="#+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scrollbars="vertical" />
</android.support.design.widget.NavigationView>
</android.support.v4.widget.DrawerLayout>
The actiobar layout
<android.support.v7.widget.Toolbar
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="40dp"
android:background="#color/colorPrimary"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
android:id="#+id/primaryToolbar">
</android.support.v7.widget.Toolbar>
The activity
toolbar = findViewById(R.id.primaryToolbar);
setSupportActionBar(toolbar);
setTitle("My new title");
getSupportActionBar().setDisplayOptions(ActionBar.DISPLAY_SHOW_TITLE);
But it's size is so large taking the whole screen
I think the problem is in the listener. When I attach a listener to recycler view I do it throughout Using interface in adapter, this blog shows the way, also check out this StackOverflow answer in which and example is provided.
You have to enable the action bar to setTitle() by setting the following flag.
getSupportActionBar().setDisplayOptions(ActionBar.DISPLAY_SHOW_TITLE);
The above code works for AppCompatActivity.
I had 2 issues. The first one is about not changing the title of the titlebar after tabbing an item in the RecyclerView to reload the AsyncTaskLoader. The problem is there's another setTitle in the Loader function in addition to onLoadFinished so I removed it and kept the one inside onLoadFinished and now it's working fine so there's no need to replace the default title bar with the action bar.
The second issue when I tried to add the action bar, the title was taking the whole screen as you see in the image because there are 2 elements in the root view which are the actionBar and the NavigationView which made the actionBar the actual content that's why it was resized to take the whole screen. So i placed it inside a LinearLayout and the actual content goes below it that fixed the second problem

Full Screen Bottom Sheet with Close(X) button at the top

I am trying to implement a bottom sheet from the google design lib. Clicking on a button should open up bottom sheet which covers the whole activity window. Like when we open an email in Inbox by Gmail. But, it should open up from bottom and slide down to dismiss.
Button click should open up bottom sheet and on slide down or top left Close (X) button should close the sheet.
I have set up something like this:
<android.support.design.widget.CoordinatorLayout
.. >
<android.support.v4.widget.NestedScrollView
android:id="#+id/bottom_sheet"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="#string/bottom_sheet_behavior">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Hello Bottom Sheet !!" />
</android.support.v4.widget.NestedScrollView>
<include layout="#layout/content_my_activity" />
</android.support.design.widget.CoordinatorLayout>
And I am intializing it like this:
mBottomSheet = (NestedScrollView) findViewById(R.id.bottom_sheet);
mBottomSheetBehavior = BottomSheetBehavior.from(mBottomSheet);
mButton = (Button) findViewById(R.id.bottom_sheet_button);
mButton.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
mBottomSheetBehavior.setState(BottomSheetBehavior.STATE_EXPANDED);
}
});
However, when I click on a button, the text just appears at the bottom. Overlapping the default existing content. And no black transparent tint behind the bottom sheet.
How can I make it full screen when clicking on button?
The reason I am not using a fragment here is, I have some(many) variables depending on the content of the bottom sheet. So, if I show a bottom sheet via fragment, I need to pass and receive all the data to and fro. To avoid this, I want it to be part of the activity.
Is there any way I can achieve this? Thanks for your help.
mButton.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
mBottomsheet.callOnClick();
}
});
Try this code........
When you click at button you can consider this action like your NestedScrollView container just become visible so it will take place like you write at params
android:layout_width="match_parent"
android:layout_height="wrap_content"
If you want it to take full parent height just use
android:layout_height="match_parent"
If to speak about shadow background like at fragment you can trick that you can set background alpha color for NestedScrollView
android:background="#64000000"
But it is a hack, you can use fragment and just send all information to it from activity and vice versa

How to make custom view take up all the actionbar space so it will cover menu as well?

I have created app with similar functionality to a browser. This is what I have right now:
Whenever user clicks on the edittext(the one with google.com inside it) i want to to take all of the space in actionbar covering overflow button and other icons(those are menu items as well).
Is there any way way I could do that? So far I have tried setting the layout-weight of the edittext to 1 but it does not work. The custom view inside actionbar is an linear layout like this one here:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<EditText xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/searchfield"
android:layout_width="0dip"
android:layout_weight="1"
android:layout_height="match_parent"
android:background="#android:color/transparent"
android:imeOptions="actionGo"
android:inputType="textWebEmailAddress"
android:text="www.google.com" />
</LinearLayout>
I should also mention that i want to do it programatically.
Thanks guys
You can hide these icons by following topic: How do I hide a menu item in the actionbar?
I think you can easily hide the actionbar when click,
something like:
ActionBar actionBar = getActionBar(); //OR getSupportActionBar();
actionBar.hide();
Then bring it back when you need it by using:
actionBar.show();

How to create two SearchViews in the Toolbar in Android

I would like to have two search views inside a toolbar in one of my activities: the first for looking up the place of interest and the second for filtering by location.
The searchViews would be on top of each other always expanded. The top one would say "Search" as the hint. The bottom one would say "Nearby" as the hint. To the left would be the home button.
I have come up with two ways that could potentially work but I have encountered problems in both and I don't know how to resolve them.
First Solution (Current)
Here I have a linear layout and inside is a android.support.v7.widget.Toolbar, a view, and followed by a second Toolbar.
This is essentially what I want it to look like but the problem is that changing the hint text in onCreateOptionsMenu changes BOTH hints. I would like the top to say "Search" and the bottom to say "Nearby". It seems that because there are two toolbars, onCreateOptionsMenu affects both of them.
Code:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/search_container"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:orientation="vertical">
<android.support.v7.widget.Toolbar
android:id="#+id/search_toolbar"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:minHeight="?attr/actionBarSize"
android:theme="#style/ThemeOverlay.AppCompat.ActionBar">
</android.support.v7.widget.Toolbar>
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_marginLeft="72dp"
android:background="#90909090"/>
<android.support.v7.widget.Toolbar
android:id="#+id/search_toolbar2"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:minHeight="?attr/actionBarSize"
app:contentInsetStart="56dp"
android:theme="#style/ThemeOverlay.AppCompat.ActionBar">
</android.support.v7.widget.Toolbar>
<include
layout="#layout/toolbar_action_bar_shadow"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"/>
</LinearLayout>`
onCreate:
Toolbar toolbar2 = (Toolbar) findViewById(R.id.search_toolbar2);
setSupportActionBar(toolbar2);
Toolbar toolbar = (Toolbar) findViewById(R.id.search_toolbar);
setSupportActionBar(toolbar);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
getSupportActionBar().setDisplayShowHomeEnabled(false);
getSupportActionBar().setDisplayShowTitleEnabled(false);
OnCreateOptionsMenu:
SearchView searchViewTop = (SearchView) MenuItemCompat.getActionView(menu.findItem(R.id
.search_top));
SearchManager searchManager1 = (SearchManager) getActivity().getSystemService(Context
.SEARCH_SERVICE);
searchViewTop.setSearchableInfo(searchManager1.getSearchableInfo(getActivity()
.getComponentName()));
searchViewTop.setIconified(false);
searchViewTop.onActionViewExpanded();
searchViewTop.setQueryHint("Nearby");
Second Solution (Old)
The second method involves putting a searchView instead of a second toolbar in the xml file. Although the second searchview isn't inside the toolbar, it can be made to look like it is. The problem I encountered with this is that the searchView not inside the toolbar looks different from the searchView inside the toolbar and how I would like it. When not inside the toolbar, the hint text is aligned further to the right and not directly underneath the top hint text. Any new text entered inside the searchview would be aligned correctly however. I tried customizing the style of the searchview to align it properly but was unable to find a correct method.
I was wondering if there is a way to correct either of my methods to make it work or if there is a new way to setup these two searchViews. Thanks.
I realized that when you call setSupportActionBar() for more than one toolbar, changes in onCreateOptionsMenu affect all the toolbars added. To solve this problem, I just called setSupportActionBar only on my top toolbar. For the bottom toolbar, I called in onCreate
toolbar2.inflateMenu(R.menu.search2);
SearchView searchViewBottom = (SearchView)findViewById(R.id.search_bottom);
searchViewBottom.onActionViewExpanded();
Then handle all actions inside with setOnMenuItemClickListener.

Android extend up button

I want to extend the up button on the actionbar to include the activity name. For example, instead of only being able to click the arrow to go back, I could also click the words next to it. I know some apps allow this but I haven't seen any instructions on how to do it.
Here is an example of what it currently allows:
Here is an example of what I want it to do:
What you can do is create a custom layout in your toolbar. Then when the user clicks on the view containing the title text and the up button, you handle the logic yourself.
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/primary"
app:contentInsetStart="72dp"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<!--Contains your up button and title text-->
<SomeCustomLayout
android:id="#+id/customLayout"
android:layout_width="match_parent"
android:layout_width="wrap_content" />
</android.support.v7.widget.Toolbar>
Then get the view in your code with
Toolbar toolbar = findViewById(R.id.toolbar);
SomeCustomLayout customLayout = toolbar.findViewById(R.id.customLayout);
customLayout.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
// You'll probably want to fire off
// an intent here to go back to the parent activity
}
});

Categories

Resources