I have a problem with EditText background like this
<EditText
android:id="#+id/edit"
android:layout_width="fill_parent"
android:layout_height="35sp"
android:singleLine="true"
android:layout_marginLeft="5px"
android:layout_marginRight="5px"
android:layout_marginTop="5px"
android:textAppearance="?android:attr/textAppearanceSmall"
/>
alt text http://i765.photobucket.com/albums/xx299/trieutrinhtrinh/edittext.jpg
After try to set the background, It look worse
<EditText
android:id="#+id/edit"
android:layout_width="fill_parent"
android:layout_height="35sp"
android:singleLine="true"
android:layout_marginLeft="5px"
android:layout_marginRight="5px"
android:layout_marginTop="5px"
android:textAppearance="?android:attr/textAppearanceSmall"
android:background="#ffffff"
/>
alt text http://i765.photobucket.com/albums/xx299/trieutrinhtrinh/edittext2.jpg
What's happen with EditText background? How to make EditText keep default style?
Here is 2 Solution to change background of EditText i have investigate before, hope it can help you:
★Issue:
When set Background to EditText it look so terrible
★Analysys:
EditText used ninepath image for background. Their used a selector to change background image base on current state of EditText (Enable/Focus/Press, Default)
★There are two solution to solver this problem, each solution have both advantage and disadvantaged:
★Solution1:
Create custom yourself EditText (follow this solution we have freely change view of EditText.
▲Advantage:
Your freely render EditText view follow your purpose, No need to create Ninepath image as current implement of Android EditText. (Your must provider IF in your EditText to change background smoothly base on state of EditText (Enable/Focus....)
Reused able and more custom in case you want to change color of Background or add more color
▼Disadvantage:
Take much effort to create and test your custom EditText.
(I choose solution 2 so have no demo implement of solution 1, if any one follow this solution feel free to share with us your demo code)
★Solution2:
Used selector as Android implement
❶Create xml file call edittext_selector.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/edittext_selector">
<!-- Image display in background in select state -->
<item
android:state_pressed="true"
android:drawable="#drawable/your_ninepath_image">
</item>
<!-- Image display in background in select state -->
<item
android:state_enabled="true"
android:state_focused="true"
android:drawable="#drawable/your_ninepath_image">
</item>
<!-- Default state -->
<item android:state_enabled="true"
android:drawable="#drawable/your_ninepath_image">
</item>
</selector>
❷On EditText xml set selector:
<EditText
...
android:background="#layout/**edittext_selector**"
...
</EditText>
★Note:
● In this demo code i was remove some behavior of view state, refer android implement for detail behavior (focus/unfocus, enable/disable, press, selected ...)
● Take care order of item in your selector. Difference order of item in selector xml file will have difference background.
▲Advantage:
Simple, just create selector and set selector to background, in case you want more color, just set more selector then set by code.
▼Disadvantage:
Take effort to create ninepath image for selector, in case you want change color or add more color you must create more image and selector. So it less robust than Solution1
This is my investigate to handler background of image, so it may right or wrong, if you have better solution or explain, feel free to share with us.
I was implement follow solution 2 and it worked.
My solution is a single line of code:
<your-widget-component-that-has-a-background-color>.getBackground().setColorFilter(Color.<your-desired-color>, PorterDuff.Mode.MULTIPLY);).
It breaks down like this:
"getBackground()" fetches the background from the component
"setColorFilter" will call a filtering on the background image itself
"Color.<your-color-here>" determines what color you want to pass onto the filter
"PorterDuff.Mode.<your-desired-filter-mode>" sets the kind of manipulation you would like to do with the given color and the fetched background image.
People with knowledge of image editing software might recognise the mode. Each mode has a certain effect on how the color is applied to the background image. To simply "override" the color of the image, while preserving its gradients, borders and such, use MULTIPLY.
If you set your EditText background to a color you will effectively suppress Android's default background which is probably a Nine Patch but definetely not just a simple color. As result - you will get a simplest form of EditText - a square box. Here's slightly outdated list of built-in drawables to give you some idea
If you wish to edit the color of the Android background on the fly without changing the background image completely, try the following: (it is probably not the best solution but it works):
YourEditText.getBackground().setColorFilter(getResources().getColor(R.color.your_color), PorterDuff.Mode.MULTIPLY);
You don't need to create the image. There is a built in image in the android system that you can use.So edit your EditText in xml as following;-
<EditText
android:id="#+id/editText1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="30dp"
android:layout_marginRight="30dp"
android:layout_marginTop="10dp"
android:hint="#string/campaign_message"
android:inputType="textMultiLine"
android:background="#android:drawable/editbox_background_normal"
android:minHeight="80dp" >
</EditText>
Note this line : android:background="#android:drawable/editbox_background_normal"
As I think you should change background Color, not the background. Because it's using xml custom shape.
A drawable to use as the background. This can be either a reference to a full drawable resource (such as a PNG image, 9-patch, XML state list description, etc), or a solid color such as #ff000000 (black).
May be a reference to another resource, in the form #[+][package:]type:name or to a theme attribute in the form ?[package:][type:]name.
May be a color value, in the form of #rgb, #argb, #rrggbb, or #aarrggbb.
Check out http://www.androidworks.com/changing-the-android-edittext-ui-widget if you want to style your EditText's.
I had to use SRC_ATOP for it to work for me
mEditText.getBackground().setColorFilter(Color.RED, PorterDuff.Mode.SRC_ATOP);
Related
Hi guys im new in android stuff and i have a problem with a button when color change, because when it changes the button grows a bit and i dont know why. My code of the button click is below.
produzirbt.setBackgroundColor(Color.rgb(38, 198, 219));
Toast.makeText(getApplicationContext(), "Avaria iniciada.", Toast.LENGTH_SHORT).show();
Xml
<Button
android:layout_width="150dp"
android:layout_height="100dp"
android:text="Pausa"
android:id="#+id/Pausa"
android:textSize="50px"
style="#style/Widget.AppCompat.Button.Colored"
android:layout_above="#+id/Avaria"
android:layout_toRightOf="#+id/terminaliniciado"
android:layout_toEndOf="#+id/terminaliniciado" />
In order to keep button size use setColorFilter() method.
In your case:
produzirbt.getBackground().setColorFilter(ContextCompat.getColor(this, R.color.your_color), PorterDuff.Mode.SRC_ATOP);
Your button by default has a backgrond definded by some xml file. It contains backround color, corner radiuses and padding. Then in java code you change this style to plain color and padding becomes zero. To prevent size changing you should define base background with a color. Like this:
<Button
android:layout_width="150dp"
android:layout_height="100dp"
android:text="Pausa"
android:id="#+id/Pausa"
android:textSize="32sp"
android:background="#color/my_button_color"
android:layout_above="#+id/Avaria"
android:layout_toRightOf="#+id/terminaliniciado"
android:layout_toEndOf="#+id/terminaliniciado" />
A the same time using color for button is a hacky method. It'll be better to define normal style as the documentation says.
Can someone please guide me how exactly can i create a circular buttons and textview in android apps, I am still a new into android development. Please help
You cannot create a real circular view (button or textview) in android - all views are rectangular. That said, you can imitate the look of a circular button by giving it a circular background. There are several ways of doing this. One simple way would be to create a PNG image of a circle, save it in your drawable folder and then set it as a background for your button:
<Button android:background="#drawable/circle_bg" .../>
Another way would be to use custom shapes to draw a circle:
<shape android:shape="oval" ...>
<solid android:color="#FFFFFF"/>
</shape>
Save that as an XML file in your drawable as circle.xml and then reference it in your layout:
<Button android:layout_width="40dp" layout_height="40dp"
android:background="#drawable/circle" ... />
This will create a circular button with 20dp radius.
Of course, you may want to combine this with state selectors to get the highlighted states on touch or focus.
There are loads of examples on the internet. Just search.
As some1 mentioned, to make your custom buttons you've to define Styles:
Custom circle button
About TextView: What do you want to do? Change font? Change colour? Change Size?
You've XML attributes for TextViews if you're doing this by XML. Except to change font, that it was implemented in 4.1.
android:text="TextView"
android:textColor="#288BA2"
android:textSize="30sp"
Is it possible to add an image(view) on top of a button (which as a background image)?
I'm porting an iOS app to Android and it wasn't a problem on iOS, but I'm wondering if it is the right approach on Android because of layouts.
Edit :
To clarify, check this screen shot :
http://a4.mzstatic.com/us/r1000/062/Purple/v4/7c/4b/cd/7c4bcd53-ba55-94d7-a26c-ce1bfe040003/mza_2736801523527387264.320x480-75.jpg
I need to do the bottom left button "carte" (card in french)
I need :
a button with a background image
an image displayed on top of the button which is loaded from internet (a card , there is a lot of different and news cards are added daily, in the screnshot it s "MIDI PASS" )
a text localised on the button , so I cant use Imagebutton class.
It is not quite clear what you want to achieve, but the following may be helpful for you:
Use an ImageButton
Set the Image as the background of the button either in XML (using android:background) or in code (using setBackgroundResource)
Update:
Looking at your updated requirements, it would be better to use a custom component to achieve what you want.
Your question is somewhat unclear but from what i understood, following may work for you:
<ImageButton android:id="#+id/imgButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/bg_image"
android:src="#drawable/top_image"/>
Hope it will be helpful.
UPDATE:
If Your background is common, then you can set the bitmap using following code:
((ImageButton)findViewById(R.id.imgButton)).setImageBitmap(bmp);
Here, you will need to get the bitmap of the card image in bmp variable.
You can also use an ImageView and implement the onClickListener.
Yes it is possible.
Use an ImageButton then....
set your android:src="#drawable/foreground Image"
set your android:background="#drawable/background Image"
So if you wanted a an apple for the background image and a 3-d word "apple" for your foreground image.
You could try something like this:
First, you create a selector for the button in the res/drawable/ folder (let's call it selector_button.xml):
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:drawable="#drawable/image_resource_for_button_pressed"
android:state_pressed="true" />
<item android:drawable="#drawable/image_resource_for_button_pressed"
android:state_focused="true" />
<item android:drawable="#drawable/image_resource_for_button_normal" />
</selector>
Here you can define as and android:drawable not just #drawable's, but #color's or #layout's, too. If you want a more complex layout, you should define one with the background image of the button and another image on top of it using a RelativeLayout for example.
In order to do this, you have to have image_resource_for_button_pressed.png (for pressed and focused state) and image_resource_for_button_normal.png (for normal state) in your res/drawable/ folder.
After that, you create a button, like this:
<Button
android:id="#+id/aButton"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#drawable/selector_button"
android:text="Hardcoded string" />
This approach helps you maintain code readability, since you just extracted the changing of the image resource into an .xml file.
Pretty much what the title says. I'm wanting the user to have the choice to customize the boarder of a 9 drawable I have. Is something like that possible or do I need to use a different method? Right now, I think it won't work and it will mess up the 9 patch.
Can you post a picture of your 9-patch? It might be possible to extract parts of it to another type of drawable, then layer the customizable part (drawn with user defined color) under the fixed portions using a layer-list.
[Update] Based on the pic you posted, I'd trash the layer list idea, but we can still work something out. The idea would be to remove the colored border and internal dark background from the 9-patch entirely (fill that area in with the shadow color and opacity). Then nest 3 layouts in each other. The first would use the 9-patch as a background. The second would use the user-defined color as a background. The third would use your panel color as a background. The 9-patch would provide the proper margins to position the second (user-color) layout, and then you'd just add a layout_margin attribute to the second panel to position the inner most layout a few dps in.
<LinearLayout
android:id="#+id/PanelOuter"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/shadow_nine_patch">
<LinearLayout
android:id="#+id/PanelUserBorder"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="#dimen/custom_border_width"
android:background="#color/dialog_border_color_default">
<LinearLayout
android:id="#+id/PanelContent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="#dimen/custom_dialog_content_margin"
android:background="#color/dialog_inner_color">
</LinearLayout>
</LinearLayout>
</LinearLayout>
Of course, you'd be responsible for finding the PanelUserBorder view in code and calling setBackgroundColor() with the proper user-defined color.
maybe you could tint it by putting a 50% transparent view overtop the button.
after thinking about it i thought maybe you could transform the color by bitmap:
How to change Bitmap image color in android?
I would like my app to have a day of week selector with multiple day selection capability. I'm using ToggleButtons for this right now, but because of the indicator lights a ToggleButton takes too much space on the screen. Without the lights, my ToggleButtons would look like normal (toggleable) Buttons and they could fit in one row. How can I hide the lights?
The answer is this part:
android:background="#android:drawable/btn_default"
For example, following will make the light disappear and toggle button would look like a default button, but with the toggle functionality:
<ToggleButton android:id="#+id/your_btn"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textOn="On" android:textOff="Off"
android:background="#android:drawable/btn_default" />
You can use a custom android:background drawable for them, that will override the graphics including the indicator light. If you look at Android: using framework drawables in custom button selector, there's instructions for copying resources from the SDK to your own project. You presumably could copy the platform normal button drawable and use that as your background.