CODEWITHSUNDEEP
androidandroiddesignsupport
Eugene H
Eugene H

Reputation: 3568

Android Design Support Library: FloatingActionButon (FAB) displaying correctly on earlier versions of android and incorrectly on Lollipop

I have added Android Design Support Library. I am testing the app with two emulators, running Lollipop and Jellybean. The Jellybean version is displaying the FAB correctly. On the Lollipop version the FAB does't have elevation or margins. Any suggestions on fixing this issue?

Below I have posted post the layout, Activity and two images showing the difference. If you need more code let me know and I will post it.

Note: I have removed most of the code not pertaining to the question.

Layout

<android.support.design.widget.CoordinatorLayout
    android:id="@+id/mainLayout"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:card_view="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">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="56dp"
            android:background="@color/primary"
            app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"/>

        <ImageView
            android:id="@+id/imShadow"
            android:layout_width="match_parent"
            android:layout_height="10dp"
            android:layout_below="@+id/toolbar"
            android:background="@drawable/toolbar_shadow"
            android:orientation="vertical"/>
    </RelativeLayout>

    <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="@mipmap/ic_search"/>

</android.support.design.widget.CoordinatorLayout>

Activity

public class MainActivity extends AppCompatActivity {

    private Toolbar toolbarMain;

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


        FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
        final CoordinatorLayout coordinatorLayout = (CoordinatorLayout) findViewById(R.id.mainLayout);

        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Snackbar.make(coordinatorLayout, "Hello World!", Snackbar.LENGTH_LONG).setAction("Action", new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {

                    }
                }).show();
            }
        });

    }

    private void iniToolbarMain() {
        toolbarMain = (Toolbar) findViewById(R.id.toolbar);
        toolbarMain.inflateMenu(R.menu.menu_main);
        toolbarMain.setTitle("Hello World");
        toolbarMain.setNavigationIcon(R.mipmap.ic_menu);
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        int id = item.getItemId();
        if (id == R.id.action_search) {
            handleToolbar.handleToolBar(search, toolbarMain, MainActivity.this);
            etSearch.requestFocus();
            return true;
        }
        return super.onOptionsItemSelected(item);
    }
}

Jellybean

enter image description here

Lollipop

enter image description here

Upvotes: 1

Views: 933

Answers (2)

Ferdous Ahamed
Ferdous Ahamed

Reputation: 21736

Add right and bottom margin to your android.support.design.widget.FloatingActionButton widget XML. If you want to customize FAB elevation then just use attribute app:elevation.

FAB XML:

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginBottom="20dp"
    android:layout_marginRight="20dp"
    android:layout_gravity="bottom|right"
    android:src="@mipmap/ic_search"
    app:fabSize="normal"/>

Upvotes: 0

Kandarp
Kandarp

Reputation: 136

Add boderWidth = "0dp" 

       app:borderWidth="0dp"
       app:elevation="4dp"

       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_margin="8dp"/>

Upvotes: 6

Related Questions