dostosuj przycisk logowania na Androida na Facebooku


79

Chcę dostosować wygląd przycisku logowania na Facebooku, który otrzymujemy wraz z zestawem SDK Facebooka dla Androida (facebook-android-sdk-3.0.1). Chcę mieć prosty przycisk na Androida z tytułem „Zaloguj się przez Facebooka”. Nie mogłem znaleźć żadnej dokumentacji na ten temat.

Więc jeśli ktoś wie, jak to zrobić w prosty sposób, proszę powiedz mi lub pokieruj, jak to zrobić.


1
Nigdy nie korzystałem z facebook sdk ... ale jeśli jest to plik obrazu powiązany z przyciskiem logowania, możesz go po prostu zmodyfikować ... jeśli nie całkowicie zignoruj ​​mój komentarz
brendosthoughts

po prostu nie jest to przycisk skojarzony z plikiem obrazu. ma wiele funkcji z nim związanych np .: zmienia swój tekst w zależności od tego, czy użytkownik jest zalogowany, czy nie
dora

Odpowiedzi:


83

Możesz użyć stylów do zmodyfikowania przycisku logowania w ten sposób

<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>

i w układzie

<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"/>

Cześć @Filsh, czy jest jakaś oficjalna dokumentacja dotycząca tych nieruchomości? Nie znalazłem tego.
Jorge E. Hernández

16
To już nie działa. Gradle zatrzymuje się z błędem podczas budowania. Użyj narzędzia LoginManager i standardowego przycisku.
Cassio Landim

Ten jest doskonały. Świetnie
VVB,

168

Aby mieć całkowicie niestandardowy przycisk logowania do Facebooka bez użycia com.facebook.widget.LoginButton.

Według facebook sdk 4.x,

Pojawiła się nowa koncepcja logowania jak z Facebooka

LoginManager i AccessToken - te nowe klasy wykonują logowanie na Facebooku

Teraz możesz uzyskać dostęp do uwierzytelniania na Facebooku bez przycisku logowania do Facebooka jako

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

6
Błąd: logInWithReadPermissions (this, Arrays.asList ("public_profile", "user_friends")); Nie można rozwiązać symbolu
Shaktisinh Jadeja

1
TejaDroid dobra odpowiedź, imho powinieneś dodać onActivityResult, aby udzielić najlepszej odpowiedzi. :)
Ilario

1
Działaj jak urok +1
Arpit Patel

3
@ShaktisinhJadeja to odnosi się do kontekstu OnClickListener. logInWithReadPermissions wymaga działania lub fragmentu jako pierwszego parametru. Więc zamiast tego umieść YourActivityName.this lub YourFragmentName.this.
crubio

1
Ta odpowiedź działa dobrze.Czy ktoś może mi powiedzieć po zalogowaniu, jak wylogować się z Facebooka w aplikacji na Androida?
BABU K

36

Najlepszym sposobem, jaki znalazłem, aby to zrobić, jeśli chcesz w pełni dostosować przycisk, jest utworzenie przycisku lub dowolnego widoku (w moim przypadku było to a LinearLayout) i ustawienie OnClickListenertego widoku i wywołanie następującego w Zdarzenie onClick:

com.facebook.login.widget.LoginButton btn = new LoginButton(this);
btn.performClick();

2
To działa. Ale niepotrzebne. Nie ma potrzeby używania przycisku logowania na Facebooku i fałszywego kliknięcia. Zamiast tego użyj narzędzia LoginManager.
Vitor Hugo Schwaab

1
Vitor ma rację, znacznie łatwiej jest dostosować własny przycisk i użyć menedżera logowania
Jonathan Dunn

16

Możesz zmodyfikować przycisk logowania w ten sposób

<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="" />

W kodzie zdefiniowałem zasób tła:

final LoginButton button = (LoginButton) findViewById(R.id.login_button);
button.setBackgroundResource(R.drawable.facebook);

1
Hej @RINK, fb:login_texti fb:logout_textzgłoś błąd podczas próby uruchomienia. Tutaj jest błąd: Error parsing XML: unbound prefix. Czy na pewno jest to prawidłowa składnia?
toobsco42

1
Oczywiście późno, ale @ toobsco42 - upewnij się, że masz zdefiniowane xmlns: fb (do schemas.android.com/apk/res-auto ), albo w przycisku, jak pokazano tutaj, albo na najwyższym poziomie pliku układu.
Eric Brynsvold

3
facebook SDK 3.0 lub nowszy jego facebook: login_text = "" facebook: logout_text = ""
Dhaval Parmar

1
@RINK napisz to również wtedy nie dostaniesz tego błędu xmlns: fb = " schemas.android.com/apk/res-auto "
Yawar

Button.setCompoundDrawablesWithIntrinsicBounds (0,0,0,0); , napisz też to link
Yawar

15
  1. Utwórz niestandardowy przycisk Facebooka i zmień widoczność na natywnym przycisku Facebooka:

    <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. Dodaj odbiornik do fałszywego przycisku i zasymuluj kliknięcie:

    facebookView.setOnClickListener(this);
    @Override
    public void onClick(View v) {
        if (v.getId() == R.id.facebookView){
           facebookButton.performClick();
        }
    }
    

To jest najlepszy. Jedna prawdziwa odpowiedź.
paakjis,

9

W nowszym Facebook SDK nazwa tekstu logowania i wylogowania to:

 <com.facebook.login.widget.LoginButton
 xmlns:facebook="http://schemas.android.com/apk/res-auto"
 facebook:com_facebook_login_text=""
 facebook:com_facebook_logout_text=""/>

1
To działa, jak się tego dowiedziałeś? zagłębiać się w kod SDK?
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"));
            }
        });

    }

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=""
            />

To zadziałało dla mnie. Aby zmienić tekst przycisku logowania na Facebooku.


1

Dostosuj com.facebook.widget.LoginButton

krok: 1 Tworzenie Framelayout.

krok: 2 Aby ustawić com.facebook.widget.LoginButton

krok: 3 Aby ustawić Textview z możliwością dostosowania.

<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>

MUSISZ PAMIĘTAĆ

1> com.facebook.widget.LoginButton & TextView Wysokość / szerokość taka sama

2> 1-ci declate com.facebook.widget.LoginButton następnie TextView

3> Aby zalogować się / wylogować za pomocą odbiornika kliknięć TextView


1

To sztuczka, a nie właściwa metoda.

  • Utwórz układ względny.
  • Zdefiniuj swój facebook_botton.
  • Zdefiniuj także przycisk własnego projektu.
  • Nakładaj je.
<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>

1

To jest bardzo proste. Dodaj przycisk w pliku układu, na przykład

<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"/>

A w onClick umieść metodę registercallback () LoginManagera. Ponieważ ta metoda jest wykonywana automatycznie.

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

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>

Najłatwiejszy sposób na dostosowanie zintegrowanego przycisku Facebooka zarówno dla Java, jak i Kotlin


Genialna odpowiedź
Sayok Majumder

-1

Właściwy i najczystszy sposób

Po sprawdzeniu poniższych odpowiedzi wydaje się, że są to rodzaj hacków, które polegają na edycji widoku przycisku logowania, aby był bardziej odpowiedni dla twoich potrzeb.

Obraz demonstracyjny

Będąc w tej samej pozycji, udało mi się efektywnie dostosować przycisk logowania na Facebooku.

<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" />

i zaimplementuj onClickListener w ten sposób

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

Cały kod źródłowy można znaleźć na: http://medyo.github.io/customize-the-android-facebook-login-on-android


Musisz zmienić oficjalny przycisk, a nie dodać własny przycisk
Shadab K
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.