Develop Reference

Smooth Translation of a View across Fragments in ViewPager Android

I have to do simple translation , i have to move image from left (Activity & Fragment 1 are on screen)
Now as I am scrolling the Page(Fragment) the Fragment 1 is going toward left , Fragment 2 is coming from right and the Image should also translate from left to right
activity_intro.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:id="#+id/relativeLayout"
tools:context="com.example.rahulkumarlohra.retrofitsample.Retro.Activity.IntroActivity">
<android.support.v4.view.ViewPager
android:id="#+id/viewPager"
android:layout_width="match_parent"
android:layout_height="wrap_content">
</android.support.v4.view.ViewPager>
<ImageView
android:id="#+id/imageView1"
android:src="#mipmap/plus_icon_blue_xxhdpi"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentStart="true"
android:layout_marginBottom="143dp" />
<ImageView
android:id="#+id/imageView2"
android:src="#mipmap/plus_icon_blue_xxhdpi"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/viewPager"
android:layout_alignEnd="#+id/viewPager"
android:layout_marginTop="81dp" />
The above code is activity_intro.xml
I have a imageView outside ViewPager , i want to translate this imageView across fragments in ViewPager.Right now I am able to do translation of this imageView using viewPager.addOnPageChangeListener but the translation isn't smooth
Below is the code for viewPager.addOnPageChangeListener
viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
#Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
Log.d(TAG,"position:"+position);
Log.d(TAG,"positionOffset:"+positionOffset);
Log.d(TAG,"positionOffsetPixels:"+positionOffsetPixels);
DecimalFormat df = new DecimalFormat("#.##");
float movement = (Float.parseFloat(df.format(positionOffset)));
int rlWidth = relativeLayout.getWidth();
IntroActivity.c = movement;
imageView1.animate().translationX(positionOffsetPixels).start();
if(movement!=IntroActivity.c)
{
if(movement>IntroActivity.c)
{
if(movement-IntroActivity.c>0.03)
{
imageView1.animate().translationX(rlWidth*movement).withLayer().start();
IntroActivity.c = movement;
}
}else {
if(IntroActivity.c-movement>0.03)
{
imageView1.animate().translationX(rlWidth*movement).withLayer().start();
IntroActivity.c = movement;
}
}
}
}
#Override
public void onPageSelected(int position) {
Log.d(TAG,"onPage Selected position:"+position);
}
#Override
public void onPageScrollStateChanged(int state) {
}
});

Animation to show ImageView from left to right
OR
Use style for the image
<translate xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="600"
android:fromXDelta="100%"
android:toXDelta="0%"/>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
android:fromXDelta="0%" android:toXDelta="100%"
android:fromYDelta="0%" android:toYDelta="0%"
android:duration="600"/>

Rotate image 90 degrees ontouch left or right

So I'm in a bit of a crysis. I'm creating a game and I have a square with 4 different colors on each side. Can't seem to make the square rotate 90deg on right screen touch and -90deg on left screen tap. I can get it to rotate on tap but not stay at the position. Like it to be as smooth as possible.
The Activity:
public class GameActivity extends Activity implements OnTouchListener {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_game);
// Reference to the left and right linear screens
LinearLayout leftTap = (LinearLayout) findViewById(R.id.leftTap);
leftTap.setOnTouchListener(this);
LinearLayout rightTap = (LinearLayout) findViewById(R.id.rightTap);
rightTap.setOnTouchListener(this);
}
#Override
public boolean onTouch(View v, MotionEvent event) {
// Square itself
ImageView square = (ImageView) findViewById(R.id.square);
// Left and Right Animations
Animation leftAnimation = AnimationUtils.loadAnimation(this, R.anim.rotate_left_animation);
Animation rightAnimation = AnimationUtils.loadAnimation(this, R.anim.rotate_right_animation);
switch (v.getId()) {
case R.id.leftTap:
// Do left Rotate animation
square.startAnimation(leftAnimation);
break;
case R.id.rightTap:
// Do right Rotate animation
square.startAnimation(rightAnimation);
break;
default:
break;
}
return false;
}
}
The Layout:
<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"
tools:context=".GameActivity"
android:weightSum="1"
android:theme="#android:style/Theme.NoTitleBar.Fullscreen">
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/leftTap"
android:visibility="visible"
android:layout_alignParentTop="true"
android:layout_toLeftOf="#+id/square"></LinearLayout>
<ImageView
android:contentDescription="The Square"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:id="#+id/square"
android:src="#drawable/photo"
android:scaleType="fitCenter" />
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/rightTap"
android:visibility="visible"
android:layout_alignParentTop="true"
android:layout_toRightOf="#+id/square"></LinearLayout>
</RelativeLayout>
Left Tap Animation XML:
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<rotate
android:duration="500"
android:interpolator="#android:anim/linear_interpolator"
android:pivotX="50%"
android:pivotY="50%"
android:toDegrees="-90"/>
</set>
Right Tap Animation XML:
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<rotate
android:duration="500"
android:interpolator="#android:anim/linear_interpolator"
android:pivotX="50%"
android:pivotY="50%"
android:toDegrees="90"/>
I could:
switch (v.getId()) {
case R.id.leftClick:
square.setRotation(square.getRotation() - 90);
break;
case R.id.rightClick:
square.setRotation(square.getRotation() + 90);
break;
default:
break;
}
But it won't have the animation (basically linear interpolation) affect. I want to know how can that be done?

Just use ViewPropertyAnimator.
Your OnTouchListener could look like this (although I'm not really sure why you've decided you wanna use OnTouchListener instead of for example OnClickListener):
#Override
public boolean onTouch(View v, MotionEvent event) {
if (event.getAction() == MotionEvent.ACTION_DOWN) {
switch (v.getId()) {
case R.id.leftTap:
// Do left Rotate animation
square.animate().rotation(-90).setInterpolator(new LinearInterpolator()).setDuration(500);
break;
case R.id.rightTap:
// Do right Rotate animation
square.animate().rotation(90).setInterpolator(new LinearInterpolator()).setDuration(500);
break;
default:
break;
}
}
return v.onTouchEvent(event);
}
Or you could use rotationBy instead of rotation if that fits your needs better.

How to animate android fragment in and out of the screen with support library

I'm trying to show a fragment inside my activity wich contains a menu and it is supposed to slide in from the right side of the screen until the user dismisses it pressing the button again or pressing back button, then it should slide out to where it came from, both actions with an animation of course. The problem is that the fragment slides in, but I can't make it to slide out with the animation, it just pops out dissapearing. I've readed some similar posts but a haven't found any working solution for my situation.
Here is the code that should get the job done:
private void showMenuFragment() {
if (this.frMenu == null) {
this.frMenu = new MenuFragment();
FragmentTransaction transaction = this.getSupportFragmentManager()
.beginTransaction();
transaction.setCustomAnimations(R.anim.slide_in_right, R.anim.slide_out_right);
transaction.replace(R.id.fr_side_menu, this.frMenu);
transaction.addToBackStack(MenuFragment.class.getName());
transaction.commit();
}
else {
this.frMenu = null;
this.onBackPressed();
}
}
Animations:
File slide_in_right.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate
android:duration="500"
android:fromXDelta="100%"
android:toXDelta="0%" >
</translate>
</set>
File slide_out_right.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >
<translate
android:duration="500"
android:fromXDelta="0%"
android:toXDelta="100%" >
</translate>
</set>
Please help!
Thanks in advance.

The Android docs explain, for setCustomAnimations(int enter, int exit)
These animations will not be played when popping the back stack.
So, you must use the longer form, which has additional parameters for popEnter, and popExit:
transaction.setCustomAnimations(R.anim.slide_in_right,
R.anim.slide_out_right,
R.anim.slide_in_left,
R.anim.slide_out_left);
To make this look right, you may want to define slide_in_left and slide_out_left, but that depends what you're going for...

After some research I've found a very simple solution using a complete different approach, hope it helps somebody.
The things is animate in and out a layout containing the information formerly inside the fragment but without a fragment. Initially the layout visibility is set to "GONE" and it is showed in respnd to a user's action like swipe or pressing a button.
Here is the complete example:
1 - The activity handling user actions:
public class MainActivity extends Activity {
private LinearLayout ll;
private float startX;
private Animation animLeft;
private Animation animRight;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ll = (LinearLayout) findViewById(R.id.slider);
ll.setVisibility(View.GONE);
animLeft = AnimationUtils.loadAnimation(this, R.anim.anim_left);
animRight = AnimationUtils.loadAnimation(this, R.anim.anim_right);
}
#Override
public boolean onTouchEvent(MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN: {
startX = event.getX();
break;
}
case MotionEvent.ACTION_UP: {
float endX = event.getX();
if (endX < startX) {
System.out.println("Move left");
ll.setVisibility(View.VISIBLE);
ll.startAnimation(animLeft);
}
else {
ll.startAnimation(animRight);
ll.setVisibility(View.GONE);
}
}
}
return true;
}
}
2 - The layout containing the sliding "menu":
<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="#android:color/holo_blue_bright" >
<LinearLayout
android:id="#+id/slider"
android:layout_width="100dp"
android:layout_height="match_parent"
android:layout_alignParentRight="true"
android:background="#android:color/darker_gray"
android:content="#+id/content"
android:gravity="bottom|center_horizontal"
android:orientation="vertical" >
<TextView
android:id="#id/content"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Surviving with android" />
</LinearLayout>
</RelativeLayout>

How to create facebook style bottom fly in menu

I like to create action bar / menu as Facebook android application .
I am talking about (Status | Photo | Check In) menu that appears in bottom pf application.
1.How can I create this kind of menu?
2.How to create fly in affect on that menu ?
Is that action bar ? or Relative layout at bottom ?
Thanks.

Here is a code of a floating layout.You can customize it to build a menu.
public class MainActivity extends Activity {
LinearLayout ll;
Float startY;
private Animation animUp;
private Animation animDown;
Button btn_show;
int f=1;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ll = (LinearLayout) findViewById(R.id.slider);
btn_show=(Button)findViewById(R.id.btn_show);
ll.setVisibility(View.GONE);
animUp = AnimationUtils.loadAnimation(this, R.anim.anim_up);
animDown = AnimationUtils.loadAnimation(this, R.anim.anim_down);
btn_show.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
// TODO Auto-generated method stub
if(f==1)
{
ll.setVisibility(View.VISIBLE);
ll.startAnimation(animUp);
f=0;
}
else{
ll.setVisibility(View.GONE);
ll.startAnimation(animDown);
f=1;
}
}
});
}
#Override
public boolean onTouchEvent(MotionEvent event)
{
switch (event.getAction())
{
case MotionEvent.ACTION_DOWN :
{
startY = event.getY();
break ;
}
case MotionEvent.ACTION_UP:
{
float endY = event.getY();
if (endY < startY)
{
System.out.println("Move UP");
ll.setVisibility(View.VISIBLE);
ll.startAnimation(animUp);
}
else {
ll.setVisibility(View.GONE);
ll.startAnimation(animDown);
}
}
} return true;
}
}
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:background="#android:color/black">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Show"
android:id="#+id/btn_show"
/>
<LinearLayout android:id="#+id/slider"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="false"
android:layout_alignParentTop="false"
android:layout_centerInParent="true"
android:background="#android:color/darker_gray"
android:content="#+id/content"
android:gravity="bottom|center_horizontal"
android:orientation="vertical" >
<TextView android:id="#id/content"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Floating Tab Kaustav"/>
</LinearLayout>
</RelativeLayout>
Create a anim folder in res and make 2 xml files:
anim_down.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate android:fromYDelta="0%"
android:toYDelta="100%"
android:duration="400"/>
</set>
anim_up.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate android:fromYDelta="100%"
android:toYDelta="40%"
android:duration="400"/>
</set>
Try it.Hope it helps.

An easy way to make GONE animation work

I have a custom search panel, which is a part of main layout. Most of time the panel is hidden. I would like to add appearing/disappearing animation to the panel. Here is the simplified layout excerpt:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<RelativeLayout
android:id="#+id/layoutSearch"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:visibility="gone" >
<EditText
android:id="#+id/editSearch"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
<<Other inner views to be animated>>
</RelativeLayout>
<<Other views, which should not be affected by the animation>>
</LinearLayout>
Try 1: I added animation resources and attach them to the #id/layoutSearch with this line in XML:
android:layoutAnimation="#anim/search_in_layout"
anim/search_in.xml:
<translate
xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="#android:anim/overshoot_interpolator"
android:fromYDelta="-100%p"
android:toYDelta="0"
android:duration="#android:integer/config_longAnimTime" />
anim/search_in_layout.xml:
<layoutAnimation
xmlns:android="http://schemas.android.com/apk/res/android"
android:animation="#anim/search_in" />
The animation works fine, but only for the panel appearing. The panel disappears in a moment without animation when I hide it with:
mSearchLayout.setVisibility(View.GONE);
Try 2: I guess the above solution does not work as the animation destination parameters match the current panel position. OK, I created two more animation resources: anim/search_out.xml and anim/search_out_layout.xml. The only differences are exchanged "fromYDelta" and "toYDelta" values and updated "android:animation" value. Then I load the resources in the code and set them to the #id/layoutSearch like this:
LayoutAnimationController controller =
AnimationUtils.loadLayoutAnimation(this, R.anim.search_out_layout);
mSearchLayout.setLayoutAnimation(controller);
The "out" animation triggered on calling of setLayoutAnimation(). After the animation the search panel returns to it original position on the screen it had before "out" animation. If I try to call mSearchLayout.setVisibility(View.GONE) just after setLayoutAnimation(), I see no animation, the panel disappears at once.
Try 3: I guess I need to create the animation in the code and then set a listener on it. Then I should call mSearchLayout.setVisibility(View.GONE) in the onAnimationEnd() handler to hide the panel after the animation played. I did not tried this yet. I think it's over complicated.
I guess I missed something important. Is there a way to implement GONE animation a bit easy?

To follow on to the answers above : here is how I solved this problem.
Please note that setting setFillBefore and setFillAfter in your animation will lead to the following bug! Issue 5272: View with visibility View.GONE still generates touch events
http://code.google.com/p/android/issues/detail?id=5272
File : MyWebViewActivity.java
private View mBottomOverlay;
private View mTopOverlay;
private boolean mControlsOverlayVisible;
private Animation mSlideBottomUpAnimation;
private Animation mSlideBottomDownAnimation;
private Animation mSlideTopDownAnimation;
private Animation mSlideTopUpAnimation;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.reader_layout);
// load the overlay resources
mTopOverlay = findViewById(R.id.reader_overlay_top_toolbar);
mBottomOverlay = findViewById(R.id.reader_overlay_bottom_toolbar);
initAnimations();
}
private void initAnimations() {
final AnimationListener makeTopGone = new AnimationListener() {
#Override
public void onAnimationStart(Animation animation) {}
#Override
public void onAnimationRepeat(Animation animation) {}
#Override
public void onAnimationEnd(Animation animation) {
Log.d(TAG, "onAnimationEnd - makeTopGone");
mTopOverlay.setVisibility(View.GONE);
}
};
final AnimationListener makeBottomGone = new AnimationListener() {
#Override
public void onAnimationStart(Animation animation) {}
#Override
public void onAnimationRepeat(Animation animation) {
}
#Override
public void onAnimationEnd(Animation animation) {
Log.d(TAG, "onAnimationEnd - makeBottomGone");
mBottomOverlay.setVisibility(View.GONE);
}
};
final AnimationListener makeTopVisible = new AnimationListener() {
#Override
public void onAnimationStart(Animation animation) {
Log.d(TAG, "onAnimationStart - makeTopVisible");
mTopOverlay.setVisibility(View.VISIBLE);
}
#Override
public void onAnimationRepeat(Animation animation) {}
#Override
public void onAnimationEnd(Animation animation) {}
};
final AnimationListener makeBottomVisible = new AnimationListener() {
#Override
public void onAnimationStart(Animation animation) {
Log.d(TAG, "onAnimationStart - makeBottomVisible");
mBottomOverlay.setVisibility(View.VISIBLE);
}
#Override
public void onAnimationRepeat(Animation animation) {}
#Override
public void onAnimationEnd(Animation animation) {}
};
mSlideTopUpAnimation = AnimationUtils.loadAnimation(this, R.anim.slide_top_up);
mSlideBottomDownAnimation = AnimationUtils.loadAnimation(this, R.anim.slide_bottom_down);
mSlideTopUpAnimation.setAnimationListener(makeTopGone);
mSlideBottomDownAnimation.setAnimationListener(makeBottomGone);
mSlideTopDownAnimation = AnimationUtils.loadAnimation(this, R.anim.slide_top_down);
mSlideBottomUpAnimation = AnimationUtils.loadAnimation(this, R.anim.slide_bottom_up);
mSlideTopDownAnimation.setAnimationListener(makeTopVisible);
mSlideBottomUpAnimation.setAnimationListener(makeBottomVisible);
}
private void hideControlOverlays() {
Log.d(TAG, "hideControlOverlays");
mTopOverlay.startAnimation(mSlideTopUpAnimation);
mBottomOverlay.startAnimation(mSlideBottomDownAnimation);
mControlsOverlayVisible = false;
}
private void showControlOverlays() {
Log.d(TAG, "showControlOverlays");
mTopOverlay.startAnimation(mSlideTopDownAnimation);
mBottomOverlay.startAnimation(mSlideBottomUpAnimation);
mControlsOverlayVisible = true;
}
File : /res/layout/reader_layout.xml
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/reader_layout"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<WebView
android:id="#+id/webview"
android:layout_width="fill_parent"
android:layout_height="fill_parent" />
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/reader_overlay_layout"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<LinearLayout
android:id="#+id/reader_overlay_top_toolbar"
android:layout_width="fill_parent"
android:layout_height="140dp"
android:background="#80000000" >
<include layout="#layout/toolbar_top" />
</LinearLayout>
<LinearLayout
android:id="#+id/reader_overlay_bottom_toolbar"
android:layout_width="fill_parent"
android:layout_height="140dp"
android:layout_gravity="bottom"
android:background="#80000000"
android:orientation="horizontal" >
<include layout="#layout/toolbar_bottom_left" />
</LinearLayout>
</FrameLayout>
</FrameLayout>
File : /res/anim/slide_bottom_down.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:fillEnabled="true"
android:interpolator="#android:anim/accelerate_interpolator" >
<translate
android:duration="#android:integer/config_shortAnimTime"
android:fromYDelta="0"
android:toYDelta="100%" />
</set>
File : /res/anim/slide_bottom_up.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="#android:anim/accelerate_interpolator" >
<translate
android:duration="#android:integer/config_shortAnimTime"
android:fromYDelta="100%"
android:toYDelta="0" />
</set>
File : /res/anim/slide_top_down.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="#android:anim/accelerate_interpolator" >
<translate
android:duration="#android:integer/config_shortAnimTime"
android:fromYDelta="-100%"
android:toYDelta="0" />
</set>
File : /res/anim/slide_top_up.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:fillEnabled="true"
android:interpolator="#android:anim/accelerate_interpolator" >
<translate
android:duration="#android:integer/config_shortAnimTime"
android:fromYDelta="0"
android:toYDelta="-100%" />
</set>

Try 3: I guess I need to create the animation in the code and then set a listener on it. Then I should call mSearchLayout.setVisibility(View.GONE) in the onAnimationEnd() handler to hide the panel after the animation played. I did not tried this yet. I think it's over complicated.
That's what you should do and actually that's not hard to achieve.
Sample code:
public class YourClass extends Foo implements AnimationListener {
//...
#Override
public void onAnimationEnd(Animation a) {
// Do stuff.
}
#Override
public void onAnimationRepeat(Animation a) {
}
#Override
public void onAnimationStart(Animation a) {
}
}

you need to call setFillAfter() of Animation Class to hold the animation after playing.
RelativeLayout layout = (RelativeLayout) findViewById(R.id.layoutSearch);
Animation a = AnimationUtils.loadAnimation(this, R.anim.push_down);
a=setFillAfter(true);
layout.setLayoutAnimation(new LayoutAnimationController(a));
layout.startLayoutAnimation();

Setting a View to GONE effectively removes it from the layout. Instead you should set it to INVISIBLE, and then GONE after the animation has completed if you need to.