Develop Reference

Make Android ImageButton look like Button

The documentation for ImageButton says:
By default, an ImageButton looks like a regular Button
This is obviously wrong because when I put both into a layout:
<Button
android:id="#+id/button2"
android:layout_width="200dp"
android:layout_height="50dp"
android:layout_margin="20dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageButton
android:id="#+id/imageButton3"
android:layout_width="200dp"
android:layout_height="50dp"
android:layout_margin="20dp"
app:layout_constraintStart_toStartOf="#+id/button2"
app:layout_constraintTop_toBottomOf="#+id/button2" />
and run it, it looks like this:
The Button has a color and a shadow while the ImageButton is just a gray rectangle (with round corners I think).
Unfortunately I don't understand at all how styles work. My main question though is how do I need to change the ImageButton's configuration to actually make it look like a regular Button.

Are you using material design? Your Button does not look like the regular button that default style is #style/Widget.AppCompat.Button, but like the material button, which default style is #style/Widget.MaterialComponents.Button. If you set the style of the Button to #style/Widget.AppCompat.Button, you will see it looks the same as the ImageButton with default style #style/Widget.AppCompat.ImageButton
This is #style/Widget.AppCompat.Button, you can see that it has been expanded on the basis of #style/Widget.AppCompat.Button:
<style name="Widget.MaterialComponents.Button" parent="Widget.AppCompat.Button">
<item name="enforceMaterialTheme">true</item>
<item name="android:background">#empty</item>
<item name="enforceTextAppearance">true</item>
<item name="android:textAppearance">?attr/textAppearanceButton</item>
<item name="android:textColor">#color/mtrl_btn_text_color_selector</item>
<item name="android:paddingLeft">#dimen/mtrl_btn_padding_left</item>
<item name="android:paddingRight">#dimen/mtrl_btn_padding_right</item>
<item name="android:paddingTop">#dimen/mtrl_btn_padding_top</item>
<item name="android:paddingBottom">#dimen/mtrl_btn_padding_bottom</item>
<item name="android:insetLeft">0dp</item>
<item name="android:insetRight">0dp</item>
<item name="android:insetTop">#dimen/mtrl_btn_inset</item>
<item name="android:insetBottom">#dimen/mtrl_btn_inset</item>
<item name="android:stateListAnimator" ns2:ignore="NewApi">#animator/mtrl_btn_state_list_anim</item>
<item name="cornerRadius">#null</item>
<item name="elevation">#dimen/mtrl_btn_elevation</item>
<item name="iconPadding">#dimen/mtrl_btn_icon_padding</item>
<item name="iconTint">#color/mtrl_btn_text_color_selector</item>
<item name="rippleColor">#color/mtrl_btn_ripple_color</item>
<item name="backgroundTint">#color/mtrl_btn_bg_color_selector</item>
<item name="shapeAppearance">?attr/shapeAppearanceSmallComponent</item>
</style>
So, you can customize a new style for ImageButton, and then add those new style attributes of material button to the custom style (mainly cornerRadius, elevation, and rippleColor)
or set the button's style to #style/Widget.AppCompat.Button, while will also make the ImageButton looks like the Button :P

android material button cannot remove round corners

I need to remove round corners of all buttons in app and use flat background. preferably a color.
This is my style:
<style name="Component.MyTheme.Button" parent="Widget.MaterialComponents.Button.TextButton">
<item name="android:textColor">#color/white_50</item>
<item name="backgroundTint">#color/black</item>
<item name="cornerRadius">#null</item>
</style>
and this is how I apply it in my theme.
<item name="materialButtonStyle">#style/Component.MyTheme.Button</item>
I want to change this
to this
EDIT : Ignore white bars at either ends of 2nd image.

set corner radius attibute to 0dp.
app:cornerRadius="0dp"
Like below code
<com.google.android.material.button.MaterialButton
android:id="#+id/button_filter_apply"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/apply"
android:fontFamily="sans-serif"
android:textAllCaps="true"
android:textColor="#color/white"
android:textStyle="bold"
app:backgroundTint="#color/clear_blue"
app:cornerRadius="0dp"
app:layout_constraintBottom_toBottomOf="parent" />
Button looks like
EDIT : Ignore black bars on both side of the image

Just use:
<style name="Component.MyTheme.Button" parent="Widget.MaterialComponents.Button.TextButton">
...
<item name="cornerRadius">0dp</item>
</style>
or
<style name="MyButton" parent="Widget.MaterialComponents.Button.TextButton">
...
<item name="shapeAppearanceOverlay">#style/shapeAppearanceOverlay_noCorner</item>
</style>
<style name="shapeAppearanceOverlay_noCorner" parent="">
<item name="cornerSize">0dp</item>
</style>

As you said you would like to add themes to your button.
Can you please try adding 0.1 to your corner radius?

Material TexInputLayout change color [duplicate]

This question already has answers here:
how to change color of TextinputLayout's label and edittext underline android
(16 answers)
Closed 2 years ago.
i need to change the color but i dont know how to do it. Can you help me?
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/contraseña"
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="440dp"
android:layout_marginEnd="16dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Contraseña"
android:inputType="textPersonName" />
</com.google.android.material.textfield.TextInputLayout>
enter image description here
I want to change the grey color to white.

For Changing the border color and hintTextColor, you can use
app:boxStrokeColor="your color"
app:hintTextColor="your color" /*This changes the color of hint when it's collapsed
and moved to top that's when user enters a character.*/
app:textColorHint="your color" //This is the text color of uncollapsed hint that's the default state.
Furthermore, if you want to create a style then this is the complete style I use which you can modify as you need.
<style name="TextInputLayoutAppearanceOutLined" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">
<item name="hintTextAppearance">#style/HintText</item>
<item name="helperTextTextAppearance">#style/HelperText</item>
<item name="counterTextAppearance">#style/HelperText</item>
<item name="android:textColor">#color/dark_grey</item>
<item name="android:textColorHint">#color/dark_grey</item>
<item name="hintTextColor">#color/colorAccent</item>
<item name="boxStrokeColor">#color/colorAccent</item>
<item name="startIconTint">#color/colorAccent</item>
<item name="endIconTint">#color/colorAccent</item>
<item name="boxBackgroundColor">#color/white</item>
<item name="boxCornerRadiusBottomEnd">10dp</item>
<item name="boxCornerRadiusBottomStart">10dp</item>
<item name="boxCornerRadiusTopEnd">10dp</item>
<item name="boxCornerRadiusTopStart">10dp</item>
<item name="boxStrokeWidthFocused">2dp</item>
<item name="hintEnabled">true</item>
<!--<item name="hintAnimationEnabled">true</item>-->
</style>
These are the style elements to change HelperText or HintText apperance:
<style name="HintText" parent="TextAppearance.Design.Hint">
<item name="android:textSize">12sp</item>
</style>
<style name="HelperText" parent="TextAppearance.Design.HelperText">
<item name="android:textSize">12sp</item>
</style>
And set it to TextInputlayout as style="#style/TextInputLayoutAppearanceOutLined". Whatever mentioned in the style, you can use it in XML layout tag as well.
Also, the official docs of Material TextInputLayout are very important and easy to understand unlike the developer docs of Android and you should read them once to know more about it here.

drawable start not working with material button

Here is the button :
<Button
android:id="#+id/btn_choose_photo"
style="#style/Widget.MaterialComponents.Button.TextButton.Dialog"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:drawableStart="#drawable/ic_camera"
android:drawablePadding="8dp"
android:text="#string/image_picker_dialog_choose_image"
android:textAlignment="textStart" />
I am using material themes, so this will be inflated into a material button
drawableStart has no effect at all, however drawableEnd, bottom and top work just fine
When I make the button tag a text view, drawableStart works
It seems like a bug or maybe I am missing something ?
Edit: My app theme is as follows :
<style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
<!---colors-->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryVariant">#color/colorPrimaryVariant</item>
<item name="colorPrimaryDark">#color/colorPrimaryVariant</item>
<item name="colorSecondary">#color/colorSecondary</item>
<item name="colorSecondaryVariant">#color/colorSecondaryVariant</item>
<item name="colorAccent">#color/colorSecondary</item>
<!--
<item name="android:colorBackground">#color/colorBackground</item>
-->
<!--components-->
<item name="textInputStyle">#style/text_input_layout_style</item>
<item name="bottomSheetDialogTheme">#style/bottom_sheet_dialog_theme</item>
<item name="spinnerStyle">#style/spinner_style</item>
<item name="android:spinnerStyle">#style/spinner_style</item>
<item name="android:toolbarStyle">#style/toolbar_style</item>
<item name="toolbarStyle">#style/toolbar_style</item>
<item name="actionOverflowButtonStyle">#style/overflow_button_style</item>
<item name="android:actionOverflowButtonStyle">#style/overflow_button_style</item>
</style>

You should use app:icon like this:
In the layout:
<Button
...
app:icon="#drawable/ic_camera"
style="#style/Widget.MaterialComponents.Button.TextButton"
/>
It is displayed at the start, before the text label. You can change icon gravity, tint or size.
For more information

Using
android:drawableLeft
will solve the problem, but will not give you RTL(Right to left) support. If your end user uses a different language which follow RTL, then your Button will not support it.
Are you managing the Button's property in the Activity or Fragment, as technically speaking,
android:drawableStart
should work.

You can change to "App compat button"
<androidx.appcompat.widget.AppCompatButton
android:id="#+id/continuar_anonimo_button"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_gravity="center"
app:backgroundTint="#color/greenPrimary"
android:background="#drawable/corner_boton_outline"
android:text="Continuar anonimamente"
android:paddingLeft="15dp"
android:drawableStart="#drawable/ic_google_color"
style="?android:textAppearanceSmall"/>

Use android:drawableLeft
android:drawableLeft="#drawable/ic_phone"
android:backgroundTint="#android:color/white"

Android unwanted padding on top and bottom with TextView

I am trying to put two text view within the circular progress bar as shown in the picture below. These two text should be aligned with center of the circular progress bar.
But the unwanted padding in text view which prevents me to align the text into the center of the circular progress bar. This is what i get.
here is my layout file:
<FrameLayout
android:id="#+id/onboarding_activity_progress_layout"
android:layout_gravity="center_horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:layout_marginTop="10dp">
<com.locationlabs.finder.android.core.ui.CircularProgressBar
android:id="#+id/onboarding_activity_progress_bar"
android:layout_gravity="center"
android:padding="10dp"
android:layout_width="120dp"
android:layout_height="120dp"
app:progressColor="#color/progress_bar_color"
app:backgroundColor="#color/progress_bar_background_color"
app:progressBarWidth="10dp"
tools:progress="60"/>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:includeFontPadding="false"
android:layout_gravity="center">
<TextView
android:id="#+id/number_of_remaining_steps"
style="#style/OnboardingNumberOfRemainingStepText"
tools:text="2"/>
<TextView
android:id="#+id/remaining_number_of_steps"
style="#style/OnboardingRemainingStepText"
tools:text="steps left"/>
</LinearLayout>
</FrameLayout>
Here is the styling:
<style name="OnboardingNumberOfRemainingStepText">
<item name="android:layout_width">wrap_content</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:layout_gravity">center_horizontal</item>
<item name="android:fontFamily">sans-serif</item>
<item name="android:textSize">40sp</item>
<item name="android:textColor">#color/dark_grey</item>
<item name="android:includeFontPadding">false</item>
</style>
<style name="OnboardingRemainingStepText">
<item name="android:layout_width">wrap_content</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:layout_gravity">center_horizontal</item>
<item name="android:fontFamily">sans-serif-light</item>
<item name="android:textSize">16sp</item>
<item name="android:textColor">#color/dark_grey</item>
<item name="android:textStyle">normal</item>
</style>
I was told android:includeFontPadding can help reduce the padding but it doesn't help that much. I also tried with the single textView with Spannable but I get almost the similar result. I tried with negative margin but that didn't work and it is also not reliable.

When you transfer styling attributes of a TextView to XML, TextView might render in an unexpected way. This is because the default styling for TextView is applied in a layout file which is overridden when you use style attribute in it.
You can try using parent="android:TextAppearance" in the style defined for a TextView to ensure you inherit the pre-defined styles for the TextView.
Example:
Let me know if it worked for you!