I got the following background for an edit text:
edit_text_rounded_white.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape>
<solid android:color="#66c6c6c6"/>
<stroke android:width="0.1dp"
android:color="#66c6c6c6"/>
<corners android:radius="40dp"/>
</shape>
</item>
</selector>
in my styles.xml I define the following:
<style name="editText">
<item name="android:background">#drawable/edit_text_rounded_white</item>
<item name="android:drawablePadding">5dp</item>
<item name="android:paddingBottom">2dp</item>
<item name="android:paddingTop">2dp</item>
<item name="android:paddingLeft">10dp</item>
<item name="android:paddingRight">10dp</item>
<item name="android:textCursorDrawable">#drawable/edit_text_cursor</item>
<item name="colorControlNormal">#color/colorPrimaryDark</item>
<item name="colorControlActivated">#color/transparentWhite50</item>
</style>
When I set the style via: style="#style/editText" for my editTexts it takes the background but doesnt take the colorControl I set. When I set the style via android:theme="#style/editText" it takes the colorControls but doesnt show the background image. I already tried src and windowBackground instead of background in the style file.
Any ideas how achieve both? Showing background and the colorControls?
Split your style into two:
<style name="editTextStyle">
<item name="android:background">#drawable/edit_text_rounded_white</item>
<item name="android:drawablePadding">5dp</item>
<item name="android:paddingBottom">2dp</item>
<item name="android:paddingTop">2dp</item>
<item name="android:paddingLeft">10dp</item>
<item name="android:paddingRight">10dp</item>
<item name="android:textCursorDrawable">#drawable/edit_text_cursor</item>
</style>
<style name="editTextTheme">
<item name="colorControlNormal">#color/colorPrimaryDark</item>
<item name="colorControlActivated">#color/transparentWhite50</item>
</style>
And then apply both to your view:
<EditText
...
android:theme="#style/editTextTheme"
style="#style/editTextStyle"/>
Related
I am creating an EditText like image. (Actually, I made it.)
Created drawable xml and set EditText as background.
However, to manage this more easily, I created a style in the theme and assigned it to the style property in EditText, but it is not applied.
What's the reason?
(Or if there is a better way to create these EditTexts please let me know)
--
drawable
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="5dp"/>
<solid android:color="#color/gray_400"/>
</shape>
theme.xml
<!-- memo EditText style -->
<style name="MemoEditTextStyle" parent="Widget.AppCompat.EditText">
<item name="background">#drawable/edittext_memo</item>
<item name="android:textColor">#color/purple_200</item>
<item name="android:textColorHighlight">#color/gray_400</item>
<item name="colorControlActivated">#color/gray_400</item>
</style>
in xml
<EditText
android:layout_width="match_parent"
android:layout_height="50dp"
style="#style/MemoEditTextStyle"
android:hint="#string/hint_memo"
android:paddingLeft="10dp"
android:gravity="center_vertical"/>
result
The background is not applied to EditText because in the style you define a property <item name="background"> instead of <item name="android:background">.
The same result can be also achieved using Widget.MaterialComponents without the need of the drawable xml shape like in the below example:
Define a custom TextInputLayout.OutlinedBox Style:
<style name="Custom.TextInputLayout.OutlinedBox" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">
<item name="boxBackgroundMode">outline</item>
<item name="boxBackgroundColor">#c2c0ba</item>
<item name="boxStrokeColor">#c2c0ba</item>
<item name="boxStrokeErrorColor">#FF0000</item>
<item name="boxCornerRadiusTopStart">5dp</item>
<item name="boxCornerRadiusTopEnd">5dp</item>
<item name="boxCornerRadiusBottomStart">5dp</item>
<item name="boxCornerRadiusBottomEnd">5dp</item>
<item name="boxStrokeWidth">0dp</item>
<item name="boxCollapsedPaddingTop">0dp</item>
<item name="hintEnabled">false</item>
<item name="errorIconDrawable">#null</item>
<item name="errorTextColor">#FF0000</item>
<item name="android:textColorHint">#B3B3B3</item>
<item name="materialThemeOverlay">#style/Custom.ThemeOverlay.TextInputEditText.OutlinedBox</item>
</style>
<style name="Custom.ThemeOverlay.TextInputEditText.OutlinedBox" parent="#style/ThemeOverlay.MaterialComponents.TextInputEditText.OutlinedBox">
<item name="editTextStyle">#style/Custom.TextInputEditText.OutlinedBox</item>
</style>
<style name="Custom.TextInputEditText.OutlinedBox" parent="#style/Widget.MaterialComponents.TextInputEditText.OutlinedBox">
<item name="android:paddingTop">16dp</item>
<item name="android:paddingBottom">16dp</item>
<item name="android:paddingStart">10dp</item>
<item name="android:paddingEnd">10dp</item>
<item name="android:paddingLeft">10dp</item>
<item name="android:paddingRight">10dp</item>
<item name="android:textColor">#color/white</item>
<item name="android:textColorHint">#color/black</item>
</style>
Usage:
<com.google.android.material.textfield.TextInputLayout
style="#style/Custom.TextInputLayout.OutlinedBox"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="MEMO"/>
</com.google.android.material.textfield.TextInputLayout>
Result:
I have defined two styles in Style.xml, I want to change the style programmatically for certain conditions, Min SDK version 21
<style name="CheckOutButtonStyle" parent="#style/Widget.AppCompat.Button.Colored">
<item name="android:layout_height">60dp</item>
<item name="android:fontFamily">sans-serif-medium</item>
<item name="android:textSize">16sp</item>
<item name="android:padding">0dp</item>
<item name="android:textColor">#color/white_color</item>
<item name="android:layout_margin">#dimen/general_spacing</item>
</style>
<style name="ScanNextItemSecondaryButtonStyle" parent="#style/Widget.AppCompat.Button.Borderless">
<item name="android:layout_height">wrap_content</item>
<item name="android:fontFamily">sans-serif-medium</item>
<item name="android:stateListAnimator">#null
</item> <!-- remove the shadow, per UI request -->
<item name="android:textSize">16sp</item>
<item name="android:padding">0dp</item>
<item name="android:minHeight">0dp</item>
<item name="android:minWidth">0dp</item>
<item name="android:background">#null</item>
<item name="android:textColor">#color/colorSecondaryAccent</item>
<item name="android:layout_marginBottom">#dimen/general_spacing</item>
</style
1. Create xml in drawable.
\res\drawable\back_button_answer.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
<corners android:radius="10dip" />
<!-- background -->
<gradient
android:startColor="#D6D7D6"
android:centerColor="#E2E2E2"
android:centerY="0.75"
android:endColor="#D6D7D6"
android:angle="270"
/>
<stroke android:width="2dip" android:color="#fff"/>
</shape>
2. Button btn.setBackgroundResource(R.drawable.back_button_answer);
I am trying to implement a spinner with a custom layout (not the spinner item layout), the outer layout. I want it to look like this:
http://imgur.com/a/U6RzU
I searched stackoverflow and google, but couldn't figure out how to come up with this (beside putting the whole picture as a background)
Thanks a lot in advance
Edit
This is what I tried:
styles.xml
<style name="spinner">
<item name="android:layout_marginTop">6dp</item>
<item name="android:layout_marginBottom">6dp</item>
<item name="android:layout_marginLeft">0dp</item>
<item name="android:layout_marginRight">0dp</item>
<item name="android:padding">10dp</item>
<item name="android:background">#drawable/spinner_bg</item>
<item name="android:popupBackground">#color/red</item>
<item name="android:textSize">15sp</item>
</style>
spinner_bg.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<layer-list>
<item>
<shape>
<gradient android:angle="90" android:endColor="#ff0000"
android:startColor="#ff0000" android:type="linear" />
<stroke android:width="0.33dp" android:color="#0fb1fa" />
<corners android:radius="0dp" />
<padding android:bottom="3dp" android:left="3dp" android:right="3dp" android:top="3dp" />
</shape>
</item>
<item android:right="5dp">
<bitmap android:gravity="center_vertical|right" android:src="#drawable/arrow_white_down" />
</item>
</layer-list>
</item>
</selector>
where arrow_white_down is a png of a tiny white arrow (like the one in the link)
I solved it by using a RelativeLayout with the spinner and an image (arrow) beside it, it doesn't look really good in spinnerMode="dropdown" but this is the best I could do
layout
<RelativeLayout
android:id="#+id/spinner_container"
style="#style/spinner_container">
<Spinner
android:id="#+id/spinner"
style="#style/spinner"
android:layout_toLeftOf="#+id/spinner_image"
android:layout_toStartOf="#+id/spinner_image" />
<ImageView
android:id="#+id/spinner_image"
style="#style/spinner_image" />
</RelativeLayout>
styles.xml
<style name="spinner_container">
<item name="android:layout_width">match_parent</item>
<item name="android:layout_height">35dp</item>
<item name="android:orientation">horizontal</item>
<item name="android:layout_marginTop">6dp</item>
<item name="android:layout_marginBottom">6dp</item>
<item name="android:layout_marginLeft">0dp</item>
<item name="android:layout_marginRight">0dp</item>
<item name="android:background">#color/red</item>
</style>
<style name="spinner">
<item name="android:layout_width">match_parent</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:layout_margin">0dp</item>
<item name="android:layout_alignParentLeft">true</item>
<item name="android:layout_alignParentStart">true</item>
<item name="android:padding">5dp</item>
<item name="android:textColor">#color/white</item>
<item name="android:background">#color/red</item>
<item name="android:popupBackground">#color/red</item>
<item name="android:textSize">15sp</item>
</style>
<style name="spinner_image">
<item name="android:layout_width">wrap_content</item>
<item name="android:layout_height">match_parent</item>
<item name="android:layout_margin">5dp</item>
<item name="android:padding">0dp</item>
<item name="android:layout_alignParentRight">true</item>
<item name="android:layout_alignParentEnd">true</item>
<item name="android:adjustViewBounds">true</item>
<item name="android:src">#drawable/bc_spinner_arrow</item>
</style>
where bc_spinner_arrow is a transparent pic of a white arrow and a vertical line (like the one in the question)
I'm trying to implement material design to legacy code.
I want a button to have a ripple effect on click but it shows nothing.
I'm using default ?android:attr/selectableItemBackground.
this is button xml:
<Button
android:text="Wandio"
android:padding="10dp"
android:textColor="#ffffff"
android:background="?android:attr/selectableItemBackground"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/wandio_link" />
style in values folder:
<resources>
<color name="main_green">#45bb61</color>
<style name="AppTheme" parent="AppTheme.Base">
</style>
<style name="Theme.Splash" parent="android:Theme">
<item name="android:windowNoTitle">true</item>
<item name="windowActionBar">false</item>
</style>
<style name="AppTheme.Base" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="windowNoTitle">true</item>
<item name="windowActionBar">false</item>
<item name="colorPrimary">#909CD4</item>
<item name="colorPrimaryDark">#D490CA</item>
<item name="colorAccent">#FFFFFF</item>
<item name="android:imageButtonStyle">#style/ImageButtonStyle</item>
<item name="android:windowBackground">#color/main_green</item>
</style>
<style name="ImageButtonStyle">
<item name="android:background">#android:color/transparent</item>
</style>
</resources>
style in values-v21 folder:
<resources>
<style name="AppTheme" parent="AppTheme.Base">
<item name="windowNoTitle">true</item>
<item name="windowActionBar">false</item>
<item name="android:windowContentTransitions">true</item>
<item name="android:windowAllowEnterTransitionOverlap">true</item>
<item name="android:windowAllowReturnTransitionOverlap">true</item>
<item name="android:windowSharedElementEnterTransition">#android:transition/move</item>
<item name="android:windowSharedElementExitTransition">#android:transition/move</item>
<item name="android:windowTranslucentStatus">true</item>
<item name="android:fitsSystemWindows">true</item>
<item name="android:imageButtonStyle">#style/StyleApi21</item>
<item name="android:buttonStyle">#style/StyleApi21</item>
</style>
<style name="StyleApi21">
<item name="android:background">?android:attr/selectableItemBackgroundBorderless</item>
</style>
Never had this problem before. Can't find what I'm missing.
Any suggestions?
I tryed the same thing and I have used this in my custom button xml:
<item ><ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="?android:colorControlHighlight">
<item android:id="#android:id/mask">
<shape android:shape="oval">
<solid android:color="#FFBB00" />
</shape>
</item>
<item>
<shape android:shape="oval">
<solid android:color="#color/colorAccent" />
</shape>
</item>
</ripple>
Here is my another xml for older devices:
<item>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/fab_selected" android:state_selected="true"/>
<item android:drawable="#drawable/fab_pressed" android:state_pressed="true"/>
<item android:drawable="#drawable/fab_normal"/>
</selector>
</item>
These drawable files are just different colors of the button.
I am trying to change the color of an item when it pressed. I used the actionBarItemBackground item in the action bar style, but nothing happens.. The color not changed...
Here my code:
<style name="ActionBarStyle" parent="#style/Widget.AppCompat.ActionBar.Solid">
<item name="android:background">#color/actionbar_background</item>
<item name="titleTextStyle">#style/ActionBarStyle.Title</item>
<item name="actionBarItemBackground">#drawable/action_bar_item_selector</item>
<item name="android:actionBarItemBackground" tools:ignore="NewApi">#drawable/action_bar_item_selector</item>
</style>
And the selector:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/pressed_item" android:state_focused="true"/>
<item android:drawable="#drawable/pressed_item" android:state_pressed="true"/>
<item android:drawable="#android:color/transparent"/>
</selector>
And the drawable:
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
<solid android:color="#FF0000"/>
</shape>
What is worng? Someone?
actionBarItemBackground isn't inherit of Widget.ActionBar. You should be placing it in your root theme, wherever you apply your ActionBarStyle, but not in your ActionBarStyle. So, something like:
<style name="Your.Theme" parent="#style/Theme.AppCompat">
<item name="actionBarStyle">#style/ActionBarStyle</item>
<item name="android:actionBarStyle">#style/ActionBarStyle</item>
<item name="actionBarItemBackground">#drawable/action_bar_item_selector</item>
<item name="android:actionBarItemBackground" tools:ignore="NewApi">#drawable/action_bar_item_selector</item>
</style>