See:
Code:
<RelativeLayout
android:id="#+id/circle_card_payment"
android:layout_width="40dp"
android:layout_height="40dp">
<com.google.android.material.button.MaterialButton
android:id="#+id/logo"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:backgroundTint="#color/colorBlack"
android:insetLeft="0dp"
android:insetTop="0dp"
android:insetRight="0dp"
android:insetBottom="0dp"
android:text="W"
android:textColor="#FFFFFF"
android:textSize="16sp"
app:shapeAppearanceOverlay="#style/ShapeAppearanceOverlay_ButtonCircle50"
app:strokeWidth="0dp" />
</RelativeLayout>
style.xml
<style name="ShapeAppearanceOverlay_ButtonCircle50">
<item name="cornerFamily">rounded</item>
<item name="cornerSize">20dp</item>
</style>
For confirmation that material button is containing full space, I sat material button color to black. and inside text color is white.
Can anybody give me the exact solution according to my situation? Please note that you should not increase the relative layout size from 40 to 50 dp, I know that can solve the problem, but logo size will be bigger and that is not appropriate.
Please note, I must need to wrap this button in any root layout. That is mandatory. Like right now my material button is inside Relative layout.
Why does MaterialButton text not containing full space?
The problem is with the material button because by default material buttons have padding. you remove or override that padding by setting padding attribute in the xml itself, this should solve the problem.
just add android:padding = "0dp" to solve this. or as Ricardo.A suggest in comment set in the style <item name="android:padding">0dp</item>
<RelativeLayout
android:id="#+id/circle_card_payment"
android:layout_width="40dp"
android:layout_height="40dp">
<com.google.android.material.button.MaterialButton
android:id="#+id/logo"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:backgroundTint="#323232"
android:insetLeft="0dp"
android:insetTop="0dp"
android:insetRight="0dp"
android:padding="0dp"
android:insetBottom="0dp"
android:text="W"
android:textColor="#FFFFFF"
android:textSize="16sp"
app:shapeAppearanceOverlay="#style/ShapeAppearanceOverlay_ButtonCircle50"
app:strokeWidth="0dp" />
</RelativeLayout>
Result with default padding.
and Result with overriding padding to 0dp
Hope this helps, Happy Coding!!
Related
I want to center align the text in the extended floating action button but I'm not able to do that. As you can see in the image below the text is not centrally aligned.
Here's is the code for extended floating action button:
<com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
android:id="#+id/compress_start_fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="16dp"
android:text="S"
app:backgroundTint="?android:colorAccent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:textColor="#color/textColorPrimaryDark"
app:layout_constraintStart_toStartOf="parent"
android:textAlignment="center"
/>
Am I doing anything wrong? Any help will be appreciated.
Please add these two lines in your ExtendedFloatingActionButton
android:paddingStart="0dp"
android:paddingEnd="0dp
use like this
<com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
android:layout_width="48dp"
android:layout_height="48dp"
android:gravity="center"
android:paddingStart="0dp"
android:paddingEnd="0dp"
android:text="#string/ic_lin_camera" />
When using an ExtendedFloatingActionButton for text only, in your layout xml for the fab you can use
style="#style/Widget.MaterialComponents.ExtendedFloatingActionButton"
or extend the above style via
<style name="extended_fab_text_only" parent="Widget.MaterialComponents.ExtendedFloatingActionButton">
<item name="android:textAppearance">#style/myTextAppearance</item>
</style>
and you that as the style of your fab in your layout xml
style="#style/extended_fab_text_only"
Documentation: https://material.io/components/buttons-floating-action-button/android#extended-fabs
Under Extended FABs > Styles:
Text-only when extended
style Widget.MaterialComponents.ExtendedFloatingActionButton
I'm using latest material components - 1.1.0-beta01.
When ExtendedFloatingActionButton expands, its height also reduces.
Here is how xml layout looks:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/main_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="56dp"
android:text="Text"
android:textColor="#02220D"
android:backgroundTint="#F2C203"
style="#style/Widget.MaterialComponents.ExtendedFloatingActionButton"
android:textSize="15sp"
android:fontFamily="sans-serif-medium"
android:textStyle="normal"
android:layout_marginBottom="16dp"
android:layout_marginEnd="16dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:iconTint="#02220D"
app:icon="#drawable/ic_camera"
app:iconPadding="10dp"
android:insetLeft="0dp"
android:insetBottom="0dp"
android:insetTop="0dp"
android:insetRight="0dp"
/>
</androidx.constraintlayout.widget.ConstraintLayout>
I tried to set min and max height, but it didn't work. Any idea how to achieve the same height when button is expanded and shrank?
Thanks.
The ExtendedFloatingActionButton is a MaterialButton.
You can use the android:minHeight attribute:
<com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
android:minHeight="56dp"
../>
Otherwise you can define a custom style:
<style name="CustomExtendedFloating" parent="Widget.MaterialComponents.ExtendedFloatingActionButton.Icon">
<item name="android:minHeight">56dp</item>
</style>
Try setting app:collapsedSize property with your required size
app:collapsedSize="56dp"
Instead of hardcoded value use the one provided by the material library :
<com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
android:minHeight="#dimen/design_fab_size_normal"
It's worth noting, according to the spec for FAB and Extended FAB, in the extended state, it's not as tall. https://material.io/components/buttons-floating-action-button/#specs
I am using supportLibrary = "28.0.0-beta01" version.
Here is my code in .xml file:
<android.support.design.button.MaterialButton
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:icon="#drawable/ic_my_orders"
app:iconGravity="textStart"
android:gravity="center"/>
To my code icon of the drawable locating left side of the button. I want to set button to the center.
I want to achieve this result
Edit
I don't need to any custom views or hard coded things. If this is a bug (app:iconGravity), I will wait next release.
EDIT
The bug fixed in the version 28.0.0-rc01,just change the version.
The code snippet you have in your original question is correct. This has been identified as a bug and will be fixed in the upcoming release.
With the Material Components library just use the app:iconGravity="textStart" attribute:
<com.google.android.material.button.MaterialButton
style="#style/Widget.MaterialComponents.Button.Icon"
app:icon="#drawable/..."
app:iconGravity="textStart"
../>
If you want to cut the corners use the app:shapeAppearanceOverlay attribute:
<com.google.android.material.button.MaterialButton
style="#style/Widget.MaterialComponents.Button.Icon"
app:icon="#drawable/..."
app:iconGravity="textStart"
app:shapeAppearanceOverlay="#style/Button.Cut"
../>
with:
<style name="Button.Cut" parent="">
<item name="cornerFamily">cut</item>
<item name="cornerSize">4dp</item>
</style>
You can use width to wrap_content so it matches your text. And layout_gravity instead of gravity to set the button its own gravity (and not its childs).
<android.support.design.button.MaterialButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:icon="#drawable/ic_my_orders"
app:iconGravity="textStart"
android:layout_gravity="center"/>
UPDATED
Try this code to set left padding of button to make it center.
<android.support.design.button.MaterialButton
android:id="#+id/material_button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:gravity="center_vertical|start"
android:text="CENTER"
android:textColor="#android:color/white"
app:icon="#drawable/ic_location_on_accent_24dp"
app:layout_constraintBottom_toBottomOf="parent" />
JAVA
final MaterialButton button = root_view.findViewById(R.id.material_button);
button.post(new Runnable() {
#Override
public void run() {
int width = button.getWidth();
button.measure(0,0);
int paddingleft = (width - button.getMeasuredWidth() + 50)/2; //50 drawable width
button.setPadding(paddingleft,0,0,0);
}
});
OUTPUT
I want to know why my autocomplete textview suggestion is hiding the autocomplete textview , i am attaching the picture for better understanding.
<AutoCompleteTextView
android:id="#+id/current_location"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/round_background_white"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:paddingLeft="5dp"
android:completionThreshold="1"
android:dropDownHeight="80dp"
android:dropDownWidth="wrap_content"
android:singleLine="true"
android:focusable="true"
android:textColor="#000000"
android:textColorHint="#000000"
android:dropDownListViewStyle="#style/DropDownListViewStyle"/>
Style.xml:
<style name="DropDownListViewStyle">
<item name="android:dividerHeight">2dp</item>
</style>
It's probably due to the custom drawable round_background_white.
Make sure you are specifying enough height & padding in it.
Also post your round_background_white over here.
I've got a button and a drawable on the left of the text, but I want the drawable to be closer to the text. So I need to move the drawable.
I've defined android:drawableLeft but the content of the button is not centered.
Here is my code:
<Button
android:id="#+id/addsubject"
android:layout_width="250dp"
android:layout_height="wrap_content"
android:drawableLeft="#drawable/ic_action_add"
android:layout_centerHorizontal="true"
android:layout_alignParentTop="true"
android:layout_marginTop="20dp"
android:text="#string/addsubject"
android:textColor="#color/white"
android:background="#drawable/custombutton1" />
Here is how it looks now:
And here is how I'd like it to be:
Thank you!
Use the app:iconGravity="textStart" attribute in the MaterialButton
<com.google.android.material.button.MaterialButton
app:icon="#drawable/ic_add_24px"
app:iconGravity="textStart"
../>
If you want to reduce the padding between the icon and the text just use the app:iconPadding attribute:
<com.google.android.material.button.MaterialButton
app:icon="#drawable/ic_add_24px"
app:iconGravity="textStart"
app:iconPadding="0dp"/>
try this
<Button
android:id="#+id/addsubject"
android:layout_width="160dip"
android:layout_height="60dip"
android:layout_gravity="center"
android:drawableLeft="#drawable/ic_action_add"
android:drawablePadding="2dip"
android:gravity="center"
android:paddingLeft="30dip"
android:paddingRight="26dip"
android:singleLine="true"
android:text="#string/addsubject"
android:textSize="13dip" />
I got this result by simply putting these properties to the button specifically
<Button
...
android:paddingLeft="60dp"
android:drawablePadding="-50dp"
android:gravity="center"
android:drawableLeft="#drawable/your_button_icon"
/>
You can tune in with your own values for your desired results.
Cheers :-)
I done this simply using paddingLeft and paddingRight. Its works!
...
android:paddingLeft="25dp"
android:paddingRight="25dp"/>
You can use LinearLayout as your button by adding OnClickListener and customize however you want.
<LinearLayout
android:layout_width="160dip"
android:layout_height="60dip"
android:orientation="horizontal"
android:background="#drawable/custombutton1">
<ImageView android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:src="#drawable/ic_action_add"
android:layout_gravity="center"
android:layout_weight="1"
android:scaleType="center">
</ImageView>
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/addsubject"
android:layout_gravity="center"
android:layout_weight="1"/>
</LinearLayout>
The padding between the left border of button and right border of the icon is controlled by android:paddingLeft property. The padding between the icon and the text is defined by android:drawablePadding property.
Add these two properties to you button and set the values you are happy with.
<Button
...
android:paddingLeft="24dp"
android:drawablePadding="8dp"
/>
There's also other possibilities that you want to inflate the drawable/icon programatically, after reading a while and using a lot of combination using XMLs, but still doesn't works,
You might want to fork below library instead, to suits your use-cases, such as, customizing the view, position, etc programatically, see below reference:
Drawable/icon aligned with text, see sample here
Button like facebook sign-in, see sample here
For RadioButton, see full gist code here
P.S: Copyrighted and regards to the author
for Materialbutton, you have to use the icon attribute and you can also change its tint with iconTint like this example:
<com.google.android.material.button.MaterialButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:icon="#drawable/ic_cancel"
app:iconTint="#color/black"
android:text="text" />