Why my custom button states are not working? - android

I made a custom 9-patch images for my button's background. Buttons are in drawable-hdpi and drawable-mdpi folder. I created custom selector file for my button states.
selector file login_button.xml:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Image display in background in select state -->
<item android:state_pressed="true" android:drawable="#drawable/login_button_down" />
<!-- Image display in background in select state -->
<item android:state_focused="true" android:drawable="#drawable/login_button_down" />
<!-- Default state -->
<item android:drawable="#drawable/login_button" />
</selector>
Then I made a custom styles.xml file for the button style:
<style name="login_button_style" parent="#android:style/Widget.Button">
<item name="android:gravity">center_vertical|center_horizontal</item>
<item name="android:textColor">#FF000000</item>
<item name="android:shadowColor">#FFFFFFFF</item>
<item name="android:shadowDx">0</item>
<item name="android:shadowDy">1</item>
<item name="android:shadowRadius">0.2</item>
<item name="android:textSize">13dp</item>
<item name="android:textStyle">bold</item>
<item name="android:background">#drawable/login_button</item>
<item name="android:focusable">true</item>
<item name="android:clickable">true</item>
</style>
Then applied this style to my theme file in themes.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="customTheme" parent="#android:style/Theme.NoTitleBar" >
<item name="android:editTextStyle">#style/login_edittext_style</item>
<item name="android:buttonStyle">#style/login_button_style</item>
<item name="android:textViewStyle">#style/login_textview_style</item>
</style>
</resources>
And finally added button itself to the layout file:
<Button
android:text="#string/login_text"
android:id="#+id/buttonSignIn"
android:layout_width="130dp"
android:layout_height="wrap_content">
</Button>
But if I click the button, then background image is not changed. Code is ok and all compiles nicely. I know that I have same image for two different states, but it doesn't work even for one state in emulator. Can anyone point me where is the problem?
EDIT:
Obviously normal state is working, because it gets it's image from selector xml file. Now i'm wondering why the other states are not...

I thought maybe is something to do with naming, so I named button state images with different name than login_button, because selector xml file has the same name. And I edited my selector xml file also.
Selector xml file:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Image display in background in select state -->
<item android:state_pressed="true" android:drawable="#drawable/login_btn_down" />
<!-- Image display in background in select state -->
<item android:state_focused="true" android:drawable="#drawable/login_btn_down" />
<!-- Default state -->
<item android:drawable="#drawable/login_btn" />
</selector>

Related

Android text selection handles have white background (instead of transparent)

The following screenshot shows my problem:
The text selection handles have a white background and overlay other UI elements. How can I make the background transparent?
Or the better question is actually: what could I possibly have done to make the background white?
Here is the style applied to the EditText:
<style name="TextInputLayout" parent="AppTheme">
<item name="android:background">#color/grey_50</item>
<item name="colorControlNormal">#color/grey_500</item>
<item name="colorControlActivated">#color/grey_900</item>
<item name="colorControlHighlight">#color/grey_900</item>
<item name="backgroundTint">#color/grey_900</item>
<item name="colorAccent">#color/grey_900</item>
<item name="colorPrimary">#color/grey_900</item>
<item name="android:textCursorDrawable">#null</item>
</style>
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">#color/grey_500</item>
<item name="colorPrimaryDark">#color/grey_500</item>
<item name="colorAccent">#color/grey_700</item>
<item name="android:colorBackground">#color/grey_50</item>
<item name="android:colorForeground">#color/grey_900</item>
<item name="android:textColorPrimary">#color/grey_900</item>
<item name="android:textColorPrimaryInverse">#color/grey_50</item>
<item name="android:textColorSecondary">#color/grey_900</item>
<item name="android:textColorSecondaryInverse">#color/grey_50</item>
<item name="android:windowBackground">#color/grey_50</item>
<item name="android:textColorHint">#color/grey_700</item>
<item name="android:colorActivatedHighlight">#color/grey_900</item>
<item name="colorControlNormal">#color/grey_700</item>
<item name="colorControlActivated">#color/grey_900</item>
<item name="colorControlHighlight">#color/grey_900</item>
<item name="android:textColorHighlight">#color/grey_500</item>
<item name="android:colorControlNormal" tools:targetApi="lollipop">#color/grey_700</item>
<item name="android:colorControlActivated" tools:targetApi="lollipop">#color/grey_900</item>
<item name="android:colorControlHighlight" tools:targetApi="lollipop">#color/grey_900</item>
<item name="android:stateListAnimator" tools:targetApi="lollipop">#null</item>
<item name="android:statusBarColor" tools:targetApi="lollipop">#color/grey_900</item>
<item name="android:navigationBarColor" tools:targetApi="lollipop">#color/grey_900</item>
</style>
Edit #1
The EditText's XML (note that I see the same behaviour with EditTexts and AppCompatEditTexts):
<android.support.design.widget.TextInputLayout
android:id="#+id/input_layout_home_autocomplete"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginBottom="#dimen/activity_horizontal_margin_small"
android:layout_marginTop="#dimen/activity_horizontal_margin_small"
android:layout_weight="3.5"
android:background="#null"
android:hint="#string/location"
android:padding="#dimen/activity_vertical_margin_medium"
android:theme="#style/TextInputLayout"
app:hintAnimationEnabled="true"
app:hintEnabled="true"
app:hintTextAppearance="#style/TextAppearance.TextInputLayout">
<AutoCompleteTextView
android:id="#+id/user_home_autocomplete"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="3.5"
android:dropDownWidth="match_parent"
android:inputType="textAutoComplete"
android:maxLines="1"
android:paddingTop="#dimen/activity_horizontal_margin_small" />
</android.support.design.widget.TextInputLayout>
The Phone I used for the screenshot runs Android 6.0.1 with OxygenOS 3.2.7
Getting rid of all #null elements did not work.
This could happen if you set a background color in your main theme , something like this
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
...
<item name="android:background">#color/white</item>
...
</style>
remove this property solve this issue for me , if you want to setup a background for all your screens set windowBackground instead.
<item name="android:windowBackground">#color/white</item>
As per the android docs, the theme is applied to views used in the layouts of entire activity or application. For individual views in the layout , we need to apply styles.
Ref: https://developer.android.com/guide/topics/ui/themes.html
The theme is applied as a common style for all the views in an activity or application.
Remove this from your theme <item name="android:popupBackground">????</item>
This happens because you set the background as part of the style, and declare android:theme="#style/TextInputLayout" as theme and not as style.
This makes that the children views of that view have the same behaviour including the text selection handler.
Move this line <item name="android:background">#color/grey_50</item> out of the style.
please set the background for the view :
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" android:color="YOUR_CUSTOM_COLOR" />
<item android:state_selected="true" android:color="#80000000" />
<item android:color="YOUR_CUSTOM_COLOR" />
</selector>
try this may help you
<?xml version="1.0" encoding="UTF-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Pressed State -->
<item android:state_pressed="true"
android:color="#FFFFFF" />
<!-- Focused State -->
<item android:state_focused="true"
android:color="#FFFFFF" /> <!-- use background color here -->
<!-- Default State -->
<item android:color="#000000" />
</selector>
set this property as background to your edit-text

styles and Buttons

i have made a style for the button to be seen in a "bolding" way.
but when i use the setEnabled(false) and setClickable(false) it make the button disabled but i can't see it because i am using a style , so how can i make the button more like "into" (as if it is clicked) when i use set Enable(false) ???
code:
signin.setClickable(false);
signin.setEnabled(false);
I don't want to discard the style but to modify it but i don't know how.
style:
<style name="btnStyleShakespeare" parent="#android:style/Widget.Button">
<item name="android:textSize">15sp</item>
<item name="android:textStyle">bold</item>
<item name="android:textColor">#FFFFFF</item>
<item name="android:gravity">center</item>
<item name="android:shadowColor">#000000</item>
<item name="android:shadowDx">1</item>
<item name="android:shadowDy">1</item>
<item name="android:shadowRadius">0.6</item>
<item name="android:background">#drawable/custom_btn_shakespeare</item>
<item name="android:padding">10dip</item>
thanks for any help.
You need to use a custom selector list which will be set as your button background.
Something like:
btnSelector.xml in your /drawable
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- when button is pressed (touched/clicked) -->
<item android:drawable="#drawable/button_selected" android:state_selected="true" />
<!-- When button is disabled, i.e clickable and enabled is set to false -->
<item android:drawable="#drawable/button_disabled" android:state_enabled="false"/>
<!-- Default, when button is clickable -->
<item android:drawable="#drawable/button_normal" android:state_enabled="true" />
</selector>
And you will have 3 different drawables each for clicked/pressed state, disabled state and normal state.
Then in your custom style change:
#drawable/btnSelector.xml
Create another XML file in res\color named something like text_color.xml (based on Adil Soomro's answer here):
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- disabled state -->
<item android:state_enabled="false" android:color="#000000" />
<item android:color="#FFFFFF"/>
</selector>
In your style.xml, replace
<item name="android:textColor">#FFFFFF</item>
to
<item name="android:textColor">#color/text_color</item>

Set selected item background color on Android dropdown navigation

I think this is an easy question, but I haven't been able to find an answer to my specific problem.
I've read this great article and would like to set the background color of the selected item on the Android Dropdown list on the stock ActionBar (I'm not using Sherlock and I'm targetting ICS+), as explained in the image link below:
So far I've set my theme in this way:
<resources>
<style name="AppBaseTheme" parent="android:Theme.Holo.Light">
<item name="android:dropDownListViewStyle">#style/MyDropDownListView</item>
</style>
<style name="MyDropDownListView" parent="android:style/Widget.Holo.ListView.DropDown">
<item name="android:listSelector">#drawable/ad_selectable_background</item>
</style>
</resources>
And this is my ad_selectable_background.xml:
<selector xmlns:android="http://schemas.android.com/apk/res/android"
android:exitFadeDuration="#android:integer/config_mediumAnimTime" >
<item android:state_pressed="true" android:drawable="#android:color/holo_blue_light" />
<item android:drawable="#android:color/transparent" />
</selector>
My dropdown view resource is:
adapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);
The pressed state works, but when you open the menu no selection is displayed.
I would like to set it to holo_blue_light using the selector, but I'm not able to find the correct syntax using XML.
I'm looking for an XML only answer if it's possible (i.e. not using any code). Thanks!
Apparently, it was quite simple!
I had to edit ad_selectable_background.xml to use the checked state (as I did before, but I was missing the theme below):
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android"
android:exitFadeDuration="#android:integer/config_mediumAnimTime" >
<item android:state_pressed="false" android:state_checked="true" android:drawable="#android:color/holo_blue_light" />
<item android:state_pressed="true" android:drawable="#android:color/holo_blue_light" />
<item android:drawable="#android:color/transparent" />
</selector>
And then edit the theme by adding the android:spinnerDropDownItemStyle item and disabiling the checkMark (as I didn't want the radio buttons), in this way:
<resources>
<style name="AppBaseTheme" parent="android:Theme.Holo.Light">
<item name="android:dropDownListViewStyle">#style/MyDropDownListView</item>
<item name="android:spinnerDropDownItemStyle">#style/MySpinnerDropDownItem</item>
</style>
<style name="MyDropDownListView" parent="android:style/Widget.Holo.ListView.DropDown">
<item name="android:listSelector">#drawable/ad_selectable_background</item>
</style>
<style name="MySpinnerDropDownItem" parent="android:style/Widget.DropDownItem.Spinner">
<item name="android:background">#drawable/ad_selectable_background</item>
<item name="android:checkMark">#null</item>
</style>
</resources>

Style android spinner

I'm trying to get my android app a bit more stylish and have made some progress but the spinner dropdown are giving me trouble. I've got a screenshot to show you the problem:
What I want is the white box in the background to be transparent, as in the same grey overlay over the back screen as the rest of the screen outside the dropdown.
Android 4.0, API 15 if I recall correctly.
As requested here's how I do it so far. These are snippets I think are relevant but I might have missed something.
Here's the xml for spinner:
<Spinner
android:id="#+id/edit_countrySpinner"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight="1"
android:entries="#array/edit_countryArray"
android:gravity="center"
android:prompt="#string/country_prompt" />
In my values/style.xml. If I change the color of the background here the background in the dialog do change, but all the rest of the backgrounds as well. I haven't figure out how to jus change the background in the dropdown dialog.
<style name="appcin" parent="#android:style/Theme.NoTitleBar.Fullscreen">
<item name="android:spinnerStyle">#style/spinnerStyle</item>
<item name="android:spinnerItemStyle">#style/SpinnerItem</item>
<item name="android:spinnerDropDownItemStyle">#style/SpinnerDropDownItem</item> -->
<item name="android:background">#FFFFFF</item>
</style>
<style name="spinnerStyle">
<item name="android:background">#drawable/pink_white_dropdown</item>
<item name="android:clickable">true</item>
</style>
<style name="SpinnerItem">
<item name="android:textColor">#993399</item>
<item name="android:background">#drawable/pink_white_dropdown</item>
<item name="android:maxHeight">10dip</item>
</style>
<style name="SpinnerDropDownItem">
<item name="android:textColor">#993399</item>
<item name="android:background">#FFFFFF</item>
</style>
I've tried adding this to the app theme but none of them made any difference, the background was still white.
<...theme....>
<item name="android:dropDownListViewStyle">#style/DropDownStyle</item>
<item name="android:dropDownSpinnerStyle">#style/DropDownStyle</item>
<item name="android:dropDownSelector">#style/DropDownStyle</item>
</... theme ...>
<style name="DropDownStyle">
<item name="android:background">#FFF000</item>
<item name="android:popupBackground">#FFF000</item>
<item name="android:cacheColorHint">#FFF000</item>
</style>
In drawable/pink_white_dropdown, just showing the same image for all the cases. pink_white_arrow is a 9patch image I've made. There are lots of guides, here's one I found by 30sec on google.
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_window_focused="false" android:state_enabled="true"
android:drawable="#drawable/pink_white_arrow"/>
<item android:state_window_focused="false" android:state_enabled="false"
android:drawable="#drawable/pink_white_arrow"/>
<item android:state_pressed="true"
android:drawable="#drawable/pink_white_arrow"/>
<item android:state_pressed="false"
android:drawable="#drawable/pink_white_arrow"/>
<item android:state_focused="true" android:state_enabled="true"
android:drawable="#drawable/pink_white_arrow"/>
<item android:state_enabled="true"
android:drawable="#drawable/pink_white_arrow"/>
<item android:state_focused="true"
android:drawable="#drawable/pink_white_arrow"/>
<item
android:drawable="#drawable/pink_white_arrow"/>
</selector>
Somewhere in these files I figure something should be made transparent, but I don't know where.
Remove the SpinnerStyle background attribute.
Remove this:
<style name="spinnerStyle">
<item name="android:background">#drawable/whitish_rectangle</item>
</style>
which is what draws the background white rectangle.
Building on the code in your question, here is a basic example on how you can style your Spinner:
The styles.xml file sets styles for the SpinnerItem and SpinnerDropDownItem:
<resources>
<style name="customtheme" parent="#android:style/Theme.Light">
<item name="android:spinnerItemStyle">#style/SpinnerItem</item>
<item name="android:spinnerDropDownItemStyle">#style/SpinnerDropDownItem</item>
</style>
<style name="SpinnerItem">
<item name="android:textColor">#993399</item>
<item name="android:background">#drawable/my_rectangle</item>
</style>
<style name="SpinnerDropDownItem">
<item name="android:textColor">#993399</item>
<item name="android:background">#drawable/my_rectangle</item>
</style>
</resources>
For testing, I've created a bright-colored drawable shape, called my_rectangle.xml. Replace this with your own drawable:
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<solid android:color="#ff0000" />
<stroke
android:width="1dp"
android:color="#888888" />
</shape>
Add the Spinner to the Activity's layout:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="40dip">
<Spinner
android:id="#+id/edit_countrySpinner"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:entries="#array/location_names"/>
</LinearLayout>
This produces:
with no white square in the background.
add
<item name="android:popupBackground">#null</item>
to your spinner style.
style android spinner
Spinner Widget requires two different custom layouts, one for the view to be displayed and another for the drop down list!
In this example blog on Custom Spinner Android, we will guide you how to create a custom spinner in android studio which will have:
Customized Background for Selected Item
Custom Selected Item Text Color
Text Color for Dropdown
Background for Drop down List
Spinner Animation
Link here: https://androiddvlpr.com/custom-spinner-android/
I had the same problem, and the below code worked for me:
<item name="android:popupBackground">#null</item>

How to set background colour for a button in selected and pressed states that has #drawable image

In the image above you can see the first Home button is in a pressed state. It has no background colour and I need it to to be black (preferably shaded similar to the default color shown for the other buttons at the same time as keeping the image). I also need to change the text color to white.
I have XML code that changes the image depending on state but I'm at a total loss as to how to change the background colour at the same time.
The code I have for this particular button is:
<?xml version="1.0" encoding="utf-8"?>
<selector
xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true"
android:drawable="#drawable/ic_tab_about_pressed" /> <!-- pressed -->
<item android:state_selected="true"
android:drawable="#drawable/ic_tab_about_pressed" /> <!-- pressed -->
<item android:state_focused="true"
android:drawable="#drawable/ic_tab_about_pressed" /> <!-- pressed -->
<item android:drawable="#drawable/ic_tab_about_unpressed" /><!-- default/unchecked -->
</selector>
and:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="MnuBtnStyle" parent="android:style/Widget.Button">
<item name="android:ellipsize">marquee</item>
<item name="android:scrollHorizontally">true</item>
<item name="android:singleLine">true</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:layout_width">fill_parent</item>
<item name="android:layout_marginTop">1dip</item>
<item name="android:layout_marginBottom">1dip</item>
<item name="android:textSize">10dp</item>
<item name="android:layout_weight">1</item>
<item name="android:textColor">#000000</item>
<item name="android:typeface">monospace</item>
</style>
</resources>
How I can achieve this?
UPDATE
My requirements for the button are:
I must be able to change the image for different states
I must be able to change the text using strings or in code not bothered which
I must be able to set the button face colour for default and differing states.
Am I going to need to create a new custom control to achieve this?
If so, what would be my best approach, bearing in mind that this is my first Android project?
Try to use ImageButton instead of Button:
<ImageButton
android:layout_width="60dip"
android:layout_height="60dip"
android:src="#drawable/state_btn_icon"
android:background="#drawable/state_btn_background"/>
state_btn_icon.xml defines different states for the icon of the button
and
state_btn_background defines different states for the background

Categories

Resources