さまよえる、Android

Androidのプログラミングで便利なことや残しておきたいことを残しておく。もしオススメのライブラリがあったら教えてくださいね。

Androidのボタン系ライブラリ、FancyButtonsが洒落てる。

見たことあるねー系のボタンがサクッと作れるっぽい。

f:id:araiyusukej:20151028103745p:plain

f:id:araiyusukej:20151028103758p:plain

f:id:araiyusukej:20151028103817p:plain

github.com

compile 'com.github.medyo:fancybuttons:1.5@aar'
<ScrollView xmlns:tools="http://schemas.android.com/tools"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:fancy="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    tools:context="mehdi.sakout.fancybuttons.MainActivity$PlaceholderFragment" >

    <LinearLayout
        android:id="@+id/section1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical" >

        <LinearLayout
            android:id="@+id/section_facebook"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="#3b5998"
            android:gravity="center_horizontal"
            android:orientation="vertical"
            android:padding="20dp" >

            <mehdi.sakout.fancybuttons.FancyButton
                android:id="@+id/btn_facebook_like"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginBottom="10dp"
                android:padding="10dp"
                fancy:fb_borderColor="#FFFFFF"
                fancy:fb_borderWidth="1dp"
                fancy:fb_defaultColor="#3b5998"
                fancy:fb_focusColor="#5577bd"
                fancy:fb_fontIconResource="&#xf087;"
                fancy:fb_fontIconSize="15sp"
                fancy:fb_iconPosition="right"
                fancy:fb_radius="30dp"
                fancy:fb_text="Like my facebook page"
                fancy:fb_textColor="#FFFFFF"/>

            <mehdi.sakout.fancybuttons.FancyButton
                android:id="@+id/btn_facebook_share"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginBottom="10dp"
                android:padding="10dp"
                fancy:fb_borderColor="#FFFFFF"
                fancy:fb_borderWidth="1dp"
                fancy:fb_defaultColor="#3b5998"
                fancy:fb_focusColor="#5577bd"
                fancy:fb_fontIconResource="&#xf064;"
                fancy:fb_fontIconSize="25sp"
                fancy:fb_iconPosition="right"
                fancy:fb_iconPaddingLeft="20dp"
                fancy:fb_iconPaddingRight= "0dp"
                fancy:fb_radius="30dp"
                fancy:fb_text="Share the link"
                fancy:fb_textColor="#FFFFFF"/>

            <mehdi.sakout.fancybuttons.FancyButton
                android:id="@+id/btn_facebook_follow"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginBottom="10dp"
                android:padding="10dp"
                fancy:fb_borderColor="#FFFFFF"
                fancy:fb_borderWidth="1dp"
                fancy:fb_defaultColor="#3b5998"
                fancy:fb_focusColor="#5577bd"
                fancy:fb_fontIconResource="&#xf005;"
                fancy:fb_fontIconSize="25sp"
                fancy:fb_iconPosition="right"
                fancy:fb_radius="30dp"
                fancy:fb_text="Follow Mehdi Sakout"
                fancy:fb_textColor="#FFFFFF" />
        </LinearLayout>


        <LinearLayout
            android:id="@+id/section_socialnetworks"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="#ffffff"
            android:gravity="center_horizontal"
            android:minHeight="200dp"
            android:orientation="vertical"
            android:padding="20dp" >

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_marginBottom="15dp"
                android:gravity="center" >

                <mehdi.sakout.fancybuttons.FancyButton
                    android:id="@+id/btn_android"
                    android:layout_width="64dp"
                    android:layout_height="64dp"
                    android:layout_marginRight="10dp"
                    android:padding="10dp"
                    fancy:fb_defaultColor="#55acee"
                    fancy:fb_focusColor="#313131"
                    fancy:fb_iconResource="@mipmap/ic_launcher"
                    fancy:fb_iconPaddingLeft="0dp"
                    fancy:fb_iconPaddingRight="0dp"
                    fancy:fb_radius="64dp"
                    fancy:fb_textColor="#FFFFFF" />

                <mehdi.sakout.fancybuttons.FancyButton
                    android:id="@+id/btn_dropbox"
                    android:layout_width="64dp"
                    android:layout_height="64dp"
                    android:layout_marginRight="10dp"
                    android:padding="10dp"
                    fancy:fb_defaultColor="#007ee5"
                    fancy:fb_iconPaddingLeft="0dp"
                    fancy:fb_iconPaddingRight="0dp"
                    fancy:fb_focusColor="#313131"
                    fancy:fb_iconResource="@mipmap/ic_launcher"
                    fancy:fb_radius="64dp">
                </mehdi.sakout.fancybuttons.FancyButton>
            </LinearLayout>

            <LinearLayout
                android:id="@+id/sn_pos2"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_marginBottom="15dp"
                android:gravity="center"
                android:orientation="horizontal" >

                <mehdi.sakout.fancybuttons.FancyButton
                    android:id="@+id/btn_instagram"
                    android:layout_width="64dp"
                    android:layout_height="64dp"
                    android:layout_marginRight="10dp"
                    android:padding="10dp"
                    fancy:fb_defaultColor="#3f729b"
                    fancy:fb_iconPaddingLeft="0dp"
                    fancy:fb_iconPaddingRight="0dp"
                    fancy:fb_focusColor="#313131"
                    fancy:fb_iconResource="@mipmap/ic_launcher"
                    fancy:fb_radius="64dp">
                </mehdi.sakout.fancybuttons.FancyButton>

                <mehdi.sakout.fancybuttons.FancyButton
                    android:id="@+id/btn_sound"
                    android:layout_width="64dp"
                    android:layout_height="64dp"
                    android:layout_marginRight="10dp"
                    android:padding="10dp"
                    fancy:fb_defaultColor="#ff8800"
                    fancy:fb_iconPaddingLeft="0dp"
                    fancy:fb_iconPaddingRight="0dp"
                    fancy:fb_focusColor="#313131"
                    fancy:fb_iconResource="@mipmap/ic_launcher"
                    fancy:fb_radius="64dp">
                </mehdi.sakout.fancybuttons.FancyButton>
            </LinearLayout>

            <LinearLayout
                android:id="@+id/LinearLayout1"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:gravity="center"
                android:orientation="horizontal" >

                <mehdi.sakout.fancybuttons.FancyButton
                    android:id="@+id/btn_gplus"
                    android:layout_width="64dp"
                    android:layout_height="64dp"
                    android:layout_marginRight="10dp"
                    android:padding="10dp"
                    fancy:fb_defaultColor="#dd4b39"
                    fancy:fb_iconPaddingLeft="0dp"
                    fancy:fb_iconPaddingRight="0dp"
                    fancy:fb_focusColor="#313131"
                    fancy:fb_iconResource="@mipmap/ic_launcher"
                    fancy:fb_radius="64dp">
                </mehdi.sakout.fancybuttons.FancyButton>

                <mehdi.sakout.fancybuttons.FancyButton
                    android:id="@+id/btn_facebook"
                    android:layout_width="64dp"
                    android:layout_height="64dp"
                    android:layout_marginRight="10dp"
                    android:padding="10dp"
                    fancy:fb_defaultColor="#000000"
                    fancy:fb_iconPaddingLeft="0dp"
                    fancy:fb_iconPaddingRight="0dp"
                    fancy:fb_focusColor="#313131"
                    fancy:fb_iconResource="@mipmap/ic_launcher"
                    fancy:fb_radius="64dp" >
                </mehdi.sakout.fancybuttons.FancyButton>
            </LinearLayout>
        </LinearLayout>
        <LinearLayout
            android:id="@+id/section_spotify"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="#222326"
            android:gravity="center_horizontal"
            android:orientation="vertical"
            android:padding="20dp" >
            <mehdi.sakout.fancybuttons.FancyButton
                android:id="@+id/btn_spotify"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginBottom="10dp"
                android:paddingBottom="10dp"
                android:paddingLeft="20dp"
                android:paddingRight="20dp"
                android:paddingTop="10dp"
                fancy:fb_defaultColor="#7ab800"
                fancy:fb_focusColor="#9bd823"
                fancy:fb_fontIconResource="&#xf04b;"
                fancy:fb_iconPosition="left"
                fancy:fb_radius="30dp"
                fancy:fb_text="SHUFFLE PLAY"
                fancy:fb_textColor="#FFFFFF" />

            <mehdi.sakout.fancybuttons.FancyButton
                android:id="@+id/btn_spotify_pause"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginBottom="10dp"
                android:paddingBottom="10dp"
                android:paddingLeft="20dp"
                android:paddingRight="20dp"
                android:paddingTop="10dp"
                fancy:fb_defaultColor="#7ab800"
                fancy:fb_focusColor="#9bd823"
                fancy:fb_fontIconResource="&#xf04c;"
                fancy:fb_iconPosition="left"
                fancy:fb_radius="30dp"
                fancy:fb_text="PAUSE"
                fancy:fb_textColor="#FFFFFF" />
            <mehdi.sakout.fancybuttons.FancyButton
                android:id="@+id/btn_spotify_follow"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:paddingBottom="10dp"
                android:paddingLeft="20dp"
                android:paddingRight="20dp"
                android:paddingTop="10dp"
                fancy:fb_defaultColor="#222326"
                fancy:fb_focusColor="#424243"
                fancy:fb_radius="30dp"
                fancy:fb_text="FOLLOW"
                fancy:fb_borderColor="#88898c"
                fancy:fb_borderWidth="1dp"
                fancy:fb_textColor="#dfe0d9" />
        </LinearLayout>
        <LinearLayout
            android:id="@+id/section_twitter"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="#55acee"
            android:gravity="center_horizontal"
            android:orientation="vertical"
            android:padding="20dp" >

            <mehdi.sakout.fancybuttons.FancyButton
                android:id="@+id/btn_twitter_follow"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginBottom="20dp"
                android:padding="5dp"
                fancy:fb_borderColor="#FFFFFF"
                fancy:fb_borderWidth="2dp"
                fancy:fb_defaultColor="#55acee"
                fancy:fb_focusColor="#8cc9f8"
                fancy:fb_iconResource="@mipmap/ic_launcher"
                fancy:fb_text="Follow me on Twitter"
                fancy:fb_textColor="#FFFFFF"/>

            <mehdi.sakout.fancybuttons.FancyButton
                android:id="@+id/btn_twitter_followers"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginBottom="10dp"
                android:padding="10dp"
                fancy:fb_borderColor="#FFFFFF"
                fancy:fb_borderWidth="2dp"
                fancy:fb_defaultColor="#55acee"
                fancy:fb_focusColor="#8cc9f8"
                fancy:fb_fontIconResource="&#xf007;"
                fancy:fb_fontIconSize="25sp"
                fancy:fb_iconPosition="top"
                fancy:fb_text="2145 followers"
                fancy:fb_textColor="#FFFFFF"/>
        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="#ff5f69"
            android:gravity="center"
            android:paddingBottom="30dp"
            android:paddingTop="30dp" >

            <mehdi.sakout.fancybuttons.FancyButton
                android:id="@+id/btn_create_account"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginRight="20dp"
                android:padding="10dp"
                fancy:fb_borderColor="#FFFFFF"
                fancy:fb_borderWidth="1dp"
                fancy:fb_defaultColor="#ff5f69"
                fancy:fb_focusColor="#ff838b"
                fancy:fb_radius="30dp"
                fancy:fb_text="Create an account"
                fancy:fb_textColor="#FFFFFF" >
            </mehdi.sakout.fancybuttons.FancyButton>

            <mehdi.sakout.fancybuttons.FancyButton
                android:id="@+id/btn_login"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:paddingBottom="10dp"
                android:paddingLeft="20dp"
                android:paddingRight="20dp"
                android:paddingTop="10dp"
                fancy:fb_borderColor="#FFFFFF"
                fancy:fb_borderWidth="1dp"
                fancy:fb_defaultColor="#ff5f69"
                fancy:fb_focusColor="#ff838b"
                fancy:fb_fontIconResource="&#xf007;"
                fancy:fb_iconPosition="left"
                fancy:fb_radius="30dp"
                fancy:fb_text="Login"
                fancy:fb_textColor="#FFFFFF" />

        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:padding="20dp"
            android:layout_height="wrap_content"
            android:orientation="vertical" >

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content" >

                <mehdi.sakout.fancybuttons.FancyButton
                    android:id="@+id/btn_download"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginBottom="10dp"
                    android:padding="10dp"
                    fancy:fb_borderColor="#FFFFFF"
                    fancy:fb_borderWidth="2dp"
                    fancy:fb_defaultColor="#3b414f"
                    fancy:fb_focusColor="#8cc9f8"
                    fancy:fb_fontIconResource="&#xf0ed;"
                    fancy:fb_fontIconSize="25sp"
                    fancy:fb_iconPosition="top"
                    fancy:fb_radius="10dp"
                    fancy:fb_text="Download the file"
                    fancy:fb_textColor="#FFFFFF">
                </mehdi.sakout.fancybuttons.FancyButton>

                <mehdi.sakout.fancybuttons.FancyButton
                    android:id="@+id/btn_upload"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginBottom="10dp"
                    android:padding="10dp"
                    fancy:fb_borderColor="#FFFFFF"
                    fancy:fb_borderWidth="2dp"
                    fancy:fb_defaultColor="#3b414f"
                    fancy:fb_focusColor="#8cc9f8"
                    fancy:fb_fontIconResource="&#xf0ee;"
                    fancy:fb_fontIconSize="25sp"
                    fancy:fb_radius="10dp"
                    fancy:fb_iconPosition="bottom"
                    fancy:fb_text="Upload"
                    fancy:fb_textColor="#FFFFFF">
                </mehdi.sakout.fancybuttons.FancyButton>

            </LinearLayout>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content" >

                <mehdi.sakout.fancybuttons.FancyButton
                    android:id="@+id/btn_twitter"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginBottom="10dp"
                    android:padding="10dp"
                    fancy:fb_borderColor="#FFFFFF"
                    fancy:fb_borderWidth="2dp"
                    fancy:fb_defaultColor="#40a75a"
                    fancy:fb_focusColor="#8cc9f8"
                    fancy:fb_fontIconResource="&#xf007;"
                    fancy:fb_fontIconSize="30sp"
                    fancy:fb_iconPosition="left"
                    fancy:fb_text="Send"
                    fancy:fb_radius="10dp"
                    fancy:fb_textColor="#FFFFFF">
                </mehdi.sakout.fancybuttons.FancyButton>

            </LinearLayout>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content" >

                <mehdi.sakout.fancybuttons.FancyButton
                    android:id="@+id/btn_decline"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginRight="20dp"
                    android:padding="10dp"
                    fancy:fb_borderColor="#FFFFFF"
                    fancy:fb_borderWidth="0dp"
                    fancy:fb_defaultColor="#d86262"
                    fancy:fb_focusColor="#2e5071"
                    fancy:fb_fontIconResource="&#xf131;"
                    fancy:fb_fontIconSize="25dp"
                    fancy:fb_iconPosition="right"
                    fancy:fb_radius="30dp"
                    fancy:fb_text="Mute"
                    fancy:fb_textColor="#ffffff" />

                <mehdi.sakout.fancybuttons.FancyButton
                    android:id="@+id/btn_answer"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginRight="20dp"
                    android:gravity="right"
                    android:padding="10dp"
                    fancy:fb_defaultColor="#7ed862"
                    fancy:fb_focusColor="#2e5071"
                    fancy:fb_fontIconResource="&#xf095;"
                    fancy:fb_fontIconSize="25dp"
                    fancy:fb_iconPosition="right"
                    fancy:fb_radius="30dp"
                    fancy:fb_text="Answer the call"
                    fancy:fb_textColor="#ffffff" />

            </LinearLayout>

        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:padding="20dp"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:background="#55acee">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginBottom="15dp"
                android:orientation="vertical">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Ghost Button"
                    android:layout_gravity="center"
                    android:textSize="20sp"
                    android:textColor="#ff000000"/>


            </LinearLayout>


            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginBottom="15dp"
                android:gravity="center"
                android:orientation="horizontal">


                <mehdi.sakout.fancybuttons.FancyButton
                    android:id="@+id/btn_ghost_deposit"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginRight="20dp"
                    android:gravity="right"
                    android:padding="15dp"
                    android:paddingRight="20dp"
                    android:paddingLeft="20dp"
                    fancy:fb_ghost="true"
                    fancy:fb_focusColor="#fffffefa"
                    fancy:fb_fontIconResource="&#xf09d;"
                    fancy:fb_fontIconSize="15sp"
                    fancy:fb_radius="40dp"
                    fancy:fb_iconPosition="right"
                    fancy:fb_borderWidth="2dp"
                    fancy:fb_borderColor="#ffe7e6e2"
                    fancy:fb_text="Deposit"
                    fancy:fb_textColor="#ffffff" />

                <mehdi.sakout.fancybuttons.FancyButton
                    android:id="@+id/btn_ghost_email"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginRight="20dp"
                    android:gravity="right"
                    android:padding="15dp"
                    android:paddingRight="30dp"
                    android:paddingLeft="30dp"
                    fancy:fb_ghost="true"
                    fancy:fb_focusColor="#ffa8f192"
                    fancy:fb_fontIconResource=""
                    fancy:fb_fontIconSize="15sp"
                    fancy:fb_radius="25dp"
                    fancy:fb_iconPosition="right"
                    fancy:fb_borderWidth="2dp"
                    fancy:fb_borderColor="#7ed862"
                    fancy:fb_text="Contact"
                    fancy:fb_textColor="#ffa8f192" />
            </LinearLayout>

        </LinearLayout>

    </LinearLayout>

</ScrollView>