CODEWITHSUNDEEP
androidxmlandroid-layoutandroid-intentandroid-activity
user4424557
user4424557

Reputation:

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

How do I make my button look more like the Floating Action Button?

My button so far looks close but as yet, doesn't look the same. What other changes would you suggest?

An image of what the Floating Action Button looks like is below, as is an image of my button so far and my code so far

An image of the actual Floating Action Button is below:

enter image description here

An image of my actual Button so far is below:

enter image description here

My API is v19

Code:

Code for 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>

Upvotes: 4

Views: 5235

Answers (3)

Simas
Simas

Reputation: 44128

Result:

resulting button

Button in a layout:

<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>

Explanation:

  • RelativeLayout, overlays everything and places the button at the bottom-right corner.
  • margin provides some space for the elevation
  • gravity centers the background drawable and the text
  • stateListAnimator set to null so it doesn't mess with elevation (it can be animated via this)

res/drawables-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>

res/drawables/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>

res/drawables/add_button.xml:

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

res/drawables/add_button_selected.xml:

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

Explanation:

  • Since API 21 you can use the ripple effect:
    ripple effect
  • However for older versions you'll have to stick with the good old color selector

Notes

  • There may be a user-made ripple library for lower APIs, that might be worth checking out
  • Lower APIs may need to use shadow and/or a custom drawable instead of elevation, haven't tested that since I don't have a proper device

Upvotes: 5

ryanjohn
ryanjohn

Reputation: 86

I have been using the following library for my app (I'm not the author). It seems to work very well, looks just like a FAB and even can be easily attached to a listview to autohide when you scroll down. The library is easy to add through gradle too. The image/animation on the github page makes the button look low quality but it isn't in real life and looks exactly like the google versions.

https://github.com/makovkastar/FloatingActionButton

Upvotes: 0

user3749883
user3749883

Reputation: 184

I build this kind of button in my app using this code

Code in 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" />

Code for 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>

Code for round shape 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>

Additionaly i would recommend to use this code within a selector to provide feedback if the user interact with the button

Upvotes: 1

Related Questions