Android FloatingActionButton onclick is just on background and not main button

Question

Hey all this is driving me crazy. Been at this for hours without any luck.

What I am trying to do is detect when the user clicks on the main floatingActionButton to open it and of course when they click on it to close.

My XML:

<RelativeLayout  xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:tools="http://schemas.android.com/tools"
   xmlns:app="http://schemas.android.com/apk/res-auto"
   xmlns:fab="http://schemas.android.com/apk/res-auto"
   android:id="@+id/theVideo"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:background="@android:color/background_dark"
   android:orientation="horizontal">

[More XML here]

<com.github.clans.fab.FloatingActionMenu
    android:id="@+id/floatingBtnMain"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_alignParentBottom="true"
    android:paddingStart="890dp"
    android:paddingLeft="890dp"
    android:paddingRight="50dp"
    android:paddingBottom="30dp"
    android:elevation="3dp"
    app:elevation="3dp"
    fab:menu_backgroundColor="#ccffffff"
    fab:menu_labels_ellipsize="end"
    fab:menu_labels_position="left"
    fab:menu_labels_singleLine="true">

    <com.github.clans.fab.FloatingActionButton
        android:id="@+id/floatingBtnCloseVid"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        fab:fab_label="Close Video"
        fab:fab_size="normal" />

    <com.github.clans.fab.FloatingActionButton
        android:id="@+id/floatingBtnPausePlay"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:scaleType="center"
        app:backgroundTint="#3BFD6A"
        app:fab_colorNormal="#3BFD6A"
        fab:fab_colorRipple="#faff99"
        fab:fab_label="Pause Video"
        fab:fab_shadowColor="#66000000"
        fab:fab_showShadow="true"
        fab:fab_size="normal"
        fab:menu_labels_colorRipple="#faff99"
        fab:menu_labels_showShadow="true"
        fab:menu_labels_singleLine="true" />

    <com.github.clans.fab.FloatingActionButton
        android:id="@+id/floatingBtnVolumeUp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        fab:fab_label="Skip Forward"
        fab:fab_size="normal" />

    <com.github.clans.fab.FloatingActionButton
        android:id="@+id/floatingBtnVolumeDown"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        fab:fab_label="Skip Back"
        fab:fab_size="normal" />
</com.github.clans.fab.FloatingActionMenu>

[More XML here]

</RelativeLayout>

And my Java code:

@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
    View rootView = inflater.inflate(R.layout._fragvideoplay, container, false);
    vidView = (VideoView)rootView.findViewById(R.id.videoView);
    String path = "android.resource://" + BuildConfig.APPLICATION_ID + "/raw/" + passMP4Name;
    vidView.setVideoURI(Uri.parse(path));
    sBar = (SeekBar) rootView.findViewById(R.id.seekBar);
    TextView tw = (TextView) rootView.findViewById(R.id.timeLeft);

    final FloatingActionMenu floatingBtnMenu = (FloatingActionMenu) rootView.findViewById(R.id.floatingBtnMain);
    final FloatingActionButton closeVid = (FloatingActionButton) rootView.findViewById(R.id.floatingBtnCloseVid);
    final FloatingActionButton pausePlayVid = (FloatingActionButton) rootView.findViewById(R.id.floatingBtnPausePlay);
    final FloatingActionButton floatingBtnVolumeUp = (FloatingActionButton) rootView.findViewById(R.id.floatingBtnVolumeUp);
    final FloatingActionButton floatingBtnVolumeDown = (FloatingActionButton) rootView.findViewById(R.id.floatingBtnVolumeDown);

    try {
       pausePlayVid.setImageDrawable(Drawable.createFromStream(
           getResources().getAssets().open("icons/pause.png"),
           null
       ));

       closeVid.setImageDrawable(Drawable.createFromStream(getResources().getAssets()
           .open("icons/closeVid.png"),null
       ));
    } catch (IOException e) {
        e.printStackTrace();
    }

    floatingBtnMenu.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            //This only fires if I click anywhere on the screen
            Log.d("tesing", "was clicked");
        }
    });

    closeVid.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            _stop();
            floatingBtnMenu.toggle(true);
        }
    });


    [more code here]
    
    return rootView;
}

As my comment in my code says, the only time the onClick() fires off is when I click on any part of the screen. When I just click on the main floatingActionButton it never fires off that onClick()). The same goes with clicking it again to close it.

So what am I missing? Why does the onClick() only fire on the whole fragment and not just on the floatingActionButton itself?

Answer 1

The reason this is happening I believe is because of how your XML is set up, let's take a look at this part of the code here.

<com.github.clans.fab.FloatingActionMenu
    android:id="@+id/floatingBtnMain"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_alignParentBottom="true"
    android:paddingStart="890dp"
    android:paddingLeft="890dp"
    android:paddingRight="50dp"
    android:paddingBottom="30dp"
    android:elevation="3dp"
    app:elevation="3dp"
    fab:menu_backgroundColor="#ccffffff"
    fab:menu_labels_ellipsize="end"
    fab:menu_labels_position="left"
    fab:menu_labels_singleLine="true">

If you focus here, on how the width and height is setup:

android:layout_width="match_parent"
android:layout_height="match_parent"

As you can see your width and height is set to match_parent which in turns means it is covering the full screen.

That is when you click on the full screen, it acts up. I suggest you take another look at this and maybe change it to wrap_content instead or however you want to set it up.