I want to achieve this button animation in Android. The sample below is from iOS. I want the shadow to disappear when the user clicks the button and reappear once the user releases the button.
Any help will be highly appreciated.
You need to add color like the following. For example, the color name is button_text_color.xml. Here is the .xml file which needs to be put in the color folder. If the color folder does not exist, create one in your res directory.
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="#50FFFFFF" android:state_pressed="true" />
<item android:color="#FFFFFF" android:state_pressed="false" />
</selector>
Check that I have added 50% transparency to the white color in the pressed state. Now just add this attribute in the Button where it is declared.
Now you need a background drawable, to be put in your drawable folder. For example, let us take the name of the drawable is button_state_list_animator.xml. This should have the following content.
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="false">
<layer-list>
<item>
<shape>
<solid android:color="#android:color/darker_gray" />
<corners android:radius="19dp" />
</shape>
</item>
<item android:bottom="5px">
<shape>
<padding android:bottom="5dp" />
<gradient android:angle="270" android:endColor="#163969" android:startColor="#1c4985" />
<corners android:radius="19dp" />
<padding android:bottom="10dp" android:left="10dp" android:right="5dp" android:top="10dp" />
</shape>
</item>
</layer-list>
</item>
<item android:state_pressed="true">
<layer-list>
<item>
<shape>
<solid android:color="#102746" />
<corners android:radius="19dp" />
</shape>
</item>
<item android:bottom="5px">
<shape>
<padding android:bottom="5dp" />
<gradient android:angle="270" android:endColor="#163969" android:startColor="#1c4985" />
<corners android:radius="19dp" />
<padding android:bottom="10dp" android:left="10dp" android:right="5dp" android:top="10dp" />
</shape>
</item>
</layer-list>
</item>
</selector>
Now your button construction is simple.
<Button
android:id="#+id/button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_margin="32dp"
android:background="#drawable/button_state_list_animator"
android:text="Save Changes"
android:textColor="#color/button_text_color" />
Here is the screenshot from my code.
You can have the push-down animation using the library as well, as mentioned in an answer here.
Hope that helps!
Use the animation effect (as the code below) on the custom button when clicking on the button.
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<scale xmlns:android="http://schemas.android.com/apk/res/android"
android:fromXScale="1"
android:toXScale="0.8"
android:fromYScale="1"
android:toYScale="0.8"
android:duration="500"
android:pivotX="50%"
android:pivotY="50%" >
</scale>
<alpha
android:fromAlpha="1"
android:toAlpha="0.8"
android:duration="500">
</alpha>
</set>
set Animation on Button Click using.
btn_custom.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
Animation animation = AnimationUtils.loadAnimation(getApplicationContext(), R
.anim.animation_btn);
btn_custom.startAnimation(animation);
}
});
try changing alpha values as your need and see the effect.
You can use this library : pushdown-anim-click
How to install:
compile( 'com.github.thekhaeng:pushdown-anim-click:1.1.1' ){
exclude group: 'com.android.support'
}
How to use:
Button button = findViewById( R.id.button );
PushDownAnim.setPushDownAnimTo( button, ... )
.setOnClickListener( new View.OnClickListener(){
#Override
public void onClick( View view ){
Toast.makeText( MainActivity.this, "PUSH DOWN !!", Toast.LENGTH_SHORT ).show();
}
});
For Shadow:
As I saw library files, There are only three java files. He just used class to animate button. You can give shadow in your button by this way. Even though I have created issue You can keep watch on this.
For more functionality, you can visit github link.
Thank you.
Add a layout with the background as the shadow below the button. In the button.setOnTouchListener hide the layout when button is pressed and make it visible when released.
However it will only work if the shadow is below.
Related
I'm developing an app can visible Direction pad on the screen, but I don't know how to handle or override action like UP, DOWN, LEFT, RIGHT to focus the next view (like some buttons in image below).
Set this tow attributes for your view items :
android:focusableInTouchMode="true"
android:background="#drawable/bg_view"
where bg_view.xml is :
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_focused="true">
<shape android:shape="rectangle">
<stroke android:width="2dp" android:color="#android:color/white" />
<solid android:color="#1F1F3E" />
</shape>
</item>
<item>
<shape>
<solid android:color="#1F1F3E" />
</shape>
</item>
I found a solution to what I need here Android simulate key press
. Use Instrumentation class to sendKeyEvent.
I'm new to XML language and have no clue on how to put and ImageButton inside a circular progress bar and also have no clue if that's even possible.
No. If you want to customize ProgressBar you need to set Style and android:progressDrawable
<ProgressBar
android:id="#+id/progressBar1"
style="?android:attr/progressBarStyleHorizontal"
android:progressDrawable="#drawable/custom_progressbar"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
then you can create Layer-List Drawable or any other drawable.
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Define the background properties like color etc -->
<item android:id="#android:id/background">
<shape>
<gradient
android:startColor="#000001"
android:centerColor="#0b131e"
android:centerY="1.0"
android:endColor="#0d1522"
android:angle="270"
/>
</shape>
</item>
<!-- Define the progress properties like start color, end color etc -->
<item android:id="#android:id/progress">
<clip>
<shape>
<gradient
android:startColor="#007A00"
android:centerColor="#007A00"
android:centerY="1.0"
android:endColor="#06101d"
android:angle="270"
/>
</shape>
</clip>
</item>
</layer-list>
check out this
I am new to Android and i was setting up my xml file. Is there a way to change the colour of the button with a feel of "click" when the button is clicked and then return to it's original colour WITHOUT changing the colour of the border?
I am using eclipse.
Thank you
First you need to make some xml files in the Drawable folder:
btn_clicked.xml:
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="20dp" />
<solid android:color="#ff0000" />
<stroke
android:width="1dp"
android:color="#fff" />
</shape>
btn_normal.xml:
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="20dp" />
<solid android:color="#00ff00" />
<stroke
android:width="1dp"
android:color="#fff" />
</shape>
name_btn.xml:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/btn_clicked" android:state_pressed="true"/>
<item android:drawable="#drawable/btn_normal"/>
</selector>
and then use it like this:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent" android:layout_height="match_parent">
<Button android:layout_width="140dp" android:layout_height="40dp"
android:background="#drawable/cancel_btn" />
</RelativeLayout>
AndroidGeek,
You can specify the effects inside an .XML file under the drawable folder and then linking the file to the Button under the layout folder.
Example:
Inside your activity_main.xml Your Button tag will look like as :
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Styled Button"
android:id="#+id/styledButton"
android:background="#drawable/button"/>
Create an XML file [Example: button.xml] under the res/drawable folder to specify the changes that will take place when the button is pressed.
Below is the contents of the button.xml
<?xml version="1.0" encoding="utf-8" ?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Changes that the button has to show when it is pressed -->
<item android:state_pressed="true" >
<shape>
<solid
android:color="#ef4444" />
<!-- Keep the stroke values same if you want the same border effect, irrespective you press / un-press the button
In case ih you want to change the border thickness, while the button is being clicked,
then increase the "android:width" value -->
<stroke
android:width="1dp"
android:color="#992f2f" />
<corners
android:radius="6dp" />
<padding
android:left="10dp"
android:top="10dp"
android:right="10dp"
android:bottom="10dp" />
</shape>
</item>
<!-- Default appearance when the button is displayed -->
<item>
<shape>
<gradient
android:startColor="#ef4444"
android:endColor="#992f2f"
android:angle="270" />
<stroke
android:width="1dp"
android:color="#992f2f" />
<corners
android:radius="6dp" />
<padding
android:left="10dp"
android:top="10dp"
android:right="10dp"
android:bottom="10dp" />
</shape>
</item>
</selector>
Hope this helps.
This should work irrespective of the IDE. Eclipse and Android Studio.
I'm using an xml file in drawable to make my buttons in my app 'pretty'.
^ Like that.
It works fine, however I want to add a tick or cross to the buttons (to mark completed or not) - I'm not too sure if it's possible.
Here is my xml for the buttons:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" >
<shape>
<solid
android:color="#449def" />
<stroke
android:width="1dp"
android:color="#2f6699" />
<corners
android:radius="3dp" />
<padding
android:left="5dp"
android:top="5dp"
android:right="5dp"
android:bottom="5dp" />
</shape>
</item>
<item>
<shape>
<gradient
android:startColor="#449def"
android:endColor="#2f6699"
android:angle="270" />
<stroke
android:width="1dp"
android:color="#2f6699" />
<corners
android:radius="4dp" />
<padding
android:left="5dp"
android:top="5dp"
android:right="5dp"
android:bottom="5dp" />
</shape>
</item>
</selector>
I'm setting the Background element on the button to use the above like #drawable/bluebuttons
Any help will be really appreciated
If you are using button then you can use Button's property in XML file.
android:drawableRight="#drawable/ANY_DRAWABLE_IMAGE"
In my case it was like this:
<Button android:id="#+id/button1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
...
...
android:drawableRight="#drawable/ic_tick" />
Or in your code, you can put like this:
// PUT ZERO FOR NO DRAWABLE
textView1.setCompoundDrawablesWithIntrinsicBounds(LEFT_DRAWABLE, TOP_DRAWABLE,RIGHT_DRAWABLE, BOTTOM_DRAWABLE);
Hope this will help you.
If you are interested in setting image on button dynamically from Activity then you can use this :
Drawable iconTick= getApplicationContext().getResources().getDrawable(R.drawable.icon_tick);
mBtnTaks1.setCompoundDrawablesWithIntrinsicBounds(iconTick, null, null, null); // left,top,right,bottom
Thanks.
I have my button in my app as a regular Buttons but with customized background (see this to know what I mean http://www.gersic.com/blog.php?id=56).
Everything works fine. However, I want to indicate to the user that he is pressing the button WITHOUT having another "pressed" version on the button (I am aware of how to give the button another image upon pressing)
I currently use onTouchListner and apply colorFilters on the Button upon pressing and clearing on releasing but detecting the press and release * accurately* in touch mode didn't work fine with me
EDIT
Here is how I want it.
not pressed:
not pressed
pressed (same exact image file):
pressed
I had the highlight effect using colorFilter
getBtn.getBackground().setColorFilter(0xFF838B83, PorterDuff.Mode.MULTIPLY);
you could just create a Selector for your Button, so you can set it as its background but still have a click-effect whenever you click it.
<?xml version="1.0" encoding="utf-8"?>
<selector
xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" >
<shape>
<gradient
android:startColor="insert color"
android:endColor="insert color"
/>
<stroke
android:width="3dp"
android:color="insert color" />
<corners
android:radius="3dp" />
<padding
android:left="10dp"
android:top="10dp"
android:right="10dp"
android:bottom="10dp" />
</shape>
</item>
<item android:state_pressed="false" >
<shape>
<gradient
android:endColor="insert color"
android:startColor="insert color"
/>
<stroke
android:width="3dp"
android:color="insert color" />
<corners
android:radius="3dp" />
<padding
android:left="10dp"
android:top="10dp"
android:right="10dp"
android:bottom="10dp" />
</shape>
</item>
</selector>
set this xml file as your background for your button:
mybtn.setbackground(R.drawable.thexmlfileabove);