I'm using compile 'com.facebook.android:facebook-android-sdk:4.7.0'
and:
<com.facebook.login.widget.LoginButton
android:id="#+id/tutorial_button_login"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="16dp"
/>
But the button looks so ugly:
Is there any way to make it look materialized or more cooler?
I tried to mimic the Material raised button described in Google's Material Design specifications, this is what I could do :
To cover pre-lollipop versions, I used the properties of the CardView support library :
compile 'com.android.support:cardview-v7:23.1.0'
I put the LoginButton inside the CardView :
<android.support.v7.widget.CardView xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="6dp"
card_view:cardBackgroundColor="#ffd9d9d9"
card_view:cardCornerRadius="2dp"
card_view:cardElevation="6dp">
<com.facebook.login.widget.LoginButton xmlns:fb="http://schemas.android.com/apk/res-auto"
android:id="#+id/login_button"
android:layout_width="190dp"
android:layout_height="wrap_content"
android:fontFamily="sans-serif-medium"
android:paddingBottom="12dp"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:paddingTop="12dp"
android:textAllCaps="true"
android:textColor="#android:color/white"
fb:com_facebook_login_text="log in with facebook"
fb:com_facebook_logout_text="log out from facebook" />
</android.support.v7.widget.CardView>
To remove the little f icon from the original login button, I added this to the java LoginButton instannce :
mButtonLogin.setCompoundDrawablesWithIntrinsicBounds(null, null, null, null);
I ended up setting paddings.
<com.facebook.login.widget.LoginButton
android:id="#+id/tutorial_button_login"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:paddingBottom="16dp"
android:paddingTop="16dp"
android:paddingRight="16dp"
android:paddingLeft="16dp"
android:layout_marginBottom="#dimen/activity_vertical"
/>
Related
How to make round corners for image with percent icon? I try to use negative margin for imageView but is not works. Thx.
<LinearLayout
android:gravity="center_vertical"
android:layout_marginTop="15dp"
android:layout_gravity="top|center"
android:background="#drawable/rounded_background_white"
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:src="#drawable/ic_discount_percent"
android:layout_marginLeft="-3dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<TextView
android:textColor="#android:color/black"
android:layout_marginLeft="8dp"
android:text="Скидка 10%"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</LinearLayout>
You can use CircleImageView instead of ImageView
<LinearLayout
android:gravity="center_vertical"
android:layout_marginTop="15dp"
android:layout_gravity="top|center"
android:background="#drawable/rounded_background_white"
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
xmlns:android="http://schemas.android.com/apk/res/android">
<de.hdodenhof.circleimageview.CircleImageView
android:src="#drawable/ic_discount_percent"
android:layout_gravity="start"
android:layout_marginStart="0dp"
android:layout_width="30dp"
android:layout_height="30dp" />
<TextView
android:textColor="#android:color/black"
android:layout_marginLeft="8dp"
android:text="Скидка 10%"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</LinearLayout>
Make CircleImageView width and height same as 2 x corner radius. No padding.
Add the following to gradle dependencies
implementation 'de.hdodenhof:circleimageview:3.0.0'
Use Chips
<com.google.android.material.chip.Chip
style="#style/Widget.MaterialComponents.Chip.Action"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:chipIcon="#drawable/ic_action_24" // important part
android:text="#string/hello_world"/>
depending on the style you use, you'll be able to create something like this
read more here: https://material.io/develop/android/components/chip/
I want to add call icon on Button but drawableTop is not working.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="60dp">
<Button
android:id="#+id/imageView3"
android:layout_width="wrap_content"
android:drawableTop="#android:drawable/ic_menu_call"
android:layout_height="match_parent"
android:layout_weight="1" />
</LinearLayout>
Replace your Button with AppCompatButton
<LinearLayout
android:layout_width="match_parent"
android:layout_height="60dp">
<android.support.v7.widget.AppCompatButton
android:id="#+id/imageView3"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1"
android:drawableTop="#android:drawable/ic_menu_call"/>
</LinearLayout>
when using androidx with the material ui library instead of the support library
implementation 'com.google.android.material:material:1.0.0'
you will need to use
<androidx.appcompat.widget.AppCompatButton
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableTop="#android:drawable/ic_menu_camera"
android:text="Camera" />
Add orientation to your LinearLayout, decide if you want to set android:layout_weight while setting android:layout_width="wrap_content" and android:layout_height="match_parent" and set text to your button.
You can also define the icon in drawableStart like in this way:
<Button
android:id="#+id/imageView3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/black_overlay"
android:drawableStart="#drawable/ic_menu_call"
android:padding="15dp"
android:text="Click here"
android:textStyle="bold" />
The padding, text style and background color is only for the decoration.
I try to change the button textColor's parameter, but all my efforts below are in vain.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_vertical"
android:background="#color/colorPrimaryDark"
android:orientation="vertical"
android:tag="fragment_register">
<TextView
android:id="#+id/tv_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:text="#string/title"
android:textColor="#android:color/white"
android:textSize="20sp"/>
<EditText
android:id="#+id/et_first_password"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="20dp"
android:background="#3f3f3f"
android:padding="10dp"
android:ems="17"
android:textColor="#color/colorWhite"
android:hint="#string/hint_enter_password"
android:textColorHint="#696969"/>
<EditText
android:id="#+id/et_first_pass_again"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="20dp"
android:background="#3f3f3f"
android:padding="10dp"
android:ems="17"
android:textColor="#color/colorWhite"
android:hint="#string/hint_reenter_password"
android:textColorHint="#696969"/>
<Button
android:id="#+id/reg_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_margin="20dp"
android:background="#494949"
android:text="#string/btn_title_reg"
android:textColor="#color/colorWhite"/>
</LinearLayout>
The color has changed only in Preview Design Layout window, but it doesn't work in launched app.
button.setTextColor(...); It doesn't work as well
Can anybody help me please?
you should use
android:textColor="#FFFFFF"
instead of
tools:textColor="#android:color/white"
or try to set programatically like this
button.setTextColor(ContextCompat.getColor(YourActivity.this,R.color.colorBlack));
Try clear your project before building it
Build -> Clean Project or Build -> Rebuild Project
Sometimes android catch some of the previous build to save build time.
Try this
button.setTextColor(Color.parseColor("#000fff"));
or you can use
button.setTextColor(getResources().getColor(R.color.colorPrimary));
I am trying to design EditText for password with show password imageView. However I cannot design it correctly beacuse I cannot see ImageView, since EditText's layout_width="fill_parent". When I change it to wrap_content, I can see my ImageView but then it looks very bad in UI. Is it possible to design it without giving fixed size?
Here is my code;
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:orientation="horizontal"
android:layout_marginBottom="8dp">
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal">
<EditText
android:id="#+id/registerPassword"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:hint="#string/register_password"
android:inputType="textPassword" />
<ImageView
android:id="#+id/fragment_login_password_visibility"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:src="#android:drawable/ic_partial_secure"
android:layout_gravity="center"
android:clickable="true"/>
</LinearLayout>
</android.support.design.widget.TextInputLayout>
EDIT:
android:layout_weight=1 solved issue. Now I can see ImageView left of EditText. However now, I TextInputLayout hint is not working.
You don't need use ImageView.
Support Library adds support for the password visibility toggle in recent update (revision 24.2.0 - August 2016).
try it:
setPasswordVisibilityToggleDrawable(int resId)
Set the icon to use for the password visibility toggle button.
https://developer.android.com/reference/android/support/design/widget/TextInputLayout.html
First set android:weightSum of LinearLayout to "1". Then, set android:layout_width and android:layout_weight of EditText to "0dp" and "1", respectively.
Did you try to use weight?
android:layout_weight="1"
and
android:layout_width="0dp" or android:layout_width="wrap_content"
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:orientation="horizontal"
android:layout_marginBottom="8dp">
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal">
<EditText
android:id="#+id/registerPassword"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:hint="#string/register_password"
android:inputType="textPassword" />
<ImageView
android:id="#+id/fragment_login_password_visibility"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:src="#android:drawable/ic_partial_secure"
android:layout_gravity="center"
android:clickable="true"/>
</LinearLayout>
</android.support.design.widget.TextInputLayout>
Try this :
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<EditText
android:id="#+id/editText"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:hint="Password"
android:singleLine="true"
android:textSize="25sp"
android:paddingRight="60dp"
/>
<ImageButton
android:id="#+id/showpass"
android:layout_marginLeft="-60dp"
style="?android:buttonBarButtonStyle"
android:paddingBottom="5dp"
android:src="#drawable/pass_ic"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
I recommend using a TextInputLayout with passwordToggleDrawable .
<android.support.design.widget.TextInputLayout
android:id="#+id/textInputPasswordLayout"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:passwordToggleContentDescription="Show"
app:passwordToggleDrawable="#drawable/ic_password_visibility_selector"
app:passwordToggleEnabled="true">
<android.support.design.widget.TextInputEditText
android:id="#+id/textInputEditTextPassword"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ems="10"
android:fontFamily="sans-serif-light"
android:gravity="bottom"
android:hint="#string/enter_your_password"/>
</android.support.design.widget.TextInputLayout>
app:passwordToggleDrawable="#drawable/ic_password_visibility_selector" assign your drawable
this may sound trivial but I am currently having difficulty in the display of the LikeButton. It does not look as intended.
It is supposed to look like this.
https://s3.amazonaws.com/uploads.hipchat.com/20645/978150/Pm1GbfbVvhpmjVU/Screen%20Shot%202014-10-24%20at%2010.25.15%20AM.png
Instead it looks like the following:
https://s3.amazonaws.com/uploads.hipchat.com/20645/978150/JEuU1CEq3Dvmzjj/Screen%20Shot%202014-10-24%20at%2010.27.56%20AM.png
Notice the extra long blue space being stretched and "Like" text being extremely small in the second pic.
Here is the code for the layout file:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/layoutFacebookLike"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:screenOrientation="sensorLandscape" >
<TextView
android:id="#+id/textFacebookIncentiveText"
style="#style/Huge"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:gravity="center"
android:padding="48dp"
android:text="#string/txt_facebook_incentive_default"
android:textColor="#android:color/white" />
<RelativeLayout
android:id="#+id/layoutFacebookLikeContainer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#40000000"
android:layout_gravity="center"
android:gravity="center_horizontal">
<Button
android:id="#+id/btnContinue"
style="?android:attr/borderlessButtonStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_margin="32dp"
android:paddingBottom="16dp"
android:paddingLeft="2dp"
android:paddingRight="2dp"
android:paddingTop="16dp"
android:text="#string/btn_continue"
android:layout_alignParentLeft="false"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textColor="#android:color/white"
android:layout_centerInParent="true" />
<com.facebook.widget.LikeView
android:id="#+id/likeView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_margin="64dp"
android:layout_centerInParent="true"
android:textAlignment="gravity"
android:layout_alignParentBottom="false"
android:layout_alignParentLeft="false" />
</RelativeLayout>
</LinearLayout>
</LinearLayout>
The code in the activity that I am using is as follows:
LikeView mLikeButton = (LikeView) findViewById(R.id.likeView1);
mLikeButton.setObjectId("121083561691");
mLikeButton.setLikeViewStyle(LikeView.Style.STANDARD);
mLikeButton.setAuxiliaryViewPosition(LikeView.AuxiliaryViewPosition.INLINE);
mLikeButton.setHorizontalAlignment(LikeView.HorizontalAlignment.CENTER);
mLikeButton.setForegroundColor(Color.WHITE);
Please let me know how I can correct it.
This issue arises when you have some themes and styling already set for the activity which interferes with the design of the LikeButton. If you set the default values, the Like Button appears normal.