I'm using floating action menu from yavski library and I tried to place it between 2 layout just like in this question:
But when I did it with fab - menu from yavski library, it did not work...
What should I do?
EDIT
I'm adding the button between header and "cardview"(link).
When I slide down in this and I use default library for fab, it works well (Button disappear and appear when slide up). But when I use the special one, it at start looks good, but when i slide down, instead of disappearing it slides down too...
And the last problem is, that when the button is clicked, it moves a bit upwards...
"A simple library marrying together FAB + ..."
I dont use this special library your mentioned but with the default one it works like this and if the guy that created the projected worked well it should too:
<android.support.design.widget.CoordinatorLayout
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:background="#color/white">
//Content
</LinearLayout>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:clickable="true"
android:onClick="process"
android:src="#drawable/ic_add"
app:layout_anchor="#id/ANCHOR_VIEW"
app:layout_anchorGravity="bottom|right|end"
app:backgroundTint="#color/accent"/>
</android.support.design.widget.CoordinatorLayout>
Related
I have tried to implement the material components bottom app bar, following these guidelines and doing a refactor to AndroidX + updating my AppTheme.
Material components - bottom app bar
So far so good, all working, but the button is cut off in my fragment.
The xml preview however shows this, which seems like everything is fine:
Here is my xml code:
<androidx.coordinatorlayout.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">
<!-- Other components and views -->
<com.google.android.material.bottomappbar.BottomAppBar
android:id="#+id/bottombar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
app:elevation="2dp"
app:fabAlignmentMode="center"
app:fabCradleVerticalOffset="10dp"
app:fabCradleMargin="10dp" />
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top|center_horizontal"
android:adjustViewBounds="true"
app:layout_anchor="#id/bottombar"
app:layout_anchorGravity="top|center"
app:srcCompat="#drawable/marker" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
I even increased the fabCradleMargin and the fabCradleOffset - otherwise the button is completely in the bottom and not at all floating in that half circle as it is supposed to...
anyone got any clues for this? Thanks a lot!
So I noticed it has to do with the height of the bottom app bar. If i manually set it to 80dp, the Fab shows as it is supposed to.
I tried around a bit more and noticed this manual height setting is only necessary in fragments. I only placed the bottom app bar in a fragment to test it anyways.
So now I implemented it the same way as in the guideline in my MainActivityand then set up a function showFab(Boolean enable) that can then be called in different fragments based on the need.
Works like a charm, if anyone faces the same issues. I guess this might be as it is not supposed to be implemented in a single fragment only.
I started a project with a Navigation Drawer from the basic template of Android Studio. The only modification I made was to display it as permanent in order to have a tablet/TV layout.
To achieve this, the only modification I made was in the xml layout. This allow the NavigationView to be always visible.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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="match_parent"
android:orientation="horizontal">
<android.support.design.widget.NavigationView
android:id="#+id/nav_view"
android:layout_width="300dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true"
app:headerLayout="#layout/nav_header_main"
app:menu="#menu/activity_main_drawer" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<include
layout="#layout/app_bar_main"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="Content will come here" />
</LinearLayout>
</LinearLayout>
I also put the project on Github, so anyone can test it.
PROJECT DEMO ON GITHUB
https://github.com/ChristopheVersieux/NavFocus
WHAT IS HAPPENING
My issue comes when I start selecting items on the drawer with the D-pad.
Once an item is selected, the focus is completely lost. Trying to get back to the Drawer and get focus seems very hard and I have to try several times with right/left arrows
WHAT IS EXPECTED:
Drawer should keep focus, or focus should be easy to bring back to the Drawer.
WHAT I TRIED:
The simplest Idea I had was to force the Drawer to get focus again, but this code doesn't change anything:
navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
#Override
public boolean onNavigationItemSelected(MenuItem menuItem) {
menuItem.setChecked(true);
//This is where I will replace the Fragments in the right area.
navigationView.clearFocus();
navigationView.requestFocus();
return true;
}
});
Thank a lot for your help.
I would start by removing android:layout_gravity="start"
This is simply not needed as its parent is a horizontal LinearLayout.
The Navigation Drawer must be permanently visible on Tablets and TV. They stay hidden for mobile. These are part of the Material Design guidelines.
This requires quite a different setup compared to what I see in your project on GitHub. Which includes supplying different resources using qualifiers.
This tutorial on Navigation Drawer (Design Support) will help you with exactly that setup, as per the latest Material Design guidelines. Alternatively the project files for the tutorial can be found on GitHub.
UPDATE:
As pointed out, Support library v24 creates issues with the dpad. Reverting to v23 works just fine.
This post says:
When you add a FloatingActionButton as a child of your
CoordinatorLayout and then pass that CoordinatorLayout to your
Snackbar.make() call - instead of the snackbar displaying over the
floating action button, the FloatingActionButton ... automatically
move upward as the snackbar animates in and returns to its position
when the snackbar animates out
I've made exactly as described there but FAB does not move upward. (Snackbar can be swiped out, it means that CoordinatorLayout knows about it.)
Upd
Layout:
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.v4.widget.DrawerLayout
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.Toolbar
android:id="#+id/action_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:theme="#style/ThemeOverlay.ActionBar"/>
<FrameLayout
android:id="#+id/content_frame"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/action_toolbar"/>
</RelativeLayout>
<ListView
android:id="#+id/left_drawer"
android:layout_width="240dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:layout_marginTop="?attr/actionBarSize"
android:background="#color/theme_primary_darker_color"
android:choiceMode="singleChoice"
android:divider="#android:color/transparent"
android:dividerHeight="0dp"/>
</android.support.v4.widget.DrawerLayout>
<android.support.design.widget.FloatingActionButton
android:id="#+id/toolbar_action_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_navigation_white_24dp"
android:layout_margin="16dp"
android:visibility="gone"
app:borderWidth="0dp"
app:elevation="6dp"
app:layout_anchor="#id/action_toolbar"
app:layout_anchorGravity="bottom|right|end"
app:pressedTranslationZ="12dp"/>
</android.support.design.widget.CoordinatorLayout>
Code:
mCoordinatorLayout = (CoordinatorLayout) findViewById(R.id.main_content);
...
Snackbar.make(mCoordinatorLayout, R.string.waypoint_deleted, Snackbar.LENGTH_LONG).show();
I've written sample project based on the code you posted and I had to change three things to make FloatingActionButton aware of the Snackbar.
Set 'minifyEnabled' property of my build to false - looks like Proguard strips out some annotations (e.g. Behaviours) which are necessary to coordinate FloatingActionButton. You'll need to add some Proguard rules in your release build where Proguard is enabled.
Pass the FloatingActionButton as a first argument of Snackbar.make(), not the CoordinatorLayout itself as mentioned here.
Remove app:layout_anchor="#id/action_toolbar" and replace app:layout_anchorGravity="bottom|right|end" with the app:layout_gravity="bottom|right|end" from the layout (not sure if it's suitable for you).
If it doesn't work for you, you can try to write your own Behavior class as described in the article mentioned above.
I had a similar problem where my fab button wouldn't move down. Took me a while but it was because I had animations off in the developers option. Hope you got it working even though I know this post is a bit dated.
I was having the issue where the fab would not return to its original location after the snackbar disappeared. Make sure Animator duration scale is turned on. A good default is 1x.
The setting can be found in:
Settings app --> Developer Options
Dev Settings app (on emulators)
This setting along with other animation settings were turned off on one of my emulators. Turning it back on got the fab working correctly.
Is there a way to achieve a feature like this https://github.com/futuresimple/android-floating-action-button/raw/master/screenshots/menu.gif in android app using material design support library. I don't wanna use any third party library to achieve this feature.
Currently, the only way to do it quickly and easily is by using third-party libraries.
Yes, it can be done using the Floating Button provided in the design library and it will be a whole lot of work.
I have been using the mentioned library for long and didn't have any problem at all. In my opinion, better to use a third-party library and get started quickly and focus on the core app logic more.
If you want I can give you links to more libraries.
Hope it helps you.
UPDATE
1) Rapid Floating Button (link)
2) Floating Action Button (link)
3) Floating Action Button (link)
4) Android Floating Action Button (link) - This is the one I am using. I needed to modify and add few of my own methods to support my apps demands.
Thanks.
It can be achieved by defining multiple FABs in your layout with all but one (the root FAB) initially hidden. Then add logic to display the hidden FABs when the root fab is clicked. To give users that warm fuzzy feeling add some animations into the mix. Its not as complicated as the accepted answer seems to suggest.
This is a good tutorial on how to do it.
The quickest and easiest way to achieve this is using animate().translationY(int x) function, you can animate the Floating Action button vertically using the function animate().translationY(int x)
In case you are looking for the code in kotlin you can see the code in my github repo animating-FAB
Before writing the code, setup your xml in a way the Floating action button should overlap each other so only one FAB should be vissable:
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.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"
tools:context=".MainActivity">
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<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.google.android.material.appbar.AppBarLayout>
<include layout="#layout/content_main" />
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/fab1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
app:fabSize="mini"
app:srcCompat="#android:drawable/ic_dialog_email" />
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/fab2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
app:fabSize="mini"
app:srcCompat="#android:drawable/ic_dialog_map" />
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/fab3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:tint="#android:color/white"
app:fabSize="mini"
app:srcCompat="#android:drawable/ic_btn_speak_now" />
<com.google.android.material.floatingactionbutton.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:gravity="center_vertical"
app:srcCompat="#android:drawable/ic_dialog_info" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
Now jumping to the MainActivity.java code you can sinply make two functions, to expend the FAB and collapse the FAB as shown below:
private void expendFABMenu(){
fab1.animate().translationY(-
getResources().getDimension(R.dimen.standard_55));
fab2.animate().translationY(-
getResources().getDimension(R.dimen.standard_105));
fab3.animate().translationY(-
getResources().getDimension(R.dimen.standard_155));
}
private void collapseFABMenu(){
isFABOpen=false;
fab1.animate().translationY(0);
fab2.animate().translationY(0);
fab3.animate().translationY(0);
}
Now just add the click listener on the FAB from which you want to expend and collapse the FABs.
fab.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
if(isFABExpened) {
isFABExpened = false;
collapseFABMenu();
} else {
isFABExpened = true;
expendFABMenu();
}
}
});
Isn't that was simple, you can check the complete java code in my github repository. In case you are looking for code in kotlin you can check my other github repo animating-FAB.
Is it possible to somehow use Android's SlidingPaneLayout to do exactly what it does except from the opposite side?
I.e. I want to bezel swipe the right-hand side of the screen instead of the left-hand side to expose the second pane, and it slides in from the right instead of the left.
Ideally I'm looking for a way to do it with this layout, or a modification of it.
i think it is possible, just as this one did it from the bottom. check the difference between it and the original code, and you will know how to do it.
I have not tried it yet but i dont see why it would't work with something like this:
<android.support.v4.widget.SlidingPaneLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/sliding_pane_layout"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<fragment
android:id="#+id/content_pane"
android:name="package.DetailFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:layout_marginRight="60dp"
/>
<fragment
android:id="#+id/list_pane"
android:name="package.MyListFragment"
android:layout_width="300dp"
android:layout_height="match_parent"
android:layout_gravity="left"
/>
This way you would have the ListFragment on the right side.
Now which one you want to have opened first is up to you.
If you wanted to have the left side showing first you'd need to have something like this in the onCreate method of your MainActivity:
private SlidingPaneLayout mSlidingLayout;
mSlidingLayout = (SlidingPaneLayout) findViewById(R.id.sliding_pane_layout);
mSlidingLayout.setPanelSlideListener(new SliderListener());
mSlidingLayout.openPane();
even tho i'm late i hope this helps.