更改 Facebook 和 Google 的登录按钮形状和样式

Question

我正在做一个项目，我在其中使用圆形按钮、EditText 字段等。但是，当我尝试更改 Facebook 的形状和 Google 的按钮时，它们的常规矩形设计，什么都没发生。我正在使用 XML 脚本在按钮和编辑文本字段上使用来更改它们的设计，但这似乎并没有遵循社交登录按钮......所需的设计取自 AirBnB 的应用程序，它作为我知道已经使用 JavaScript 的 React 框架实现了，但我假设必须有一种方法可以使用 XML / Java...?[=13 实现相同的结果=]

非常感谢任何帮助，如果需要上传任何其他内容，请提出！

Answer 1

脸书

首先添加 FrameLayout 并使 facebook 按钮可见性="gone" 并创建这样的按钮..

<FrameLayout
    android:id="@+id/FrameLayout1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" >

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

         <Button
                android:id="@+id/fb"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="#3B5991"
                android:drawableLeft="@drawable/facebook_logo_white_24dp"
                android:drawableStart="@drawable/facebook_logo_white_24dp"
                android:paddingEnd="20dp"
                android:paddingStart="20dp"
                android:onClick="onClick"
                android:text="Facebook"
                android:textAllCaps="false"
                android:textColor="#ffffff"
                android:textSize="14sp"
                android:textStyle="bold" 
               />
</FrameLayout>

2: 在改变布局之前在 onCreate 中初始化 FacebookSdk。

   FacebookSdk.sdkInitialize(this.getApplicationContext());

3: 不要忘记添加以下代码。

@Override
protected void onActivityResult(int requestCode, int responseCode,
  Intent data) {
    super.onActivityResult(requestCode, responseCode, data);
    callbackManager.onActivityResult(requestCode, responseCode, data);
}

4：将您的自定义按钮点击设置为 Facebook 登录按钮点击。

public void onClick(View v) {
    if (v == fb) {
        loginButton.performClick();
    } 
}

5：要以编程方式注销，请使用此选项。

LoginManager.getInstance().logOut();

6: 可以根据个人资料查找用户是否登录。

profile = Profile.getCurrentProfile().getCurrentProfile();
if (profile != null) {
    enter code here`// user has logenter code hereged in
} else {
    // user has not logged in
}

Google

对于 google 登录创建按钮的样式。我的按钮是这样的，你根据自己的需要修改..

<Button
    android:id="@+id/google_login"
    android:layout_width="match_parent"
    android:layout_height="40dp"
    android:background="#dd4b39"
    android:drawableStart="@drawable/google_plus_white_24dp"
    android:paddingEnd="20dp"
    android:paddingStart="20dp"
    android:text="Google+"
    android:textAllCaps="false"
    android:textColor="#FFFFFF"
    android:textSize="14sp"
    android:textStyle="bold" />

并在您的 Activty 中使用此代码..

private GoogleApiClient mGoogleApiClient;
private Button googleLogin;
private static final int RC_SIGN_IN = 1;

googleLogin = (Button) findViewById(R.id.google_login);
googleLogin.setOnClickListener(this);

GoogleSignInOptions gso = new 
GoogleSignInOptions.Builder(GoogleSignInOptions.DEFAULT_SIGN_IN)
            .requestEmail()
            .build();
mGoogleApiClient = new GoogleApiClient.Builder(this)
            .enableAutoManage(this,GOOGLE_API_CLIENT_ID, this)
            .addApi(Auth.GOOGLE_SIGN_IN_API, gso)
            .build();

@Override
public void onClick(View v) {
    if (v.getId()==R.id.google_login) {
        if (mGoogleApiClient.isConnected()) {
            mGoogleApiClient.disconnect();
            mGoogleApiClient.connect();
        }
        googleSignIn();
    }
}
private void googleSignIn() {
    Intent signInIntent = Auth.GoogleSignInApi.getSignInIntent(mGoogleApiClient);
    startActivityForResult(signInIntent, RC_SIGN_IN);
}

@Override
protected void onActivityResult(int requestCode, int resultCode, Intent data) {
    super.onActivityResult(requestCode, resultCode, data);
    callbackManager.onActivityResult(requestCode, resultCode, data);
    // Result returned from launching the Intent from GoogleSignInApi.getSignInIntent(...);
    if (requestCode == RC_SIGN_IN) {
        GoogleSignInResult result = Auth.GoogleSignInApi.getSignInResultFromIntent(data);
        handleSignInResult(result);
    }
}

private void handleSignInResult(GoogleSignInResult result) {
    Log.d("Spalsh Activity", "handleSignInResult:" + result.isSuccess());
    if (result.isSuccess()) {
        // Signed in successfully, show authenticated UI.
        GoogleSignInAccount acct = result.getSignInAccount();
        SharedPref.write(SharedPref.NAME, acct.getDisplayName());
    }
}

并覆盖 onstart()

@Override
protected void onStart() {
    OptionalPendingResult<GoogleSignInResult> pendingResult =
            Auth.GoogleSignInApi.silentSignIn(mGoogleApiClient);
    if (pendingResult.isDone()) {
        // There's immediate result available.
        handleSignInResult(pendingResult.get());
    } else {
        // There's no immediate result ready, displays some progress indicator and waits for the
        // async callback.
        //showProgressIndicator();
        pendingResult.setResultCallback(new ResultCallback<GoogleSignInResult>() {
            @Override
            public void onResult(@NonNull GoogleSignInResult result) {
                handleSignInResult(result);
                //hideProgressIndicator();
            }
        });
    }
    super.onStart();
}

从 google 注销...

Auth.GoogleSignInApi.signOut(mGoogleApiClient).setResultCallback(
                new ResultCallback<Status>() {
                    @Override
                    public void onResult(Status status) {

                    }
                });

更改 Facebook 和 Google 的登录按钮形状和样式

Change Facebook & Google's Login Buttons Shape & Style

android

facebook

button

google-signin

facebook-social-plugins