Anpassen der Android Facebook Login-Schaltfläche

79

Ich möchte das Aussehen des Facebook-Login-Buttons anpassen, den wir zusammen mit dem Facebook-SDK für Android (Facebook-Android-SDK-3.0.1) erhalten. Ich möchte einen einfachen Android-Button mit dem Titel "Login via Facebook". Ich konnte keine Dokumentation dazu finden.

Wenn jemand weiß, wie es auf einfache Weise geht, sagen Sie es mir bitte oder weisen Sie mich an, wie es geht.

android  android-facebook 
— Dora
quelle
1
Ich habe das Facebook SDK noch nie benutzt ... aber wenn es sich um eine Bilddatei handelt, die mit dem Login-Button verknüpft ist, können Sie dies einfach ändern ... wenn Sie meinen Kommentar nicht vollständig ignorieren
— brendosthoughts
Es ist einfach keine mit einer Bilddatei verknüpfte Schaltfläche. Es hat viele Funktionen, die damit verbunden sind, zum Beispiel: Es ändert seinen Text basierend darauf, ob der Benutzer angemeldet ist oder nicht
— Dora

Antworten:

83

Sie können Stile verwenden, um die Anmeldeschaltfläche wie folgt zu ändern

<style name="FacebookLoginButton">
    <item name="android:textSize">@dimen/smallTxtSize</item>
    <item name="android:background">@drawable/facebook_signin_btn</item>
    <item name="android:layout_marginTop">10dp</item>
    <item name="android:layout_marginBottom">10dp</item>
    <item name="android:layout_gravity">center_horizontal</item>
</style>

und im Layout

<com.facebook.widget.LoginButton
        xmlns:fb="http://schemas.android.com/apk/res-auto"
        android:id="@+id/loginFacebookButton"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        fb:login_text="@string/loginFacebookButton"
        fb:logout_text=""
        style="@style/FacebookLoginButton"/>
— Filsh
quelle
Hallo @Filsh, gibt es eine offizielle Dokumentation zu diesen Eigenschaften? Ich habe es nicht gefunden.
— Jorge E. Hernández
16
Es funktioniert nicht mehr. Gradle hält beim Bauen mit einem Fehler an. Verwenden Sie den LoginManager und eine Standardschaltfläche.
— Cassio Landim
Dieser ist perfekt. Großartig
— VVB
167

Um eine vollständig benutzerdefinierte Facebook-Anmeldeschaltfläche ohne Verwendung zu haben com.facebook.widget.LoginButton.

Laut Facebook SDK 4.x,

Es gibt ein neues Konzept für die Anmeldung ab Facebook

LoginManager und AccessToken - Diese neuen Klassen führen die Facebook-Anmeldung durch

Jetzt können Sie auf die Facebook-Authentifizierung zugreifen, ohne die Facebook-Anmeldeschaltfläche als

layout.xml

    <Button
            android:id="@+id/btn_fb_login"
            .../>

MainActivity.java

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        FacebookSdk.sdkInitialize(this.getApplicationContext());

        callbackManager = CallbackManager.Factory.create();

        LoginManager.getInstance().registerCallback(callbackManager,
                new FacebookCallback<LoginResult>() {
                    @Override
                    public void onSuccess(LoginResult loginResult) {
                        Log.d("Success", "Login");

                    }

                    @Override
                    public void onCancel() {
                        Toast.makeText(MainActivity.this, "Login Cancel", Toast.LENGTH_LONG).show();
                    }

                    @Override
                    public void onError(FacebookException exception) {
                        Toast.makeText(MainActivity.this, exception.getMessage(), Toast.LENGTH_LONG).show();
                    }
                });

        setContentView(R.layout.activity_main);

        Button btn_fb_login = (Button)findViewById(R.id.btn_fb_login);

        btn_fb_login.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                  LoginManager.getInstance().logInWithReadPermissions(MainActivity.this, Arrays.asList("public_profile", "user_friends"));
            }
        });

    }

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

    callbackManager.onActivityResult(requestCode, resultCode, data); 
}
— TejaDroid
quelle
6
Fehler: logInWithReadPermissions (this, Arrays.asList ("public_profile", "user_friends")); Symbol kann nicht aufgelöst werden
— Shaktisinh Jadeja
1
TejaDroid nette Antwort, imho sollten Sie onActivityResult hinzufügen, um eine beste Antwort zu geben. :)
— Ilario
1
Arbeite wie ein Zauber +1
— Arpit Patel
3
@ShaktisinhJadeja Dies bezieht sich auf den OnClickListener-Kontext. logInWithReadPermissions benötigt eine Aktivität oder ein Fragment als ersten Parameter. Geben Sie stattdessen YourActivityName.this oder YourFragmentName.this ein.
— Crubio
1
Diese Antwort funktioniert gut. Kann mir jemand nach dem Anmelden sagen, wie ich mich von Facebook in der Android App abmelden soll?
— BABU K
34

Der beste Weg, dies zu tun, wenn Sie die Schaltfläche vollständig anpassen möchten, besteht darin, eine Schaltfläche oder eine beliebige Ansicht (in meinem Fall eine LinearLayout) zu erstellen, eine OnClickListenerauf diese Ansicht zu setzen und im Folgenden Folgendes aufzurufen onClick-Ereignis:

com.facebook.login.widget.LoginButton btn = new LoginButton(this);
btn.performClick();
— Andranik
quelle
2
Es klappt. Aber unnötig. Es ist nicht erforderlich, einen Facebook-Anmeldebutton zu verwenden und seinen Klick zu fälschen. Verwenden Sie stattdessen den LoginManager.
— Vitor Hugo Schwaab
1
Vitor ist richtig, viel einfacher, Ihre eigene Schaltfläche anzupassen und Login-Manager zu verwenden
— Jonathan Dunn
16

Sie können die Anmeldeschaltfläche wie folgt ändern

<com.facebook.widget.LoginButton
            xmlns:fb="http://schemas.android.com/apk/res-auto"
            android:id="@+id/login_button"
            android:layout_width="249dp"
            android:layout_height="45dp"
            android:layout_above="@+id/textView1"
            android:layout_centerHorizontal="true"
            android:layout_gravity="center_horizontal"
            android:layout_marginBottom="30dp"
            android:layout_marginTop="30dp"
            android:contentDescription="@string/login_desc"
            android:scaleType="centerInside"
            fb:login_text=""
            fb:logout_text="" />

Und im Code habe ich die Hintergrundressource definiert:

final LoginButton button = (LoginButton) findViewById(R.id.login_button);
button.setBackgroundResource(R.drawable.facebook);
— EISBAHN
quelle
1
Hey @RINK, das fb:login_textund fb:logout_textwirf einen Fehler beim Versuch zu laufen. Hier ist der Fehler : Error parsing XML: unbound prefix. Sind Sie sicher, dass dies die richtige Syntax ist?
— toobsco42
1
Natürlich spät, aber @ toobsco42 - stellen Sie sicher, dass Sie die xmlns: fb definiert haben (zu schemas.android.com/apk/res-auto ), entweder in der hier gezeigten Schaltfläche oder auf der obersten Ebene Ihrer Layoutdatei.
— Eric Brynsvold
3
Facebook SDK 3.0 oder höher Facebook: login_text = "" facebook: logout_text = ""
— Dhaval Parmar
1
@ RINK schreibe dies auch dann wirst du diesen Fehler nicht bekommen xmlns: fb = " schemas.android.com/apk/res-auto "
— Yawar
Button.setCompoundDrawablesWithIntrinsicBounds (0,0,0,0); , schreibe auch diesen Link
— Yawar
15

  1. Erstellen Sie eine benutzerdefinierte Facebook-Schaltfläche und ändern Sie die Sichtbarkeit auf der nativen Facebook-Schaltfläche:

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

    <Button
            android:id="@+id/facebookView"
            android:layout_width="300dp"
            android:layout_height="48dp"
            android:layout_gravity="center_horizontal"
            android:layout_marginBottom="12dp"
            android:background="@drawable/btn_frame"
            android:gravity="center"
            android:text="@string/Sign_in_facebook_button"
            android:textColor="@color/colorAccent" />

    <com.facebook.login.widget.LoginButton
            android:id="@+id/facebookButton"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:visibility="invisible"
            android:layout_marginBottom="12dp" />

 </LinearLayout>

  2. Fügen Sie Ihrer gefälschten Schaltfläche einen Listener hinzu und simulieren Sie den Klick:

    facebookView.setOnClickListener(this);
@Override
public void onClick(View v) {
    if (v.getId() == R.id.facebookView){
       facebookButton.performClick();
    }
}
— Denis Fedak
quelle
Das ist das beste. Eine wahre Antwort.
— Paakjis
9

Im neueren Facebook SDK lautet der Name des Anmelde- und Abmeldetextes: 

 <com.facebook.login.widget.LoginButton
 xmlns:facebook="http://schemas.android.com/apk/res-auto"
 facebook:com_facebook_login_text=""
 facebook:com_facebook_logout_text=""/>
— Parth mehta
quelle
1
Es funktioniert, wie haben Sie es herausgefunden? in SDK-Code graben?
— Hassan Tareq
5 
//call Facebook onclick on your customized button on click by the following

FacebookSdk.sdkInitialize(this.getApplicationContext());

        callbackManager = CallbackManager.Factory.create();

        LoginManager.getInstance().registerCallback(callbackManager,
                new FacebookCallback<LoginResult>() {
                    @Override
                    public void onSuccess(LoginResult loginResult) {
                        Log.d("Success", "Login");

                    }

                    @Override
                    public void onCancel() {
                        Toast.makeText(MainActivity.this, "Login Cancel", Toast.LENGTH_LONG).show();
                    }

                    @Override
                    public void onError(FacebookException exception) {
                        Toast.makeText(MainActivity.this, exception.getMessage(), Toast.LENGTH_LONG).show();
                    }
                });

        setContentView(R.layout.activity_main);

        Button mycustomizeedbutton=(Button)findViewById(R.id.mycustomizeedbutton);

        mycustomizeedbutton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {

                  LoginManager.getInstance().logInWithReadPermissions(this, Arrays.asList("public_profile", "user_friends"));
            }
        });

    }
— atish naik
quelle
2 
 <com.facebook.widget.LoginButton
            android:id="@+id/login_button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="5dp"
            facebook:confirm_logout="false"
            facebook:fetch_user_info="true"
            android:text="testing 123"
            facebook:login_text=""
            facebook:logout_text=""
            />

Das hat bei mir funktioniert. So ändern Sie den Text der Facebook-Anmeldeschaltfläche.

— Tanka
quelle
1

Anpassen com.facebook.widget.LoginButton

Schritt: 1 Erstellen eines Framelayout.

Schritt: 2 So legen Sie com.facebook.widget.LoginButton fest

Schritt: 3 So stellen Sie die Textansicht mit anpassbar ein.

<FrameLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    >
    <com.facebook.widget.LoginButton
        android:id="@+id/fbLogin"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:contentDescription="@string/app_name"
        facebook:confirm_logout="false"
        facebook:fetch_user_info="true"
        facebook:login_text=""
        facebook:logout_text="" />

    <TextView
        android:id="@+id/tv_radio_setting_login"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_centerHorizontal="true"
        android:background="@drawable/drawable_radio_setting_loginbtn"
        android:gravity="center"
        android:padding="10dp"
        android:textColor="@android:color/white"
        android:textSize="18sp" />
</FrameLayout>

MUSS ERINNERN

1> com.facebook.widget.LoginButton & TextView Höhe / Breite gleich

2> 1. deklarieren Sie com.facebook.widget.LoginButton und dann TextView

3> Anmelden / Abmelden mit dem Click-Listener von TextView

— Dhruv Raval
quelle
1

Es ist ein Trick, keine richtige Methode.

  • Erstellen Sie ein relatives Layout.
  • Definieren Sie Ihren facebook_botton.
  • Definieren Sie auch Ihre Schaltfläche für benutzerdefiniertes Design.
  • Überlappen Sie sie.
<RelativeLayout android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center_horizontal"
    android:layout_marginTop="30dp">
    <com.facebook.login.widget.LoginButton
    xmlns:facebook="http://schemas.android.com/apk/res-auto"
    android:id="@+id/login_button"
    android:layout_width="300dp"
    android:layout_height="100dp"
    android:paddingTop="15dp"
    android:paddingBottom="15dp" />
    <LinearLayout
    android:id="@+id/llfbSignup"
    android:layout_width="300dp"
    android:layout_height="50dp"
    android:background="@drawable/facebook"
    android:layout_gravity="center_horizontal"
    android:orientation="horizontal">
    <ImageView
    android:layout_width="30dp"
    android:layout_height="30dp"
    android:src="@drawable/facbk"
    android:layout_gravity="center_vertical"
    android:layout_marginLeft="10dp" />
    <View
    android:layout_width="1dp"
    android:layout_height="match_parent"
    android:background="@color/fullGray"
    android:layout_marginLeft="10dp"/>
    <com.yadav.bookedup.fonts.GoutamBold
    android:layout_width="240dp"
    android:layout_height="50dp"
    android:text="Sign Up via Facebook"
    android:gravity="center"
    android:textColor="@color/white"
    android:textSize="18dp"
    android:layout_gravity="center_vertical"
    android:layout_marginLeft="10dp"/>
    </LinearLayout>
</RelativeLayout>
— AMIT YADAV
quelle
1

Das ist sehr einfach. Fügen Sie eine Schaltfläche in der Layoutdatei wie hinzu

<Button
   android:layout_width="200dp"
   android:layout_height="wrap_content"
   android:text="Login with facebook"
   android:textColor="#ffff"
   android:layout_gravity="center"
   android:textStyle="bold"
   android:onClick="fbLogin"
   android:background="@color/colorPrimary"/>

Und im onClick platzieren Sie die registercallback () -Methode des LoginManager, da diese Methode automatisch ausgeführt wird.

  public void fbLogin(View view)
{
    LoginManager.getInstance().logInWithReadPermissions(this, Arrays.asList("user_photos", "email", "public_profile", "user_posts" , "AccessToken"));
    LoginManager.getInstance().logInWithPublishPermissions(this, Arrays.asList("publish_actions"));
    LoginManager.getInstance().registerCallback(callbackManager,
            new FacebookCallback<LoginResult>()
            {
                @Override
                public void onSuccess(LoginResult loginResult)
                {
                    // App code
                }

                @Override
                public void onCancel()
                {
                    // App code
                }

                @Override
                public void onError(FacebookException exception)
                {
                    // App code
                }
            });
}
— Harpreet Singh
quelle
1 
<FrameLayout
    android:id="@+id/FrameLayout1"
    android:layout_width="70dp"
    android:layout_height="70dp"
    android:layout_marginStart="132dp"
    android:layout_marginTop="12dp"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/logbu">


    <ImageView
        android:id="@+id/fb"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/fb"
        android:onClick="onClickFacebookButton"
        android:textAllCaps="false"
        android:textColor="#ffffff"
        android:textSize="22sp" />

    <com.facebook.login.widget.LoginButton

        android:alpha="0"  <!--***SOLUTION***-->
        android:id="@+id/buttonFacebookLogin"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:paddingTop="45sp"
        android:visibility="visible"
        app:com_facebook_login_text="Log in with Facebook" />

</FrameLayout>

Der einfachste Weg, die integrierte Facebook-Schaltfläche für Java und Kotlin anzupassen

— Eyush Mishra
quelle
Geniale Antwort
— Sayok Majumder
0

Richtiger und sauberster Weg

Nachdem Sie die folgenden Antworten überprüft haben, scheint es sich um Hacks zu handeln, bei denen die Ansicht der Anmeldeschaltfläche bearbeitet werden muss, um sie für Ihre Anforderungen besser geeignet zu machen.

Demo-Bild

In derselben Position ist es mir gelungen, die Facebook-Anmeldeschaltfläche effizient anzupassen.

<mehdi.sakout.fancybuttons.FancyButton
   android:id="@+id/facebook_login"
   android:layout_width="wrap_content"
   android:layout_height="45dp"
   android:paddingLeft="10dp"
   android:paddingRight="10dp"
   app:fb_radius="2dp"
   app:fb_iconPosition="left"
   app:fb_fontIconSize="20sp"
   app:fb_iconPaddingRight="10dp"
   app:fb_textSize="16sp"
   app:fb_text="Facebook Connect"
   app:fb_textColor="#ffffff"
   app:fb_defaultColor="#39579B"
   app:fb_focusColor="#6183d2"
   app:fb_fontIconResource="&#xf230;"
   android:layout_centerVertical="true"
   android:layout_centerHorizontal="true" />

und implementieren Sie den onClickListener wie folgt

FacebookLogin.setOnClickListener(new View.OnClickListener() {
   @Override
   public void onClick(View view) {
      if (AccessToken.getCurrentAccessToken() != null){
         mLoginManager.logOut();
      } else {
         mAccessTokenTracker.startTracking();
         mLoginManager.logInWithReadPermissions(MainActivity.this,              Arrays.asList("public_profile"));
      }
   }
});

Den gesamten Quellcode finden Sie unter: http://medyo.github.io/customize-the-android-facebook-login-on-android

— Mehdi Sakout
quelle
Sie müssen den offiziellen Button ändern und keinen eigenen Button hinzufügen
— Shadab K
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.