Wie können die standardmäßigen Google- und Facebook-Anmeldeschaltflächen gleichmäßig und schön aussehen? Bitte sehen Sie Details

Question

Ich habe die Option zur Anmeldung mit Google und Facebook in meiner App gegeben.

Aber die Standard-Schaltflächen wie diese uneben und hässlich aussieht:

Hier Code xml:

<android.support.v7.widget.CardView 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      app:contentPadding="10dp" 
      app:cardElevation="2dp" 
      app:cardBackgroundColor="@android:color/white"> 

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

       <com.google.android.gms.common.SignInButton 
        android:id="@+id/google_login_button" 
        android:layout_width="@dimen/sign_in_btn_width" 
        android:layout_height="wrap_content" 
        android:layout_gravity="center_horizontal" /> 

       <com.facebook.login.widget.LoginButton 
        android:id="@+id/facebook_login_button" 
        android:layout_width="@dimen/sign_in_btn_width" 
        android:layout_height="wrap_content" 
        android:layout_marginTop="@dimen/margin_between_google_facebook_signup_btn" 
        android:layout_gravity="center_horizontal" /> 

      </LinearLayout> 

     </android.support.v7.widget.CardView> 

Wie kann ich sie auch und hübsch aussehen?

Bitte lassen Sie es mich wissen.

Sorry, wenn die Frage scheint falsch formatiert zu sein. Ich bin nur ein Anfänger hier.

Answer 1

Okay, ich habe die Lösung gefunden.

Ist hier bearbeitet XML-Code:

<LinearLayout 
       android:layout_width="@dimen/sign_in_btn_width" 
       android:layout_height="match_parent" 
       android:orientation="vertical" 
       android:layout_gravity="center"> 

       <com.google.android.gms.common.SignInButton 
        android:id="@+id/google_login_button" 
        android:layout_width="match_parent" 
        android:layout_height="wrap_content" 
        android:layout_gravity="center_horizontal" /> 

       <com.facebook.login.widget.LoginButton 
        android:id="@+id/facebook_login_button" 
        android:layout_width="match_parent" 
        android:layout_height="@dimen/sign_in_btn_height" 
        android:layout_marginTop="@dimen/margin_between_google_facebook_signup_btn" 
        android:layout_gravity="center_horizontal" 
        android:paddingTop="11dp" 
        android:paddingBottom="11dp" 
        android:paddingLeft="12dp" 
        android:layout_marginLeft="3dp" 
        android:layout_marginRight="3dp" 
        xmlns:facebook="http://schemas.android.com/apk/res-auto" 
        facebook:com_facebook_login_text="   Sign in"/> 

      </LinearLayout> 

     </android.support.v7.widget.CardView> 

Hier Java-Code für Facebook Login-Button:

float fbIconScale = 1.10F; 
     Drawable drawable = getBaseContext().getResources().getDrawable(
       com.facebook.R.drawable.com_facebook_button_icon); 
     drawable.setBounds(0, 0, (int)(drawable.getIntrinsicWidth()*fbIconScale), 
       (int)(drawable.getIntrinsicHeight()*fbIconScale)); 

     /* ************************************* 
     *    FACEBOOK    * 
     ***************************************/ 
     /* Load the Facebook login button and set up the tracker to monitor access token changes */ 
     mFacebookCallbackManager = CallbackManager.Factory.create(); 
     mFacebookLoginButton = (LoginButton) findViewById(R.id.facebook_login_button); 
     mFacebookLoginButton.setCompoundDrawables(drawable, null, null, null); 

Hier ist das Ergebnis:

Frieden!

Answer 2

Google hat eine guide für die Anpassung des Zeichens Google in Button

Auch this answer sehr nützlich sein könnte Ihre Login-Buttons

Answer 3

Hier ist die benutzerdefinierte Login-Button (Facebook)

  <android.support.v7.widget.CardView 
       android:layout_width="300dp" 
       android:layout_height="50dp" 
       android:layout_gravity="center_horizontal" 
       android:layout_marginTop="50dp" 
       app:cardBackgroundColor="#3b5998"> 

       <RelativeLayout 
        android:id="@+id/login_button" 
        android:layout_width="match_parent" 
        android:layout_height="match_parent" 
        android:layout_margin="5dp" 
        android:background="#3b5998"> 

        <ImageView 
         android:layout_width="30dp" 
         android:layout_height="30dp" 
         android:layout_alignParentLeft="true" 
         android:layout_centerVertical="true" 
         android:layout_marginLeft="10dp" 
         android:src="@drawable/ic_facebook" /> 

        <TextView 
         android:layout_width="wrap_content" 
         android:layout_height="wrap_content" 
         android:layout_centerInParent="true" 
         android:text="Login With Facebook" 
         android:textColor="#ffffff" 
         android:textSize="17sp" 
         android:textStyle="bold" /> 
       </RelativeLayout> 
      </android.support.v7.widget.CardView> 

für Customizing und Sie müssen das Click-Ereignis hören

login_button.setOnClickListener(new View.OnClickListener() { 
     @Override 
     public void onClick(View v) { 
      selectedLoginButton = FACEBOOK; 
      LoginManager.getInstance().logOut(); 
      LoginManager.getInstance().logInWithReadPermissions(SigninFragment.this, Arrays.asList("email,public_profile")); 
      LoginManager.getInstance().registerCallback(callbackManager, new FacebookCallback<LoginResult>() { 
       @Override 
       public void onSuccess(final LoginResult loginResult) { 
        handleFacebookLogin(loginResult); 
       } 

       @Override 
       public void onError(FacebookException exception) { 
        handleFacebookError(exception); 
       } 

       @Override 
       public void onCancel() { 
        handleFacebookCancel(); 
       } 
      }); 
     } 
    }); 

für Google Plus;

btn_sign_in.setOnClickListener(new View.OnClickListener() { 
     @Override 
     public void onClick(View v) { 
      Intent signInIntent = Auth.GoogleSignInApi.getSignInIntent(mGoogleApiClient); 
      startActivityForResult(signInIntent, RC_SIGN_IN); 
     } 
    });