I am currently making an application where I want part of the logo of the application to appear at the center of the screen, translates to the top and then shows the entire logo. I currently have the application showing the entire logo and translating it as desired, but I am not sure how to hide most of the logo and make it show after. My logo consists of an icon on the left and text on the right. Once the logo reaches the top, I would like the name to appear smoothly while pushing the icon to the left as it goes. Is there a way to do this using the current code I have.
logo_animation.xml:
<?xml version="1.0" encoding="utf-8"?>
<set
xmlns:android="http://schemas.android.com/apk/res/android"
android:fillAfter="true">
<alpha
android:duration="800"
android:fromAlpha="0.0"
android:interpolator="#android:anim/accelerate_interpolator"
android:toAlpha="1.0" />
<translate
android:duration="800"
android:fillAfter="true"
android:fromYDelta="0%p"
android:startOffset="2000"
android:toYDelta="-30%p" />
</set>
main.xml:
<?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:id="#+id/main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="15dp"
android:paddingStart="15dp"
android:paddingRight="15dp"
android:paddingEnd="15dp"
android:background="#color/colorPrimary"
tools:context=".Main">
<ImageView
android:id="#+id/mainLogo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:contentDescription="#string/logo"
android:src="#mipmap/ic_launcher" />
</RelativeLayout>
Main.java:
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.view.animation.Animation.AnimationListener;
import android.widget.ImageView;
public class Main extends AppCompatActivity implements AnimationListener {
ImageView mainLogo;
Animation mainLogoAnimation;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
searchLogo = (ImageView) findViewById(R.id.searchLogo);
mainLogoAnimation = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.logo_animation);
mainLogoAnimation.setAnimationListener(this);
}
#Override
public void onAnimationEnd(Animation animation) {
}
#Override
public void onAnimationRepeat(Animation animation) {
}
#Override
public void onAnimationStart(Animation animation) {
}
}
Just put the text in a separate TextView, and animate it on its own.
Related
I started learning making Android Apps, and I have stumbled upon a problem.
I have made my app to change an imageView by a button
button = (Button)findViewById(R.id.bttOK);
button.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
imageView.setImageResource(R.drawable.ring); // changes the image
so, now, when I click on the button, it changes an image.
The problem is, the original image was centered, and the image that replaces it is set on top left. I can't center it, or move it or anything. I guess I am missing a tiny detail somewhere.
MainActivity.java:
package com.maxa.testaplikacija;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.TextView;
public class MainActivity extends AppCompatActivity {
TextView text;
Button button;
ImageView imageView;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
imageView = findViewById(R.id.imageView);
button = (Button)findViewById(R.id.bttOK);
button.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
imageView.setImageResource(R.drawable.ring);
}
});
}
}
activity_main.xml:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="16dp"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:paddingTop="16dp"
tools:context=".MainActivity">
<TextView
android:id="#+id/udajSe"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/bttOK"
android:layout_centerHorizontal="true"
android:text="#string/udaj_se_za_mene" />
<ImageView
android:id="#+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:layout_marginTop="23dp"
android:adjustViewBounds="false"
android:contentDescription="#string/poklon"
android:foregroundGravity="center_horizontal"
app:srcCompat="#drawable/present" />
<Button
android:id="#+id/bttOK"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="115dp"
android:text="#string/otvori_me" />
</RelativeLayout>
I am still new to this, but I am a quick learner.
Inside the onclick method align the imageView like this
RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WRAP_CONTENT, RelativeLayout.LayoutParams.WRAP_CONTENT);
params.addRule(RelativeLayout.CENTER_HORIZONTAL, RelativeLayout.TRUE);
button.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
imageView.setImageResource(R.drawable.ring);
imageView.setLayoutParams(params);
}
});
Your view seems to have the image set to top left, see these XML tags in your ImageView:
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
Are you sure the original image files aren't spaced differently / have extra padding as part of the image itself?
I can not understand why my code does not work for 30 minutes.
MainActivity.java:
package app.test;
import android.app.*;
import android.os.*;
import android.view.*;
import android.widget.*;
public class MainActivity extends Activity
{
#Override
protected void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
}
}
It is main.xml:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical" >
<TextView
android:text="#string/text"
android:autoLink="email|web"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableBottom="#drawable/bottom" />
</LinearLayout>
And here is the main code bottom.xml:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<size
android:height="1dp"
android:width="70dp" />
<solid android:color="#android:color/black" />
</shape>
Also I attach a screenshot on which everything is clearly visible: https://imgur.com/a/LRh0N
Your shape is black as your background layout, you will never see it.
It's a good approach you change your backgrounds elements color (even just to see the elements size) to align your layout with your expectations
I'm new at Android Programing and I want to know how to rotate an image by a random angle. I need this for my "Spin the Bottle" game. Here is my code so far:
package example.com.bottlegame;
import android.graphics.drawable.AnimationDrawable;
import android.graphics.drawable.RotateDrawable;
import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.view.MotionEvent;
import android.view.View;
import java.lang.Object;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.view.animation.LinearInterpolator;
import android.view.animation.RotateAnimation;
import android.widget.ImageView;
import java.util.Random;
public class MainActivity extends ActionBarActivity {
ImageView spin,bottle;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
spin = (ImageView) findViewById(R.id.ivSpin);
bottle = (ImageView) findViewById(R.id.ivBottle);
final Animation animRotate = AnimationUtils.loadAnimation(this, R.anim.roatate);
spin.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
bottle.startAnimation(animRotate);
}
});
}
}
Now I'm rotating an image with XML, but can you help me to rotate it with just Java code. Here is the XML code in anim folder:
<?xml version="1.0" encoding="utf-8"?>
<set
xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="#android:anim/linear_interpolator">
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:pivotX="50%"
android:pivotY="50%"
android:fromDegrees="0"
android:toDegrees="360"
android:drawable="#drawable/bottle"
android:duration="1000"
android:repeatCount="1"
android:repeatMode="reverse"
android:startOffset="0"
/>
</set>`
And here is the activity_main.xml:
<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:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:paddingBottom="#dimen/activity_vertical_margin"
tools:context=".MainActivity"
android:background="#drawable/bg_background">
<ImageView
android:layout_width="wrap_content"
android:layout_height="100sp"
android:layout_centerHorizontal="true"
android:id="#+id/ivSpin"
android:src="#drawable/spin_up"
android:layout_marginTop="400sp"
android:contentDescription="#string/spin"
/>
<ImageView
android:layout_width="65sp"
android:layout_height="200sp"
android:id="#+id/ivBottle"
android:src="#drawable/bottle"
android:layout_marginTop="80dp"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:contentDescription="#string/bottle"
/>
</RelativeLayout>
You can easily configure your animation in Java code as well as in xml. For your case you could use class RotateAnimation and its' constructor public RotateAnimation(float fromDegrees, float toDegrees, float pivotX, float pivotY)
So, try somehting like this:
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
spin = (ImageView) findViewById(R.id.ivSpin);
bottle = (ImageView) findViewById(R.id.ivBottle);
float toDegrees = new Random().nextFloat() * Integer.MAX_VALUE % 360;
final Animation animRotate = new RotateAnimation(0, toDegrees, 50, 50);
animRotate.setDuration(1000);
animRotate.setRepeatCount(1);
animRotate.setRepeatMode(Animation.REVERSE);
spin.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
bottle.startAnimation(animRotate);
}
});
}
I think, that no comments are required.
Is it possible to make a full screen button that is transparent so no matter where the user clicks the button is activated?
Below is some basic java that shows a button and when pressed starts a new intent. I also added the main.xml layout but I am not sure how to update it so the buttons fills the screen but is transparent.
package com.MeetingManager;
import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.Window;
import android.view.WindowManager;
import android.widget.Button;
public class MeetingManager extends Activity {
/** Called when the activity is first created. */
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,
WindowManager.LayoutParams.FLAG_FULLSCREEN);
setContentView(R.layout.main);
layout.setOnTouchListener(new View.OnTouchListener() {
public boolean onTouch(View v, MotionEvent e) {
Intent myIntent = new Intent(MeetingManager.this,CreateMeeting.class);
startActivityForResult(myIntent, 0);
}
});
}
}
XML:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/meetingbg"
>
<TableRow android:layout_height="wrap_content" android:layout_width="match_parent" android:id="#+id/tableRow5">
<Button android:text="Button" android:id="#+id/button1" android:layout_width="wrap_content" android:layout_height="wrap_content"></Button>
</TableRow>
</LinearLayout>
If listening for user interaction via tapping on screen is your aim, I would recommend added a touch listener to your LinearLayout. This removes the need for a Button.
E.g.
LinearLayout layout = (LinearLayout) findViewById(R.id.your_layout);
layout.setOnTouchListener(new OnTouchListener() {
#Override
public boolean onTouch(View v, MotionEvent event) {
return false;
}
});
});
XML:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/your_layout"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/meetingbg"
>
<TableRow android:layout_height="wrap_content" android:layout_width="match_parent" android:id="#+id/tableRow5">
<Button android:text="Button" android:id="#+id/button1" android:layout_width="wrap_content" android:layout_height="wrap_content"></Button>
</TableRow>
</LinearLayout>
You may have to include the following imports:
import android.view.View.OnTouchListener;
import android.view.MotionEvent;
try to use null in the background android:background="#null"
As by object, I would reproduce fade effect between two layout.
Now I've this situation:
LinearLayout l;
LinearLayout l2;
To switch between them I've used
l.setVisibility(View.GONE);
l2.setVisibility(View.VISIBLE);
I want add fade effect between this transiction, how I can do it?
Here is a working solution to cross fade between 2 layouts:
public class CrossFadeActivity extends Activity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.crossfade);
final View l1 = findViewById(R.id.l1);
final View l2 = findViewById(R.id.l2);
final Animation fadeOut = AnimationUtils.loadAnimation(CrossFadeActivity.this, R.anim.fade_out);
final Animation fadeIn = AnimationUtils.loadAnimation(CrossFadeActivity.this, R.anim.fade_in);
findViewById(R.id.button1).setOnClickListener(new OnClickListener() {
#Override
public void onClick(View v) {
fadeOut.setAnimationListener(new AnimationListener() {
#Override
public void onAnimationStart(Animation animation) {
}
#Override
public void onAnimationRepeat(Animation animation) {
}
#Override
public void onAnimationEnd(Animation animation) {
l1.setVisibility(View.GONE);
}
});
l1.startAnimation(fadeOut);
l2.setVisibility(View.VISIBLE);
l2.startAnimation(fadeIn);
}
});
findViewById(R.id.button2).setOnClickListener(new OnClickListener() {
#Override
public void onClick(View v) {
fadeOut.setAnimationListener(new AnimationListener() {
#Override
public void onAnimationStart(Animation animation) {
}
#Override
public void onAnimationRepeat(Animation animation) {
}
#Override
public void onAnimationEnd(Animation animation) {
l2.setVisibility(View.GONE);
}
});
l2.startAnimation(fadeOut);
l1.setVisibility(View.VISIBLE);
l1.startAnimation(fadeIn);
}
});
}
}
crossfade.xml:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<LinearLayout
android:id="#+id/l1"
android:layout_width="fill_parent"
android:layout_height="300dip"
android:orientation="vertical"
android:background="#drawable/someimage"
>
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
</LinearLayout>
<RelativeLayout
android:id="#+id/l2"
android:layout_width="fill_parent"
android:layout_height="300dip"
android:orientation="vertical"
android:background="#drawable/someimage2"
android:visibility="gone"
>
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button"
android:layout_centerInParent="true"
/>
</RelativeLayout>
</RelativeLayout>
Where l1 and l2 are 2 random example layouts. The trick is to put them in XML such that they overlap each other (e.g. in a RelativeLayout) with visible / gone, add listeners to the animations to toggle the visibility on finish, and set the view which has to fade in to visible before the animation starts, otherwise the animation will not be visible.
I put the buttons with the listeners to toggle the animation in the layouts itself, because I need to implement it that way but the click listener can be of course somewhere else (if it's only one it should be used in combination with some flag or check to know how to toggle).
These are the animation files. They have to be stored in folder res/anim:
fade_in.xml
<?xml version="1.0" encoding="UTF-8"?>
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="1000"
android:fillAfter="true"
android:fromAlpha="0.0"
android:toAlpha="1.0" />
fade_out.xml
<?xml version="1.0" encoding="UTF-8"?>
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="1000"
android:fillAfter="true"
android:fromAlpha="1.0"
android:toAlpha="0" />
UPDATE:
Instead of using R.anim.fade_in, you can use the default fade_in from Android API (android.R.fade_in):
final Animation fadeIn = AnimationUtils.loadAnimation(CrossFadeActivity.this, android.R.anim.fade_in);
Using android.R.anim.fade_in, you will not need to create the file res/anim/fade_in.xml.
Android has a package with some useful animations on android.R.anim: http://developer.android.com/reference/android/R.anim.html
Using R.anim.fade_out & .R.anim.fade_in you can create an animation which does this. I don't know much about this myself but heres a tutorial regarding animations in android: Animation Tutorial
P.S. This tutorial is not mine thus credit does not go out to me.
Edit:
AnimationSet set = new AnimationSet(true);
Animation animation = new AlphaAnimation(0.0f, 1.0f);
animation.setDuration(50);
set.addAnimation(animation);
animation = new TranslateAnimation(
Animation.RELATIVE_TO_SELF, 0.0f,Animation.RELATIVE_TO_SELF, 0.0f,
Animation.RELATIVE_TO_SELF, -1.0f,Animation.RELATIVE_TO_SELF, 0.0f
);
animation.setDuration(100);
set.addAnimation(animation);
LayoutAnimationController controller = new LayoutAnimationController(set, 0.5f);
l.setLayoutAnimation(controller);
Fade out Animation
public static Animation runFadeOutAnimationOn(Activity ctx, View target) {
Animation animation = AnimationUtils.loadAnimation(ctx,android.R.anim.fade_out);
target.startAnimation(animation);
return animation;
}
I'm guessing you can try something like this, I copy pasted the animation from the tutorial I don't know what it does exactly as I have no experience with Android development. Another example could be Example 2
Since android 3.0 you can use
android:animateLayoutChanges="true"
in a layout in xml and any changes to this specific layouts content at run time will be animated. For example, in your case, you will need to set this attribute for the parent for the parent layout of l and l2 e.g
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
tools:context="me.kalem.android.RegistrationActivity"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:animateLayoutChanges="true"
android:padding="20dp">
<LinearLayout
android:id="#+id/l1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:visibility="visible">
........
</LinearLayout>
<LinearLayout
android:id="#+id/l2"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:visibility="gone">
........
</LinearLayout>
</LinearLayout>
Now hiding l1 and showing l2 at runtime will be animated.