I'm trying to use a MaterialButtonToggleGroup inside my BottomSheetDialog. However the style for the button is being overriden by the current theme I'm using for the BottomSheet
In a regular fragment:
Using the attribute
style="?attr/materialButtonOutlinedStyle"
I have this blue outline on my Material Button inside my ToggleGroup
<com.google.android.material.button.MaterialButtonToggleGroup
android:id="#+id/toggle_group"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:checkedButton="#+id/btnOne"
app:layout_constraintEnd_toEndOf="parent"
android:layout_marginEnd="16dp"
app:selectionRequired="true"
app:singleSelection="true">
<com.google.android.material.button.MaterialButton
android:id="#+id/btnOne"
style="?attr/materialButtonOutlinedStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button 1"
android:minHeight="0dp"
android:textSize="12sp"/>
<com.google.android.material.button.MaterialButton
android:id="#+id/btnTwo"
style="?attr/materialButtonOutlinedStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:minHeight="0dp"
android:text="Button 2"
android:textSize="12sp"/>
</com.google.android.material.button.MaterialButtonToggleGroup>
But when using it inside my BottomSheet I get this:
The theme for bottom sheet I'm using:
<style name="Theme.TestApp" parent="Theme.MaterialComponents.DayNight.NoActionBar">
...
<item name="bottomSheetDialogTheme">#style/AppBottomSheetDialogTheme</item>
</style>
<style name="AppBottomSheetDialogTheme" parent="Theme.Design.Light.BottomSheetDialog">
<item name="bottomSheetStyle">#style/BottomSheetRoundedCorners</item>
</style>
<style name="BottomSheetRoundedCorners" parent="Widget.Design.BottomSheet.Modal">
<item name="android:background">#drawable/bgr_bottomsheet_round_corners</item>
</style>
How can I keep the style
style="?attr/materialButtonOutlinedStyle"
for the MaterialButton while using the BottomSheet's theme?
Edit:______________________________
I've tried adding
<item name="materialButtonStyle">#style/Widget.MaterialComponents.Button.OutlinedButton</item> to my BottomSheet's theme but it doesn't do anything.
<style name="AppBottomSheetDialogTheme" parent="Theme.Design.Light.BottomSheetDialog">
<item name="bottomSheetStyle">#style/BottomSheetRoundedCorners</item>
<item name="materialButtonStyle">#style/Widget.MaterialComponents.Button.OutlinedButton</item>
</style>
Have also tried it with
<item name="materialButtonStyle">?attr/materialButtonOutlinedStyle</item>
you can use this theme:
<style name="BottomSheet" parent="Theme.MaterialComponents.DayNight.BottomSheetDialog"/>
<style name="Theme.TestApp" parent="Theme.MaterialComponents.DayNight.NoActionBar">
...
<item name="bottomSheetDialogTheme">#style/BottomSheet</item>
DO NOT USE THEME.DESIGN.LIGHT
Related
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"
Is there a way to use the extended floating action button when your parent style is set to "Theme.AppCompat.Light.NoActionBar"?
I have the following in my layout. The app crashes because of style issue when my parent style is set to AppCompat.
<com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
android:id="#+id/viewMore"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end|bottom"
android:layout_margin="16dp"
android:text="View More"
android:textColor="#color/colorPrimary"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"/>
As suggested here, you could use a Material bridge theme to retain the AppCompat style.
<style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar.Bridge">
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
</style>
I have set android:textAllCaps="false" in my com.google.android.material.tabs.TabItem thought it is showing the Tab Title in All caps only.
How can I remove all caps?
<com.google.android.material.tabs.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<com.google.android.material.tabs.TabItem
android:id="#+id/TabWeekly"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:text="#string/Weekly"
android:textAllCaps="false"
android:theme="#style/CustomTextAppearanceTab" />
<com.google.android.material.tabs.TabItem
android:id="#+id/TabMonthly"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:text="#string/Monthly"
android:textAllCaps="false"
android:theme="#style/CustomTextAppearanceTab" />
</com.google.android.material.tabs.TabLayout>
even I have set style for it
<style name="CustomTextAppearanceTab" parent="TextAppearance.Design.Tab">
<item name="textAllCaps">false</item>
<item name="android:textAllCaps">false</item>
</style>
but its not working
custom style
<style name="customTabLayout" parent="Widget.Design.TabLayout">
<item name="tabTextAppearance">#style/TabTextAppearance</item>
</style>
<style name="TabTextAppearance" parent="#android:style/TextAppearance.Widget.TabWidget">
<item name="android:textAllCaps">false</item>
</style>
tab layout xml code
<com.google.android.material.tabs.TabLayout
android:id="#+id/tab"
style="#style/customTabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
You can take advantage of the fact that TabLayout is using the same text appearance as Button.
First, add a new text appearance:
<style name="TextAppearance.MyApplication.Button" parent="TextAppearance.MaterialComponents.Button">
<item name="android:textAllCaps">false</item>
</style>
Second, apply it as a textAppearanceButton in the application theme:
<item name="textAppearanceButton">#style/TextAppearance.MyApplication.Button</item>
Of course, this solution works unless you want to keep textAllCaps for Button.
Created custom style for button when apply the style for button it is partially. Here is the style code snippet.
Manifest.xml
<application android:theme="#style:AppTheme">
styles.xml
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="android:buttonStyle">#style/back_button_style</item>
<item name="buttonStyle">#style/back_button_style</item>
</style>
<style name="back_button_style" parent="Widget.AppCompat.Button">
<item name="background">#drawable/back_button_shape</item>
<item name="android:layout_height">40dp</item>
<item name="android:textColor">#ffffff</item>
<item name="android:textSize">16sp</item>
<item name="android:textStyle">bold</item>
<item name="android:textAlignment">center</item>
<item name="android:textAllCaps">true</item>
<item name="android:layout_marginStart">72dp</item>
<item name="android:layout_marginEnd">72dp</item>
<item name="android:fontFamily">sans-serif</item> //sans-serif nothing but robot regular
</style>
layout.xml
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="continue"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintHorizontal_bias="0.501"
android:layout_marginBottom="8dp" />
After applying the style only the text color changes to white since i given the text color as white in style but other credentials are not applied background, before applying the button text color was black.
So I not getting why it is partially applying the style.
I tried like this also but it is not working
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="continue"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintHorizontal_bias="0.501"
android:layout_marginBottom="8dp"
android:theme="#style/back_button_style/>
I am not getting what and where is the bug in the code.
Rectify Button android:theme section .
Don't
android:theme="#style/back_button_style
Do
style="#style/back_button_style"
Then Clean-Rebuild-Run .
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