web-dev-qa-db-ja.com

カスタマイズAndroid Facebookログインボタン

Facebookログインボタンの外観をカスタマイズして、Android（facebook-Android-sdk-3.0.1）のFacebook sdkと共に取得します。 「Facebookにログイン」というタイトルのシンプルなAndroidボタンが必要です。私はそれに関するドキュメントを見つけることができませんでした。

そのため、誰かが簡単な方法でそれを行う方法を知っているなら、教えてください、またはそれを行う方法を教えてください。

androidandroid-facebook
75
dora

このようなログインボタンを変更するには、スタイルを使用できます

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

com.facebook.widget.LoginButtonを使用せずに完全にカスタムのFacebookログインボタンを使用するため。

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

ボタンを完全にカスタマイズしたい場合、これを行うための最良の方法は、ボタンまたは任意のビュー（私の場合はLinearLayout）を作成し、OnClickListenerを設定することです。そのビューに追加し、onClickイベントで次を呼び出します。

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

ログインボタンは次のように変更できます

<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);
16
RINK

  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();
    }
}
11
Denis Fedak

新しい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=""/>
9
Parth mehta
//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"));
            }
        });

    }
5
atish naik
 <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=""
            />

これは私のために働いた。 Facebookのログインボタンのテキストを変更するには。

2
Tanka

カスタマイズcom.facebook.widget.LoginButton

step：1Framelayout。の作成

step：2設定するにはcom.facebook.widget.LoginButton

step：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> 1st declate com.facebook.widget.LoginButton then TextView

3> TextViewのClick-Listenerを使用してログイン/ログアウトを実行するには

1
Dhruv Raval

そのトリックは適切な方法ではありません。

  • 相対レイアウトを作成します。
  • 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>
1
AMIT YADAV

これは非常に簡単です。レイアウトファイルにボタンを追加します

<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
                }
            });
}
1
Harpreet Singh

適切でクリーンな方法

以下の回答を確認したところ、ログインボタンビューを編集してユーザーのニーズにより適したものにすることに依存しているハッキングのようです。

Demo image

同じ位置にいることで、facebookのログインボタンを効率的にカスタマイズすることに成功しました。

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

そして、onClickListenerをそのように実装します

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

ソースコード全体は次の場所にあります： http://medyo.github.io/customize-the-Android-facebook-login-on-Android

0
Mehdi