I know the title of my question sounds like a question that already has been answered.
However, my question is somehow different and I couldn't find a solution
In my app I have a login screen with two EditText. I use a modified version of the Theme.Holo.Light.
The EditTexts look like this:
As you can see there is a border below the text in different color, depending on the state of the EditText.
So here is my question: Can anyone tell me how to change the color of these borders??
I hope anyone can help me! Thanks in advance!
EDIT:
Unfortunately, I ran into an other problem:
I was able to change the background image using solution of dtmilano.
However, adding a StateListDrawable removed the padding of the EditView. If I add text, the cursor is at the most left position, not inside the depicted border as before.
Up to now, I wasn't able to introduce this padding, e.g. with android:paddingLeft.
Can anyone tell me which property got overwritten by using this selector
<?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/edittext_pressed"
/> <!-- pressed -->
<item
android:state_focused="true"
android:drawable="#drawable/edittext_focused"
/> <!-- focused -->
<item
android:drawable="#drawable/edittext_default"
/> <!-- default -->
</selector>
and an EditText like this:
<EditText
android:id="#+id/loginEmail"
android:background="#drawable/edittext_modified_states"
android:inputType="textEmailAddress"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
You should use a StateListDrawable as the background of your EditText in your theme so you can handle the different states.
Related
I'm porting my app to Chrome OS and there are a few places in the app where arrow key navigation works, but the current focused element is not highlighted in any way. I've found that whenever I set a background color for an element like
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
...
android:background="#color/white" >
...
</LinearLayout>
then the default highlighting of the focused element will not show. Removing this will show the default background (which is not always the same as what I want).
Also, in cases where I use a selector in a ListView, the background is in front of the intended highlighting drawable (which can be seen if the color is somewhat transparent).
<?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_focused="true" android:drawable="#drawable/list_focused" />
<item android:state_pressed="true" android:drawable="#drawable/list_pressed" />
<item android:drawable="#color/white" />
</selector>
This is even more strange since I was under the (possibly incorrect) impression that selectors will only pick one of the items.
I can't post too much code since this is work code, but this is happening throughout the app wherever there's a list.
If you have a selector defined for the views in your ListView, set the drawSelectorOnTop property to true on your ListView, as per the docs.
So my graphics artist came to me with a really cool layout for controls on our new app. The problem is getting these images laid out since most views in android are rectangular. See image for what I have to work with.
Any idea how to layout these buttons so they shape around each other if that makes sense?
If the problem is the layout, you can draw the buttons and save it as png. You can layout your app by RelevantLayout . And use the "selector" to change the button image when user press an so on.
selector example: "drawable/selector1.xml"
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_focused="true" android:state_pressed="true" android:drawable="#drawable/buttonClicked" /> <!-- focused and pressed-->
<item android:state_pressed="true" android:drawable="#drawable/buttonClicked" /> <!-- pressed -->
<item android:drawable="#drawable/button" /> <!-- default -->
</selector>
use it like this:
android:background="#drawable/selector1"
the Views in android are rectangular, that is correct. The only workaround I see here: use multiple "invisible" Buttons (alpha set to 0). You can position them around the screen and assign the same action to some of them. Of course you'll need to implement the OnClickListener and use switch-case.
I have an Android application that uses a MapView with an ImageButton control (to move to the user's current location) I've added in the top right-hand corner. The problem I am having is that the ImageButton control's background is too transparent, but changing it with android:background="#BBFFFFFF" alters both the size of the background and removes the blue "flash" that you normally see when the button is pressed - two qualities I wish to retain.
I start with something like this:
<RelativeLayout 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" >
<com.google.android.maps.MapView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/mapview"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:clickable="true"
android:apiKey="my api key"
/>
<ImageButton android:id="#+id/googlemaps_select_location"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"
android:layout_marginTop="13dp"
android:layout_marginRight="13dp"
android:src="#drawable/device_access_location_found"/>
</RelativeLayout>
Which achieves something that looks like this:
So then I add:
android:background="#BBFFFFFF"
And I get this:
Note that although this is basically the level of opacity I want, changing the background has affected the padding, and also doesn't display a blue "flash" when pressed (which obviously isn't illustrated in this question).
So my question is, how can I change just the background color/opacity in the non-pressed state, while retaining the other visual qualities of the button? I had a brief read about Android styles and themes, but can't even figure out where this button is getting its style/theme from and how I would go about just overriding the background color/opacity while retaining all of the other visual features.
Issue
When you are assigning a fixed color to the a view background, you are replacing the default background in the view by the fixed color you define.
In reality, the background of a button is not a simple fixed color. It's a state list of color or drawables, which means, depending on button status (focous, selected, pressed, etc.) a different background is used, resulting in the "flash" animation you see when button is pressed. If you replace this state list by a simple fixed color, not depending on buttons status, you get a fixed background (i.e. not changing when button is pressed).
Resolution
There is a xml parameter that can be used to change the image view's alfa (i.e. transparency) which is:
android:alpha="1"
where the value 1 above can be any float between 0 and 1, being 1 the maximum opacy.
However, I believe this is not solving your issue, because you want to change the alfa of background not the image alfa, if I correctly understood your issue. Anyway the default seems to be 1.
One possibility the should work for you is to define a selector to be used as background. The selector will choose the drawable based on his status.
Example
<?xml version="1.0" encoding="UTF-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" android:drawable="#android:color/darker_gray" />
<item android:drawable="#android:color/white" />
</selector>
Save the xml file above in your drawable-xxxx folder with the name my_selector
In this example I'm using standard android colors, but you can define your own colors. You need to assigne a color for each different button status that you want to have a different color.
Then you need to define your ImageView backgroung to be the selector you defined above:
<ImageButton
android:id="#+id/googlemaps_select_location"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_marginRight="13dp"
android:layout_marginTop="13dp"
android:background="#drawable/my_selector"
android:src="#drawable/device_access_location_found" />
With the above changes, the bacground color used by the button will change when the button is pressed and you can have the "flash" effect.
I ended up using a style to inherit the look of Widget.ImageButton with just a few minor tweaks for my purposes:
My /res/values/styles.xml file now looks like:
<resources>
<style name="AppTheme" parent="android:Theme.Light" />
<style name="my_loc_btn_style" parent="#android:style/Widget.ImageButton">
<item name="android:layout_marginTop">8dp</item>
<item name="android:layout_marginRight">8dp</item>
</style>
</resources>
And my layout file has:
<ImageButton android:id="#+id/googlemaps_select_location"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"
style="#style/my_loc_btn_style"
android:src="#drawable/device_access_location_found"/>
This seems to have inherited a background from Widget.ImageButton that seems to be just slightly transparent, which is what I was after anyway, so I don't set the transparency at all now.
I have two images(Light Red and Dark Red) for the button and i want to give Flashing Effect to that button that initially it glows from light-red to Dark-red and then when it pressed, its state will be changed to dark red. i try to sort out the Solution for this but every-where i see Fade-in and Fade-out solution using one image, but i want to use both images.
Please let me know if any function exists there for giving Flashing Effect between two images or i will have to make it manually.
For this I think you have to use customized xml drawable for your button,
And for different state of button you can use different images, to apply style
Try this,
example:
XML file saved at res/drawable/button.xml:
<?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/button_pressed" /> <!-- pressed -->
<item android:state_focused="true"
android:drawable="#drawable/button_focused" /> <!-- focused -->
<item android:state_hovered="true"
android:drawable="#drawable/button_focused" /> <!-- hovered -->
<item android:drawable="#drawable/button_normal" /> <!-- default -->
</selector>
This layout XML applies the state list drawable to a Button:
<Button android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:background="#drawable/button" />
For more info look at Android - Drawable Style.
And nice example Adding Gradient Effects to Android Button.
SO post how to set image button backgroundimage for different state?.
You will need to work with associating Animations to Buttons.
Here are some links to tutorials :
link
video tutorial
I would like to know if we can customise a button to show like the Apple iOS button in Android?
The button that I would like to draw is
If this is possible, can someone give me the pointers to it.
Thanks.
Yes, it can be done. I'll leave the philosophy to others. The button background can be replaced with anything you choose. I saved your back icon above as iphoneback_normal.png.In photoshop I created two more states--focused and pressed
<Button
android:id="#+id/buttonNoThx3"
android:text="Back"
android:layout_height="fill_parent"
android:background="#drawable/iphonebackbutton"
/>
Create a state list iphonebackbutton drawable xml:
<?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/iphoneback_pressed" />
<item android:state_focused="true"
android:drawable="#drawable/iphoneback_focused" />
<item android:drawable="#drawable/iphoneback_normal" />
</selector>
You should take a look at 9-patch png.
But using iOS-oriented approach on Android may result in poor User Experience.