I need to create a button where there is a icon in the left and a text in the right. After pressing the button, I want to see there is an animation of rotating image at the place of the left icon in the button.
I know how to rotate a image with ImageView, but it is not helpful to my current requirement.
I tried to use AnimationDrawable, but it did not work either, there is no animation but only the first png file shown. It is then same whatever I use the background or leftDrawable of the button to run the AnimationDrawable. The code is as below:
package com.example.layout;
import android.app.Activity;
import android.graphics.drawable.AnimationDrawable;
import android.graphics.drawable.Drawable;
import android.os.Bundle;
import android.widget.Button;
public class TestLinearlayoutActivity extends Activity {
/** Called when the activity is first created. */
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
}
#Override
public void onStart() {
super.onStart();
Button locationTitleButton = (Button) findViewById(R.id.LocationTitleButton);
//locationTitleButton.setBackgroundResource(R.drawable.loading);
locationTitleButton.setCompoundDrawablesWithIntrinsicBounds(R.drawable.loading, 0, 0, 0);
Drawable[] locationTitleButtonDrawables = locationTitleButton.getCompoundDrawables();
AnimationDrawable animDrawable = (AnimationDrawable) locationTitleButtonDrawables[0];
//AnimationDrawable animDrawable = (AnimationDrawable) locationTitleButton.getBackground();
animDrawable.start();
}
}
//loading.xml:
<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
android:oneshot="false">
<item android:drawable="#drawable/loc1" android:duration="200" />
<item android:drawable="#drawable/loc2" android:duration="200" />
<item android:drawable="#drawable/loc3" android:duration="200" />
<item android:drawable="#drawable/loc4" android:duration="200" />
</animation-list>
// layout file, main.xml:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:orientation="horizontal" android:padding="0dp"
android:layout_height="wrap_content" android:gravity="fill_horizontal" android:layout_margin="0dp">
<Button android:id="#+id/LocationTitleButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="0dip"
android:layout_gravity="center_vertical"
android:gravity="center_vertical"
android:layout_weight="1"
android:ellipsize="end"
android:scrollHorizontally="true"
android:singleLine="true"
android:text="Add location"
android:textStyle="bold" />
<Button android:textColor="#FF000000"
android:layout_weight="0"
android:id="#+id/AddLocationButton"
android:text="Search"
android:gravity="center_vertical"
android:layout_gravity="center_vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="-8dp" />
</LinearLayout>
You can try using an AnimationDrawable.
I have also face this issue and I have tried all above solution but no one have worked for me. I have found solution here. Android document says that don't call start() in the onCreate(Bundle) method of activity call it in onWindowFocusChanged(boolean) function. So I do it like this :
#Override
public void onWindowFocusChanged(boolean hasFocus){
if(hasFocus){
final AnimationDrawable d=(AnimationDrawable) mBtnView.getCompoundDrawables()[0];
d.start();
}
}
Use a LinearLayout (orientation horizontal). Treat that as your button by giving it a button drawable selector as it's background drawable. Inside it, put an ImageView and a TextView. Use an OnClickListner on the LinearLayout, as if it were a button. Then animate the ImageView.
Related
I have a fragment with a navigation menu at the top-left corner. At the start of the activity, I want to gradually slide a view (let's call it black_view) out of the menu icon.
Here's a rough breakdown of how I want the animation to be in accordance with the images below:
Activity starts as the first image with black_view being invisible.
black_view gradually slides out from behind the menu icon length by length until it gets to the point of the second image.
>>>
What I've tried:
I tried achieving this by using a TranslateAnimation. However, the whole length of black_view shows up at the start of the animation and this is not what I want. I also saw a couple of sliding animation code snippets like this and this, but they all follow the TranlateAnimation model (with the whole length of black_view showing instantly).
How can I achieve this?
PS: If there's any important detail that I failed to add, kindly let me know.
It can be done easily with Slide transition from Transition API. Just use TransitionManager.beginDelayedTransition method then change visibility of black view from GONE to VISIBLE.
import androidx.appcompat.app.AppCompatActivity;
import androidx.transition.Slide;
import androidx.transition.Transition;
import androidx.transition.TransitionManager;
public class MainActivity extends AppCompatActivity {
private ViewGroup parent;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
parent = findViewById(R.id.parent);
parent.getViewTreeObserver().addOnPreDrawListener(new OnPreDrawListener() {
#Override
public boolean onPreDraw() {
parent.getViewTreeObserver().removeOnPreDrawListener(this);
animate();
return true;
}
});
}
private void animate() {
View textView = findViewById(R.id.text);
Transition transition = new Slide(Gravity.LEFT);
transition.setDuration(2000);
transition.setStartDelay(1000);
TransitionManager.beginDelayedTransition(parent, transition);
textView.setVisibility(View.VISIBLE);
}
}
activity_main.xml
<?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="match_parent">
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:text="Button" />
<FrameLayout
android:id="#+id/parent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toRightOf="#+id/button">
<TextView
android:id="#+id/text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#000"
android:text="hello world"
android:textColor="#fff"
android:textSize="22sp"
android:visibility="gone" />
</FrameLayout>
</RelativeLayout>
Result:
All classes here are from androix package so code is backward compatible.
I have two ToggleButton in my activity. I want to click on the first button and have its color change to white. If I click on the second button, the color of first button should change to black and the color of second button change to white.
I want to know which button is selected. How can I do this with ToggleButton, or with something else?
<ToggleButton android:id="#+id/tg_btn1"
android:layout_width="match_parent"
android:layout_height="46px"
android:background="#ffffff" />
<ToggleButton android:id="#+id/tg_btn1"
android:layout_width="match_parent"
android:layout_height="46px"
android:background="#ffffff" />
Please help me, I would appreciate that.
use a Style for your Toggle Button
<style name="ToggleButton.YourTheme" parent="Theme.AppCompat.Light">
<item name="colorControlNormal">#color/your_color</item>
<item name="colorControlActivated">#color/your_color</item>
</style>
Apply that to your button and it should work. Have not tested it recently.
<ToggleButton android:id="#+id/tg_btn1"
android:layout_width="match_parent"
android:layout_height="46px"
android:theme="#style/ToggleButton.YourTheme"
android:background="#ffffff" />
In order to have two ToggleButtons in an activity which, when ToggleButton1 is clicked, ONLY that button changes color and the other one does not, but then when the ToggleButton2 is switched on: the ToggleButton1 turns "off" and ToggleButton2 turns "on", I created two global variables: One boolean for the first toggle, and a boolean for the second toggle.
package com.example.micha_000.togglecolors;
import android.graphics.Color;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.ToggleButton;
public class MainActivity extends AppCompatActivity {
Boolean toggleOneOn = false;
Boolean toggleTwoOn = false;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}
public void ToggleOne(View view){
//If the Toggle Button is off
if(!toggleOneOn){
//This view element references the ToggleButton1
view.setBackgroundColor(Color.WHITE);
toggleOneOn = true;
}
//If it is is clicked while on
else{
view.setBackgroundColor(Color.BLACK);
toggleOneOn = false;
}
}
public void ToggleTwo(View view){
//If the Toggle Button is clicked while off
if(!toggleTwoOn){
//This view element references the ToggleButton2
view.setBackgroundColor(Color.WHITE);
//This ToggleButton element references the ToggleButton1
ToggleButton toggle1 = findViewById(R.id.ToggleButton1);
toggle1.setBackgroundColor(Color.BLACK);
toggleOneOn = false;
toggleTwoOn = true;
}
//If it is is clicked while on
else{
view.setBackgroundColor(Color.BLACK);
toggleTwoOn = false;
}
}
}
I then used the "onClick" property in xml to reference the ToggleOne and ToggleTwo methods I created in my java class (Those methods must be public, void, and have a View as a parameter as they do in my code). I then have conditionals checking those global booleans, and then using "setBackgroundColor" to change the color of the toggle appropriately.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/colorPrimary"
tools:context=".MainActivity">
<ToggleButton
android:id="#+id/ToggleButton1"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_centerInParent="true"
android:onClick="ToggleOne"
android:background="#000000"
android:layout_marginBottom="5dp"/>
<ToggleButton
android:id="#+id/ToggleButton2"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_centerInParent="true"
android:onClick="ToggleTwo"
android:background="#000000"
android:layout_below="#+id/ToggleButton1"/>
</RelativeLayout>
If you wanted to switch the other toggle button when one is pressed, you just need to adjust what happens inside the if/else statements inside the toggleButton methods
I have a clickable TextView:
width = match_parent, height = "wrap_content"
When I press it, I want to show a LinearLayout containing 3 views, orientation vertical, and I want to animate it to slide down from behind the TextView, below it. Like a drop-down, but not using Spinner.
Any ideas?
If you want a dropdown-like effect, you should probably use a PopupWindow to show your LinearLayout. That's what Spinner uses internally. You can set the enter and exit animations for it. By default, a PopupWindow from a Spinner performs a scale and alpha animation at the same time.
There is also PopupMenu which is a specialized class to show menus with the standard animations.
1. Create an animation XML for slide down in /res/anim/ folder:
slide_down.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >
<translate
android:duration="1000"
android:fromYDelta="0%"
android:toYDelta="25%" />
</set>
FYI, You can change animation duration and YDelta as per your needs.
2. Design your desired layout. Use RelativeLayout as root and set child LinearLayout visibility GONE.
activity_main.xml:
<?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="match_parent"
android:padding="16dp">
<LinearLayout
android:id="#+id/layout_dropdown"
android:layout_width="fill_parent"
android:layout_height="200dp"
android:orientation="horizontal"
android:background="#android:color/holo_red_dark"
android:visibility="gone">
<!-- Your 3 Views here -->
</LinearLayout>
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:text="Click Here"
android:textSize="30sp"/>
</RelativeLayout>
3. In your Activity, programmatically apply slide_down animation on LinearLayout(layout_dropdown) to show and sliding down when clicked on TextView(textView):
MainActivity.java
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.LinearLayout;
import android.widget.TextView;
public class MainActivity extends AppCompatActivity {
TextView textView;
LinearLayout linearLayout;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
textView = (TextView) findViewById(R.id.textView);
linearLayout = (LinearLayout) findViewById(R.id.layout_dropdown);
textView.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
Animation slideDown = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.slide_down);
linearLayout.setVisibility(View.VISIBLE);
linearLayout.startAnimation(slideDown);
// Required to keep layout stay at final position after animation
slideDown.setFillAfter(true);
}
});
}
}
OUTPUT:
Hope this will help~
Make LinearLayout with scaleY=0 and then animate it to 1.0
Execute this in the onClicklistener:
ViewCompat.animate(yourView)
.scaleY(1.0f)
.start();
I am learning about animation in Android and have following code (based on Android-Developer tutorial) which works when I click on the ImageButton. On click, it will zoom-in and then on next click, it will zoom-out.
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.container_layout);
final View thumb1View = findViewById(R.id.thumb_button_1);
thumb1View.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
zoomImageFromThumb(thumb1View, R.mipmap.ic_launcher);
}
});
mShortAnimationDuration = getResources().getInteger(android.R.integer.config_longAnimTime);
}
And this is the layout:
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:gravity="center"
android:padding="16dp">
<ImageButton
android:id="#+id/thumb_button_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:src="#mipmap/ic_launcher"
android:scaleType="centerCrop"
android:layout_gravity="center"
android:background="#null"
android:contentDescription="#string/description_image_1" />
</LinearLayout>
<!-- This initially-hidden ImageView will hold the expanded/zoomed version of
the images above. Without transformations applied, it takes up the entire
screen. To achieve the "zoom" animation, this view's bounds are animated
from the bounds of the thumbnail button above, to its final laid-out
bounds.
-->
<ImageView
android:id="#+id/expanded_image"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="100dp"
android:visibility="invisible"
android:contentDescription="#string/description_zoom_touch_close" />
</FrameLayout>
However, I am trying to make it to keep zooming in/out once activity is loaded without need to click to activate it, then on click stop the zooming.
Much appreciated,
I figured it out by using animation xml in res/anim directory. Add new xml called my_alpha_animation.xml in your res/anim directory, if anim does not existe, create it:
<scale xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="500"
android:fromXScale="0.1"
android:fromYScale="0.1"
android:interpolator="#android:anim/accelerate_interpolator"
android:pivotX="50%"
android:pivotY="50%"
android:toXScale="1.0"
android:toYScale="1.0"
android:repeatCount="infinite"
android:repeatMode="reverse">
</scale>
and loading it on Activities onResume():
#Override
protected void onResume(){
super.onResume();
doAlpha(btnAlpha);
}
And here is the method that does it:
private void doAlpha(View v){
Animation alphaAnimation = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.my_alpha_animation);
image.startAnimation(alphaAnimation); //image is my ImageView
}
Above, "image" is my ImageView for which I set image called "scanweb" from my mipmap directory and clear any animation that might be in progress in my Activity onCreate():
image = (ImageView) findViewById(R.id.imageView);
image.setImageResource(R.mipmap.scanweb);
image.clearAnimation();
The end result is that once Activity is created, my image "scanweb" starts pulsating (zooming in/out) infinitely.
I've an Android activity that has some buttons in the bottom of it, these buttons have a one pressed and a three released as a default,
and when any of them pressed it's background supposed to change to the background of the pressed buttons and the others background supposed to change to the background of the released buttons, but when clicking any button I got that result:
this is my code:
xml:
<LinearLayout
android:id="#+id/GrandThree"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_marginTop="10dp"
android:layout_gravity="center"
android:gravity="center"
android:orientation="horizontal"
android:background="#android:color/transparent">
<Button
android:id="#+id/BedRoom_bottom"
android:layout_width="200dp"
android:layout_height="fill_parent"
android:background="#drawable/light_bottom_buttons_pressed"
android:text="Bedroom"
android:textSize="20dp"
android:textColor="#FFFFFF"
android:layout_gravity="center"
android:layout_marginTop="3dp"
android:layout_marginLeft="3dp"
android:layout_marginBottom="3dp"
android:layout_marginRight="3dp"
android:tag="pressed"
android:clickable="true" />
<Button
android:id="#+id/livingroom"
android:layout_width="200dp"
android:layout_height="fill_parent"
android:background="#drawable/light_bottombuttons"
android:text="Living Room"
android:layout_gravity="center"
android:textSize="20dp"
android:padding="20px"
android:textColor="#FFFFFF"
android:layout_marginTop="3dp"
android:layout_marginLeft="3dp"
android:layout_marginBottom="3dp"
android:layout_marginRight="3dp"
android:tag="released"
android:clickable="true" />
<!.. then two buttons the same way ..!>
</LinearLayout>
JAVA:
// the onClickListener method for the Navigation buttons
public OnClickListener onNavigationClick = new OnClickListener() {
#Override
public void onClick(View v) {
if(v == bedRoom){
String tag = bedRoom.getTag().toString().trim();
if (tag.equals("released")) {
bedRoom.setBackgroundColor(R.drawable.light_bottom_buttons_pressed);
bedRoom.setTag("pressed");
livingRoom.setBackgroundColor(R.drawable.light_bottombuttons);
livingRoom.setTag("released");
masterBedroom.setBackgroundColor(R.drawable.light_bottombuttons);
masterBedroom.setTag("released");
kitchen.setBackgroundColor(R.drawable.light_bottombuttons);
kitchen.setTag("released");
}
}
//then another 3 blocks the same way for the other buttons
}
};
Hint: light_bottombuttons & light_bottom_buttons_pressed are shapes with gradient colors:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="30dp"/>
<gradient
android:startColor="#353535"
android:centerColor="#212121"
android:endColor="#121212" <!.. the values of the other is just upside down these values ..!>
android:angle="270"/>
</shape>
Create a file called button-drawable.xml in your drawable folder containing this:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:state_selected="true"
android:#drawable/light_bottom_buttons_pressed" />
<item
android:drawable="#drawable/light_bottom_buttons_pressed" />
</selector>
Add a tag to all the buttons in the layout file.
android:background="#drawable/button_drawable"
Now, in your button's click listener set the button's selected state to true any time a new button is chosen.
Example code :
public OnClickListener onNavigationClick = new OnClickListener() {
#Override
public void onClick(View v) {
if(v == bedRoom){
String tag = bedRoom.getTag().toString().trim();
if (tag.equals("released")) {
bedRoom.setTag("pressed");
bedRoom.setSelected(true);
livingRoom.setTag("released");
livingRoom.setSelected(false);
masterBedroom.setTag("released");
masterBedroom.setSelected(false);
kitchen.setTag("released");
kitchen.setSelected(false);
}
}
//then another 3 blocks the same way for the other buttons
}
};
Use radio group and radio button for this.
Your radio group will contain multiple buttons and at a time only one can be selected.
When you get your drawable you should do it like the following
bedRoom.setBackgroundColor(MyActivity.this.getResources().getDrawable(R.drawable.light_bottom_buttons_pressed));
MyActivity Would change to be whatever your activity name is