Android Google Login Button and Facebook sdk 4+ Button Layout

Question

I Am developing an application which use google and facebook integration ...I want to fix height and width of those button...and i want to set Button Text Manualy...

i had tried so far

<com.facebook.login.widget.LoginButton
       xmlns:fb="http://schemas.android.com/apk/res-auto"
       android:id="@+id/connectWithFbButton"  
       android:layout_width="match_parent"
       android:layout_height="50dp"
       android:layout_marginLeft="10dp"
       android:layout_marginRight="10dp"
       android:text="@string/fbloginText"
       android:layout_marginTop="30dp"
/>

<com.google.android.gms.common.SignInButton
        android:id="@+id/signin"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:text="@string/googleloginText" 
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        android:layout_marginTop="20dp"/>

although i had attemted something like this

    fb:login_text="Login"
    fb:logout_text="Logout"

         or 

    facebook:login_text="Login" 

But i Got Error::=>No resource identifier found for attribute 'login_text' in package 'com.test.b2c'

or in by coding

    loginButton = (LoginButton) findViewById(R.id.connectWithFbButton);
     loginButton.setText("Login");

Now My layout Look Something Like This

I also want to set Height And width of this buttons .. ... help me friends .....thx in advance

UPDATE

I have no direct problem in setting width what am I really concern is the inconsistent HEIGHT shown in the picture. I need to find better way(s) to make those buttons height equally nd set Text to those Button.

Solution 1

If we wanna change custom text of Facebook Login ..

Go to that Facebook library project And go to string.xml

you will find something like this

  <string name="com_facebook_loginview_log_in_button_long">Log in with facebook </string>

Replace this with your custom text

Although if you want to change custom text of Google Plus you can

From OnCreate call this

 setGooglePlusButtonText(signinButton,"your custom text");

//Text Change Method Of Google Plus

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.setText(buttonText);
         return;
         }
      }
}

For Height inconsistancy of facebook i had add padding to Facebook Button XML

android:paddingTop="20dp"
android:paddingBottom="20dp"

Solution 2

This xml code for style customizes my app's facebook login button like in the picture (in text and button size).

<com.facebook.login.widget.LoginButton
    android:id="@+id/login_button"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="40dip"
    android:paddingTop="10dp"
    android:paddingBottom="10dp"
    android:textSize="20sp"
    facebook:com_facebook_login_text="Facebook"
    facebook:com_facebook_logout_text="Facebook" />

Result:

Solution 3

Add linear layout and add these 2 button in it :

<LinearLayout 
    android:id="@+id/parentLinear" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent"
    android:orientation="vertical" >

<com.facebook.login.widget.LoginButton
       xmlns:fb="http://schemas.android.com/apk/res-auto"
       android:id="@+id/connectWithFbButton"  
       android:layout_width="wrap_content"
       android:layout_height="50dp"
       android:layout_marginLeft="10dp"
       android:layout_marginRight="10dp"
       android:text="@string/fbloginText"
       android:layout_marginTop="30dp" />

<com.google.android.gms.common.SignInButton
        android:id="@+id/signin"
        android:layout_width="wrap_content"
        android:layout_height="50dp"
        android:text="@string/googleloginText" 
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        android:layout_marginTop="30dp" />
</LinearLayout>

This will give Correct Height, Width and Margin for both button

Solution 4

You have to change android:layout_width to either wrap_content, or a specific size, preferably in dp's (e.g. 20dp, 30dp, 40dp).

As for the error, it is probably shown because you didn't edit your strings.xml, try using Android Studio, it will automatically create these values for you, and will also show you a preview of your app.

View more solutions

Comments

[Tufan]

width dosent matter @Junaid Hafeez..look at picture both the botton have same width but what abt height i set it to 50dp but dosent work

[neferpitou]

@Junaid check the comment above.

[Aleksandar Stefanović]

@Tufan your WIDTH is set to "match_parent", which means that it will use any space available, it will go from one edge of the screen to other. WIDTH = left-right, HEIGHT = up-down

[Tufan]

@Aleksandar Stefanović look at both the pics ...check google login and facebook login button height ...i set it to 50dp but dosent work

[Tufan]

same result inconsistant height and width

[Kushal]

Editted answer android:height="wrap_content".. this will work pls check

[Tufan]

loginView:login_text="your custom text here" this is not acceptable

[Juan Aguilar Guisado]

In case you have imported Facebook SDK via graddle (you can't modify sources), you can customize your text overriding the string in your strings.xml, declaring an item with this ID: <string name="com_facebook_loginview_log_in_button_long">Your custom text</string>

[jay]

While the text size increases, the size of facebook logo does not. Is there a way to increase facebook icon size?