1. 程式人生 > >android 自定義Button,滿足你對Button呈現樣式的一系列要求

android 自定義Button,滿足你對Button呈現樣式的一系列要求

我們平時自定義的一些Button通常是改改顏色啊,文字啊,圓角啊之類的。如果要做到再高階點就需要用一個大布局還拼接了,如果一個頁面有很多樣式不同的這樣的按鈕,還真不怎麼好操作。
今天給大家上一個FancyButton能很好的幫助我們簡化這些操作
專案結構:
這裡寫圖片描述

只有一個類外加一些assets包下的字型檔案或資原始檔的一些Icon就能呈現以下效果:

這裡寫圖片描述
首先先介紹下FancyButton這個類的一些重要的方法和實現:

繼承LinearLayout根據我們的實際場景需要再判斷為水平還是垂直的LinearLayout

public class FancyButton extends LinearLayout

一系列的初始化操作和引數申明

 private Context mContext;

    // 初始化背景引數
    private int mDefaultBackgroundColor         = Color.BLACK;
    private int mFocusBackgroundColor           = 0;

    //初始化字型引數
    private int mDefaultTextColor               = Color.WHITE;
    private int mDefaultIconColor               = Color.WHITE;
    private
int mTextPosition = 1; private int mDefaultTextSize = 15; private int mDefaultTextGravity = 0x11; // Gravity.CENTER private String mText = null; // 初始化Icon引數 private Drawable mIconResource = null; private
int mFontIconSize = 15; private String mFontIcon = null; private int mIconPosition = 1; private int mIconPaddingLeft = 10; private int mIconPaddingRight = 10; private int mIconPaddingTop = 0; private int mIconPaddingBottom = 0; private int mBorderColor = Color.TRANSPARENT; private int mBorderWidth = 0; private int mRadius = 0; private Typeface mTextTypeFace = null; private Typeface mIconTypeFace = null; /** * 標識圖示位置的標記 */ public static final int POSITION_LEFT = 1; public static final int POSITION_RIGHT = 2; public static final int POSITION_TOP = 3; public static final int POSITION_BOTTOM = 4; //預設字型 private String mDefaultIconFont = "fontawesome.ttf"; private String mDefaultTextFont = "robotoregular.ttf"; private ImageView mIconView; private TextView mFontIconView; private TextView mTextView;

建構函式

 /**
     * 預設建構函式
     * @param context : Context
     */
    public FancyButton(Context context){
        super(context);
        this.mContext   = context;

        mTextTypeFace   = Typeface.createFromAsset(mContext.getAssets(), String.format("fonts/%s", mDefaultTextFont));
        mIconTypeFace   = Typeface.createFromAsset(mContext.getAssets(), String.format("iconfonts/%s", mDefaultIconFont));

        initializeFancyButton();
    }

    /**
     * 預設建構函式呼叫佈局
     * @param context : Context
     * @param attrs : Attributes Array
     */
    public FancyButton(Context context, AttributeSet attrs){
        super(context,attrs);
        this.mContext = context;

        TypedArray attrsArray   = context.obtainStyledAttributes(attrs,R.styleable.FancyButtonsAttrs, 0, 0);
        initAttributsArray(attrsArray);
        attrsArray.recycle();

        initializeFancyButton();

    }

對一些控制元件所需的素材進行初始化操作

 /**
     * 各種初始化
     */
    private void initializeFancyButton(){

        initializeButtonContainer();

        mTextView       = setupTextView();
        mIconView       = setupIconView();
        mFontIconView   = setupFontIconView();

        int iconIndex,textIndex;
        View view1,view2;

        if(mIconView == null && mFontIconView == null && mTextView == null){
            Button tempTextView = new Button(mContext);
            tempTextView.setText("Fancy Button");
            this.addView(tempTextView);

        }else{
            this.removeAllViews();
            setupBackground();

            ArrayList<View> views = new ArrayList<>();

            if(mIconPosition == POSITION_LEFT || mIconPosition == POSITION_TOP){

                if(mIconView != null){
                    views.add(mIconView);
                }

                if(mFontIconView != null){
                    views.add(mFontIconView);
                }
                if(mTextView != null){
                    views.add(mTextView);
                }

            }else{
                if(mTextView != null){
                    views.add(mTextView);
                }

                if(mIconView != null){
                    views.add(mIconView);
                }

                if(mFontIconView != null){
                    views.add(mFontIconView);
                }

            }

            for(View view : views){
                this.addView(view);
            }
        }
    }
 /**
     * 設定文字檢視
     * @return : TextView
     */
    private TextView setupTextView(){
        if (mText != null) {
            TextView textView = new TextView(mContext);
            textView.setText(mText);
            textView.setGravity(mDefaultTextGravity);
            textView.setTextColor(mDefaultTextColor);
            textView.setTextSize(mDefaultTextSize);

            textView.setLayoutParams(new TableLayout.LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT, 1f));
            if (!isInEditMode() && mTextTypeFace!=null) {
                textView.setTypeface(mTextTypeFace);
            }
            return textView;
        }
        return null;
    }

    /**
     * 設定字型圖示檢視
     * @return : TextView
     */
    private TextView setupFontIconView(){

        if(mFontIcon!=null){
            TextView fontIconView = new TextView(mContext);
            fontIconView.setTextColor(mDefaultIconColor);

            LayoutParams iconTextViewParams = new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT,1f);
            iconTextViewParams.rightMargin = mIconPaddingRight;
            iconTextViewParams.leftMargin = mIconPaddingLeft;
            iconTextViewParams.topMargin = mIconPaddingTop;
            iconTextViewParams.bottomMargin = mIconPaddingBottom;

            if(mTextView != null){

                if(mIconPosition==POSITION_TOP || mIconPosition==POSITION_BOTTOM){
                    iconTextViewParams.gravity = Gravity.CENTER;
                    fontIconView.setGravity(Gravity.CENTER);
                }
                else{
                    fontIconView.setGravity(Gravity.CENTER_VERTICAL);
                    iconTextViewParams.gravity = Gravity.CENTER_VERTICAL;
                }
            }else{
                iconTextViewParams.gravity = Gravity.CENTER;
                fontIconView.setGravity(Gravity.CENTER_VERTICAL);
            }


            fontIconView.setLayoutParams(iconTextViewParams);
            if(!isInEditMode()){
                fontIconView.setTextSize(mFontIconSize);
                fontIconView.setText(mFontIcon);
                fontIconView.setTypeface(mIconTypeFace);
            }else{
                fontIconView.setText("O");
            }
            return fontIconView;
        }
        return null;
    }

    /**
     * 文字圖示資源檢視
     * @return : ImageView
     */
    private ImageView setupIconView(){
        if (mIconResource != null){
            ImageView iconView = new ImageView(mContext);
            iconView.setImageDrawable(mIconResource);
            iconView.setPadding(mIconPaddingLeft, mIconPaddingTop, mIconPaddingRight, mIconPaddingBottom);

            LayoutParams iconViewParams = new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
            if(mTextView!=null){
                if(mIconPosition==POSITION_TOP || mIconPosition==POSITION_BOTTOM)
                    iconViewParams.gravity = Gravity.CENTER;
                else
                    iconViewParams.gravity = Gravity.START;

                iconViewParams.rightMargin = 10;
                iconViewParams.leftMargin = 10;
            }else{
                iconViewParams.gravity = Gravity.CENTER_VERTICAL;
            }
            iconView.setLayoutParams(iconViewParams);

            return iconView;
        }
        return null;
    }

    /**
     * 初始化屬性陣列
     * @param attrsArray : Attributes array
     */
    private void initAttributsArray(TypedArray attrsArray){

        mDefaultBackgroundColor         = attrsArray.getColor(R.styleable.FancyButtonsAttrs_defaultColor,mDefaultBackgroundColor);
        mFocusBackgroundColor           = attrsArray.getColor(R.styleable.FancyButtonsAttrs_focusColor,mFocusBackgroundColor);

        mDefaultTextColor               = attrsArray.getColor(R.styleable.FancyButtonsAttrs_textColor,mDefaultTextColor);
        // if default color is set then the icon's color is the same (the default for icon's color)
        mDefaultIconColor               = attrsArray.getColor(R.styleable.FancyButtonsAttrs_iconColor,mDefaultTextColor);
        mDefaultTextSize                = (int) attrsArray.getDimension(R.styleable.FancyButtonsAttrs_textSize,mDefaultTextSize);
        mDefaultTextGravity             = attrsArray.getInt(R.styleable.FancyButtonsAttrs_textGravity, mDefaultTextGravity);

        mBorderColor                    = attrsArray.getColor(R.styleable.FancyButtonsAttrs_borderColor,mBorderColor);
        mBorderWidth                    = (int) attrsArray.getDimension(R.styleable.FancyButtonsAttrs_borderWidth,mBorderWidth);

        mRadius                         = (int)attrsArray.getDimension(R.styleable.FancyButtonsAttrs_radius,mRadius);
        mFontIconSize                   = (int)attrsArray.getDimension(R.styleable.FancyButtonsAttrs_fontIconSize,mFontIconSize);

        mIconPaddingLeft                = (int)attrsArray.getDimension(R.styleable.FancyButtonsAttrs_iconPaddingLeft,mIconPaddingLeft);
        mIconPaddingRight               = (int)attrsArray.getDimension(R.styleable.FancyButtonsAttrs_iconPaddingRight,mIconPaddingRight);
        mIconPaddingTop                 = (int)attrsArray.getDimension(R.styleable.FancyButtonsAttrs_iconPaddingTop,mIconPaddingTop);
        mIconPaddingBottom              = (int)attrsArray.getDimension(R.styleable.FancyButtonsAttrs_iconPaddingBottom,mIconPaddingBottom);

        String text                     = attrsArray.getString(R.styleable.FancyButtonsAttrs_text);
        mIconPosition                   = attrsArray.getInt(R.styleable.FancyButtonsAttrs_iconPosition,mIconPosition);

        String fontIcon                 = attrsArray.getString(R.styleable.FancyButtonsAttrs_fontIconResource);

        String iconFontFamily           = attrsArray.getString(R.styleable.FancyButtonsAttrs_iconFont);
        String textFontFamily           = attrsArray.getString(R.styleable.FancyButtonsAttrs_textFont);

        Drawable icon = null;
        try{
            mIconResource               = attrsArray.getDrawable(R.styleable.FancyButtonsAttrs_iconResource);

        }catch(Exception e){
            mIconResource = null;
        }

        if(fontIcon!=null)
            mFontIcon = fontIcon;

        if(text!=null)
            mText = text;

        if(!isInEditMode()){
            if(iconFontFamily!=null){
                try{
                    mIconTypeFace = Typeface.createFromAsset(mContext.getAssets(), String.format("iconfonts/%s", iconFontFamily));
                }catch(Exception e){
                    Log.e("Fancy", e.getMessage());
                    mIconTypeFace= Typeface.createFromAsset(mContext.getAssets(), String.format("iconfonts/%s", mDefaultIconFont));
                }

            }else{
                mIconTypeFace= Typeface.createFromAsset(mContext.getAssets(), String.format("iconfonts/%s", mDefaultIconFont));
            }

            if(textFontFamily!=null){
                try{
                    mTextTypeFace = Typeface.createFromAsset(mContext.getAssets(), String.format("fonts/%s", textFontFamily));
                }
                catch(Exception e){
                    mTextTypeFace= Typeface.createFromAsset(mContext.getAssets(), String.format("fonts/%s", mDefaultTextFont));
                }

            }else{
                mTextTypeFace= Typeface.createFromAsset(mContext.getAssets(), String.format("fonts/%s", mDefaultTextFont));
            }


        }



    }
    @SuppressLint("NewApi")
    private void setupBackground(){

        // 預設Drawable
        GradientDrawable drawable = new GradientDrawable();
        drawable.setCornerRadius(mRadius);
        drawable.setColor(mDefaultBackgroundColor);
        if (mBorderColor != 0) {
            drawable.setStroke(mBorderWidth, mBorderColor);
        }

        // 焦點/按下 Drawable
        GradientDrawable drawable2 = new GradientDrawable();
        drawable2.setCornerRadius(mRadius);
        drawable2.setColor(mFocusBackgroundColor);
        if (mBorderColor != 0) {
            drawable2.setStroke(mBorderWidth, mBorderColor);
        }

        StateListDrawable states = new StateListDrawable();

        if(mFocusBackgroundColor!=0){
            states.addState(new int[] { android.R.attr.state_pressed }, drawable2);
            states.addState(new int[] { android.R.attr.state_focused }, drawable2);
        }
        states.addState(new int[] {}, drawable);

        if(android.os.Build.VERSION.SDK_INT < android.os.Build.VERSION_CODES.JELLY_BEAN) {
            this.setBackgroundDrawable(states);
        } else {
            this.setBackground(states);
        }
    }

    /**
     * 初始化按鈕的容器
     */
    private void initializeButtonContainer(){

        if(mIconPosition == POSITION_TOP || mIconPosition == POSITION_BOTTOM){
            this.setOrientation(LinearLayout.VERTICAL);
        }else{
            this.setOrientation(LinearLayout.HORIZONTAL);
        }
        LayoutParams containerParams = new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
        this.setLayoutParams(containerParams);
        this.setGravity(Gravity.CENTER_VERTICAL);
        this.setClickable(true);
        this.setFocusable(true);
        if(mIconResource==null && mFontIcon==null && getPaddingLeft()==0 && getPaddingRight()==0 && getPaddingTop()==0 && getPaddingBottom()==0){
            this.setPadding(20, 20, 20, 20);
        }
    }

    /**
     * 設定文字內容
     * @param text : Text
     */
    public void setText(String text){
        this.mText = text;
        if(mTextView == null)
            initializeFancyButton();
        else
            mTextView.setText(text);
    }

    /**
     * 設定文字顏色
     * @param color : Color
     * use Color.parse('#code')
     */
    public void setTextColor(int color){
        this.mDefaultTextColor = color;
        if(mTextView == null)
            initializeFancyButton();
        else
            mTextView.setTextColor(color);

    }

    /**
     * 設定圖示的顏色獨立於文字顏色
     * @param color : Color
     */
    public void setIconColor(int color){
        if(mFontIconView != null) {
            mFontIconView.setTextColor(color);
        }
    }

    /**
     * 設定背景顏色
     * @param color : use Color.parse('#code')
     */
    public void setBackgroundColor(int color){
        this.mDefaultBackgroundColor = color;
        if(mIconView != null || mFontIconView != null || mTextView != null){
            this.setupBackground();
        }
    }

    /**
     * 設定焦點時按鈕的顏色
     * @param color : use Color.parse('#code')
     */
    public void setFocusBackgroundColor(int color){
        this.mFocusBackgroundColor = color;
        if(mIconView != null || mFontIconView != null || mTextView != null)
            this.setupBackground();

    }

    /**
     * 設定文字的大小
     * @param textSize : Text Size
     */
    public void setTextSize(int textSize){
        this.mDefaultTextSize = textSize;
        if(mTextView != null)
            mTextView.setTextSize(textSize);
    }

    /**
     * 設定文字重力位置
     * @param gravity : Text Gravity
     */

    public void setTextGravity(int gravity) {
        this.mDefaultTextGravity = gravity;
        if (mTextView != null) {
            mTextView.setGravity(gravity);
        }
    }

    /**
     * 設定間距
     * @param paddingLeft : Padding Left
     * @param paddingTop : Padding Top
     * @param paddingRight : Padding Right
     * @param paddingBottom : Padding Bottom
     */
    public void setIconPadding(int paddingLeft, int paddingTop, int paddingRight, int paddingBottom){
        this.mIconPaddingLeft = paddingLeft;
        this.mIconPaddingTop = paddingTop;
        this.mIconPaddingRight = paddingRight;
        this.mIconPaddingBottom = paddingBottom;
        if(mIconView != null){
            mIconView.setPadding(this.mIconPaddingLeft, this.mIconPaddingTop, this.mIconPaddingRight, this.mIconPaddingBottom);
        }
        if(mFontIconView != null){
            mFontIconView.setPadding(this.mIconPaddingLeft, this.mIconPaddingTop, this.mIconPaddingRight, this.mIconPaddingBottom);
        }
    }

    /**
     * 設定icon來自於資原始檔
     * @param drawable : Drawable resource
     */
    public void setIconResource(int drawable){
        this.mIconResource = mContext.getResources().getDrawable(drawable);
        if(mIconView == null || mFontIconView != null) {
            mFontIconView= null;
            initializeFancyButton();
        }
        else
            mIconView.setImageDrawable(mIconResource);
    }

    /**
     * 設定一種字元作為Icon圖
     * @param icon : Icon value eg : \uf082
     */
    public void setIconResource(String icon){
        this.mFontIcon = icon;
        if(mFontIconView == null) {
            mIconView=null;
            initializeFancyButton();
        }
        else
            mFontIconView.setText(icon);
    }

    /**
     * 設定Icon尺寸(僅限字元Icon)
     * @param iconSize : Icon Size
     */
    public void setFontIconSize(int iconSize){
        this.mFontIconSize = iconSize;
        if(mFontIconView!=null)
            mFontIconView.setTextSize(iconSize);
    }

    /**
     * 設定圖示位置
     * 使用全域性變數 (FancyButton.POSITION_LEFT, FancyButton.POSITION_RIGHT, FancyButton.POSITION_TOP, FancyButton.POSITION_BOTTOM)
     * @param position : Position
     */
    public void setIconPosition(int position){
        if(position>0 && position<5)
            mIconPosition = position;
        else
            mIconPosition = POSITION_LEFT;

        initializeFancyButton();
    }

    /**
     * 設定按鈕邊框的顏色
     * @param color : Color
     * use Color.parse('#code')
     */
    public void setBorderColor(int color){
        this.mBorderColor = color;
        if(mIconView!=null || mFontIconView!=null || mTextView!=null){
            this.setupBackground();
        }
    }

    /**
     * 設定按鈕的寬度
     * @param width : Width
     */
    public void setBorderWidth(int width){
        this.mBorderWidth = width;
        if(mIconView != null || mFontIconView != null || mTextView != null){
            this.setupBackground();
        }
    }

    /**
     * 設定按鈕的邊框半徑
     * @param radius : Radius
     */
    public void setRadius(int radius){
        this.mRadius = radius;
        if(mIconView != null || mFontIconView != null || mTextView != null){
            this.setupBackground();
        }
    }

    /**
     * 設定按鈕文字的自定義字型
     * @param fontName : Font Name
     * Place your text fonts in assets/fonts/
     */
    public void setCustomTextFont(String fontName){
        try{
            mTextTypeFace = Typeface.createFromAsset(mContext.getAssets(), String.format("fonts/%s", fontName));
        }catch(Exception e){
            Log.e("FancyButtons", e.getMessage());
            mTextTypeFace= Typeface.createFromAsset(mContext.getAssets(), String.format("fonts/%s", mDefaultTextFont));
        }

        if(mTextView==null)
            initializeFancyButton();
        else
            mTextView.setTypeface(mTextTypeFace);

    }

    /**
     * 設定按鈕圖示的自定義字型
     * @param fontName : Font Name
     * Place your icon fonts in assets/iconfonts/
     */
    public void setCustomIconFont(String fontName){
        try{
            mIconTypeFace = Typeface.createFromAsset(mContext.getAssets(), String.format("iconfonts/%s", fontName));
        }catch(Exception e){
            Log.e("FancyButtons", e.getMessage());
            mIconTypeFace= Typeface.createFromAsset(mContext.getAssets(), String.format("iconfonts/%s", mDefaultIconFont));
        }

        if(mFontIconView == null)
            initializeFancyButton();
        else
            mFontIconView.setTypeface(mIconTypeFace);

    }

}

佈局檔案

<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:fancy="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity">

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

            <fancybuttons.wjj.com.fancybuttonsdemo.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:borderColor="#FFFFFF"
                fancy:borderWidth="1dp"
                fancy:defaultColor="#3b5998"
                fancy:focusColor="#5577bd"
                fancy:fontIconResource="@string/icon_like"
                fancy:fontIconSize="10sp"
                fancy:iconPosition="right"
                fancy:radius="30dp"
                fancy:text="Like my facebook page"
                fancy:textColor="#FFFFFF"/>

            <fancybuttons.wjj.com.fancybuttonsdemo.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:borderColor="#FFFFFF"
                fancy:borderWidth="1dp"
                fancy:defaultColor="#3b5998"
                fancy:focusColor="#5577bd"
                fancy:fontIconResource="@string/icon_share"
                fancy:fontIconSize="10sp"
                fancy:iconPosition="right"
                fancy:iconPaddingLeft="20dp"
                fancy:iconPaddingRight= "0dp"
                fancy:radius="30dp"
                fancy:text="Share the link"
                fancy:textColor="#FFFFFF"/>

            <fancybuttons.wjj.com.fancybuttonsdemo.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:borderColor="#FFFFFF"
                fancy:borderWidth="1dp"
                fancy:defaultColor="#3b5998"
                fancy:focusColor="#5577bd"
                fancy:fontIconResource="@string/icon_follow"
                fancy:fontIconSize="10sp"
                fancy:iconPosition="right"
                fancy:radius="30dp"
                fancy:text="Follow Mehdi Sakout"
                fancy: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" >

                <fancybuttons.wjj.com.fancybuttonsdemo.FancyButton
                    android:id="@+id/btn_android"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginRight="10dp"
                    android:padding="10dp"
                    fancy:defaultColor="#55acee"
                    fancy:focusColor="#313131"
                    fancy:iconResource="@drawable/twitter"
                    fancy:iconPaddingLeft="0dp"
                    fancy:iconPaddingRight="0dp"
                    fancy:radius="30dp"
                    fancy:textColor="#FFFFFF" />

                <fancybuttons.wjj.com.fancybuttonsdemo.FancyButton
                    android:id="@+id/btn_dropbox"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginRight="10dp"
                    android:padding="10dp"
                    fancy:defaultColor="#007ee5"
                    fancy:iconPaddingLeft="0dp"
                    fancy:iconPaddingRight="0dp"
                    fancy:focusColor="#313131"
                    fancy:iconResource="@drawable/dropbox"
                    fancy:radius="30dp">
                </fancybuttons.wjj.com.fancybuttonsdemo.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" >

                <fancybuttons.wjj.com.fancybuttonsdemo.FancyButton
                    android:id="@+id/btn_instagram"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginRight="10dp"
                    android:padding="10dp"
                    fancy:defaultColor="#3f729b"
                    fancy:iconPaddingLeft="0dp"
                    fancy:iconPaddingRight="0dp"
                    fancy:focusColor="#313131"
                    fancy:iconResource="@drawable/instagram"
                    fancy:radius="30dp">
                </fancybuttons.wjj.com.fancybuttonsdemo.FancyButton>

                <fancybuttons.wjj.com.fancybuttonsdemo.FancyButton
                    android:id="@+id/btn_sound"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginRight="10dp"
                    android:padding="10dp"
                    fancy:defaultColor="#ff8800"
                    fancy:iconPaddingLeft="0dp"
                    fancy:iconPaddingRight="0dp"
                    fancy:focusColor="#313131"
                    fancy:iconResource="@drawable/soundcloud"
                    fancy:radius="30dp">
                </fancybuttons.wjj.com.fancybuttonsdemo.FancyButton>
            </LinearLayout>

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

                <fancybuttons.wjj.com.fancybuttonsdemo.FancyButton
                    android:id="@+id/btn_gplus"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginRight="10dp"
                    android:padding="10dp"
                    fancy:defaultColor="#dd4b39"
                    fancy:iconPaddingLeft="0dp"
                    fancy:iconPaddingRight="0dp"
                    fancy:focusColor="#313131"
                    fancy:iconResource="@drawable/gplus"
                    fancy:radius="30dp">
                </fancybuttons.wjj.com.fancybuttonsdemo.FancyButton>

                <fancybuttons.wjj.com.fancybuttonsdemo.FancyButton
                    android:id="@+id/btn_facebook"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginRight="10dp"
                    android:padding="10dp"
                    fancy:defaultColor="#000000"
                    fancy:iconPaddingLeft="0dp"
                    fancy:iconPaddingRight="0dp"
                    fancy:focusColor="#313131"
                    fancy:iconResource="@drawable/github"
                    fancy:radius="30dp" >
                </fancybuttons.wjj.com.fancybuttonsdemo.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" >
            <fancybuttons.wjj.com.fancybuttonsdemo.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:defaultColor="#7ab800"
                fancy:focusColor="#9bd823"
                fancy:fontIconResource="&#xf04b;"
                fancy:iconPosition="left"
                fancy:radius="30dp"
                fancy:text="SHUFFLE PLAY"
                fancy:textColor="#FFFFFF" />

            <fancybuttons.wjj.com.fancybuttonsdemo.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:defaultColor="#7ab800"
                fancy:focusColor="#9bd823"
                fancy:fontIconResource="&#xf04c;"
                fancy:iconPosition="left"
                fancy:radius="30dp"
                fancy:text="PAUSE"
                fancy:textColor="#FFFFFF" />
            <fancybuttons.wjj.com.fancybuttonsdemo.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:defaultColor="#222326"
                fancy:focusColor="#424243"
                fancy:radius="30dp"
                fancy:text="FOLOW"
                fancy:borderColor="#88898c"
                fancy:borderWidth="1dp"
                fancy: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" >

            <fancybuttons.wjj.com.fancybuttonsdemo.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:borderColor="#FFFFFF"
                fancy:borderWidth="2dp"
                fancy:defaultColor="#55acee"
                fancy:focusColor="#8cc9f8"
                fancy:iconPaddingLeft="40dp"
                fancy:iconResource="@drawable/twitter"
                fancy:text="Follow me on Twitter"
                fancy:textColor="#FFFFFF"/>

            <fancybuttons.wjj.com.fancybuttonsdemo.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:borderColor="#FFFFFF"
                fancy:borderWidth="2dp"
                fancy:defaultColor="#55acee"
                fancy:focusColor="#8cc9f8"
                fancy:fontIconResource="@string/icon_user"
                fancy:fontIconSize="10sp"
                fancy:iconPosition="top"
                fancy:text="2145 followers"
                fancy: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" >

            <fancybuttons.wjj.com.fancybuttonsdemo.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:borderColor="#FFFFFF"
                fancy:borderWidth="1dp"
                fancy:defaultColor="#ff5f69"
                fancy:focusColor="#ff838b"
                fancy:radius="30dp"
                fancy:text="Create an account"
                fancy:textColor="#FFFFFF" >
            </fancybuttons.wjj.com.fancybuttonsdemo.FancyButton>

            <fancybuttons.wjj.com.fancybuttonsdemo.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"