I have applied a theme to my app but when I use textColor properties it override all other properties like textColorPrimary.
<style name="AppTheme" parent="Base.Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="android:windowBackground">#color/windowBackground</item>
<item name="android:textColorPrimary">#FF4081</item>
<item name="android:textColorSecondary">#186925</item>
<item name="colorControlActivated">#FF0000</item> <!-- for check box when checked -->
<item name="colorControlNormal">#bbc40c</item> <!-- for check box when normal -->
<item name="colorButtonNormal">#325289</item>
<!--<item name="android:textColor">#084fe9</item>-->
<item name="android:windowAnimationStyle">#style/WindowAnimationTransition</item>
<!--<item name="android:windowActivityTransitions">true</item>
<item name="android:windowEnterTransition">#android:transition/slide_right</item>
<item name="android:windowExitTransition">#android:transition/slide_left</item>-->
</style>
<style name="AppTheme.NoActionBar">
<item name="windowNoTitle">true</item>
<item name="windowActionBar">false</item>
</style>
<style name="HeaderText" parent="#android:style/TextAppearance.Large">
<item name="android:textColor">#ffffffff</item>
<item name="android:textSize">12dp</item>
</style>
<style name="WindowAnimationTransition">
<item name="android:windowEnterAnimation">#android:anim/fade_in</item>
<item name="android:windowExitAnimation">#android:anim/fade_out</item>
</style>
my Layout file
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/questionNumberTv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:text="TextView"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/scoreTv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="17dp"
android:layout_marginEnd="16dp"
android:text="Score : 20"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/iconIv"
android:layout_width="25dp"
android:layout_height="25dp"
android:layout_marginStart="8dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="8dp"
app:layout_constraintEnd_toStartOf="#+id/scoreTv"
app:layout_constraintStart_toEndOf="#+id/questionNumberTv"
app:layout_constraintTop_toTopOf="parent"
tools:srcCompat="#tools:sample/avatars[11]" />
<TextView
android:id="#+id/questionTitle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="24dp"
android:layout_marginEnd="8dp"
android:text="TextView"
android:textAlignment="center"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/iconIv" />
<Button
android:id="#+id/fiftyfiftyBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="8dp"
android:text="Button"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/radioGroup2" />
<RadioGroup
android:id="#+id/radioGroup2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/questionTitle">
<RadioButton
android:id="#+id/option1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="RadioButton" />
<RadioButton
android:id="#+id/option2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="RadioButton" />
<RadioButton
android:id="#+id/option3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="RadioButton" />
<RadioButton
android:id="#+id/option4"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="RadioButton" />
</RadioGroup>
<TextView
android:id="#+id/votesTv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="10dp"
android:drawableLeft="#drawable/ic_expand_less_green_24dp"
android:text="20"
android:textSize="16sp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/fiftyfiftyBtn" />
<TextView
android:id="#+id/commentCountTv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="8dp"
android:drawableLeft="#drawable/ic_expand_less_green_24dp"
android:text="35"
android:textSize="16sp"
app:layout_constraintStart_toEndOf="#+id/votesTv"
app:layout_constraintTop_toBottomOf="#+id/fiftyfiftyBtn" />
</android.support.constraint.ConstraintLayout>
when I Uncomment android:textColor , android:textColorPrimary color is override by android:textColor. I want my title/large text to use textColorPrimary and for medium and small I wanna use textColorPrimaryDark as said in their documentation.
before that the button text color is set by the textColorPrimary.
How could I use two text Color scheme for whole my app. using textColorPrimary and textColorPrimaryDark.
Or I have to create two textStyle and set them to each View. Is there a better approach to achieve what I want.
You need to define two styles and set your desired attributes there. It is cleaner to read and understandable. And also good behaviour to set your own style in textview.
Here is a sample you should do:
<style name="textStyle1" parent="android:TextAppearance">
<item name="android:textColor">#color/textColorPrimary</item>
<item name="android:textStyle">bold</item>
<item name="android:textAppearance">?android:attr/textAppearanceLarge</item>
<item name="android:gravity">start</item>
<item name="android:textSize">22sp</item>
</style>
<style name="textStyle2" parent="android:TextAppearance">
<item name="android:textColor">#color/textColorPrimaryDark</item>
<item name="android:textStyle">normal</item>
<item name="android:textAppearance">?android:attr/textAppearanceMedium</item>
<item name="android:gravity">start</item>
<item name="android:textSize">18sp</item>
</style>
Then use this style on your expected textview like this:
<TextView
android:id="#+id/tv_name"
style="#style/textStyleMedium"
........ />
Remove the below tags on your app theme:
<item name="android:textColorPrimary">#FF4081</item>
<item name="android:textColorSecondary">#186925</item>
<!-- <item name="android:textColor">#084fe9</item> -->
Purpose of different color:
TextColor is just the xml attribute to set a color to the text of any given view.
TextColorPrimary is the default text color for enabled buttons and Large Textviews.
TextColorSecondary is the default text color for Medium and Small Textviews.
colorPrimaryDark is the color of the status bar.
In order to achieve this you should remove textColor that override other colors.
android:textAppearance="#style/TextAppearance.AppCompat.Medium"
inside your textView in xml . Then it will apply it to all your View. In this manner you don't have to set style to all ..
Related
I have used the radio button and set a custom drawable for a check/uncheck
I want to this
but my current output is this
Radio button XML code
<RadioGroup
android:id="#+id/segmented2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_margin="6dp"
android:layout_weight="1"
android:baselineAligned="false"
android:orientation="horizontal">
<RadioButton
android:id="#+id/colorRadioButton"
style="#style/RadioButton"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:checked="true"
android:text="#string/color_color" />
<RadioButton
android:id="#+id/gradientRadioButton"
style="#style/RadioButton"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:checked="false"
android:text="#string/color_gradient"
android:visibility="visible" />
</RadioGroup>
style/RadioButton
<style name="RadioButton" parent="Base.Widget.AppCompat.CompoundButton.RadioButton">
<item name="android:gravity">center_vertical|center</item>
<item name="android:paddingLeft">10dp</item>
<item name="android:paddingRight">20dp</item>
<item name="android:background">#null</item>
<item name="android:button">#drawable/radio_checked_unchecked</item>
<item name="android:minWidth">70dp</item>
<item name="android:minHeight">35dp</item>
</style>
drawable/radio_checked_unchecked.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/radio_checked" android:state_checked="true"/>
<item android:drawable="#drawable/radio_unchecked"/>
</selector>
Firstly, you need to change the android:orientation from horizontal to vertical. You can also use fixed layout width and height if you use larger or unscalable custom drawables.
So, your updated RadioGroup codebase will be like below:
<RadioGroup
android:id="#+id/segmented2"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_gravity="center_vertical"
android:layout_margin="6dp"
android:layout_weight="1"
android:baselineAligned="false"
android:orientation="vertical">
<RadioButton
android:id="#+id/colorRadioButton"
style="#style/RadioButton"
android:layout_width="40dp"
android:layout_height="40dp"
android:checked="true"
android:text="#string/color_color" />
<RadioButton
android:id="#+id/gradientRadioButton"
style="#style/RadioButton"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_marginTop="10dp"
android:checked="false"
android:text="#string/color_gradient"
android:visibility="visible" />
</RadioGroup>
Also, button should be set to #null, and the radioGroup background should be your custom drawable.
So, your updated style codebase will be like below:
<style name="RadioButton" parent="Base.Widget.AppCompat.CompoundButton.RadioButton">
<item name="android:gravity">center_vertical|center</item>
<item name="android:paddingLeft">10dp</item>
<item name="android:paddingRight">20dp</item>
<item name="android:background">#drawable/radio_checked_unchecked</item>
<item name="android:button">#null</item>
<item name="android:minWidth">70dp</item>
<item name="android:minHeight">35dp</item>
</style>
I think you need to use this:
<item name="android:background">#drawable/radio_checked_unchecked</item>
<item name="android:button">#null</item>
instead of this:
<item name="android:background">#null</item>
<item name="android:button">#drawable/radio_checked_unchecked</item>
in your style.
I got an idea from the given answer and I found a solution to my question
Change
<RadioButton
android:id="#+id/colorRadioButton"
style="#style/RadioButton"
android:layout_width="40dp"
android:layout_height="40dp"
android:checked="true"
android:text="#string/color_color" />
To
<RadioButton
android:id="#+id/autoRadioButton"
style="#style/RadioButton"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:checked="false"
android:text="#string/auto"
android:drawablePadding="#dimen/_10sdp"
android:drawableStart="#drawable/radio_checked_unchecked"/>
set android:drawableStart to set custom drawable and set button="#null"
style
<style name="RadioButton" parent="Base.Widget.AppCompat.CompoundButton.RadioButton">
<item name="android:textColor">#color/bvc_sticker_button_text_color</item>
<item name="android:gravity">center_vertical|center</item>
<item name="android:paddingLeft">10dp</item>
<item name="android:paddingRight">20dp</item>
<item name="android:background">#null</item>
<item name="android:button">#null</item>
<item name="android:minWidth">70dp</item>
<item name="android:minHeight">35dp</item>
<item name="fontFamily">#font/inter_medium</item>
</style>
use the above code and get output like this
I have button like this in my login activity layout.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:weightSum="2">
<com.google.android.material.button.MaterialButton
android:id="#+id/button_login_activity"
android:layout_width="0dp"
android:layout_height="60dp"
android:layout_weight="1"
android:text="Login"
app:cornerRadius="20dp"
android:background="#color/colorPrimaryDark"
android:textColor="#color/toolbar_text"
android:textStyle="bold" />
<com.google.android.material.button.MaterialButton
android:id="#+id/button_skip_login_activity"
android:layout_width="0dp"
android:layout_height="60dp"
android:layout_marginStart="10dp"
android:layout_weight="1"
app:cornerRadius="20dp"
android:background="#color/colorPrimaryDark"
android:textColor="#color/toolbar_text"
android:text="Skip"
android:textStyle="bold"
android:layout_marginLeft="10dp" />
</LinearLayout>
My Style is like this
<style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
<!--Common Color-->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="android:alertDialogTheme">#style/AlertDialogTheme</item>
<item name="windowActionBar">true</item>
<item name="windowNoTitle">true</item>
<item name="colorSwitchThumbNormal">#color/switch_normal</item>
<item name="colorControlNormal">#color/switch_normal</item>
<item name="android:textColorSecondary">#color/switch_normal</item>
<item name="drawerArrowStyle">#style/DrawerArrowStyle</item>
<item name="android:windowDisablePreview">true</item>
</style>
I have dependency like below
implementation 'com.google.android.material:material:1.2.1'
I have tried many things but unable to make it working for round corner, same thing is working for my another project. Let me know if anyone can help me for come out from the issue.
Thanks!
You have to remove the background:
android:background="#color/colorPrimaryDark"
Using it the MaterialButton doesn't use its own MaterialShapeDrawable for the background. This means that features like shape appearance, stroke and rounded corners are ignored.
In your case use the app:backgroundTint attribute:
<com.google.android.material.button.MaterialButton
app:backgroundTint="#color/colorPrimaryDark"
I am trying to change the toolbar spinner dropdown theme strangely this is not happening. It is coming up always dark when I click on the spinner. I would like to have the background grey and text black.
I don't have any actionbar. I am setting everything through toolbar.
Hence I tried the following:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:local="http://schemas.android.com/apk/res-auto"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorPrimary"
android:minHeight="?attr/actionBarSize"
local:popupTheme="#style/ThemeOverlay.AppCompat.Light"
local:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<RelativeLayout
android:id="#+id/relativeLayoutID"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="#+id/toolbar_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_gravity="left|center"
android:text="#string/register_title"
android:textColor="#color/whiteText"
android:textSize="#dimen/text_size_medium" />
<Spinner
android:id="#+id/spinner"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:minWidth="80dp"
android:spinnerMode="dropdown"
android:visibility="gone" />
</RelativeLayout>
</android.support.v7.widget.Toolbar>
Style xml:
<resources>
<style name="Theme.default" parent="Theme.AppCompat.Light.NoActionBar">
<item name="md_widget_color">#color/numbertext</item>
<item name="android:colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="android:colorPrimary">#color/colorPrimary</item>
<item name="android:windowContentOverlay">#drawable/toolbar_dropshadow</item>
<item name="android:windowBackground">#android:color/white</item>
<item name="android:editTextColor">#android:color/background_dark</item>
<item name="android:textColor">#android:color/background_dark</item>
<item name="colorControlNormal">#android:color/background_dark</item>
<item name="colorControlActivated">#color/orangeText</item>
<item name="colorControlHighlight">#color/orangeText</item>
<item name="android:statusBarColor">#color/colorPrimary</item>
</style>
<style name="Widget.MyApp.HeaderBar.Spinner" parent="Widget.AppCompat.Light.Spinner.DropDown.ActionBar">
<item name="android:background">?android:selectableItemBackground</item>
<item name="android:dropDownSelector">?android:selectableItemBackground</item>
<item name="android:divider">#color/blackText</item>
<item name="android:overlapAnchor">true</item>
</style></resources>
Update:
Added the following theme:
<style name="MyDarkToolbarStyle" parent="#style/Widget.AppCompat.Spinner.DropDown.ActionBar">
<item name="background">?android:selectableItemBackground</item>
<item name="android:popupBackground">#color/layoutbackground</item>
<item name="android:dropDownSelector">?android:selectableItemBackground</item>
<item name="android:divider">#color/blackText</item>
<item name="android:overlapAnchor">true</item>
</style>
And applied it to the spinner:
<Spinner
android:id="#+id/spinner"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:minWidth="80dp"
style="#style/MyDarkToolbarStyle"
android:spinnerMode="dropdown"
android:visibility="gone" />
With above settings I could change the dropdown background color but not I am not able to get ripple effect on selection this used to happen before applying the theme to the spinner?
Just add the following to your Spinner the same way you did for your Toolbar:
local:popupTheme="#style/ThemeOverlay.AppCompat.Light"
local:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
So your final Spinner will look like this:
<Spinner
android:id="#+id/spinner"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:minWidth="80dp"
android:spinnerMode="dropdown"
local:popupTheme="#style/ThemeOverlay.AppCompat.Light"
local:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:visibility="gone" />
In my application, I'm using AutoCompleteTextView.
One of the requirements is to hide the divider.
I have added AutoCompleteTextView to layout:
<AutoCompleteTextView
android:id="#id/address_bar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginLeft="15dp"
android:layout_marginRight="8dp"
android:layout_toLeftOf="#id/address_operation_btn"
android:background="#null"
android:completionThreshold="1"
android:dropDownAnchor="#id/anchor"
android:dropDownVerticalOffset="13dp"
android:dropDownWidth="wrap_content"
android:ellipsize="end"
android:gravity="center"
android:layout_centerHorizontal="true"
android:hint="#string/address_bar_hint"
android:imeOptions="actionGo"
android:inputType="textUri"
android:maxLines="1"
android:saveEnabled="true"
android:singleLine="true"
android:dropDownListViewStyle="#style/searchResultsList"
android:textColor="#android:color/white"
android:textColorHint="#80FFFFFF"
android:textSize="17sp" />
The style i'm using is
<style name="searchResultsList" parent="#android:style/Widget.ListView">
<item name="android:divider">#android:color/transparent</item>
<item name="android:dividerHeight">0px</item>
</style>
But the divider is still there...
How if can be hidden?
Override it with your application theme. In your themes.xml
<style name="AppTheme" parent="#style/Theme.AppCompat.Light.DarkActionBar">
<item name="android:dropDownListViewStyle">#style/DropDownListViewStyle</item>
</style>
<style name="DropDownListViewStyle" parent="#style/Widget.AppCompat.ListView.DropDown">
<item name="android:divider">#android:color/transparent</item>
<item name="android:dividerHeight">0dp</item>
</style>
Credits to: http://daniel-codes.blogspot.com/2012/11/styling-autocompletetextview.html
I have an activity with the following theme
<style name="CustomDialogTitle" parent="#android:style/Theme.Dialog">
<item name="android:windowTitleStyle">#style/PauseDialogTitle</item>
</style>
<style name="PauseDialogTitle" parent="#android:style/TextAppearance.DialogWindowTitle">
<item name="android:gravity">center_horizontal</item>
<item name="android:windowTitleSize">50dip</item>
<item name="android:height">70dip</item>
<item name="android:maxLines">2</item>
<item name="android:singleLine">false</item>
</style>
<style name="DialogWindowTitle">
<item name="android:textAppearance">#android:style/TextAppearance.DialogWindowTitle</item>
</style>
and this is the custom title layout
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="50dip"
android:orientation="vertical" >
<TextView
android:id="#+id/first_line_title_text"
style="?android:attr/textAppearanceSmall"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColor="#color/white"
android:text="first line" />
<TextView
android:id="#+id/second_line_title_text"
style="?android:attr/textAppearanceSmall"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColor="#color/white"
android:text="second line" />
I can only see one line of the title layout
What's causing the title to show only one line with fixed height ?
although i'm specifying height in the layout and style