android google signin und facebook login button sehen ganz anders aus

Question

Das Facebook-Standard-ButtonButton-Objekt und das Google-SignIn-Button-Objekt haben völlig unterschiedliche Erscheinungsbilder und passen nicht in mein bestehendes Layout zusammen. Nach meinem Wissen sind diese Objekte keine Assets, die ich ändern kann, ohne die Bibliothek selbst zu ändern (wobei ich annehmen würde, dass diese Komponenten auch Open Source sind)

Wie gehen die Leute damit um? Ich habe Apps gesehen, die Anmeldeoptionen für beide haben, die ihre eigenen benutzerdefinierten Schaltflächen verwenden. In meiner Implementierung verwende ich jedoch die angegebenen Objekte, die beim Klicken automatisch die entsprechenden Bibliotheken aufrufen.

Ich kann natürlich tauchen tiefer, aber ich fühle mich wie ich das nicht so offensichtliche Rad neu zu erfinden, bin wenn ich es täte, dass

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

Dieses Objekt nicht so offensichtlich ein Knopf ist, und ich habe nicht noch überprüft, ob es wirklich ein Knopf ist.

Ich brauche verschiedene Assets für die Google+ und Facebook Login-Schaltfläche.

Was ich habe

Ein Android Beispiel Ich mag (Duolingo app)

edit: nach einigen sehr einfachen Layout-Anpassung, dies ist das Ergebnis (in Querformat, nur um das Problem zu beleuchten)

Diese Schaltflächen sind immer noch sehr unterschiedlich und ich brauche ein anderes Asset, das immer noch auf die richtigen Methoden zugreifen wird. Ich weiß, wie man es mit Facebook macht, dank der Beispiele, aber Google Anmeldung ist im Moment ziemlich kryptisch.

Answer 1

Um den Text auf der Verwendung Facebook-Taste zu ändern Dies: Fügen Sie diese Methode zu Ihrer Aktivität hinzu:

protected void setGooglePlusButtonText(SignInButton signInButton, String buttonText) { 
     for (int i = 0; i < signInButton.getChildCount(); i++) { 
      View v = signInButton.getChildAt(i); 

      if (v instanceof TextView) { 
       TextView tv = (TextView) v; 
       tv.setTextSize(15); 
       tv.setTypeface(null, Typeface.NORMAL); 
       tv.setInputType(InputType.TYPE_TEXT_FLAG_CAP_WORDS); 
       tv.setText(buttonText); 
       return; 
      } 
     } 
    } 

Add folgende Zeile in onCreateMethod (wo Sie die ID des init haben):

setGooglePlusButtonText(btnSignIn, getString(R.string.common_signin_button_text_long)); 

Answer 2

Die Tasten sind nicht in genau der gleichen Art gestaltet - verschiedene Kurven an den Ecken und Verwendung von Schlagschatten. Es ist also nicht möglich, sie genau gleich aussehen zu lassen. Die nächste könnte ich war ein vertikales lineares Layout mit einer genauen Breite von 215dip zu machen - und die Breite der Tasten eingestellt match_parent werden:

Diese verwendet, um die folgenden layout.xml:

<LinearLayout 
    android:layout_width="215dip" 
    android:layout_height="wrap_content" 
    android:layout_centerHorizontal="true" 
    android:orientation="vertical" > 

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

<com.facebook.widget.LoginButton 
    android:id="@+id/authButton" 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" /> 

</LinearLayout> 

Mit der Google+ Schaltfläche können Sie einfach Ihr eigenes Asset verwenden - com.google.android.gms.common.SignInButton verhält sich genauso wie android.widget.Button und Sie registrieren einen onClick-Handler auf die normale Weise. Nur sicher sein, die Google-Branding-Richtlinien zu folgen, wenn Sie Ihr Kapital zu erstellen:

https://developers.google.com/+/branding-guidelines

ist jedoch zu beachten, dass Google+ Schaltfläche Übersetzungen bietet, die Sie selbst erstellen müssen, wenn Sie Ihre eigene Taste in mehreren Sprachen implementieren.

xmlns:fb="http://schemas.android.com/apk/res-auto" 

wie so:

<com.facebook.widget.LoginButton 
     xmlns:fb="http://schemas.android.com/apk/res-auto" 
     android:id="@+id/login_button" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:layout_gravity="center_horizontal" 
     android:layout_marginTop="30dp" 
     android:layout_marginBottom="0dp" 
     fb:login_text="Sign in with Facebook" 
     /> 

Answer 3

Try

fb:login_text="Put your login text here" 
fb:logout_text="Put your logout text here" 

Sie werden auch diese auf die Schaltfläche hinzufügen müssen:

Answer 4

Mit der neuesten sdk, beide Tasten sieht ähnlich aus. Der Code und die Ergebnisse sind nachstehend aufgeführt.

Schritt 1: build.gradle

Kompilierung 'com.facebook.android:facebook-android-sdk:4.6.0'

Kompilierung ‚com.google.android.gms: Play- Dienstleistungen: 7.5.0'

Schritt 2: myActivity.xml

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

<com.facebook.login.widget.LoginButton 
android:id="@+id/login_button" 
android:layout_width="match_parent" 
android:layout_height="match_parent" 
android:layout_gravity="center_vertical"/> 

Schritt 3: Ergebnis Schritt 4: Aktualisiert build.gradle mit neuesten gcm

compile 'com.facebook.android:facebook-android-sdk:4.6.0' 
compile 'com.google.android.gms:play-services:8.4.0' 

Schritt 5: