改变Facebook&谷歌的登录按钮形状和放大样式

时间:2017-06-24 19:52:45

标签: android facebook button google-signin facebook-social-plugins

我正在开发一个项目,我正在使用圆形按钮,EditText字段等。但是,当我尝试从其矩形设计中更改Facebook和Google按钮的形状时,没有任何反应。我正在使用XML脚本在按钮和编辑文本字段上使用来改变他们的设计,但这似乎没有遵循社交登录按钮...所需的设计取自AirBnB的应用程序,据我所知使用JavaScript的React框架实现,但我假设必须有一种方法可以使用XML / Java实现相同的结果......?

Desired Design Current Designs

如果有任何其他需要上传的话,我们将非常感谢您的帮助!

1 个答案:

答案 0 :(得分:7)

Facebook

首先添加FrameLayout并使facebook按钮可见性=“消失”并创建类似的按钮..

<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:将您的自定义按钮设置为单击FacebookLogin按钮。

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登录创建按钮。我的按钮是你需要根据需要修改的按钮..

<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();
}

从谷歌退出...

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

                    }
                });
相关问题