Remove focus border of EditText - android

How can I remove the border with appears when focusing an EditText View?
I need it cause this view has little space in the screen, but without the border it's enough. When running on Emulator an orange border appears, on Device a blue one.

Have you tried setting the background of the EditText to a transparent colour?
<EditText
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:hint="#string/hello"
android:background="#00000000"
/>

<EditText
android:id="#+id/edittext"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#android:drawable/editbox_background_normal"
/>

It is possible. However I would not recommend it because users are used to certain metaphors and you should not change the general UX.
You can apply different styles to your views. In your case it sounds like you want an EditText View element which looks like a TextView element. In this case you would have to specify other backgrounds for the EditText depending on the state of the View element.
In your desired layout.xml you assign a background to your EditText:
<EditText
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:hint="#string/hello" android:background="#drawable/custom"
/>
Then you create the custom.xml in your drawable folder and add the following:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_window_focused="false" android:state_enabled="true"
android:drawable="#drawable/textfield_default" />
<item android:state_window_focused="false" android:state_enabled="false"
android:drawable="#drawable/textfield_disabled" />
<item android:state_pressed="true" android:drawable="#drawable/textfield_default" />
<item android:state_enabled="true" android:state_focused="true" android:drawable="#drawable/textfield_default" />
<item android:state_enabled="true" android:drawable="#drawable/textfield_default" />
<item android:state_focused="true" android:drawable="#drawable/textfield_disabled" />
<item android:drawable="#drawable/textfield_disabled" />
</selector>
Those are the possible states of your EditText View element. Normally you can access Android platform drawables directly by using #android:drawable/textfield_default, but in this case the textfield drawables are private so you have to copy them into your own drawable folder. The original resources can be found in your SDK installation folder at ANDROID_HOME\platforms\android-(API LEVEL)\data\res\drawable-(*dpi)\.
Once you are done you end up with an EditText which looks like a TextView but completely without those borders. Those orange borders you saw in the emulator are the default Android drawables. The blue ones are vendor specific (possibly Samsung).
Hope that helped and didn't confuse that much.

This is the fastest solution:
<EditText
android:id="#+id/edittext"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#00000000"
/>

You can keep the background color as transparent to remove the EditText border on focus.
Method 1
<EditText
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#00000000"
/>

Related

How can I change highlight (focused) color of the triangle in a Spinner

I am currently working on an Android TV app, so the focus color is very important.
I have added some spinners in my layout and I am trying to change the selector color.
Primary/secondary/Accentcolor are not doing anything.
First thing I have is to put the spinners in layout. The top one is the one I am working on, and the bottom one is the default Appcompat
On the top one, I have added a color selector:
<Spinner
android:id="#+id/spinner1"
android:layout_width="match_parent"
android:background="#drawable/selector"
android:layout_height="wrap_content"
android:focusable="true"
android:padding="0dp" />
<Spinner
android:id="#+id/spinner2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:focusable="true"
android:padding="0dp" />
selector.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true"
android:drawable="#color/pressed" />
<item android:state_focused="true"
android:drawable="#color/focused" />
<item android:state_selected="true"
android:drawable="#color/selected" />
<item android:state_hovered="true"
android:drawable="#color/hovered" />
<item android:drawable="#color/transpa" />
</selector>
This is obvious, but the triangle has been removed due to the new background which is simply a rectangle.
What I would like to achieve is this selection but with my higlight color, and not the default grey:
And this is current result:
Just found the answer :-p
<item name="colorControlActivated">#android:color/holo_blue_dark</item>
<item name="colorControlHighlight">#android:color/holo_blue_dark</item>

Change Color onClick and background on Focus

i have a ListView in my Navigation Drawer and want it looks like the Playstore App or Youtube App.
Means onClick changing FontColor for Example to red and when i just hold it the background should turn grey.
Do i have to use 2 onitemclicklistener?
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="48dp">
<ImageView
android:id="#+id/icon"
android:layout_width="25dp"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_marginLeft="12dp"
android:layout_marginRight="12dp"
android:contentDescription="#string/DrawerListIcon"
android:src="#drawable/ic_home"
android:layout_centerVertical="true" />
<TextView
android:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_toRightOf="#id/icon"
android:textSize="14sp"
android:textStyle="bold"
android:minHeight="?android:attr/listPreferredItemHeightSmall"
android:textAppearance="?android:attr/textAppearanceListItemSmall"
android:textColor="#color/DrawerListFontColor"
android:gravity="center_vertical"
android:paddingRight="40dp"
android:paddingLeft="0dp"/>
</RelativeLayout>
Tried with Item and Selector. First thing Font Color don't change when i pressed the Button. Second the background of the Relative Layout turns blue insead of Grey.
drawer_list_font.xml
<?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:state_focused="true"
android:color="#color/DrawerListFontColorPressed"
/>
<item android:color="#color/DrawerListFontColor"/></selector>
drawer_list_background.xml
<?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:state_focused="true"
android:color="#color/DrawerListBackgroundFocused"
/>
<item
android:color="#color/DrawerBackground"
/></selector>
I had to use android:drawable instead of background on the relative Layout. On the Textview Android Stuio accepted android:color.
This is changed by changing view from ur java file at every click event u can change the view. U have to make multiple view ie xml files for that. Which are dynamically changed or u can also send parameters to a function and create an xml at runtime but that will be too deep for u
No need for listeners at all.
A better approach here is to create drawable XML's with definitions for every state ("pressed", "focused", etc).
Check out Color State List resources
For example:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_focused="true" android:state_pressed="false"android:color="#80000" />
<item android:state_focused="true" android:state_pressed="true" android:color="#ff0000" />
<item android:state_focused="false" android:state_pressed="true" android:color="#ff0000" />
<item android:color="#color/DrawerListFontColor" />
</selector>

How can I have an ImageView selector when using Picasso (Square) on Android?

I know that Picasso sets the "src" therefore leaving the "image.background" in peace, but I cannot seem to make the ImageView respond to a selector (as in when it's touched to show the standard holo selector or any custom one).
Does anybody have a working sample? I must be missing something. I've tried different selectors but I don't see the touched state.
I've tried doing a setselected(true) in onClick() but I know that this is something that the View handles automatically if there's a drawable with states like:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_window_focused="false" android:drawable="#android:color/transparent" />
<!-- Even though these two point to the same resource, have two states so the drawable will invalidate itself when coming out of pressed state. -->
<item android:state_focused="true" android:state_enabled="false" android:state_pressed="true" android:drawable="#drawable/abc_list_selector_disabled_holo_light" />
<item android:state_focused="true" android:state_enabled="false" android:drawable="#drawable/abc_list_selector_disabled_holo_light" />
<item android:state_focused="true" android:state_pressed="true" android:drawable="#drawable/abc_list_selector_background_transition_holo_light" />
<item android:state_focused="false" android:state_pressed="true" android:drawable="#drawable/abc_list_selector_background_transition_holo_light" />
<item android:state_focused="true" android:drawable="#drawable/abc_list_focused_holo" />
</selector>
The Java code to load the image is:
Picasso.with(mContext).load(url).error(R.drawable.error).fit().into(holder.someIV);
And the XML for that someIV looks like:
<ImageView
android:id="#+id/list_item_image"
android:layout_width="match_parent"
android:layout_height="#dimen/mixset_list_image_size"
android:layout_marginTop="1dp"
android:layout_marginLeft="1dp"
android:layout_marginRight="1dp"
android:contentDescription="#string/mixes"
android:scaleType="centerCrop"
android:background="#drawable/mix_list_art_selector"
android:cropToPadding="false" />
The background is set to the above selector.
Any ideas? Thanks.
Here's what I did:
what I wanted to highlight was an ImageView that was part of the layout of a list_item (technically speaking, a row).
But I didn't want to highlight the whole row, just an image inside it.
I had to wrap the ImageView in a FrameLayout.
<FrameLayout
android:id="#+id/list_item_image_wrapper"
android:layout_width="match_parent"
android:layout_height="#dimen/mixset_list_image_size"
android:clickable="true"
android:foreground="#drawable/mix_list_art_selector">
<ImageView
android:id="#+id/list_item_image"
android:layout_width="match_parent"
android:layout_height="#dimen/mixset_list_image_size"
android:layout_marginTop="1dp"
android:layout_marginLeft="1dp"
android:layout_marginRight="1dp"
android:contentDescription="#string/mixes"
android:scaleType="centerCrop"
android:clickable="false"
android:focusable="false"
android:cropToPadding="false" />
</FrameLayout>
… and also move the Click Listeners to the FrameLayout.
Thanks to #jason_t for the pointer to the solution.
Please note that for other widgets like TextView, the above is likely not needed.

disabling editText but with a different color

<EditText
android:id="#+id/myEditText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ems="10"
android:enabled="false" >
</EditText>
I have the above edit text which is disabled. I only take values from somewhere else and insert it there, the user can not type inside of it. However, the color of the edit text when in disabled form is too gray and not visible to the user sometimes. I prefer it to appear black. Is there any basic functionality I am not aware than can change the color of edit text when in disabled mode ?
Any other work around works fine too.
Your layout:
<EditText
android:id="#+id/myEditText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ems="10"
android:enabled="false"
android:background = "#drawable/edittextdrawable.xml">
</EditText>
edittextdrawable.xml:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_enabled="false"
android:drawable="#drawable/PUT DRAWABLE HERE" />
<item android:state_enabled="true"
android:drawable="#drawable/PUT DRAWABLE HERE" />
</selector>
Try to use statelist xml drawable, and set this to your EditText's background:
<?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/bankszamlak_pressed" /> <!-- pressed --> <item android:state_focused="true"
android:drawable="#drawable/bankszamlak" /> <!-- focused --> <item android:drawable="#drawable/bankszamlak" /> <!-- default --> </selector>
for further information check this link
Just set text color to black will make it better:
android:textColor="#android:color/black"
You should use TextView if you don't want the user to type into. Then you don't need to use disable to stop user from typing into it.

Android Custom EditText is resized by keyboard open and close

i implemented a custom background for my EditText fields because i think the defaults for the EditTexts are too tall & have too much padding. anyway, the new EditText drawable backgrounds are displaying fine, BUT the fields shrink slightly when i open the keyboard and expand to their original (custom) size when i close the keyboard. this behavior must be overridable in some way that i just haven't stumbled across. can anyone help, please? I've read the IMEOptions article at the dev android site and nothing there really jumps out at me at as a possible solution to this problem. thanks!
here is my EditText - each EditText is in its own layout because i needed to add padding BETWEEN the fields:
<LinearLayout android:layout_height="wrap_content"
android:layout_width="fill_parent" android:orientation="vertical" android:paddingBottom="5dip" android:paddingLeft="3dip" android:paddingRight="3dip">
<EditText android:id="#+id/join_firstName"
android:layout_width="fill_parent" android:layout_height="wrap_content"
android:background="#drawable/joinedittextselector" android:padding="5dip" /> <!-- android:layout_weight="1" -->
</LinearLayout>
here is my selector:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_window_focused="false" android:state_enabled="true"
android:drawable="#drawable/join_field_bg_default" />
<item android:state_window_focused="false" android:state_enabled="false"
android:drawable="#drawable/join_field_bg_default" />
<item android:state_pressed="true" android:drawable="#drawable/join_field_bg_default" />
<item android:state_enabled="true" android:state_focused="true"
android:drawable="#drawable/join_field_bg_selected" />
<item android:state_enabled="true" android:drawable="#drawable/join_field_bg_default" />
<item android:state_focused="true" android:drawable="#drawable/join_field_bg_selected" />
<item android:drawable="#drawable/join_field_bg_default" />
i've tried adjustResize and adjustPan for the android:windowSoftInputMode setting of the activity that the EditText is used in and neither have worked. thanks again for any advice on this!
You would probably have to provide images for the various states defining them in an xml resource. People do this a lot for buttons.

Categories

Resources