Android Facebook 로그인 버튼 사용자 지정

Android Facebook 로그인 버튼 사용자 지정

---

Android 용 Facebook SDK (facebook-android-sdk-3.0.1)와 함께 제공되는 Facebook 로그인 버튼의 모양을 사용자 지정하고 싶습니다. "페이스 북을 통해 로그인"이라는 제목의 간단한 안드로이드 버튼을 원합니다. 이에 관한 문서를 찾을 수 없습니다.

그래서 누구든지 간단한 방법으로하는 방법을 알고 있다면, 저에게 알려주거나 방법을 알려주세요.

---

다음과 같이 로그인 버튼을 수정하기 위해 스타일을 사용할 수 있습니다.

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

그리고 레이아웃

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

---

을 사용하지 않고 완전히 사용자 정의 페이스 북 로그인 버튼을 갖기 위해 com.facebook.widget.LoginButton.

facebook sdk 4.x에 따르면,

Facebook에서와 같이 새로운 개념의 로그인이 있습니다.

LoginManager 및 AccessToken- 이 새로운 클래스는 Facebook 로그인을 수행합니다.

따라서 이제 Facebook 로그인 버튼없이 Facebook 인증에 액세스 할 수 있습니다.

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

---

이 작업을 수행하는 가장 좋은 방법은 단추를 완전히 사용자 지정하려는 경우 단추 또는 원하는보기 (내 경우에는 LinearLayout)를 만들고 OnClickListener해당보기에 대해 설정 하고 다음을 호출하는 것입니다. onClick 이벤트 :

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

---

다음과 같이 로그인 버튼을 수정할 수 있습니다.

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

그리고 코드에서 배경 리소스를 정의했습니다.

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

---

1. 사용자 지정 Facebook 버튼을 만들고 기본 Facebook 버튼의 가시성을 변경합니다.

   <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. 가짜 버튼에 리스너를 추가하고 클릭 시뮬레이션 :

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

---

최신 Facebook SDK에서 로그인 및 로그 아웃 텍스트 이름은 다음과 같습니다.

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

---

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

    }

---

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

이것은 나를 위해 일했습니다. 페이스 북 로그인 버튼 텍스트를 변경하려면.

---

com.facebook.widget.LoginButton 사용자 정의

단계 : 1 프레임 레이아웃 만들기 .

단계 : 2 com.facebook.widget.LoginButton 을 설정하려면

단계 : 3 사용자 정의 가능으로 Textview 를 설정하려면 .

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

기억해야 함

1> com.facebook.widget.LoginButton 및 TextView 높이 / 너비 동일

2> 1 declate com.facebook.widget.LoginButton 다음 텍스트 뷰

3> TextView의 Click-Listener를 사용하여 로그인 / 로그 아웃하려면

---

적절한 방법이 아닌 트릭입니다.

• 상대 레이아웃을 만듭니다.
• facebook_botton을 정의하십시오.
• 또한 맞춤형 디자인 버튼을 정의하십시오.
• 겹치십시오.

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

---

이것은 매우 간단합니다. 레이아웃 파일에 다음과 같은 버튼을 추가합니다.

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

그리고 onClick에서 LoginManager의 registercallback () 메서드를 배치합니다.이 메서드가 자동으로 실행되기 때문입니다.

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

---

적절하고 깨끗한 방법

After checking the answers below, it seems that they're kind of hacks that rely on editing the login button view to make it more suitable for your need.

Being in the same position, I've succeeded to customize the facebook login button efficiently.

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

and implement the onClickListener like so

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

You could find the whole source code on: http://medyo.github.io/customize-the-android-facebook-login-on-android

참고URL : https://stackoverflow.com/questions/16314651/customize-android-facebook-login-button