AppCompat v21을 사용하여 Android에서 FAB (플로팅 작업 버튼)를 만드는 방법은 무엇입니까?

Google 캘린더와 같은 플로팅 작업 버튼 (목록보기에 항목을 추가하기 위해)을 만들고 사전 롤리팝 Android 버전 (5.0 이전)과의 호환성을 유지하고 싶습니다.

이 레이아웃을 만들었습니다.

활동 main_activity.xml :

<LinearLayout ... >

     <include
         layout="@layout/toolbar"/>

     <RelativeLayout ... >

     <!-- My rest of the layout -->

          <!-- Floating action button -->
          <ImageButton style="@style/AppTheme"
                     android:layout_width="60dp"
                     android:layout_height="60dp"
                     android:text="New Button"
                     android:id="@+id/button"
                     android:src="@drawable/ic_fab"
                     android:background="@drawable/fab"
                     android:layout_alignParentBottom="true"
                     android:layout_alignParentRight="true"
                     android:layout_marginBottom="24dp"
                     android:layout_marginRight="24dp"/>

     </RelativeLayout>

 </LinearLayout>

드로어 블 fab.xml :

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="oval">
    <solid android:color="#ffa48bc0"/>
</shape>

스타일 styles.xml

<resources>
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="colorPrimary">#ff1d79b1</item>
        <item name="colorPrimaryDark">#ff084d95</item>
    </style>
</resources>

결과는 비슷하지만 머티리얼 디자인의 특징 인 음영이 없습니다.

캘린더의 플로팅 작업 버튼 :

내 앱의 플로팅 작업 버튼 :

버튼에 음영을 추가하려면 어떻게해야합니까?

이미 속성 상승을 사용했지만 작동하지 않습니다.

더 이상 자신의 FAB를 만들거나 타사 라이브러리를 사용할 필요가 없으며 AppCompat 22에 포함되었습니다.

https://developer.android.com/reference/android/support/design/widget/FloatingActionButton.html

gradle-file에 design이라는 새로운 지원 라이브러리를 추가하기 만하면됩니다.

compile 'com.android.support:design:22.2.0'

... 그리고 당신은 갈 수 있습니다.

<android.support.design.widget.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:layout_margin="16dp"
        android:clickable="true"
        android:src="@drawable/ic_happy_image" />

저는 일반적으로 xml 드로어 블을 사용하여 사전 롤리팝 위젯에서 그림자 / 고도를 생성했습니다. 예를 들어 여기에는 플로팅 작업 버튼의 고도를 시뮬레이션하기 위해 롤리팝 이전 기기에서 사용할 수있는 xml 드로어 블이 있습니다.

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:top="8px">
    <layer-list>
        <item>
            <shape android:shape="oval">
                <solid android:color="#08000000"/>
                <padding
                    android:bottom="3px"
                    android:left="3px"
                    android:right="3px"
                    android:top="3px"
                    />
            </shape>
        </item>
        <item>
            <shape android:shape="oval">
                <solid android:color="#09000000"/>
                <padding
                    android:bottom="2px"
                    android:left="2px"
                    android:right="2px"
                    android:top="2px"
                    />
            </shape>
        </item>
        <item>
            <shape android:shape="oval">
                <solid android:color="#10000000"/>
                <padding
                    android:bottom="2px"
                    android:left="2px"
                    android:right="2px"
                    android:top="2px"
                    />
            </shape>
        </item>
        <item>
            <shape android:shape="oval">
                <solid android:color="#11000000"/>
                <padding
                    android:bottom="1px"
                    android:left="1px"
                    android:right="1px"
                    android:top="1px"
                    />
            </shape>
        </item>
        <item>
            <shape android:shape="oval">
                <solid android:color="#12000000"/>
                <padding
                    android:bottom="1px"
                    android:left="1px"
                    android:right="1px"
                    android:top="1px"
                    />
            </shape>
        </item>
        <item>
            <shape android:shape="oval">
                <solid android:color="#13000000"/>
                <padding
                    android:bottom="1px"
                    android:left="1px"
                    android:right="1px"
                    android:top="1px"
                    />
            </shape>
        </item>
        <item>
            <shape android:shape="oval">
                <solid android:color="#14000000"/>
                <padding
                    android:bottom="1px"
                    android:left="1px"
                    android:right="1px"
                    android:top="1px"
                    />
            </shape>
        </item>
        <item>
            <shape android:shape="oval">
                <solid android:color="#15000000"/>
                <padding
                    android:bottom="1px"
                    android:left="1px"
                    android:right="1px"
                    android:top="1px"
                    />
            </shape>
        </item>
        <item>
            <shape android:shape="oval">
                <solid android:color="#16000000"/>
                <padding
                    android:bottom="1px"
                    android:left="1px"
                    android:right="1px"
                    android:top="1px"
                    />
            </shape>
        </item>
        <item>
            <shape android:shape="oval">
                <solid android:color="#17000000"/>
                <padding
                    android:bottom="1px"
                    android:left="1px"
                    android:right="1px"
                    android:top="1px"
                    />
            </shape>
        </item>
    </layer-list>
</item>
<item>
    <shape android:shape="oval">
        <solid android:color="?attr/colorPrimary"/>
    </shape>
</item>
</layer-list>

대신 ?attr/colorPrimary색상을 선택할 수 있습니다. 다음은 결과 스크린 샷입니다.

앱에 FAB (Floating Action Button)를 추가하는 라이브러리가 많이 있습니다. 여기에 내가 아는 몇 가지 라이브러리가 있습니다.

makovkastar의 FAB

futuersimple의 복합 FAB

FAB도 포함하는 머티리얼 디자인 라이브러리

이러한 모든 라이브러리는 사전 롤리팝 장치에서 지원되며 최소 API 8입니다.

다음은 Android 용 추가 무료 플로팅 작업 버튼 라이브러리입니다. 다양한 맞춤 설정이 있으며 SDK 버전 9 이상이 필요합니다.

전체 데모 비디오

@Justin Pollard xml 코드는 정말 잘 작동합니다. 참고로 다음 xml 줄을 사용하여 파급 효과를 추가 할 수 있습니다.

    <item>
    <ripple
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:color="?android:colorControlHighlight" >
        <item android:id="@android:id/mask">
            <shape android:shape="oval" >
                <solid android:color="#FFBB00" />
            </shape>
        </item>
        <item>
            <shape android:shape="oval" >
                <solid android:color="@color/ColorPrimary" />
            </shape>
        </item>
    </ripple>
</item>

이 라이브러리를 사용해보십시오 , 그것은 그림자 minSdkVersion=7를 지원 android:elevation하고 API-21암묵적으로 속성을 지원 합니다 .

원본 게시물은 여기에 있습니다 .

패딩 및 높이 추가 :

 android:elevation="10dp"
 android:padding="10dp"