FloatingActionButton doesn't work properly

Question

I am having some issues with FloatingActionButton, It works as desired on emulator but when i install to my phone (Galaxy s4, Android V4.4.4) it doesn't work as desired I am attaching some pictures to illustrate the bug. Can someone tell me what can i do?

I put the view in a fragment

Fragment Class

public class MiniGameMenuFragment extends Fragment implements View.OnClickListener {
    protected FloatingActionButton more_menu_btn, card_view_mode_btn, expand_view_btn;

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.mini_menu_fragment, container, false);
        this.more_menu_btn = (FloatingActionButton) view.findViewById(R.id.more_c_btn);
        this.card_view_mode_btn = (FloatingActionButton) view.findViewById(R.id.card_view_mode_c_btn);
        this.expand_view_btn = (FloatingActionButton) view.findViewById(R.id.expand_view_c_btn);

        this.more_menu_btn.setOnClickListener(this);
        this.card_view_mode_btn.setOnClickListener(this);
        this.expand_view_btn.setOnClickListener(this);

        return view;
    }


    @Override
    public void onClick(View v) {

    }

}

mini_menu_fragment.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@color/red">

        <android.support.design.widget.FloatingActionButton
            android:id="@+id/more_c_btn"
            android:layout_width="38dp"
            android:layout_height="38dp"
            android:clickable="true"
            android:scaleType="center"
            android:src="@mipmap/ic_more_vert_white_24dp"
            app:backgroundTint="#ff9800"
            app:borderWidth="0dp"
            app:elevation="8dp"
            app:fabSize="normal"
            app:pressedTranslationZ="12dp"
            app:rippleColor="#ff5722" />
    </LinearLayout>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/card_view_mode_c_btn"
        android:layout_width="38dp"
        android:layout_height="38dp"
        android:clickable="true"
        android:src="@mipmap/card_expanded_view_mode"
        app:backgroundTint="#ff9800"
        app:borderWidth="0dp"
        app:elevation="8dp"
        app:pressedTranslationZ="12dp"
        app:rippleColor="#ff5722" />

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/expand_view_c_btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="24dp"
        android:clickable="true"
        android:src="@mipmap/zoom_out_white"
        app:backgroundTint="#ff9800"
        app:borderWidth="0dp"
        app:elevation="8dp"
        app:fabSize="normal"
        app:pressedTranslationZ="12dp"
        app:rippleColor="#ff5722" />
</LinearLayout>

main activity xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/gameBackground"
    android:orientation="vertical"
    tools:context="com.example.MainActivity">


    <RelativeLayout
        android:id="@+id/floating_menu_container_layout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true">

    </RelativeLayout>

</RelativeLayout>

MainActivity Class

public class MainActivity extends AppCompatActivity {
    FragmentManager fragmentManager;
    FragmentTransaction transaction;

    MiniGameMenuFragment miniGameMenu;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);


        this.miniGameMenu = new MiniGameMenuFragment();

        this.fragmentManager = getFragmentManager();
        this.transaction = fragmentManager.beginTransaction();

        this.transaction.add(R.id.floating_menu_container_layout, miniGameMenu, "miniGameMenuFragment");
        this.transaction.commit();
    }

    @Override
    protected void onResumeFragments() {
        super.onResumeFragments();
    }
}

On Emulator

On Phone Galaxy 4s

SOLVED:

The problem was the elevation, as @SadiqMdAsif said 8dp was too much for my galaxy s4 resolution thats why it created an extra margin so that i reduced to 2dp

Answer 1

Create variation from this option in the designer page