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.
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.
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
I am trying to change the underline color of Android textfields in Titanium Alloy using a custom theme, but for some reason it doesn't pick up my new colors(s).
I have created a theme under project/app/platform/android/res/values/awesome_theme.xml with the following contents:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="awesome" parent="#style/Theme.AppCompat">
<item name="colorControlNormal">#ff0000</item>
<item name="colorControlActivated">#00ff00</item>
<item name="colorControlHighlight">#0000ff</item>
</style>
</resources>
And I have changed my tiapp.xml file to use the new theme:
<android xmlns:android="http://schemas.android.com/apk/res/android">
<application android:theme="#style/awesome"/>
</android>
I have cleaned the project, but the text field is still showing up with the default blue underline when I rebuild the project.
What am I doing wrong here?
You have to use a different background image, go to your XML "awesome_theme.xml" and add the custom EditText style
<style name="EditTextCustomHolo" parent="android:Widget.EditText">
<item name="android:background">#drawable/apptheme_edit_text_holo_light</item>
<item name="android:textColor">#ffffff</item>
</style>
insted of using image drawble file--> apptheme_edit_text_holo_light in that EditText style you can use a drawable resource file which has a stroke , go with that one or this stroke one ,
<?xml version="1.0" encoding="utf-8"?>
<item>
<shape android:shape="rectangle">
<stroke
android:width="1dp"
android:color="#color/white"/>
</shape>
</item>
then Just do this in your EditText:
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="#style/EditTextCustomHolo"/>
or
you can change Underline of EditText color specifying it in awesome_theme.xml. add the following tag under your style Theme.AppCompat.
<item name="android:textColorSecondary">#color/primary_text_color</item>
Note : android:textColorSecondary is used to determine the color of the back arrow and DrawerLayout hamburger icon in the ActionBar, too soo careful
I have built my app using react-native and there is a picker component in it. I have styled it using styles.xml but there is a white thick border on both ends of the dorpdown which I want to remove. I have tried almost everything - even setting both padding and margin to 0 but the top and bottom white thick border don't disappear. Can somebody point out how to remove them?
My Code: /res/values/styles.xml
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:spinnerItemStyle">#style/SpinnerItem</item>
<item name="android:spinnerDropDownItemStyle">#style/SpinnerDropDownItem</item>
</style>
<style name="SpinnerItem" parent="Theme.AppCompat.Light.NoActionBar">>
<item name="android:fontFamily">sans-serif-light</item>
<item name="android:textSize">18dp</item>
</style>
<style name="SpinnerDropDownItem" parent="Theme.AppCompat.Light.NoActionBar">>
<item name="android:textColor">#ffffff</item>
<item name="android:textSize">18dp</item>
<item name="android:fontFamily">sans-serif-light</item>
<item name="android:gravity">center</item>
<item name="android:background">#drawable/mydivider</item>
</style>
Code at res/drawable/mydivider.xml:
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#29A1C9" />
<corners android:radius="0.5dp" />
<stroke
android:color="#FFFFFF"
android:width="0.1dp" />
</shape>
React native picker code:
<Picker
style={{color: darkTextColor, marginLeft:12}}
ref={this.refId()}
selectedValue={this.props.application.typeOfBusiness}
onValueChange={(toi) => this.onUpdate('typeOfBusiness', toi)}>
{typeOfBusinessLabels.map((val)=> <Picker.Item key={val} label={val} value={val}/>)}
</Picker>`
This answer is probably a bit late for you, but after running into the same issue and searching everywhere I was left with the choice of giving up, or going through all background properties to see if I could find it.
Luckily I didn't give up, as the first property I tried was colorBackgroundFloating. This property seems to control the background of all floating components
Default color of background imagery for floating components, ex. dialogs, popups, and cards.
https://developer.android.com/reference/android/R.attr#colorBackgroundFloating
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.