Geek Answers Handbook

How can I make my button look more like the Floating Action button from Android JellyBean (v21)?

How to make your button look more like a floating action button?

My button so far looks close, but so far does not look the same. What other changes would you suggest?

The image of what the Floating Action button looks like is shown below, as well as the image of my button so far and my code so far

The image of the actual floating action button is below:

enter image description here

The image of my actual button is still below:

enter image description here

My API is v19

The code:

Code for the actual button

 <Button
        android:layout_width="wrap_content"
        android:layout_height="60dp"
        android:text="+"
        android:textSize="60sp"
        android:background="@drawable/addbutton"
        android:elevation="3dp"
        android:layout_marginTop="215dp"
        android:layout_marginLeft="310dp"
        android:fontFamily="sans-serif-light"
        android:gravity="center"
        android:textColor="#ffff" />

Addbutton.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <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="#FF4186"/>
        </shape>
    </item>
</layer-list>
+4
source share
3 answers

:

summary button

:

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    ...

    <RelativeLayout
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="bottom|end">
        <Button
            android:id="@+id/add_button"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_margin="10dp"
            android:background="@drawable/add_button_selector"
            android:gravity="center"
            android:stateListAnimator="@null"
            android:text="+"
            android:textSize="25sp"
            android:elevation="3dp"
            android:fontFamily="sans-serif-light"
            android:textColor="#FFF"
            tools:ignore="HardcodedText,UnusedAttribute"/>
    </RelativeLayout>
</LinearLayout>

:

  • RelativeLayout, .
  • margin
  • gravity
  • stateListAnimator null, ( )

RES/V21- /add _button_selector.xml

<ripple
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="#b0372c">
    <item>
        <shape android:shape="oval">
            <solid android:color="#da4336" />
        </shape>
    </item>
</ripple>

/ /add _button_selector.xml:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_selected="true" android:drawable="@drawable/add_button_selected"/>
    <item android:state_pressed="true" android:drawable="@drawable/add_button_selected"/>
    <item android:drawable="@drawable/add_button"/>
</selector>

/ /add _button.xml:

<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid android:color="#da4336" />
</shape>

/ /add _button_selected.xml:

<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid android:color="#b0372c" />
</shape>

:

  • API 21 :
    ripple effect

  • API-,
  • API-, , / , , .
+5

,

Fragment.xml

<Button
    android:id="@+id/contact_list_add_button"
    android:layout_width="65dip"
    android:layout_height="65dip"
    android:layout_alignParentBottom="true"
    android:layout_alignParentEnd="true"
    android:layout_alignParentRight="true"
    android:layout_marginBottom="20dip"
    android:layout_marginEnd="20dip"
    android:layout_marginRight="20dip"
    android:background="@drawable/round_button_shape"
    android:text="@string/action_plus"
    android:textColor="@android:color/white"
    android:textSize="35sp" />

drawable (round_button_shape)

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item>
        <shape android:shape="oval">
            <solid android:color="@android:color/transparent"/>
            <stroke android:width="2dip" android:color="#44aaaaaa"/>
            <padding 
                android:left="2dip"
                android:right="2dip"
                android:top="2dip"
                android:bottom="2dip"
                />            
        </shape>
    </item>
    <item>
        <shape android:shape="oval">
            <solid android:color="@android:color/transparent"/>
            <stroke android:width="2dip" android:color="#90aaaaaa"/>
            <padding 
                android:left="2dip"
                android:right="2dip"
                android:top="2dip"
                android:bottom="2dip"
                />                        
        </shape>
    </item>
    <item>
        <shape android:shape="oval">
            <solid android:color="@android:color/transparent"/>
            <stroke android:width="2dip" android:color="#ffaaaaaa"/>
            <padding 
                android:left="1dip"
                android:right="1dip"
                android:top="1dip"
                android:bottom="1dip"
                />                        
        </shape>
    </item>
   <item android:drawable="@drawable/round_shape" android:left="1dip"         
    android:top="1dip" android:right="1dip" android:bottom="1dip"/>  
</layer-list>

Drawable

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

    <solid android:color="@color/red_dark"/>
</shape>

, ,

+1

( ). , , , FAB, , . gradle. / github , , Google.

https://github.com/makovkastar/FloatingActionButton

0

More articles:


All Articles