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
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 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.
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.
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.
I am trying to achieve the following with no success.I have two material design swipe tabs.I used this library 'com.oguzdev:CircularFloatingActionMenu:1.0.2' to achieve FAB but when i swipe the tab to the second tab,the FAB is still attached to the new fragment.
I would like to hide the FAB on the second Fragment.
Is there a way to achieve this?
Here is what I did for a similar kind of problem. I declared a coordinator layout for the fragment. Inside that coordinator layout as you can see in the image i have declared a recyclerView that I use and below that i declared my floating action button.
After this I inflated the layout for floating action button in the onCreateView fragment method.
Here is my XML File Code:
<android.support.design.widget.CoordinatorLayout
android:id="#+id/main_content"
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:focusableInTouchMode="true">
<EditText
android:id="#+id/search_string"
android:layout_width="match_parent"
android:layout_height="40dp"
android:layout_margin="5dp"
android:layout_marginTop="50dp"
android:hint="Search Keyword"
android:drawableLeft="#drawable/search"
android:gravity="left" >
</EditText>
<android.support.v7.widget.RecyclerView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/photo_recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="50dp"
android:scrollbars="vertical"/>
<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="#drawable/ic_action_name6" />
</android.support.design.widget.CoordinatorLayout>
Here is my Java File Code:
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.fragment_photo_list, container, false);
FloatingActionButton fab = (FloatingActionButton) view.findViewById(R.id.fab);
fab.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
Photo photo = new Photo();
PhotoLab.get(getActivity()).addPhoto(photo);
Intent intent = PhotoPagerActivity.newIntent(getActivity(), photo.getId());
startActivity(intent);
/*Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)
.setAction("Action", null).show();*/
}
});
mSearchString=(EditText) view.findViewById(R.id.search_string);
mPhotoRecyclerView = (RecyclerView) view.findViewById(R.id.photo_recycler_view);
mPhotoRecyclerView.setLayoutManager(new GridLayoutManager(getActivity(), 3));
updateUI();
return view;
}
It seems like this library assumes that you want to attach the FAB to your activity. The layout params that it generates also seems to assume that the parent is a FrameLayout. It is a little bit hacky, but you can detach it and reattach it where you want after you build() it.
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
FrameLayout root = (FrameLayout) inflater.inflate(R.layout.fragment_fab, container, false);
FloatingActionButton actionButton = new FloatingActionButton.Builder(getActivity())
.build();
actionButton.detach();
root.addView(actionButton);
return root;
}
You might check out my answer here: FAB animation with viewpager/tabslider
I think that might be roughly what you're looking for, but you will have to use the Support Library's FAB to accomplish it.
in your firstfragment.xml you must define the floating action button using the above library. i think u r defining it in you activity which has two fragments.
There are 2 situations that I can think of that make this happen:
When getting to the second tab, the previous view, which displayed the FAB button, is not removed when you navigate to your second tab, which leaves it there. For this I suggest looking into removeAllViews().
You're inflating the same xml layout file for both tabs. If you want the two tabs to have different content, then they probably should have differently defined xml layout files (in this case, one that mentions a FAB button, one that does not).
Good luck!
If you want it to only be on one fragment, then you could add the FAB on on the fragment xml file itself.