I managed to get the desired result by following the following steps:
-
Opened the Facebook SDK 3.x LoginButton code and saw how the button was styled there:
this.setBackgroundResource(R.drawable.com_facebook_button_blue); this.setCompoundDrawablesWithIntrinsicBounds( R.drawable.com_facebook_inverse_icon, 0, 0, 0); this.setCompoundDrawablePadding(getResources().getDimensionPixelSize( R.dimen.com_facebook_loginview_compound_drawable_padding)); this.setPadding(getResources().getDimensionPixelSize( R.dimen.com_facebook_loginview_padding_left), getResources().getDimensionPixelSize( R.dimen.com_facebook_loginview_padding_top), getResources().getDimensionPixelSize( R.dimen.com_facebook_loginview_padding_right), getResources().getDimensionPixelSize( R.dimen.com_facebook_loginview_padding_bottom)); -
Based on the solution presented in this answer, I changed the button parameters during
onPostCreate()as follows:float fbIconScale = 1.45F; Drawable drawable = hostActivity.getResources().getDrawable( com.facebook.R.drawable.com_facebook_button_icon); drawable.setBounds(0, 0, (int)(drawable.getIntrinsicWidth()*fbIconScale), (int)(drawable.getIntrinsicHeight()*fbIconScale)); authButton.setCompoundDrawables(drawable, null, null, null); authButton.setCompoundDrawablePadding(hostActivity.getResources(). getDimensionPixelSize(R.dimen.fb_margin_override_textpadding)); authButton.setPadding( hostActivity.getResources().getDimensionPixelSize( R.dimen.fb_margin_override_lr), hostActivity.getResources().getDimensionPixelSize( R.dimen.fb_margin_override_top), hostActivity.getResources().getDimensionPixelSize( R.dimen.fb_margin_override_lr), hostActivity.getResources().getDimensionPixelSize( R.dimen.fb_margin_override_bottom));Where my custom dimensions are as follows:
<dimen name="fb_margin_override_top">13dp</dimen> <dimen name="fb_margin_override_bottom">13dp</dimen> <!--The next value changes the margin between the FB icon and the left border:--> <dimen name="fb_margin_override_lr">10dp</dimen> <!--The next value changes the margin between the FB icon and the login text:--> <dimen name="fb_margin_override_textpadding">17dp</dimen>
This results in the desired layout:
