So I have an ImageButton and I could just change its background colour to white, but then it would be also white while using the dark theme. I tried to use the android:theme and set it to mine, but it made the button's background colour set back to the default, or changed the whole app's background to that colour.
ImageButton:
<ImageButton
android:id="#+id/backbut"
android:layout_width="45dp"
android:layout_height="45dp"
android:layout_margin="5dp"
android:layout_weight="0"
android:theme="#style/Theme.MusicPlayer"
android:contentDescription="#string/backbut_desc"
android:elevation="4dp"
android:padding="8dp"
android:scaleType="fitCenter"
app:srcCompat="#drawable/ic_arrow_left" />
themes.xml:
<resources xmlns:tools="http://schemas.android.com/tools">
<style name="Theme.MusicPlayer" parent="Theme.MaterialComponents.DayNight.NoActionBar">
<item name="colorPrimary">#color/blue_1</item>
<item name="colorPrimaryVariant">#color/blue_1</item>
<item name="colorOnPrimary">#color/white</item>
<item name="colorPrimaryDark">#color/blue_2</item>
<item name="colorAccent">#color/blue_1</item>
<item name="android:textColorPrimary">#color/black</item>
<item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryDark</item>
<item name="android:navigationBarColor">#color/white</item>
</style>
Any tips on what I should do?
Here is how I handle such cases:
Create an attribute in attrs.xml (in values folder, if there isn't one, create it yourself) as:
<resources>
<attr name="myBackgroundColor" format="color" />
</resources>
There are 2 themes.xml if you are implementing the dark mode with the help of day-night theme. So in the themes.xml file which is located in values folder:
<item name="myBackgroundColor">#FFFFFF</item>
In the other themes.xml file which is located at values-night folder:
<item name="myBackgroundColor">#000000</item>
When you want the view to change it's background color accordingly with the phone theme:
<View
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="?myBackgroundColor"/>
That's it, android will handle the rest and pick the corresponding color you provided from night themes xml if the dark mode is enabled by the user.
Related
I've this issue, I don't know where it come from, I've created this buttons with custom background, but the background color talking the primary color and cannot change it unless change the primary color.
<Button
android:id="#+id/btn_teacher"
style="#style/normalText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="#dimen/_16sdp"
android:background="#drawable/btn_rounded_stroke"
android:text="#string/txt_teacher" />
<resources>
<color name="colorPrimary">#008577</color>
<color name="colorPrimaryDark">#00574B</color>
<color name="colorAccent">#D81B60</color>
<color name="bg_color">#FFD7A4</color>
</resources>
I have many buttons with different colors, so i can't change the primary color
here is my drawable background
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item >
<shape android:shape="rectangle" >
<size android:height="#dimen/_48sdp" />
<corners android:radius="#dimen/_24sdp" />
<stroke android:width="#dimen/_1sdp" android:color="#59CECE" />
<solid android:color="#android:color/white"/>
</shape>
</item>
</layer-list>
I'm using new material design by google
implementation "com.google.android.material:material:1.3.0-alpha02"
How can i override this color?
Since you are using a Theme.MaterialComponents.* your Button is replaced at runtime by a MaterialButton.
Currently the backgroundTint is still the default MaterialButton style.
It means that if you are using a custom android:background, you have to make sure to null out backgroundTint to avoid that the custom background doesn't get tinted with the attr/colorPrimary defined in your theme.
You have to add app:backgroundTint="#null":
<Button
app:backgroundTint="#null"
android:background="#drawable/.."
In any case you don't need a custom background (btn_rounded_stroke) in your case. You are just using a custom background only to define rounded corners. This feature is provided by default by the MaterialButton, then just use the cornerRadius attribute.
Use the standard MaterialButton:
<com.google.android.material.button.MaterialButton
android:layout_width="wrap_content"
android:layout_height="48dp"
style="#style/Widget.MaterialComponents.Button.OutlinedButton"
app:strokeColor="#59CECE"
app:cornerRadius="24dp"
When Material theme is used then Button view is mapped to MaterialButtton.
There is one more way to setup the button background in this case.
<style name="AppTheme" parent="Theme.MaterialComponents.DayNight.DarkActionBar"
...
<item name="materialButtonStyle">#style/ColoredButton</item>
</style>
<style name="ColoredButton" parent="Widget.MaterialComponents.Button.TextButton">
<item name="backgroundTint">#color/customButtonColor</item>
</style>
What worked for me
First create btn_style in your styles.xml or themes.xml
<style name="btn_style" parent="Widget.MaterialComponents.Button">
<item name="backgroundTint">#null</item>
</style>
then in you layout apply the style and use the color or drawable that you want
<Button
android:id="#+id/btn"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textStyle="bold"
android:background="#color/Red"
style="#style/btn_style"
android:text="Button"/>
Try this .
Your Button:
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#FFFFFF"
android:layout_margin="5dp"
android:background="#drawable/round_btn"
android:padding="20dp"
android:text="My Text" />
Here is your round_btn drawable:
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#008577" />
<corners android:radius="20dp" />
</shape>
In your Gradle just replace this line
implementation "com.google.android.material:material:1.3.0-alpha02"
with this
implementation 'com.google.android.material:material:1.2.1'
All you need to do is simply go to your themes.xml file and change the style name to:
style name="Theme.AnimatedLogin"
parent="Theme.AppCompat.Light.NoActionBar"
in Light theme mode and to:
style name="Theme.AnimatedLogin"
parent="Theme.AppCompat.DayNight.NoActionBar"
in Dark theme mode in your theme.xml(night) file and then you can customize your button and change its colour.
I don't have much experience and only started working on Android applications 2 weeks ago. Sorry in advance if the code or it's approach looks messy.
My current app uses 2 color themes: Dark Theme and Light Theme.
They are created within styles.xml.
All my Buttons and TextViews get background color from attr folder, where I declared colors. In colors.xml I initialized these colors. And in styles.xml I set which color belongs to which theme.
Now, back to giving a button click effect - the only way i know how to do that, is to add it as android:background.
But i have set for background my own color scheme, created in attr.
The question is - how to set effect for a button and at the same time keep colors of currently toggled color theme (theme can be changed with ToggleButton).
styles.xml
<resources>
<!-- Light theme. -->
<style name="LightTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="android:textSize">30sp</item>
<item name="colorPrimary">#color/colorBtnOperatorsTextLightTheme</item>
<item name="colorPrimaryDark">#306E32</item>
<item name="colorAccent">#color/colorPrimary</item>
<item name="colorBtnOperatorsText">#color/colorBtnOperatorsTextLightTheme</item>
<item name="colorBtnNumbersText">#color/colorBtnNumbersTextLightTheme</item>
<item name="colorBtnBackground">#color/colorBtnBackgroundLightTheme</item>
<item name="colorOutputText">#color/colorOutputLightTheme </item>
<item name="colorInputText">#color/colorInputLightTheme</item>
<item name="colorAppBackground">#color/colorAppBackgroundLightTheme</item>
<item name="android:windowAnimationStyle">#style/WindowAnimationTransition</item>
</style>
<!-- Dark theme. -->
<style name="DarkTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="android:textSize">30sp</item>
<item name="colorPrimary">#000000</item>
<item name="colorPrimaryDark">#000000</item>
<item name="colorAccent">#color/colorPrimary</item>
<item name="colorBtnOperatorsText">#color/colorBtnOperatorsTextDarkTheme</item>
<item name="colorBtnNumbersText">#color/colorBtnNumbersTextDarkTheme</item>
<item name="colorBtnBackground">#color/colorBtnBackgroundDarkTheme</item>
<item name="colorOutputText">#color/colorOutputDarkTheme</item>
<item name="colorInputText">#color/colorInputDarkTheme</item>
<item name="colorAppBackground">#color/colorAppBackgroundDarkTheme</item>
<item name="android:windowAnimationStyle">#style/WindowAnimationTransition</item>
</style>
<style name="WindowAnimationTransition">
<item name="android:windowEnterAnimation">#android:anim/fade_in</item>
<item name="android:windowExitAnimation">#android:anim/fade_out</item>
</style>
</resources>
This is how one of the buttons looks like in activity_main.xml and next to it - theme color changer - ToggleButton
<Button
android:id="#+id/seven"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_margin="5dp"
android:layout_weight="1"
android:text="7"
android:textColor="?attr/colorBtnNumbersText"
android:background="?attr/colorBtnBackground"
android:onClick="buttonClick"/>
<ToggleButton
android:id="#+id/colorToggle"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_margin="5dp"
android:layout_weight="1"
android:minWidth="0dp"
android:minHeight="0dp"
android:background="#drawable/toggle_selector"
android:textOff=""
android:textOn="" />
attrs.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<declare-styleable name="ds" >
<attr name="colorBtnOperatorsText" format="color" />
<attr name="colorBtnNumbersText" format="color" />
<attr name="colorBtnBackground" format="color" />
<attr name="colorOutputText" format="color" />
<attr name="colorInputText" format="color" />
<attr name="colorAppBackground" format="color" />
</declare-styleable>
</resources>
You can add Drawable resource file that include selector tag. By the tag you can add click effect. In selector tag you can add first item tag that have a property which is android:state_enabled="false" means selected state and 2nd item tag will be default state of your button. See the example.Use the drawable as background in your example.
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_enabled="false"
android:drawable="#drawable/selected" />
<item android:drawable="#drawable/default" />
</selector>
Create two drawables which are selected and default that will include shape tag by the tag you can design your button for selected and default state click effect in your drawable folder. Giving one example:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid
android:color="#color/gray"/>
<corners
android:radius="#dimen/_10sdp"/>
</shape>
Text color is grey as shown below, i have not set any default color in sytles.xml.
As you can see there is a difference between the spinner text color and the textview color.
color difference between Spinner and textview text
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView color"
android:textAlignment="gravity"
android:textAllCaps="false"
android:textSize="16dp"
android:textStyle="bold"
android:gravity="left|center"
android:layout_marginLeft="20dp"
android:padding="12dp" />
<Spinner
android:layout_width="192dp"
android:layout_height="49dp"
android:layout_marginEnd="16dp"
android:layout_marginRight="16dp"
android:entries="#array/spinner_items"
android:padding="10dp"
android:spinnerMode="dropdown"
/>
I ran the ColorStateList oldColors = textView.getTextColors(); i got the below result.
ColorStateList{mThemeAttrs=nullmChangingConfigurations=0mStateSpecs=[[-16842910], []]mColors=[603979776, -1979711488]mDefaultColor=-1979711488}
Is the text color is due to this style, my Styles.xml:
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
</style>
<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />
<style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />
All i want is regular black for texts. And i don't want to add change anything.
Add color property in your TextView
<TextView
android:color="#000000"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView color"
android:textAlignment="gravity"
android:textAllCaps="false"
android:textSize="16dp"
android:textStyle="bold"
android:gravity="left|center"
android:layout_marginLeft="20dp"
android:padding="12dp" />
Looks like that is the default color of text. So i have to force it to use regular black in Styles.xml
<item name="android:textColor">#color/textColorPrimaryLight</item>
The reason i was looking for is i want to implement Dark mode. Below article helped my issue. Basically i have to use 2 styles.xml to implement dark mode.
How to officially support Dark Mode in your apps?
I want to make my SearchView like this:
How can I implement in Java ?
What you see in the image is the Material TextInput with OutLined style. You can read more about that and the Filled style in the official docs here.
Also, don't forget you'll need material library for this. For that, do
implementation 'com.google.android.material:material:1.2.0-alpha06'
Now, what you can do with it is to make it like above by adding startDrawable and CornerRadius:
Create the XML widget as below and put a startIcon.
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/editTextLayout"
style="#style/TextInputLayoutAppearanceOutLined"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:hint="Search View"
app:hintEnabled="true"
app:startIconDrawable=" *** Your ICON *** ">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/edittext"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="text"
android:textSize="12sp" />
</com.google.android.material.textfield.TextInputLayout>
Then, this is the style TextInputLayoutAppearanceOutLined, put it in your style.xml file:
<style name="TextInputLayoutAppearanceOutLined" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">
<item name="hintTextAppearance">#style/HintText</item>
<item name="helperTextTextAppearance">#style/HintText</item>
<item name="android:textColor">#color/dark_grey</item>
<item name="android:textColorHint">#color/colorAccent</item>
<item name="hintTextColor">#color/colorAccent</item>
<item name="boxStrokeColor">#color/colorAccent</item>
<item name="startIconTint">#color/colorAccent</item>
<item name="boxBackgroundColor">#color/white</item>
<item name="boxCornerRadiusBottomEnd">#dimen/_26sdp</item>
<item name="boxCornerRadiusBottomStart">#dimen/_26sdp</item>
<item name="boxCornerRadiusTopEnd">#dimen/_26sdp</item>
<item name="boxCornerRadiusTopStart">#dimen/_26sdp</item>
<item name="boxStrokeWidthFocused">1dp</item>
<item name="hintEnabled">true</item>
<item name="hintAnimationEnabled">true</item>
<item name="colorControlNormal">#color/colorAccent</item>
<item name="colorControlActivated">#color/colorPrimary</item>
Obviously, you can set this in XML as well, but style gives you more control over your app to change the element everywhere by one edit.
Now, you'll have what you want your SearchView to look like, but further to make it act like a SearchView, you need to set filtering for your ListAdapter to make it work.
For that, you can look here.
make search view in layout file first
<SearchView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/bg_round"/>
then the make drawable and name it bg_round and put the code below to that drawable
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#fff"/> // this the the inner background color
<stroke android:width="5dp" //this is for the stroke of the border
android:color="#android:color/black"/> //this is the stroke color
<corners android:radius="4cdp" /> //this is the corner radius
</shape>
i'm tring to create custom theme from my application and i have the ListView of my Navigation Drawer that have a different color depending of if it's activated or not. I have this selector in drawable folder
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_activated="true" android:color="?myFirstColor"/>
<item android:color="?mySecondColor"/>
</selector>
in /values/attrs.xml i've
<resources>
<attr name="myFirstColor" format="reference|color"/>
<attr name="mySecondColor" format="reference|color"/>
</resources>
In style.xml
<style name="MyTheme" parent="AppBaseTheme">
<item name="myFirstColor">#color/red_holo</item>
<item name="mySecondColor">#color/white</item>
</style>
But when i run the application the color are not red_holo and white. Why?
The xml for the navdrawer adapter is this
<TextView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/textView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColor="#drawable/mySelector">
i miss something?
You should try Hex Color Codes,
try #ff0055 instead of red_holo.