AppCompatButton and buttonStyle - android

I am trying to get some buttons to be use the Material Design style (in particular accentColor tinting) for Android 4.4 devices using the AppCompat library. I have had success with the following:
<android.support.v7.widget.AppCompatButton
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/continue_button"
android:id="#+id/continue_button"
android:layout_gravity="center_horizontal|bottom"
style="#style/CompatButton"
android:theme="#style/ThemeOverlay.AppCompat.Dark"/>
where "#style/CompatButton" has "Widget.AppCompat.Button.Colored" for a parent. However some of my buttons are the same but instead of declaring the style in the element, I attach the style as the default "buttonStyle" in the theme being used:
<style name="AppTheme">
...
<item name="android:buttonStyle">#style/CompatButton</item>
<item name="colorAccent">#color/flow_accent</item>
...
</style>
and
<android.support.v7.widget.AppCompatButton
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/continue_button"
android:id="#+id/continue_button"
android:layout_gravity="center_horizontal|bottom"
android:theme="#style/ThemeOverlay.AppCompat.Dark"/>
These buttons are showing up with the default, non-Material stylings. This also seems to happen with ProgressBar. Can anyone see what's wrong with this and if there's a workaround without having to explicitly define the button style?

Oops, that was dumb. Obviously ThemeOverlay wipes out the previous theme, including the buttonStyle definition. For it to work we have to add the buttonStyle back in:
<style name="FlowOverlay" parent="ThemeOverlay.AppCompat.Dark">
<item name="android:buttonStyle">#style/CompatButton</item>
</style>
<android.support.v7.widget.AppCompatButton
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/continue_button"
android:id="#+id/continue_button"
android:layout_gravity="center_horizontal|bottom"
android:theme="#style/FlowOverlay"/>
though that loses much of the convenience we wanted from default button styles in the first place.

Related

When using Theme.MaterialComponents.Light.NoActionBar style, setting Button Background has no effect

In order to use Chip and ChipGroup, I set Application style extends Theme.MaterialComponents.Light.NoActionBar int manifests.xml, then I set Button "android:background" attr, but it does not effect! why? and what can I do?
This is my style:
<style name="AppBaseTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
<item name="colorPrimary">#color/primary_material_light</item>
<item name="colorPrimaryDark">#color/header_color</item>
<item name="actionBarSize">48dp</item>
<item name="android:screenOrientation">portrait</item>
<!--<item name="buttonStyle">#style/AntButton</item>-->
<!--<item name="materialButtonStyle">#style/AntButton</item>-->
<!--<item name="android:button"></item>-->
<!--<item name="android:progressTint">#color/ffc000</item>-->
<item name="colorAccent">#color/ffc000</item>
</style>
<style name="AntButton" parent="android:Widget">
<item name="android:background">#drawable/abc_btn_default_mtrl_shape</item>
<item name="android:textAppearance">?android:attr/textAppearanceButton</item>
<item name="android:minHeight">48dip</item>
<item name="android:minWidth">88dip</item>
<item name="android:focusable">true</item>
<item name="android:clickable">true</item>
<item name="android:gravity">center_vertical|center_horizontal</item>
<!--<item name="android:colorButtonNormal">#color/white</item>-->
</style>
I have tried to change buttonStyle and materialButtonStyle, but not effect too!
this is my layout XML:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/ll_popup"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:background="#color/white"
android:divider="#drawable/shape_divider_05dp"
android:orientation="vertical"
android:showDividers="beginning|middle">
<!--only can use backgroundTint to change background color-->
<Button
android:id="#+id/item_popupwindows_Photo"
android:layout_width="match_parent"
android:layout_height="55dp"
android:backgroundTint="#color/white"
android:text="Pictrue"
android:textColor="#color/c_666666"
android:textSize="16sp" />
<!--background not effect !!-->
<Button
android:id="#+id/item_popupwindows_cancel"
android:layout_width="match_parent"
android:layout_height="55dp"
android:background="#color/white"
android:text="cancel"
android:textColor="#color/c_666666"
android:textSize="16sp" />
</LinearLayout>
</LinearLayout>
this is result :
Because I have used Chip and ChipGroup in APP, I have to user theme extends MaterialComponents! do you know how to resolve it ?please tell me, thanks!
in this page Can't use android:background with button from the new material components, the author wants to change the default padding, but I want to change the backgroundDrawable, so, it does not work for me.
If you want a true Button, but one that you can modify like the framework Button (instead of the MaterialButton), then you can explicitly specify the framework version in your layout file. Replace this:
<Button
android:id="#+id/item_popupwindows_cancel"
... />
with this:
<android.widget.Button
android:id="#+id/item_popupwindows_cancel"
... />
This will give you what it says on the tin: an android.widget.Button, which should respond to styling the way you expect.
Similarly, you could use a <androidx.appcompat.widget.AppCompatButton> if you want support library features but not material components features.
In this particular case, the LinearLayout holding your second Button seems to have a white background color. That means you don't need to explicitly specify a white background for your Button; you can just let the LinearLayout's background show through.
This can be accomplished by using the "Text Button" style of MaterialButton:
style="#style/Widget.MaterialComponents.Button.TextButton"
Use this code for change the color
app:backgroundTint="#color/primaryColor"
You can also use ImageButton instead of Button from material components. android:background is working on ImageButton.
<ImageButton
android:id="#+id/item_popupwindows_cancel"
... />

ImageButton background color with appcompat

I've got problems to have a good background from an AppCompatImageButton, just to try I'm comparing this two layouts:
<android.support.v7.widget.AppCompatImageButton
android:id="#+id/imageButtonI"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_centerVertical="true"
android:contentDescription="#string/icolor"
android:tint="#color/accent"
app:srcCompat="#drawable/magnify"/>
<ImageButton
android:id="#+id/imageButtonS"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_centerVertical="true"
android:contentDescription="#string/scolor"
android:tint="#color/accent"
android:src="#drawable/magnify"/>
and the style file:
<style name="AppBaseTheme" parent="android:Theme.Material">
<item name="android:colorPrimary">#color/primary</item>
<item name="android:colorPrimaryDark">#color/primaryDark</item>
<item name="android:colorAccent">#color/accent</item>
</style>
As you can see from this image however, the background of ImageButton is "normal" while there isn't any background in the appcompat one. How can I have the "normal" background using AppCompatImageButton?
A good way to style the Button is to use the style #style/Widget.AppCompat.Button.Colored.
The Widget.AppCompat.Button.Colored style extends the Widget.AppCompat.Button style and applies automatically the accent color you selected in your app theme.
<Button
style="#style/Widget.AppCompat.Button.Colored"
/>
To customize the background color without changing the accent color in your main theme you can create a custom theme for your Button using the android:theme attribute and extending the ThemeOverlay theme.
<Button
style="#style/Widget.AppCompat.Button.Colored"
android:theme="#style/MyButtonTheme"/>
defining the following theme:
<!-- res/values/themes.xml -->
<style name="MyButtonTheme" parent="ThemeOverlay.AppCompat.Light">
<item name="colorAccent">#color/my_color</item>
</style>
I am not sure which version of support library are you using, but before there was bug in the library which is reported here,
https://code.google.com/p/android/issues/detail?id=78428
But they have resolved it in the latest update,
Yes, it appears to work now with the introduction of
android.support.v7.widget.AppCompatButton in AppCompat v22.1.0, color
can be controlled at overall theme level with "colorButtonNormal".
http://android-developers.blogspot.com/2015/04/android-support-library-221.html
http://chris.banes.me/2015/04/22/support-libraries-v22-1-0/
for theme
<item name="colorButtonNormal">#color/button_color</item>
for version 21
<item name="android:colorButtonNormal">#color/button_color</item>
Hope this will help you.
Thanks

EditText not tinted in Accent color on lollipop devices

I'm Software Engineering student that just started learning android development a couple months ago during my spare time.
at the moment im making my first app while learning in the process and i ran into a problem.
I'm using a DialogFragment and for some reason the Accent color i use in my theme is overridden only in pre-lollipop devices (both emulator and physical).
you can notice that only the floating hint is tinted in lollipop.
my DialogFragment layout:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/dialog_add_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.design.widget.TextInputLayout
android:id="#+id/input_title_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText
android:id="#+id/input_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:hint="#string/dialog_add_title_hint"
android:imeOptions="actionNext"
android:inputType="text"
android:singleLine="true" />
</android.support.design.widget.TextInputLayout>
<android.support.design.widget.TextInputLayout
android:id="#+id/input_password_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText
android:id="#+id/input_password"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:hint="#string/dialog_add_password_hint"
android:imeOptions="actionGo"
android:inputType="text"
android:singleLine="true" />
</android.support.design.widget.TextInputLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:id="#+id/input_cancel"
style="?attr/buttonBarButtonStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:layout_weight="1"
android:text="Cancel" />
<Button
android:id="#+id/input_confirm"
style="?attr/buttonBarButtonStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:layout_weight="1"
android:text="Add" />
</LinearLayout>
my values/styles.xml:
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="colorControlHighlight">#color/colorHighlight</item>
<!-- Context Action Mode will Overlay Toolbar -->
<item name="windowActionModeOverlay">true</item>
</style>
i already tried several solutions to no avail:
overriding colorControlActivated and colorControlNormal - only changes floating hint tint
changing the tint programmatically, but that only changes the underline while not focused:
Drawable background = InputTextLayout.getEditText().getBackground();
DrawableCompat.setTint(background, yourColor);
InputTextLayout.getEditText().setBackground(background);
using EditText alone, not wrapped in TextInputLayout, doesn't help either.
any ideas?
Thanks in Advance
after a thorough search through the internet i stumbled upon a question here in stackoverflow regarding animating a DialogFragment - here
the answer in that link referred to a post by a Google Engineer saying:
...DialogFragment is just a wrapper around a Dialog to help manage its lifecycle. Dialogs are top-level windows so their animations are window animations, just like when you use Dialog in all other situations. You thus control the animations of dialogs through the theme or explicit window animation style you have set in its WindowManager.LayoutParams.
so i decided to check how to theme the DialogFragment
& found this guide by CodePath - here
basically, in your App Theme, in order to override the Dialog Themes you have to add the following:
<style name="AppTheme" parent...>
....
<!-- this will override DialogFragment theme -->
<item name="android:dialogTheme">#style/MyDialogFragmentTheme</item>
<!-- this will override AlertDialog theme -->
<item name="android:alertDialogTheme">#style/MyAlertDialogTheme</item>
</style>
<style name="CustomAlertDialogTheme.Animation">
...
</style>
<style name="MyDialogFragmentTheme" parent="Theme.AppCompat.Light.Dialog">
...
</style>
in each of the theme you can override attributes like colorPrimary, colorAccent etc.
if using this method makes your DialogFragment appear without a title (it happend to me), then add the following to its style:
<item name="android:windowNoTitle">false</item>
Bonus - adding animations
in order to add animations to either the AlertDialog or DialogFragment, write the following in its style:
<style name="MyDialogFragmentTheme" parent="Theme.AppCompat.Light.Dialog">
...
<item name="android:windowAnimationStyle">#style/MyDialogFragmentTheme.Animation</item>
</style>
then you need to create a style for the animation, for example:
<style name="MyDialogFragmentTheme.Animation">
<item name="android:windowEnterAnimation">#anim/dialog_slide_in_up</item>
<item name="android:windowExitAnimation">#anim/dialog_slide_out_down</item>
<item name="android:interpolator">#android:interpolator/anticipate</item>
</style>
there's more info in the CodePath guide linked above.
note that this all takes place in values/styles.xml
hope this helps other people.

Referencing specific attribute in another style

I'm trying to find the best way to match the text size of a label next to an EditText using xml.
I would prefer not to inherit the EditText style directly, since that would bring in a bunch of attributes I'm not interested in.
<EditText
android:id="#+id/editQuantity"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:id="#+id/textUnit"
style="#style/FontMatchingEditText"
android:text="units"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
Is there some way to refer to a specific attribute in another style?
Otherwise, would it make more sense make my own style for EditText to make sure it stays consistent with the label?
Edit
I was hoping there might be a theme independent way of doing it, semantically something like this:
<item name="android:textSize">#android:style/Widget.EditText.textAppearance.textSize</item>
But I'm probably overcomplicating it.
Thanks!
Assuming your parent theme is android:Theme.Holo.Light.
From \android-sdk\platforms\android-X\data\res\values\themes.xml:
<style name="Theme.Holo.Light" parent="Theme.Light">
...
<!-- Widget styles -->
<item name="editTextStyle">#android:style/Widget.Holo.EditText</item>
From \android-sdk\platforms\android-X\data\res\values\styles.xml:
<style name="Widget.Holo.EditText" parent="Widget.EditText">
</style>
<style name="Widget.EditText">
...
<item name="android:textAppearance">?android:attr/textAppearanceMediumInverse</item>
<item name="android:textColor">?android:attr/editTextColor</item>
</style>
Now you can just reuse theme attributes used for EditText for your TextView:
<TextView
android:id="#+id/textUnit"
android:textColor="?android:attr/editTextColor"
android:textAppearance="?android:attr/textAppearanceMediumInverse"
android:text="units"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />

Android API 21 changes my custom button background

I am testing out my app for API21 on Android! Unfortunately, my buttons seem weird - there is some kind of background color added. The background images did not change - they are completely transparent except for the border. (The different text and size is due to the screenshot).
Here you see the buttons before and since API 21: http://imgur.com/9EEcl0o,yVEnJkI#0
I already tried android:elevation="0dp" and android:background="#android:color/transparent". Anybody knows why my buttons change? Thank you very much!
layout.xml:
<Button android:id="#+id/sm_achievements_btn"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1.1"
android:background="#drawable/menu_btn_selector"
android:onClick="showAchievements"
android:text="#string/sm_achievements_btn"
android:padding="#dimen/padding_std"
android:layout_marginTop="#dimen/margin_small"
android:textColor="#color/button_text"
android:textSize="#dimen/text_xlarge"
style="#style/lbm_button"/>
menu_btn_selector.xml:
<item android:drawable="#drawable/menu_button"
android:state_pressed="false"/>
style.xml:
<style name="lbm_button" parent="android:Theme.Holo.Light">
<item name="android:textAllCaps">false</item>
</style>
Material buttons have a default stateListAnimator that provides state-based elevation (e.g. 0dp when disabled, 1dp when enabled). You can clear it by setting android:stateListAnimator="#null" in your style or directly on the Button.
Here is what that would look like on your button XML:
<Button android:id="#+id/sm_achievements_btn"
...
android:textAllCaps="false"
android:stateListAnimator="#null" />
Also, you're using the wrong parent for your button style. You should never set a theme as the parent for a widget style. Regardless, here is what that should look like if you prefer that route:
<Button android:id="#+id/sm_achievements_btn"
...
style="#style/MyButtonStyle" />
<style name="MyButtonStyle" parent="android:Widget.Material.Light.Button">
<item name="android:textAllCaps">false</item>
<item name="android:stateListAnimator">#null</item>
</style>

Categories

Resources