Removing Android ToggleButton's green indicator light - 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.

Related

How to set a background Image to a Button BUT STILL WORKS LIKE A NORMAL BUTTON (With Effects)?

I have been trying to achieve the Normal android button effects when the button is already set with a background image
But the problem is, once the background is set, the button default nature is gone (shadows, clickable animation etc..)
Can Someone please give me a working solutions for this?
Here's the code to my button
<Button style="#style/Widget.AppCompat.Button.Colored"
android:id="#+id/student"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/student"
android:layout_marginRight="8dp"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginLeft="8dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:layout_marginBottom="8dp"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginTop="8dp"
app:layout_constraintVertical_bias="0.891" />
It looks amazing since I have set a background image but It still looks like you have set an image to a jLabel in Java)
How can I get the default button looks while keeping my background image intact?
Button works by setting the background to a background with the elevation, shadows, ripple, etc. To get the same behavior, you're going to need to set your background to a StateListDrawable that performs the ripple effect and puts the shadows and elevation effects with your image as the background inside of all that. You can't just set the background to be your image, that will lose all of those features. The easiest way to get that right is to look at the AOSP source code and find the drawable it uses, copy it to your project, and edit appropriately.
Basically in Android a Button is just a TextView with a special background preset.
Why don't you use ImageButton widget ? It has the same behaviour as a Button and ImageView combined
Check this tutorial to see how to work with it.
as mentionned in the official documentation
Displays a button with an image (instead of text) that can be pressed or clicked by the user. By default, an ImageButton looks like a regular Button, with the standard button background that changes color during different button states. The image on the surface of the button is defined either by the android:src attribute in the XML element or by the ImageView.setImageResource(int) method

Android use vector drawable to replace text in button

Currently I have a button that looks like this:
What I want to do is to be able to replace the text with this vector drawable but keep the blue rectangle background:
I looked into doing this but I cannot seem to get it right.
I tried the following combination:
<Button
android:id="#+id/deletebutton"
android:layout_width="0dp"
android:layout_height="50dp"
android:src="#drawable/deletebtn24dp"
android:backgroundTint="#color/primaryButtonColor"
android:layout_weight="1"/>
However that just led to a blank blue button with no drawable. What can I do so the drawable replaces the text?
Also I would like to support API levels start at 16+.
You have to use app:srcCompat="#drawable/deletebtn24dp" instead of android:src="#drawable/deletebtn24dp". Using an ImageButton might also be better than using a straight Button.

Android 5.0 makes unselected checkboxes invisible when background is white

I have an android app that has been working fine pre-Android 5.0. With the update, I noticed that checkboxes and radiobuttons placed on white backgrounds are not visible if they are not selected. For example, this is what a checkbox looks selected and unselected in jellybean:
As you can see, there is a light gray square when the checkbox is not selected. However, after updating to lollipop, this is what it looks like:
So, as you can see, there is no gray square or anything that suggests there is a checkbox here. The same problem happens with radiobuttons. I really don't want to go trough the pain of creating new drawables just for this simple ting. I have seen that checkboxes within the accessibility menu of android 5 have a nice square, but haven't figured out how to make mine look the same:
I tried creating a new android project and just adding some checkboxes and radio buttons with a white background, but they are still invisible when unchecked. I'm using xamarin studio and c#, if that makes any difference. Anyway, I'll understand any java code you post.
This is what my checkbox code looks like:
<CheckBox
android:layout_width="wrap_content"
android:layout_height="0dp"
android:id="#+id/chkSeleccionar"
android:layout_gravity="right"
android:gravity="center_vertical"
android:clickable="false"
android:focusable="false"
android:scaleX="1.5"
android:scaleY="1.3"
android:layout_weight="50"
/>
I couldn't get the theme working, but what did work for me was the following:
android:button="#drawable/abc_btn_check_material"
android:buttonTint="#color/red"
Put this into your CheckBox XML layout.
Just change the
android:buttonTint="YOUR COLOR"
It works.
Make sure you are using a Material theme for Android 5.0 devices - this will ensure you're styling remains consistent with other components. Look for an android:theme element in your AndroidManifest.xml file (either on your application or on an individual activity), then look up what style is set there and check the parent attribute for the style.
Add this attribute
android:buttonTint="#EEEEEE"

how to achieve Google Play Music-like button look in my app?

Hi I have been inspired by a Google Music app and been trying to achieve the same effect on the button when it is pressed. The shot will help u understand:
SO here the button gets that semi-transparent nice-looking effect. Unfortunately, i ve gone nowhere with it, i just managed to similar button but now it doesnt change color when i press it? Im really stuck and need help, im a novice in android dev, i have been trying selectors but when I set a selector to button background the app fails at runtime.
Here is a screenshot of my button:
For this button, to achieve the shadow I used the card_background.9.png file so it also changes the whole button background to white. I assume what is why the button looses the default pressed state.
XML code for the button:
<Button
android:id="#+id/btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Facebook"
android:drawableLeft="#drawable/facebook_icon"
android:background="#drawable/card_background"
android:padding="15dp"
android:textSize="20sp"
android:drawablePadding="10dp"
/>
You can create your custom button with creating a custom style. In this style you can define different images for different button states (for example enabled, pressed...). Take a look at this tutorial.

Problem with EditText background (android)

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);

Categories

Resources