I'm trying to make scrollable RelativeLayout, that contains some custom Views. This is the plan of cinema hall, i have x, y coordinates of places and it's width and height (that are just rectangales, actually). I just put it into this RelativeLayout:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="fill_parent"
android:layout_width="fill_parent"
android:padding="10px">
<ScrollView
android:layout_height="wrap_content"
android:layout_width="fill_parent">
<RelativeLayout android:id="#+id/scrollable_places"
android:layout_height="wrap_content"
android:layout_width="wrap_content">
</RelativeLayout>
</ScrollView>
I put it like this:
RelativeLayout layout = (RelativeLayout) context.findViewById(R.id.scrollable_places);
RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(place.getWidth(),
place.getHeight());
params.leftMargin = place.getX();
params.topMargin = place.getY();
layout.addView(new Seat(context, place), params);
Seat class looks like this:
public class Seat extends View {
private Place place;
private boolean isRed = false;
public Seat(Context context, Place place) {
super(context);
this.place = place;
setOnClickListener(new OnSeatClickListener());
}
#Override
protected void onDraw(Canvas canvas) {
if (!isRed)
canvas.drawColor(Color.GREEN);
else
canvas.drawColor(Color.RED);
}
protected void setRed() {
isRed = true;
}
private class OnSeatClickListener implements OnClickListener {
#Override
public void onClick(View view) {
((Seat) view).setRed();
view.invalidate();
}
}
}
Views are drawing perfectly. But I have ann array of views, and when some of them go out of the screen, scrollView didn't work, there is no scroll on the screen. Have you any ideas how can I make this layout scroll?
You should try following xml file. It will work on all the devices.
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:fillViewport="true"
android:padding="10px"
android:layout_height="fill_parent"
android:layout_width="fill_parent">
<RelativeLayout android:id="#+id/scrollable_places"
android:layout_height="wrap_content"
android:layout_width="wrap_content">
</RelativeLayout>
</ScrollView>
Thanks.
In scroll view you have written android:layout_height="wrap_content" instead of using wrap_content five specific height size eg android:layout_height="100dip"
Thanks
Deepak
Related
I have grid view which is using GridLayoutManager and the RecyclerView
grid has 3 rows which are working fine as you see,[![enter image description here][1]][1]
but for some reason, image views scale type won't work on any of the items and those items you see work fine because the resolution already is square mean 512*512 but if you see the last item that has low resolution it have white space in left and right.
that's my code from a setup list
int getori = getResources().getConfiguration().orientation;
if (getori == Configuration.ORIENTATION_PORTRAIT) {
gl = new GridLayoutManager(getBaseContext(), 3);
} else if (getori == Configuration.ORIENTATION_LANDSCAPE){
gl = new GridLayoutManager(getBaseContext(), 6);
}
gg.setHasFixedSize(true);
gg.setFitsSystemWindows(true);
gg.setLayoutManager(gl);
gg.setAdapter(startpostsystem);
that's my grid adapter code
#Override
public void onBindViewHolder(Grid_view holder, final int position) {
holder.im.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
String getfiledop = fall[position].getAbsolutePath();
Intent is = new Intent(cm,Open_post_item.class);
is.putExtra("req",12);
cm.startActivity(is);
and this is my grid view items layout code.
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="140dp">
<ImageView
android:id="#+id/imageView18"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:adjustViewBounds="true"
app:srcCompat="#drawable/sunbow100" />
I tried to use :
android:scaleType="centerCrop"
android:adjustViewBounds="true"
or fitxy it make it worse
view bounds won't work either.
if i add more images like 800*400 or ... it will have white space
so where is problem where I do wrong.
try using android:src in place of app:srcCompat
<ImageView
android:id="#+id/imageView18"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:adjustViewBounds="true"
android:src="#drawable/sunbow100" />
When I scroll within my Android scrollview, it scrolls down as it should.
But I'd like the image within the imageview to anchor to the centre. So you always see the face of the person in the image as you scrolling up.
So far I have not been able to accomplish this
A similar effect is created in the image below:
Stockguy image:
My code so far (which so far doesn't accomplish this):
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fillViewport="true"
android:scrollbars="none"
android:background="#FAFAFA"
android:id="#+id/cScrollview"
>
<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="1100dp"
tools:context=".MainActivity"
android:id="#+id/CRLayout">
<ImageView
android:layout_gravity="center"
android:adjustViewBounds="true"
android:layout_width="601dp"
android:layout_height="250dp"
android:paddingTop="0dp"
android:paddingLeft="0dp"
android:paddingRight="0dp"
android:scaleType="centerCrop"
android:id="#+id/contactPic"
android:src="#drawable/stockguy"/>
....
</RelativeLayout>
</ScrollView>
To achieve parallax effect like on image you posted try following code. It is a very simple way.
Layout:
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/scrollView"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:id="#+id/rlWrapper"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/ivContactPhoto"
android:layout_width="match_parent"
android:layout_height="#dimen/contact_photo_height"
android:scaleType="centerCrop"
android:src="#drawable/stockguy" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="#dimen/contact_photo_height"
android:layout_marginTop="250dp">
<!-- Other Views -->
</LinearLayout>
</RelativeLayout>
</ScrollView>
LinearLayout's top margin is equal to the ImageViews's height.
Listening scroll position of the ScrollView and changing position of ImageView:
#Override
protected void onCreate(Bundle savedInstanceState) {
<...>
mScrollView = (ScrollView) findViewById(R.id.scrollView);
mPhotoIV = (ImageView) findViewById(R.id.ivContactPhoto);
mWrapperRL = (RelativeLayout) findViewById(R.id.rlWrapper);
mScrollView.getViewTreeObserver().addOnScrollChangedListener(new ScrollPositionObserver());
<...>
}
private class ScrollPositionObserver implements ViewTreeObserver.OnScrollChangedListener {
private int mImageViewHeight;
public ScrollPositionObserver() {
mImageViewHeight = getResources().getDimensionPixelSize(R.dimen.contact_photo_height);
}
#Override
public void onScrollChanged() {
int scrollY = Math.min(Math.max(mScrollView.getScrollY(), 0), mImageViewHeight);
// changing position of ImageView
mPhotoIV.setTranslationY(scrollY / 2);
// alpha you can set to ActionBar background
float alpha = scrollY / (float) mImageViewHeight;
}
}
Hope it will help.
I'd take a different approach with that.
Try building your layout based on the following snippet:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/image"
android:layout_width="match_parent"
android:background="#00FF00"
android:scaleType="centerCrop"
android:layout_height="200dp"/>
<FrameLayout
android:id="#+id/content"
android:layout_below="#+id/image"
android:background="#FF0000"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</RelativeLayout>
Using the GestureDetector.SimpleOnGestureListeneryou can detect when the user scrolls on the content layout and update the image size and alpha accordingly to get the effect you describe.
I would implement this using a scroll callback on the ScrollView, this doesn't exist by default but is easy to create yourself by extending ScrollView:
public class UpdatingScrollView extends ScrollView {
private OnScrollChangedListener mScrollChangedListener;
public interface OnScrollChangedListener {
public void onScrollChanged(int x, int y, int oldx, int oldy);
}
public UpdatingScrollView(Context context) {
super(context);
}
public UpdatingScrollView(Context context, AttributeSet attrs) {
super(context, attrs);
}
public UpdatingScrollView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
}
public void setOnScrollChangedListener(OnScrollChangedListener listener) {
mScrollChangedListener = listener;
}
#Override
protected void onScrollChanged(int x, int y, int oldx, int oldy) {
super.onScrollChanged(x, y, oldx, oldy);
if (mScrollChangedListener != null) mScrollChangedListener.onScrollChanged(x, y, oldx, oldy);
}
}
So replace ScrollView in your layout with com.your.package.UpdatingScrollView.
In your Fragment/Activity where the UpdatingScrollView is defined you set the scroll listener and update the bottom margin of the image based on the scroll offset. For every 2 pixels the ScrollView has scrolled you'll want to update the bottom margin by -1 pixel which will make the image move up the screen at half the rate of the rest of the content.
So something like this:
scrollView.setOnScrollChangedListener(new OnScrollChangedListener() {
#Override
public void onScrollChanged(int x, int y, int oldx, int oldy) {
// I think y will be negative when scrolled
if(y >= -image.getHeight()) {
RelativeLayout.LayoutParams lp = (RelativeLayout.LayoutParams) image.getLayoutParams();
lp.setMargins(0, 0, 0, y / 2);
image.setLayoutParams(lp);
}
}
});
My app puts an invisible overlay on the left edge of the screen, and if the user swipes from the bottom half, I want to catch this event and do something with it. The problem is that instead of only the bottom half, all touch events on the upper half of the edge (which is 8dp wide) are also consumed and thus not passed to the app underneath it.
Layout file:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:custom="http://schemas.android.com/apk/res-auto"
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/llLauncher"
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:background="#color/transparentblack80"
android:visibility="gone">
<be.robinj.ubuntu.unity.launcher.AppLauncher
android:layout_width="wrap_content"
android:layout_height="wrap_content"
custom:icon="#drawable/launcher_bfb"
custom:special="true"
android:onClick="lalBfb_clicked"
android:id="#+id/lalBfb"
android:layout_marginTop="2dp"
android:tag="partOfLauncher" />
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/scrLauncherAppsContainer"
android:scrollbars="none"
android:layout_weight="1"
android:fillViewport="false"
android:tag="partOfLauncher">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/llLauncherPinnedApps"
android:layout_gravity="top"
android:tag="partOfLauncher">
</LinearLayout>
</ScrollView>
</LinearLayout>
<LinearLayout
android:id="#+id/llListenerContainer"
android:orientation="vertical"
android:layout_width="8dp"
android:layout_height="match_parent"
android:weightSum="2"
android:gravity="bottom">
<LinearLayout
android:id="#+id/llListener"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#FF0000">
</LinearLayout>
</LinearLayout>
<LinearLayout
android:id="#+id/llShadow"
android:orientation="vertical"
android:layout_width="160dp"
android:layout_height="match_parent"
android:background="#drawable/launcherservice_shadow"
android:visibility="gone"
android:tag="shadow">
</LinearLayout>
</LinearLayout>
llListenerContainer and its child element llListener are what's of importance here. The other two elements are hidden by default and will be shown when a touch on the bottom half of the left edge of the screen is detected.
On the following screenshot I've made llListener visible by giving it a red background colour;
So touches inside the red area should be handled by my service, but touches on the upper half of the left edge should just be handled by the app underneath it.
Relevant Java code;
public class LauncherService extends Service
{
private WindowManager wm;
private TouchListener touchListener;
private LinearLayout layout;
private LinearLayout llListenerContainer;
private LinearLayout llListener;
private LinearLayout llLauncher;
private LinearLayout llShadow;
#Override
public IBinder onBind (Intent intent)
{ return null; }
#Override
public void onCreate ()
{
super.onCreate ();
this.wm = (WindowManager) this.getSystemService (WINDOW_SERVICE);
LayoutInflater inflater = (LayoutInflater) this.getSystemService (Service.LAYOUT_INFLATER_SERVICE);
this.layout = (LinearLayout) inflater.inflate (R.layout.service_launcher, null, false);
this.llLauncher = (LinearLayout) this.layout.findViewById (R.id.llLauncher);
this.llListenerContainer = (LinearLayout) this.layout.findViewById (R.id.llListenerContainer);
this.llListener = (LinearLayout) this.layout.findViewById (R.id.llListener);
this.llShadow = (LinearLayout) this.layout.findViewById (R.id.llShadow);
WindowManager.LayoutParams params = new WindowManager.LayoutParams(
WindowManager.LayoutParams.WRAP_CONTENT,
WindowManager.LayoutParams.MATCH_PARENT,
WindowManager.LayoutParams.TYPE_PHONE,
WindowManager.LayoutParams.FLAG_NOT_FOCUSABLE,
PixelFormat.TRANSLUCENT);
params.gravity = Gravity.TOP | Gravity.LEFT;
params.x = 0;
params.y = 0;
this.touchListener = new TouchListener (this);
lalBfb.setOnTouchListener (this.touchListener);
this.llListener.setOnTouchListener (this.touchListener);
this.llShadow.setOnTouchListener (this.touchListener);
this.wm.addView (this.layout, params);
}
#Override
public int onStartCommand (Intent intent, int flags, int id)
{
this.layout.setVisibility (intent.getBooleanExtra ("show", true) ? View.VISIBLE : View.GONE);
return super.onStartCommand (intent, flags, id);
}
#Override
public void onDestroy ()
{
super.onDestroy ();
this.wm.removeView (this.layout);
}
//# Event handlers #//
public void swipeRight ()
{
this.llLauncher.setVisibility (View.VISIBLE);
this.llShadow.setVisibility (View.VISIBLE);
this.llListenerContainer.setVisibility (View.GONE);
}
public void swipeLeft ()
{
this.llLauncher.setVisibility (View.GONE);
this.llShadow.setVisibility (View.GONE);
this.llListenerContainer.setVisibility (View.VISIBLE);
}
}
public class TouchListener implements View.OnTouchListener
{
private LauncherService parent;
public TouchListener (LauncherService parent)
{ this.parent = parent; }
#Override
public boolean onTouch (View view, MotionEvent event)
{
int id = view.getId ();
if (id == R.id.llListener)
{
this.parent.swipeRight ();
return true;
}
else if (id == R.id.llShadow)
{
this.parent.swipeLeft ();
return true;
}
return false;
}
}
I haven't had the opportunity to try this on a device yet, but it could be because you are defining the height of your parent layout to "match_parent".
Can you try changing that to "wrap_content" ?
I am working on a project that requires me to implement two horizontal scroll views with an image view in between them. I would like to extend the size of the image view to fill up the gap in between the scroll view. I went through the sample code, but it doesn't seem to mention anywhere in the size of the image view. I've enclosed the code below after the Image describing my problem.
public class Gallery2DemoActivity extends Activity {
private Gallery gallery,gallery1;
private ImageView imgView;
private Integer[] Imgid = {
R.drawable.a_1, R.drawable.a_2, R.drawable.a_3, R.drawable.a_4, R.drawable.a_5, R.drawable.a_6, R.drawable.a_7
};
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
gallery = (Gallery) findViewById(R.id.examplegallery);
gallery.setAdapter(new AddImgAdp(this));
gallery1 = (Gallery)findViewById(R.id.examplegallery1);
gallery1.setAdapter(new AddImgAdp(this));
imgView = (ImageView)findViewById(R.id.ImageView01);
imgView.setImageResource(Imgid[0]);
gallery.setOnItemClickListener(new OnItemClickListener() {
public void onItemClick(AdapterView parent, View v, int position, long id) {
imgView.setImageResource(Imgid[position]);
}
});
}
public class AddImgAdp extends BaseAdapter {
int GalItemBg;
private Context cont;
public AddImgAdp(Context c) {
cont = c;
TypedArray typArray = obtainStyledAttributes(R.styleable.GalleryTheme);
GalItemBg = typArray.getResourceId(R.styleable.GalleryTheme_android_galleryItemBackground, 0);
typArray.recycle();
}
public int getCount() {
return Imgid.length;
}
public Object getItem(int position) {
return position;
}
public long getItemId(int position) {
return position;
}
public View getView(int position, View convertView, ViewGroup parent) {
ImageView imgView = new ImageView(cont);
imgView.setImageResource(Imgid[position]);
imgView.setLayoutParams(new Gallery.LayoutParams(110, 100));
imgView.setScaleType(ImageView.ScaleType.FIT_XY);
imgView.setBackgroundResource(GalItemBg);
return imgView;
}
}
This is my XML main file.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/LinearLayout01"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<Gallery
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/examplegallery"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
<ImageView
android:id="#+id/ImageView01"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"/>
<Gallery
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/examplegallery1"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
</LinearLayout>
Below is my Attributes file:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<declare-styleable name="GalleryTheme">
<attr name="android:galleryItemBackground" />
</declare-styleable>
</resources>
Vinner,
The issue here is really two issues:
The size of the ImageView is based on the parent, which means that it shares its width and height.
The Image is resized to match the most limiting dimension (width).
The easiest way to handle this is to set the ScaleType of the ImageView. There are a number of Scaling Types, but the one you probably want is Center Crop. In code, this is done by view_name.setScaleType(ImageView.ScaleType.CENTER_CROP). You may also do this in XML for your ImageView with the attribute android:scaleType="centerCrop". Mind you, this will resize your Image and maintain your aspect ratio, but it will cut off the sides.
Just add the above attribute to your ImageView in your XML, (probably under your layout_weight), and it should do what you want.
Hope this helps,
FuzzicalLogic
will you try below code... ?
?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/LinearLayout01"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<Gallery
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/examplegallery"
android:layout_width="fill_parent"
android:layout_height="wrap_content" android:layout_weight="1" />
<ImageView
android:id="#+id/ImageView01"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:src="#drawable/ic_launcher"
android:layout_weight="1"/>
<Gallery
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/examplegallery1"
android:layout_width="fill_parent"
android:layout_height="wrap_content" android:layout_weight="1"/>
</LinearLayout>
and if it do not work, try setting your gallery height to some dp, it will work.. Thanks
The size of the ImageView is based on the parent, which means that it shares its width and height. Also, the Image is resized to match the most limiting dimension (width).
It looks like in the AddImgAdp class, you set the ImageView's height and width to specific pixel sizes.
imgView.setLayoutParams(new Gallery.LayoutParams(110, 100)); //width = "110px", height="100px"
I personally would put the layout as a RelativeLayout, align the first gallery with the top, the second gallery with the bottom, nd have the ImageView set to align above the second gallery. Then make the image:
imgView.setLayoutParams( new Gallery.LayoutParams(
Gallery.LayoutParams.FILL_PARENT,
Gallery.LayoutParams.FILL_PARENT) );
If you set the ImageView to fill_parent with a LinearLayout, it will fill to the bottom of the screen and the second gallery will be off the screen.
Also know that by filling in all the space you will most likely distort the picture. Consider all of your resizing options: http://developer.android.com/reference/android/widget/ImageView.ScaleType.html
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.