自定义Google Plus登录按钮和Facebook登录按钮

时间:2015-12-16 06:52:58

标签: android facebook user-interface facebook-graph-api google-plus-signin

我需要自定义Google Plus登录按钮和Facebook登录按钮,如下图

enter image description here

据我所知,Facebook登录按钮按文字大小和填充

制作宽度和高度

更改Google登录按钮我使用了以下方法:

private void setGooglePlusButton(SignInButton signInButton, String buttonText) {
    // ExceptionHelpers.dLog("GOOGLE_PLUS_TAG", "Child Count : "+signInButton.getChildCount());
    signInButton.setLayoutParams(new LinearLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT));
    for (int i = 0; i < signInButton.getChildCount(); i++) {
        View v = signInButton.getChildAt(i);
        // ExceptionHelpers.dLog("GOOGLE_PLUS_TAG", "Type Of Child : "+v.getClass().getName());
        if (v instanceof TextView) {
            TextView tv = (TextView) v;
            tv.setText(buttonText);
            tv.setLayoutParams(new FrameLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT));
            tv.setBackgroundResource(R.drawable.google_background_drawable);
            tv.setCompoundDrawablesWithIntrinsicBounds(R.drawable.facebook_compound_drawable, 0, 0, 0);
            int padding = (int) getResources().getDimension(R.dimen.header_padding);
            int drawablePadding = (int) getResources().getDimension(R.dimen.header_padding);
            tv.setPadding(padding, padding, padding, padding);
            tv.setCompoundDrawablePadding(drawablePadding);
            tv.setTextColor(getResources().getColor(R.color.white_color));
            tv.setTextSize(getResources().getDimension(R.dimen.font_title));
            return;
        }
    }
}

和Facebook登录按钮样式:

<style name="FacebookLoginButton">
    <item name="android:layout_marginTop">@dimen/adapter_mark_padding</item>
    <item name="android:layout_marginBottom">@dimen/adapter_mark_padding</item>
    <item name="android:padding">@dimen/header_padding</item> <!-- @dimen/adapter_mark_padding -->
    <item name="android:textSize">@dimen/font_title</item>
    <item name="android:textColor">@color/white_color</item>
    <item name="android:background">@drawable/facebook_background_drawable</item>
    <item name="android:drawableLeft">@drawable/facebook_compound_drawable</item>
    <item name="android:drawablePadding">@dimen/header_padding</item>
</style>

输出是:

enter image description here

2 个答案:

答案 0 :(得分:3)

<ImageView
    android:id="@+id/fb_new_iv"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerHorizontal="true"
    android:src="@mipmap/ic_launcher" />

<RelativeLayout
    android:id="@+id/fb_layout"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:visibility="gone">

    <com.facebook.login.widget.LoginButton
        android:id="@+id/login_button"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content" />
</RelativeLayout>

将登录Facebook代码的代码放入ImageView的单击侦听器中 它会起作用

答案 1 :(得分:0)

对于Facebook,你需要使用风格:

<style name="FacebookLoginButton">
    <item name="android:textSize">15dp</item>
    <item name="android:textAllCaps">false</item>
    <item name="android:layout_gravity">center</item>
    <item name="android:textColor">@color/colorWhite</item>
    <item name="android:paddingLeft">13dp</item>
    <item name="colorButtonNormal">@color/colorAccent</item>
    <item name="android:paddingTop">11dp</item>
    <item name="android:paddingBottom">11dp</item>
    <item name="android:layout_marginLeft">4dp</item>
    <item name="android:layout_marginRight">5dp</item>
</style>

应用这样的风格

<com.facebook.login.widget.LoginButton
        xmlns:facebook="http://schemas.android.com/apk/res-auto"
        android:id="@+id/login_button"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        style="@style/FacebookLoginButton"
        facebook:com_facebook_login_text="@string/login_facebook"
        facebook:com_facebook_logout_text="@string/login_facebook"
        android:elevation="2dp"
        />

对于Google,您可以使用具有所需风格的普通按钮

  <Button
                android:id="@+id/button_googlePlus"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="@string/login_google"
                android:background="?attr/selectableItemBackground"
                android:textColor="@color/colorWhite"
                android:textAllCaps="false"
                android:textSize="15dp"
                android:drawableLeft="@drawable/ic_google"
                android:paddingLeft="40dp"
                android:paddingRight="40dp"
                />