This question already has answers here:
Android button background is taking the primary color
(6 answers)
Closed 1 year ago.
I'm trying to create a button with the following look in android studio.
The theme I use is Theme.MaterialComponents.Light.NoActionBar and I understood (maybe not correctly) that the default theme to use now days is "Material".
From what I see, it is not possible to create the border from the button properties itself.
I found the following example to create a shape with the dashes I want.
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<solid android:color="#color/white"/>
<corners android:radius="100dp" />
<stroke
android:width="5dp"
android:dashWidth="12dp"
android:color="#color/light_green"
android:dashGap="5dp"
/>
</shape>
</item>
</selector>
Then, I tried to attach it to my button using android:background="#drawable/dash_border". This added the border to my button but my button still had a "green" background. Then, I found out MaterialButton uses the PrimaryColor as the background and to override it you need to specify the button it's own theme. See the answer here.
<style name="EmptyButtonTheme" parent="Widget.MaterialComponents.Button">
<item name="materialThemeOverlay">#style/EmptyButtonStyle</item>
</style>
<style name="EmptyButtonStyle">
<item name="colorPrimary">#color/white</item>
<item name="colorOnPrimary">#color/black</item>
</style>
And then adding android:theme="#style/EmptyButtonTheme" to my button.
Now final result I got into is:
which is not the green button I wanted.
Notice that light_green is <color name="light_green">#9DC88D</color>
How can I get to the desired result in the easiest way?
I might have used MaterialButton in an over-kill way.
Notice that the same result happen with com.google.android.material.button.MaterialButton and Button as my button type.
I also saw this question but it use the default button properties which doesn't work in my case.
<style name="Button.MyTheme" parent="Widget.MaterialComponents.Button">
<item name="android:textStyle">bold</item>
<item name="backgroundTint">#null</item>
<item name="android:background">#drawable/dash_border</item>
<item name="android:textColor">#color/text_color_white</item>
<item name="android:textSize">#dimen/text_size_16</item>
</style>
Apply this Style directly to your button
Related
I am trying to make a popup menu with rounded corners and custom font. I am using a Material Menu from material.io. I want to acheive something like this:
What I have tried so far is to use PopupMenu and add styling parameters using a custom background drawable:
Seeing answers in this question, I used ContextThemeWrapper so that my styling actually takes effect. Without this, style changes are not working
private fun showAddGoalsMenu(view: View) {
val wrapper = ContextThemeWrapper(context, R.style.PopupMenu)
val popupMenu = PopupMenu(wrapper, view)
popupMenu.inflate(R.menu.menu_add_goals)
...
}
From this material.io menu theming example, I tried to set the properties popupMenuBackground in the main app style, and also tried setting android:popupBackground in an individual style. But the background doesn't apply:
From other answers (question 1, question 2, question 3), I found other attributes like background, android:background, itemBackground, android:itemBackground. From this,
background and android:background are only good for setting colors. If I set a custom drawable to background, it messes up the items as well:
itemBackground and android:itemBackground only set backgrounds to individual items. So if I apply a round background, the result looks like this:
My style code currently looks like this. According to what I have read so far, this should work. But .... sigh. I have commented out all experiments I did.
<style name="AppTheme" parent="Theme.MaterialComponents.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorSecondary">#color/colorSecondary</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="bottomNavigationStyle">#style/Widget.App.BottomNavigationView</item>
<!--<item name="textAppearanceLargePopupMenu">#style/TextAppearance.App.Subtitle1</item>-->
<!--<item name="textAppearanceSmallPopupMenu">#style/TextAppearance.App.Subtitle1</item>-->
<!--<item name="popupMenuBackground">#drawable/custom_popup_background</item>-->
<item name="popupMenuStyle">#style/PopupMenu</item>
</style>
<style name="PopupMenu" parent="Widget.MaterialComponents.PopupMenu">
<item name="android:dropDownHorizontalOffset">-4dp</item>
<item name="android:dropDownVerticalOffset">4dp</item>
<item name="android:popupBackground">#drawable/custom_popup_background</item>
<!--<item name="android:itemBackground">#drawable/black_popup_background</item>-->
<item name="popupMenuBackground">#drawable/custom_popup_background</item>
<!--<item name="background">#color/colorPrimary</item>-->
<!--<item name="android:background">#drawable/custom_popup_background</item>-->
<item name="android:background">#color/colorPrimary</item>-->
<!-- <item name="itemBackground">#drawable/black_popup_background</item>-->
<item name="textAppearanceLargePopupMenu">#style/TextAppearance.App.Subtitle1</item>
<item name="textAppearanceSmallPopupMenu">#style/TextAppearance.App.Subtitle1</item>
</style>
<style name="TextAppearance.App.Subtitle1" parent="TextAppearance.MaterialComponents.Subtitle1">
<item name="fontFamily">#font/amaranth</item>
<item name="android:fontFamily">#font/amaranth</item>
<item name="android:textColor">#1E2D58</item>
</style>
And here is my custom background drawable
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#color/colorPrimary"/>
<corners
android:radius="16dp"/>
<padding
android:bottom="8dp"
android:top="8dp"/>
</shape>
For testing itemBackground, I created a black_popup_background.xml
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#color/colorSecondary"/>
<corners
android:radius="16dp"/>
<padding
android:bottom="8dp"
android:top="8dp"/>
</shape>
And the output I am getting is:
I have no clue what I am doing wrong. Thanks for all help in advance!
For anyone who faces this issue later.
The mistake I was doing was using android.widget.PopupMenu in my code instead of androidx.appcompat.widget.PopupMenu. Once I replaced this usage, the styling worked.
Ultimately, my style looks same as mentioned here.
After 4 months of being inactive i realized that there are some changes.
Now when you make a new button it is purple and has some padding defined. Managed to kill the purple color by editing the theme, but i still have issues with padding. When i make a new button, by default it has left and right padding 16dp, and top and bottom 4. I would not like to be forced to change every single new button to 0 padding..
i have 2 options in mind. To set padding in custom button xml:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<corners android:radius="12dp" />
<solid android:color="#000000" />
<padding
android:left="0dp"
android:top="0dp"
android:right="0dp"
android:bottom="0dp" />
</shape>
...but for some reason this doesnt work.
Can someone figure out what can be the issue?
Or to tell me how can i change default padding values for new buttons?
Also values for some insetBotton and insetTop to be set to 0 by default and not 6
Using a Material Components theme the Button is replaced at runtime by a MaterialButton.
The MaterialButton has a default style with insetBottom and insetTop with a value of 6dp.
If you want to change globally the button style in your app you can also add the materialButtonStyle attribute in your app theme:
<style name="AppTheme" parent="Theme.MaterialComponents.*">
<item name="materialButtonStyle">#style/Widget.App.Button</item>
</style>
<style name="Widget.App.Button" parent="Widget.MaterialComponents.Button">
<item name="android:paddingLeft">....</item>
<item name="android:paddingRight">...</item>
<item name="android:insetTop">...</item>
<item name="android:insetBottom">....</item>
</style>
Go to your res folder -> values -> styles
Insert the following lines below to edit the standard button et voilà:
<style name="AppTheme" parent="Widget.AppCompat.Button">
<item name="android:minWidth">0dp</item>
<item name="android:minHeight">0dp</item>
</style>
That should work, give it a shot buddy.
I have been doing this for years with no problem, when I need to create a button with curved corners I create a drawable with corners and a color and I use it as the background to the button I need to change, but since Android Studio 4.2 preview, it's not working any more. Can anyone help. Thanks.
Here is an example of how the drawable xml looks like:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#EFB70E" />
<corners android:radius="12dp" />
</shape>
and I set that drawable as the background of my button.
In Material Design components, buttons have a default backgroundTint value set to colorPrimary that is why no matter what color you use in your button's background, it will be tinted blue(colorPrimary).
Just Add this line in the button's code : app:backgroundTint="#null"
And a better way to make your buttons round in material design:
In your themes.xml file add this :
<style name="ShapeAppearance.App.SmallComponent" parent="ShapeAppearance.MaterialComponents.SmallComponent">
<item name="cornerFamily">rounded</item>
<item name="cornerSize">8dp</item>
</style>
<style name="Widget.App.Button" parent="Widget.MaterialComponents.Button">
<item name="shapeAppearance">#style/ShapeAppearance.App.SmallComponent</item>
</style>
Then if you want to apply round corners to all buttons in the app, add this line in your app's main theme :
<item name="shapeAppearanceSmallComponent">#style/ShapeAppearance.App.SmallComponent</item>
Otherwise, if you want to apply this style to specific button, add this line to it's code:
style="#style/Widget.App.Button"
I am using material component. my normal button is like this
and I set it in style like this
<style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
<item name="materialButtonStyle">#style/StandardButtonStyle</item>
</style>
<style name="StandardButtonStyle" parent="Widget.MaterialComponents.Button">
<item name="backgroundTint">#color/green</item>
<item name="android:textColor">#color/white</item>
</style>
now I need to make my button look like the image below (but without icon in it) programmatically for my app up to API 21.
before using material icon, I can set it by using drawable like this
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" android:padding="10dp">
<solid android:color="#474241"/>
<corners
android:bottomRightRadius="10dp"
android:bottomLeftRadius="10dp"
android:topLeftRadius="10dp"
android:topRightRadius="10dp"/>
</shape>
and then set it programmatically like this
button.background = ContextCompat.getDrawable(mContext,R.drawable.inactive_button)
but it doesn't work anymore, now I am confused.....
I have tried to make a style like this
<style name="InactiveButtonStyle" parent="Widget.MaterialComponents.Button.OutlinedButton">
<item name="android:fillColor">#color/grey_light_medium</item>
<item name="android:textColor">#color/grey_dark_super</item>
<item name="android:textAllCaps">false</item>
</style>
and then apply it programmatically like this
button.setTextAppearance(mContext,R.style.InactiveButtonStyle)
but it doesn't work. setTextAppearance method that using context as input argument is actually deprecated, and if I use setTextAppearance method without context is not suitable for API 21 (minimum API 23). I don't if this is the cause that it doesn't work
so how to change button colour programmatically using material component for Android API below 23 ?
I am developing an application and i set "android:textIsSelectable" for the TextViews.
But my material theme is not matching with the TextSelection appBar. Is there a way by which i can change the color of that appBar ??
Attached the Image Below Check it :-
Assuming you use the appcompat-v7 library add these to your theme:¨
<!-- this makes sure the action mode is painted over not above the action bar -->
<item name="windowActionModeOverlay">true</item>
<item name="actionModeBackground">#drawable/myapp_action_mode_background</item>
Now I wasn't able to style the insides of the action mode (text color, icon colors) so hopefully you won't need to.
Note: If you don't use the support library prepend those style item names with android:. These will work above API 11+.
EDIT
For an action mode background with a stroke create a new drawable and update the reference. The drawable could look like this:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:top="-2dp" android:left="-2dp" android:right="-2dp">
<shape android:shape="rectangle">
<solid android:color="#color/primary_dark"/>
<stroke android:color="#color/accent" android:width="2dp"/>
</shape>
</item>
</layer-list>
In your resources styles.xml: "android:textColorHighlight"
<resources>
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="android:textColorHighlight">#color/yellow</item>
</style>
</resources>
You can put in whatever color you choose and whatever parent theme you are using.