In a calculator app that I am creating, I want buttons to animate in a pop-up way (scaling-up) when the button is clicked. But that is not the issue. I want the button to stay scaled up (bigger size) as long as the user hold the button. It is supposed to go back to its original size (small size) only when the user releases the button. In the same way button colour has to change from white to blue as long as user hold the button(back to white when released). Is there any way to do that? I am not very good at animations in android studio. So please try to explain it in simple words.
I am also attaching a video that I made for prototyping to illustrate it.
Click link below
https://drive.google.com/file/d/13B8LAuNW1ymhmliw52BEIkMbJAJQRbfw/view?usp=sharing
You should create an xml file that have a selector as root element. This element selects the shape in base of the corrent state like pressed, focused or enabled.
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:state_enabled="false"
android:drawable="#drawable/button_disabled" />
<item
android:state_pressed="true"
android:state_enabled="true"
android:drawable="#drawable/button_pressed" />
<item
android:state_focused="true"
android:state_enabled="true"
android:drawable="#drawable/button_focused" />
<item
android:state_enabled="true"
android:drawable="#drawable/button_enabled" />
</selector>
If you want a different shape with different color and size you must create a new drawable like this:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<gradient
android:startColor="#00CCFF"
android:centerColor="#0000CC"
android:endColor="#00CCFF"
android:angle="90"/>
<padding android:left="7dp"
android:top="7dp"
android:right="7dp"
android:bottom="7dp" />
<stroke
android:width="2dip"
android:color="#FFFFFF" />
<corners android:radius= "8dp" />
</shape>
If you want to change the size you can use the attribute size.
Then you must implement the on click listener in the mainActivity onCreate file and set the pressed state of the button to true.
In a nutshell you must create one selector drawable for the button and two drawable one for the state pressed="true" and one for pressed="false".
Here I put an exaustive example: https://stackoverflow.com/a/29848987/13198061
Related
I have a conflicting issue after the Android dark mode introduction into android os, in my app i use following custom style to make the dropdown menu
in app_text_box_design.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<layer-list>
<item>
<shape>
<solid android:color="#color/colorPrimaryAppBg" />
<corners android:radius="3dp" />
<stroke android:width="1px" android:color="#color/colorPrimaryBorder" />
</shape>
</item>
<item android:width="30dp" android:gravity="right">
<bitmap android:gravity="center_vertical|right" android:src="#drawable/baseline_arrow_drop_down_white_24" />
</item>
</layer-list>
</item>
</selector>
In the Selector, i use it as below
<Spinner
android:id="#+id/spIam"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:background="#drawable/app_text_box_design"
android:padding="10dp" />
Which works fine when in Dark Mode, if define a dark background colour in the Android Dark mode, however, if the user changed to the light mode it conflicts the design, So i am wondering how can we do settings for both modes?
This problem is related to styles. You have to declare a particular attribute inside your activity style to override the default white from MaterialComponents.
Assuming that your drop down menu is made by menu under res folder you just have to add this attribute to the style that you are using:
<item name="android:itemBackground">#color/colorExample</item>
Please note that since you have light & dark mode you will have probably two different styles, one called styles.xml and one called styles-night.xml. Make sure to change the colour according to what mode you are.
You can use colors.xml for day/night theme.
colors.xml
colors.xml(night)
And also please add android:configChanges="uiMode" in your Activity of AndroidManifest.xml
<activity
android:name="MainActivity"
android:configChanges="uiMode" />
I have a custom switch. I want the text (on/off) to be in the track and not in the thumb.
I was thinking of setting a selector with text in drawable and setting it as track of the switch. But I cannot set text in a shape. Any ideas how I can do this?
I also want to add some padding to the track, I dont want the thumb to touch the track.
This is kind of how I want it to look:
This is the shape of my track:
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle"
android:visible="true"
android:useLevel="false">
<corners
android:radius="20dp" />
<size
android:width="48dp"
android:height="21dp" />
<stroke
android:color="#bfbfbf"
android:width="6dp"/>
Switch off screenshot
Switch on screenshot
Switch on image
Switch off image
Thumb image
switch_on_off.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true" android:drawable="#drawable/on_switch"/>
<item android:state_checked="false" android:drawable="#drawable/off_switch"/>
<item android:drawable="#drawable/off_switch"/>
</selector>
xml code
<android.support.v7.widget.SwitchCompat
android:id="#+id/switch_compat"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="20dp"
app:track="#drawable/switch_on_off"
android:thumb="#drawable/on_switch_active"/>
Try above code and let me know if you find any error.....
This XML below results in my Spinner having an orange line across the bottom and an orange rectangle on the right-hand side. I have two questions:
How can I make it so that the orange rectangle on the right-hand side is an orange triangle, like the default one associated with Theme.Dialog?
Now that I changed the look of the Spinner, when I click on it it no longer gets highlighted. I want to make it look the way I want AND highlight to a lighter color of orange when I press on it.
Do I have to accomplish both things in the same XML file? I've already got the drawable below set to the background of my spinner, so I can't declare the background twice right?
Any ideas? Thanks in advance!
My Drawable Custom Spinner Layout:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape >
<solid android:color="#color/base_orange" />
</shape>
</item>
<!-- main color -->
<item android:bottom="1.0dp"
android:left="0.0dp"
android:right="10.0dp">
<shape >
<solid android:color="#color/white" />
</shape>
</item>
<item android:bottom="25.0dp">
<shape >
<solid android:color="#color/base_orange" />
</shape>
</item>
</layer-list>
You could refer to this and get the spinner drawables according to your wish.
Hope that helps
I'd like to gain after onclick button efect similar to default in android, but with own colors
Default button is white or light gray
When i touch button color is changed for one moment (orange)
when release, button's color back to original color (white/light gray)
Which method's are using to this effect ?
I used onTouchListener() to set touched button color
and OnClickListener() to set back original color
But when i scroll group button(inner ScrollView) when i touch any button, color changed but when release button color ofc not change back. Which method should i use ? How can i fix that ?
///////////////////
I created colors in values and define 2 colors
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="white">#ffffff</color>
<color name="blue">#004080</color>
</resources>
I create new folder color and button_state.xml inner this folder
<?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="false"
android:drawable="#color/blue" />
<item android:state_focused="true"
android:state_pressed="true"
android:drawable="#color/white" />
</selector>
to my button i assign code in xml file
android:background="#color/button_states"
Now my button have no background, but i don't know why
create xml file defining button states and button color depending on state, for example button_states.xml in res/color folder in your project:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true"
android:drawable="#color/pressed_button_color"/>
<item android:state_selected="true"
android:drawable="#color/selected_button_color"/>
<item android:drawable="#color/default_button_color"/>
</selector>
define these colors in values/colors.xml
and use this in your layout xml file on the Button element as:
android:background="#color/button_states"
In the xml for your button set its background to the following
android:background="?android:attr/selectableItemBackground"
This will automatically handle the colour changes to be default changes in android
If you want to have you own colours you need to do a custom selector and set it as your background. Something like the following should work:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" android:drawable="#drawable/list_selector_pressed" />
<item android:state_focused="true" android:drawable="#drawable/list_selector_focused" />
<item android:drawable="#color/selector_background" />
</selector>
Your drawable would be like this:
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<solid android:color="#color/selector_background_pressed"/>
</shape>
Not 100% sure but you might just be able to use #color/my_colour directly in the selector rather than referencing a drawable. But this way will definitely work
I recommend you use of this online tool. You just need to choose your desired color set and after download the resources put the in your project resource folder respectively and than apply theme to your you application in Manifest file with name name you set on this online tool("Theme Name" by default AppTheme)
<application android:debuggable="true" android:label="#string/app_name"android:theme="#style/AppTheme">
On an Android View, I want to have a some clickable text that works similar to a webpage hyperlink.
It looks just like normal text (no button border), but when touched, I want the text color to change and I may also want its background to turn a reverse color.
Is it better to use a Button with a transparent background or a TextView. When should I choose one over the other?
Thanks much
you can use Button and make selector for background and text both.
textselector.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" android:color="#0000ff"/> <!-- pressed -->
<item android:state_focused="true" android:color="#android:color/white"/> <!-- focused -->
<item android:color="#android:color/white"/> <!-- default -->
</selector>
buttonselector.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" android:color="#android:color/white"/> <!-- pressed -->
<item android:state_focused="true" android:color="#0000ff"/> <!-- focused -->
<item android:color="#0000ff"/> <!-- default -->
</selector>
In your layout xml
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/buttonselector"
android:text="some text"
android:textColor="#drawable/textselector" />
hotveryspicy gave a great answer and really pointed me in the right direction. Thank you, but I had a few issues with the response.
What I want is a button that has Black text and a Gray background in its normal state and a Red background with White text in its selected state. Like this:
Using hotveryspicy's suggestions I had the following issues:
I get an error when trying to assign a drawable to textColor. Funny but I see other references to doing this sort of thing. Maybe the XML validation is stricter now?
I also got an error if I didn't define a android:drawable in the buttonselector.xml. It seems you can set the color of a drawable in a selector eiter, you need to actually create a drawable.
Anyhow this is what I did:
I created a Color State Resource that looks like this:
File: res/colors/link_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:color="#ffffff"/>
<item android:color="#000000"/>
</selector>
Then the following 3 drawables:
My button background in its normal state using a Shape Drawable:
File: res/drawable/link_button.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#cccccc"/>
</shape>
My button background in its selected state, also a Shape Drawable:
File: res/drawable/link_button_selected.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#ff0000"/>
</shape>
Then I created a Drawable Selector that chooses between the 2 shapes.
File: res/drawable/link_button_selector.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:drawable="#drawable/link_button_selected"
android:state_pressed="true" />
<item
android:drawable="#drawable/link_button" />
</selector>
Then in my layout my button looks like this:
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="10dp"
android:text="Button"
android:textColor="#color/link_button"
android:background="#drawable/link_button_selector"
/>
Thanks for the help everyone!
Add String like
<string name="link">'Google'</string>
In your layout
<TextView
android:id="#+id/link"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:autoLink="all"
android:linksClickable="true"
android:text="#string/link" />
You can linkify your text using the linkify class.
Have a look at this and this with few examples
For Google's sake:
Rather than make a button look like a link why not make a TextView clickable? This was effectively what I wanted and worked for my use. I wanted text to be clickable to spawn an intent.
TextView.setOnClickListener(new View.OnClickListener()