I want to create a floating action button with items like the picture. & also add some text beside the item. The picture is taken from google website. But i found some libraries to solve the problem. like this & this I am pretty much curious about android native design libraries. Any one have idea how to make possible with native library?
Picture:
Update: Code i written
FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
fab.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
// my actions is here
}
});
Xml are as follows
<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"
app:layout_behavior="com.alhikmah.weather360.utility.ScrollAwareFABBehavior" />
After finish my searching , i am decide to use FloatingActionButton library to achieve such effect what i need. I didn't find any native library to do this.
Related
Can anyone suggest me how to implement floating action icon/button which allows to go (or focus or scroll up) to the top of the page when clicked?
Thanks in advance for any help.
Add this code to your layout file:
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end|bottom"
android:src="#drawable/ic_my_icon"
android:layout_margin="16dp" />
You can then apply an View.OnClickListener to handle FAB taps.
FloatingActionButton fab = findViewById(R.id.fab);
fab.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view)
{
scrollView.fullScroll(ScrollView.FOCUS_UP); //code to scroll to the top of scrollview
}
});
I am using a floating action button(FAB) in my application to show Dialogs, everything is worked just fine when I tested my app in Xperia Z with Lopllipop 5.1.1.
However, the problem is when tested my app in ASUS Zenfone 6 with KitKat 4.4.2 and in Xperia C with Jelly Bean 4.2.2, the FAB loaded perfectly but the FAB does not show the Dialogs, seems like it does not responds when I touched it.
For the record, my min sdk version is 16.
What i want to ask is why this is happening? Is there anything wrong with my code, or maybe with the android version or API level?
Please take a look at my code. Here the XML code:
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="#drawable/ic_add_account"
android:visibility="invisible"
android:clickable="true"/>
and here how I declare and set the listener for the FAB:
FloatingActionButton fab;
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
fab = (FloatingActionButton) getActivity().findViewById(R.id.fab);
...
fab.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
showDialog();
}
});
...
}
The thing that made me confused is how it is worked in Xperia Z but it does not worked in ASUS Zenfone 6?
The problem in here is that I declared the FAB before the declaration of listView. Somehow by relocating the declaration of FAB after the the declaration of listView it will solved the problem.
From:
<android.support.design.widget.FloatingActionButton
...
...
.../>
<ListView
...
...
.../>
To:
<ListView
...
...
.../>
<android.support.design.widget.FloatingActionButton
...
...
.../>
Just as simple as that.
Programmatically bringing the FAB to front should also work:
FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
fab.bringToFront();
fab.setOnClickListener... //etc
Just add clickable and focusable and set both to "true" in FAB (floating action button) in xml file
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:clickable="true"
android:focusable="true"
/>
This enable floating button to receive click events and make clickable
I am using Android Studio 1.5.1 for the first time. Problem is that when I change the value of a TextView control either through its XML code or from its Properties window, it is not changed on Preview (Design View). However, when I test the application, it displays the updated value.
Here is screenshot...
Value of TextView is changed in Properties window, but not updated on Layout Preview
I have tried several things, like Clean, Rebuild, Invalidate Cache/Restart. My SDK and Android Studio is also updated...
EDIT
28-Feb-16
I have got a strange solution for this problem. Actually, I was trying to render my activity in Layout Design for API Level 23. I first opened activity_main.xml file and comment out the following xml code: -
<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>
and also comment out this code: -
<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" />
And then opened MainActivity.java file and comment out the following code: -
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
fab.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)
.setAction("Action", null).show();
}
});
It solved my both problems. Now Design View of Layout file (content_main.xml) is updating as I change it in xml code. And also Design View is rendering successfully for API Level 23. Previously, it was creating Rendering Problems for API Level 23. As far as the rendering problems, I am understanding it somehow. But why Design View of Layout File is now updating?
What you can do is use preview for xml changes. android studio provides preview screen for view xml changes. it shows changes instantly so you can also view while doing changes and there is also refresh button there in case if you are not able to see changes by any technical error just press refresh button which will refresh the xml design.
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.
I can't hide my FloatingActionButton. Here is my code:
XML:
<CoordinatorLayout>
<AppBarLayout android:id="#+id/appbar">
<CollapsingToolbarLayout>
<ImageView/>
<android.support.v7.widget.Toolbar />
</CollapsingToolbarLayout>
</AppBarLayout>
<NestedScrollView />
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
app:layout_anchor="#id/appbar"
app:layout_anchorGravity="bottom|right|end"/>
</CoordinatorLayout>
And I'm calling:
fab.clearAnimation();
fab.setVisibility(View.GONE);
I'm trying to hide the FAB, but it seems that setVisibility + clearAnimation does not work if the FAB is in a CoordinatorLayout.
Even if I call fab.clearAnimation, the animation is still triggered. Can anyone help me?
Use show and hide methods to show and hide the Floating Action Button
FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
// To show the Floating Action Button
fab.show();
// To hide the Floating Action Button
fab.hide();
For FloatingActionButton the setVisibility() method will give you an error while building with the latest Gradle 6.x and build-tool 28.x.x and is not encouraged any more. Instead, use:
fab.hide() // fab.setVisibility(View.GONE)
fab.show() // fab.setVisibility(View.VISIBLE)
Note: Succesfully tested on Android Studio 3.4.1, Gradle 6.0 and
build-tool 28.0.1
If your issue is the animation, you could try invalidating the FAB Behavior. As for the visibility, you should null the anchor you have set in your layout:
CoordinatorLayout.LayoutParams p = (CoordinatorLayout.LayoutParams) fab.getLayoutParams();
p.setBehavior(null); //should disable default animations
p.setAnchorId(View.NO_ID); //should let you set visibility
fab.setLayoutParams(p);
fab.setVisibility(View.GONE); // View.INVISIBLE might also be worth trying
//to bring things back to normal state
CoordinatorLayout.LayoutParams p = (CoordinatorLayout.LayoutParams) fab.getLayoutParams();
p.setBehavior(new FloatingActionButton.Behavior());
p.setAnchorId(R.id.appbar);
fab.setLayoutParams(p);
I ran into exactly the same issue. It would seem that Google's Android team doesn't want you to have control of the visibility when the FloatingActionButton is anchored to an AppBarLayout, as discussed in this issue - FloatingActionButton Ignores View Visibility
It looks like a viable fix is wrapping the FAB in a FrameLayout and setting the visibility on the wrapper instead, like this:
<android.support.design.widget.FrameLayout
android:id="#+id/fab_container"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:visibility="invisible">
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/fab_icon"/>
</android.support.design.widget.FrameLayout>
You may however wish to consider whether this is the ideal behaviour. Google advocates recommend that the FAB be visible as soon as the screen is created. If you're hiding it for longer than required to animate it in, consider showing a disabled state instead.
you can disable it and make it semitransparent like this
fab.setEnabled(false);
fab.setClickable(false);
fab.setAlpha(0.3f);
FloatingActionButton layers = (FloatingActionButton) findViewById(R.id.layers);
layers.hide();
It works for me, setVisibility doesn't work for FloatingActionButton as it belongs to another viewGroup that doesn't have setVisibility method.