android google 登录和 facebook 登录按钮看起来完全不同

Posted 2023-04-14

【中文标题】android google 登录和 facebook 登录按钮看起来完全不同

【英文标题】：android google signin and facebook login button look completely different

【发布时间】：2013-05-26 06:48:06

【问题描述】：

默认的 Facebook LoginButton 对象和 Google SignIn 按钮对象的外观完全不同，它们不适合我现有的布局。据我所知，这些对象不是我可以在不更改库本身的情况下修改的资产（我假设这些组件也是开源的）

人们如何处理这个问题？我已经看到应用程序对使用自己的自定义按钮的两个应用程序都有登录选项，但在我的实现中，我使用的是那些在点击时自动调用其各自库的给定对象。

我当然可以潜得更深，但如果我这样做，我觉得我正在重新发明不那么明显的***

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

这个对象显然不是一个按钮，我还没有检查它是否真的是一个按钮。

我需要为 Google+ 和 Facebook 登录按钮使用不同的资源。

我有什么

我喜欢的一个 android 示例（Duolingo 应用）

编辑： 经过一些非常简单的布局调整后，这就是结果（在横向模式下，只是为了说明问题）

这些按钮仍然非常不同，我需要一个仍然可以访问正确方法的不同资产。多亏了这些例子，我有点了解如何使用 Facebook 来做这件事，但是 Google 登录现在对我来说非常神秘

【问题讨论】：

您是否尝试过将 layout_width 属性设置为实际宽度而不是 wrap_content？

好吧，现在我觉得自己认知疏忽了，@PatrickEvans，也许我可以把它放在 FrameLayout 中并将按钮设置为 match_parent

@PatrickEvans 好的，所以我让它们与match_parent 参数对齐，但它们看起来仍然完全不同。管道 |徽标和按钮的其余部分之间的位置不同，Facebook 按钮在横向模式下看起来很糟糕......我想知道其他人如何处理这个

您可以创建自己的按钮（只要它们符合品牌要求），这就是 Duolingo 所做的。没有什么说 FB 按钮必须有那些精确的圆角。

我正在尝试在我的应用中实现 facebook 登录。从你的问题来看，它表明你已经完成了这个..我做了很多搜索......请你帮我实现 facebook...当用户登录时我有按钮，它在我不想要的同一活动上显示注销按钮...请帮助我@MartínMarconcini

【参考方案1】：

要更改 Facebook 按钮上的文本，请使用：

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

您还需要将此添加到按钮：

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

像这样：

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

【参考方案2】：

试试这个： 将此方法添加到您的活动中：

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;
            
        
    

在 onCreateMethod 中添加以下行 （你有初始化 id 的地方）：

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

【参考方案3】：

按钮的样式并不完全相同 - 拐角处的不同曲线和阴影的使用。所以不可能让它们看起来完全一样。我能得到的最接近的方法是制作一个精确宽度为 215dip 的垂直线性布局 - 并将按钮的宽度设置为 match_parent：

这使用了以下layout.xml：

<LinearLayout
    android:layout_
    android:layout_
    android:layout_centerHorizontal="true"
    android:orientation="vertical" >

<com.google.android.gms.common.SignInButton
    android:id="@+id/sign_in_button"
    android:layout_
    android:layout_ />

<com.facebook.widget.LoginButton
    android:id="@+id/authButton"
    android:layout_
    android:layout_ />

</LinearLayout>

通过 Google+ 按钮，您可以简单地使用您自己的资产 - com.google.android.gms.common.SignInButton 的行为与 android.widget.Button 相同，并且您以正常方式注册 onClick 处理程序。请务必在创建资产时遵循 Google 的品牌指南：

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

但请注意，Google+ 按钮确实提供了翻译，如果您以多种语言实现自己的按钮，则需要自己创建这些翻译。

【讨论】：

我喜欢一个按钮显示登录和另一个登录的方式；）

看看我如何自定义它们以使其看起来准确。 karunadheera.com/index.php/archives/160

链接失效了，能重新发一下吗？

【参考方案4】：

使用最新的 sdk，两个按钮看起来很相似。代码和结果如下。

第 1 步：build.gradle

编译'com.facebook.android:facebook-android-sdk:4.6.0'

编译'com.google.android.gms:play-services:7.5.0'

第 2 步：myActivity.xml

<com.google.android.gms.common.SignInButton
android:id="@+id/sign_in_button"
android:layout_
android:layout_ />

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

第 3 步：结果 第 4 步：使用最新的 gcm 更新 build.gradle

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

第 5 步：结果

【讨论】：

有了新的 SDK，它变得很恶心，所以他们让我们打破了他们品牌的“规则”......