Develop Reference

ImageView background in not setting multiple times

I am working on an android project, in which I need to set ImageView
background (ascending icon and descending icon) multiple times. to do
this I am doing it with a clicking variable like:
sortBookedOnLayout.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
pickUpImage.setBackgroundResource(R.drawable.ascending);
vouchredImage.setBackgroundResource(R.drawable.ascending);
cancledImage.setBackgroundResource(R.drawable.ascending);
if(Constant.bookedOn == 1) {
Log.d(TAG, "FliteronClick:1 ");
bookedonImage.setImageDrawable(mContext.getResources().getDrawable(R.drawable.ascending_active));
// int ascending_active_b = R.drawable.ascending_active;
// bookedonImage.setBackgroundResource(ascending_active_b);
// bookedonImage.setImageDrawable(mContext.getResources().getDrawable( R.drawable.ascending_active));
// bookedonImage.setBackground(mContext.getResources().getDrawable(R.drawable.ascending_active));
// ivPickUpTxt.setCompoundDrawablesWithIntrinsicBounds(0, 0, R.drawable.ascending_active, 0);
Constant.bookedOn = 2;
}else if(Constant.bookedOn == 2){
Log.d(TAG, "FliteronClick:2 ");
bookedonImage.setImageDrawable(mContext.getResources().getDrawable(R.drawable.decending_active));
// bookedonImage.setImageResource(android.R.color.transparent);
// int decending_active_b = R.drawable.decending_active;
// bookedonImage.setBackgroundResource(decending_active_b);
// bookedonImage.setImageDrawable(mContext.getResources().getDrawable( R.drawable.decending_active));
// ivPickUpTxt.setCompoundDrawablesWithIntrinsicBounds(0, 0, R.drawable.decending_active, 0);
Constant.bookedOn = 1;
}
}
}
});
And My Xml layout is just like:
<LinearLayout
android:id="#+id/sortBookedOnLayout"
android:orientation="horizontal"
android:background="#color/white"
android:weightSum="2"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_weight="1.8"
android:layout_width="0dp"
android:layout_height="match_parent">
<RelativeLayout
android:id="#+id/bookedOntxtLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:id="#+id/ivPickUpTxt"
style="#style/editTextTheme"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/edittext_background"
android:drawableLeft="#drawable/cal2"
android:drawablePadding="10dp"
android:hint="#string/booked_on"
android:inputType="text"
android:maxLines="1"
android:padding="10dp"
android:textColor="#000000"
android:textCursorDrawable="#drawable/cursor_drawable"
android:textSize="#dimen/filter_text_size"
/>
</RelativeLayout>
</LinearLayout>
<LinearLayout
android:layout_weight=".2"
android:layout_width="0dp"
android:layout_height="match_parent">
<ImageView
android:id="#+id/booedOnImage"
android:scaleType="fitXY"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/ascending"
/>
</LinearLayout>
</LinearLayout>
Screenshot of my layout.
in this image i am going to click on BookedOn layout.
And my targetSdkVersion 25
I have tried it multiple ways as I commented but image icon is not
reflecting on imageView. any help will be appreciable.Thanks.

Try this:
qImageView.setBackgroundResource(R.drawable.thumbs_down);
and add android:scaleType:fitxy
<ImageView
android:id="#+id/booedOnImage"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitxy"
android:background="#drawable/ascending"/>
(or) Try programmatically
imgview.setScaleType(ImageView.ScaleType.CENTER_INSIDE);
Here's a thread that talks about the differences between the two methods.
I Understand your problem...You are not set the width of the LinearLayout
<LinearLayout
android:layout_weight=".2"
android:layout_width="match_parent"
android:orientation="vertical"
android:layout_height="match_parent">
<ImageView
android:id="#+id/booedOnImage"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/abc_btn_rating_star_off_mtrl_alpha"
/>
</LinearLayout>

Remove scroll in Listview

There are only two items in my listview and it covers half of screen but listview still shows scroll around it. I have set height to wrap_content
layout code is below:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<ListView
android:id="#+id/listLikeWhatsapp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:divider="#android:color/transparent"
android:dividerHeight="10.0sp"
/>
</LinearLayout>
I don't want scroll to appear on listview because it will have only two items and there is no need to show. I am not sure what is causing scroll to appear.
Any help would be highly appreciated.
Thanking you in advance
UPDATE
Here is my row item xml :
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:padding="10dp"
android:background="#drawable/roundedshape"
android:alpha="0.7">
<ImageView
android:id="#+id/icon"
android:layout_width="50dp"
android:layout_height="50dp"
android:contentDescription="desc"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:src="#drawable/ic_insert_emoticon_black_48dp"
/>
<TextView
android:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:layout_toRightOf="#+id/icon"
android:paddingBottom="5dp"
android:text="Assignments"
android:textStyle="bold"
android:textSize="18sp"
android:textColor="#000"/>
<TextView
android:id="#+id/last_date"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/title"
android:layout_below="#+id/title"
android:text="Last Update : 01-01-2017"
android:textSize="13sp"
android:textColor="#696969"/>
<TextView
android:id="#+id/unread_count"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/title"
android:layout_alignBottom="#+id/title"
android:layout_alignParentRight="true"
android:text="04"
android:textSize="12sp"
android:background="#drawable/shape_circular"
android:padding="5dp"
android:textColor="#FFF"
android:textStyle="bold"
android:layout_marginRight="5dp"
/>
</RelativeLayout>

<ListView
...
android:scrollbars="none"
...
/>

try adding:
android:scrollbars="none"

user android:scrollbar="none" like this;
<ListView
android:id="#+id/list_view_meals_list"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbars="none" />

To hide scrollbars
do this
android:scrollbars="none"
To disable scrolling do this
listView.setOnTouchListener(new View.OnTouchListener() {
public boolean onTouch(View v, MotionEvent event) {
return (event.getAction() == MotionEvent.ACTION_MOVE);
}
});
PS: I think you have messed up your item view which includes icon title and description.

Use this code .....
<?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" >
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="your text view"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:id="#+id/text_ap"/>
<ListView
android:id="#+id/listLikeWhatsapp"
android:layout_width="match_parent"
android:layout_above="#id/text_ap"
android:layout_height="match_parent"/>
</RelativeLayout>

try this :
to hide the scrollbar
<ListView
android:id="#+id/listLikeWhatsapp"
android:layout_width="match_parent"
android:scrollbars="none" // add this
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:divider="#android:color/transparent"
android:dividerHeight="10.0sp"
/>
or in your code:
yourlistView.setVerticalScrollBarEnabled(false);
To disable Scrolling of listview Items try:
listView.setOnTouchListener(new OnTouchListener() {
public boolean onTouch(View v, MotionEvent event) {
if (event.getAction() == MotionEvent.ACTION_MOVE) {
return true; // Action will not be forwarded
}
return false;
}
});
OR
yourListView.setScrollContainer(false);

I know it's an old question i was searching for solution and i remembered that i use it in another project and i forgot the owner of the solution so here is the code :
public static void justifyListViewHeightBasedOnChildren (ListView listView) {
ListAdapter adapter = listView.getAdapter();
if (adapter == null) {
return;
}
ViewGroup vg = listView;
int totalHeight = 0;
for (int i = 0; i < adapter.getCount(); i++) {
View listItem = adapter.getView(i, null, vg);
listItem.measure(0, 0);
totalHeight += listItem.getMeasuredHeight();
}
ViewGroup.LayoutParams par = listView.getLayoutParams();
par.height = totalHeight + (listView.getDividerHeight() * (adapter.getCount() - 1));
listView.setLayoutParams(par);
listView.requestLayout();
}

android - TextView doesn't displayed in RecyclerView

I've got an app which got some data (titles of youtube videos) and displayed them in the TextViews which in the items in RecyclerView. But some of TextViews are not displayed, but data is loaded correctly.
On my phone don't displayed only few elements of list, on my old tabled - almost all elements are not displayed.
I do some experiments and learned that strings longer then some value are not displayed.
List item
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_margin="1dp"
android:descendantFocusability="blocksDescendants"
android:orientation="vertical"
android:padding="3dp"
android:background="#color/colorAccent">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/galley_photo_item_image"
android:layout_width="120dp"
android:layout_height="120dp"/>
<CheckBox
android:id="#+id/galley_photo_item_checkbox"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:buttonTint="#color/colorPrimary"
android:visibility="invisible"/>
</FrameLayout>
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="WTF"
android:minLines="3"
android:maxLines="3"
android:background="#color/colorPrimary"
android:id="#+id/image_name_text"/>
</LinearLayout>
My Adapter
#Override
public ViewHolder onCreateViewHolder(ViewGroup parent, int i)
{
View convertView = inflater.inflate(R.layout.gallery_photo_item,parent,false);
ViewHolder view_holder = new ViewHolder(convertView);
//view_holder.Position = i;
//Event handling
view_holder.CheckBox.setOnClickListener(this);
view_holder.View.setOnClickListener(this);
convertView.setTag(view_holder);
//checkBox.setTag(position);
return view_holder;
}
#Override
public void onBindViewHolder(ViewHolder view_holder, int position)
{
//Toggle checkbox on DELETE MODE
if(is_checking) {
view_holder.CheckBox.setVisibility(View.VISIBLE);
view_holder.CheckBox.setChecked(checked[position]);
}
else
view_holder.CheckBox.setVisibility(View.INVISIBLE);
//view.setTag(position);
view_holder.CheckBox.setTag(position);
view_holder.Position=position;
//Display image
//String uri = Uri.fromFile(thumbs[position]).toString();
String uri = thumbs_fnames[position];
Glide.with(context)
.load(uri)
.centerCrop()
.into(view_holder.ImageView);
//Добавляем подписи (если есть)
if((thumbs_descriptions!=null))//&&(thumbs_descriptions.length==thumbs_fnames.length))
{
String text = thumbs_descriptions[position];
Log.d("ImageListAdapter",position +": "+text+"|");
view_holder.Description.setText(text);
}
else
Log.d("ImageListAdapter",position + ": nothing");
if(position== markred_id)
view_holder.View.setBackgroundResource(R.color.colorPrimary);
else
view_holder.View.setBackgroundResource(R.color.transparent);
}
And the last strange thing. When I set the text manually:
text = "Some long-long text bla-bla-bla ... ... ... ...;
it works correctly.
What the strange problem?

I did it. The problew was that FrameLayout has width and height mathc_parent instend wrap_content.
Correct XML
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_margin="1dp"
android:descendantFocusability="blocksDescendants"
android:orientation="vertical"
android:padding="3dp">
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/galley_photo_item_image"
android:layout_width="120dp"
android:layout_height="120dp"/>
<CheckBox
android:id="#+id/galley_photo_item_checkbox"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:buttonTint="#color/colorPrimary"
android:visibility="invisible"/>
</FrameLayout>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minLines="3"
android:maxLines="3"
android:id="#+id/image_name_text"/>
Diff: https://www.diffchecker.com/qe8pcozv
You can also see difference in TextView height, but it doesn't metter, It works in both situations.

View width for dynamically added view

I want to show a notification counter like this:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:gravity="center"
android:padding="#dimen/_5sdp"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:alpha=".5"
android:id="#+id/gvIcon"
android:src="#drawable/ic_person_reading"
android:scaleType="centerCrop"
android:layout_width="#dimen/_70sdp"
android:layout_height="#dimen/_70sdp" />
<LinearLayout
android:id="#+id/llTexts"
android:gravity="center_horizontal"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
style="#style/gridItemsText"
android:id="#+id/gvText"
android:text="Guten Morgen"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/partNoticeTooltip"
android:orientation="vertical"
android:background="#drawable/bg_tooltip_red"
android:layout_width="#dimen/tooltipWH"
android:layout_height="#dimen/tooltipWH">
<TextView
android:id="#+id/tvCounter"
android:text="4"
android:textColor="#color/white"
android:textSize="#dimen/h6"
android:gravity="center"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
Which has an output like this:
This is my expectation, but with dynamic way. So I wrote this in the setOnItemClickListener of my GridView:
View tooltip = context.getLayoutInflater().inflate(R.layout.part_tooltip, null);
TextView tvCounter = (TextView) tooltip.findViewById(R.id.tvCounter);
tvCounter.setText("" + counter);
LinearLayout llText = (LinearLayout) view.findViewById(R.id.llTexts);
llText.addView(tooltip);
the part_tooltip has exactly the same code but with another layout. And here is the output:
The red layout does not being displayed with full width. What am I missing?

You need to use a global layout listener and also the view tree observer:
ViewTreeObserver mVTO = parentLayoutOfTheViewAddedDynamically.getViewTreeObserver();
mVTO.addOnGlobalLayoutListener(new OnGlobalLayoutListener() {
#Override
public void onGlobalLayout() {
if(viewAddedDynamically != null){
int viewWidth = viewAddedDynamically.getWidth();
// any operation based on viewWidth is to be done here
}
}
});

Animation in Viewpager tab change fadein / fadeout as like Linkedin introduction screen

I want to implement same kind of animation such as linked in does in android application for its Introduction(Login / register) screen.
I am using view pager for Introduction screen and i want to implement fadein fadeout animation on background image change, As per swipe right to left or vice versa.
I want to implement fadein and fadeout animation on background image change according to swipe of screen.
any help is appreciated.
Please take a look at my layout code
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<ImageView
android:id="#+id/background_image"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:scaleType="centerCrop" />
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:weightSum="7" >
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_marginRight="10dp"
android:layout_weight="1"
android:gravity="right"
android:orientation="horizontal" >
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginRight="5dp"
android:src="#drawable/icon_skip" />
<TextView
android:id="#+id/skip_tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Skip"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#android:color/white" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="4"
android:gravity="bottom"
android:orientation="vertical" >
<ImageView
android:id="#+id/imageView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:src="#drawable/logo" />
<android.support.v4.view.ViewPager
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/pager"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
tools:context="com.xyz.View.IntroductionScreen" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="2"
android:gravity="center"
android:orientation="vertical" >
<Button
android:id="#+id/connection_bt"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:layout_marginLeft="40dp"
android:layout_marginRight="40dp"
android:background="#drawable/button"
android:text="CONNEXION"
android:textColor="#android:color/white" />
<Button
android:id="#+id/register_bt"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="40dp"
android:layout_marginRight="40dp"
android:layout_marginTop="10dp"
android:background="#drawable/button"
android:text="INSCRIPTION"
android:textColor="#android:color/white" />
</LinearLayout>
</LinearLayout>
And View pager fragment layout is
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout
android:id="#+id/text_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:orientation="vertical" >
<TextView
android:id="#+id/tagline_tv1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:singleLine="true"
android:text="Laissez votre prochain job"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#android:color/white" />
<TextView
android:id="#+id/details_tv"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:maxLines="2"
android:text="vous trouver"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#android:color/white" />
</LinearLayout>
</RelativeLayout>
sample Splashs creen this is what i want to implement.
Thank you

This is a lag free one and also handles the Buttons
Main Idea:
1) first create transparent background for your fragments.
2) Create LayerDrawable and add background image of each fragment as an item. Then add your LayerDrawable as a background of your viewpager.
3) in onCreate method set alpha of each layer correctly so just upper one has alpha value of 255.
4) set for each view of your FragmentStatPagerAdapter a tag that corresponds to drawable index that you declared in the LayerDrawable. for example when you open the app FragmentA is showing so its tag must correspond to upper drawable that is 2 (beginning from 0). last page tag must be 0 corresponds to lowest drawable.
5) change drawable of each view at the function transformPage
6) for adding the button use RelativeLayout.
In order to place buttons on top of all views use RelativeLayout. Later children are placing higher on the Z axis. You can see it in the code:
now lets see code:
MainActivity
public class MainActivity extends FragmentActivity {
ViewPager viewPager=null;
int numberOfViewPagerChildren = 3;
int lastIndexOfViewPagerChildren = numberOfViewPagerChildren - 1;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
viewPager = (ViewPager) findViewById(R.id.pager);
viewPager.setAdapter(new MyAdapter(getSupportFragmentManager()));
final LayerDrawable background = (LayerDrawable) viewPager.getBackground();
background.getDrawable(0).setAlpha(0); // this is the lowest drawable
background.getDrawable(1).setAlpha(0);
background.getDrawable(2).setAlpha(255); // this is the upper one
viewPager.setPageTransformer(true, new ViewPager.PageTransformer() {
#Override
public void transformPage(View view, float position) {
int index = (Integer) view.getTag();
Drawable currentDrawableInLayerDrawable;
currentDrawableInLayerDrawable = background.getDrawable(index);
if(position <= -1 || position >= 1) {
currentDrawableInLayerDrawable.setAlpha(0);
} else if( position == 0 ) {
currentDrawableInLayerDrawable.setAlpha(255);
} else {
currentDrawableInLayerDrawable.setAlpha((int)(255 - Math.abs(position*255)));
}
}
});
}
class MyAdapter extends FragmentStatePagerAdapter
{
public MyAdapter(FragmentManager fm) {
super(fm);
}
#Override
public Fragment getItem(int i) {
Fragment fragment=null;
if(i==0)
{
fragment=new FragmentA();
}
if(i==1)
{
fragment=new FragmentB();
}
if(i==2)
{
fragment=new FragmentC();
}
return fragment;
}
#Override
public int getCount() {
return numberOfViewPagerChildren;
}
#Override
public boolean isViewFromObject(View view, Object object) {
if(object instanceof FragmentA){
view.setTag(2);
}
if(object instanceof FragmentB){
view.setTag(1);
}
if(object instanceof FragmentC){
view.setTag(0);
}
return super.isViewFromObject(view, object);
}
}
}
activity_main.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/layerdrawable" >
</android.support.v4.view.ViewPager>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:orientation="horizontal"
android:layout_marginBottom="48dip" >
<Button
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Sign in"
android:layout_margin="16dip"
android:background="#2ec6e4"
android:textColor="#FFFFFF" />
<Button
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Join us"
android:background="#2ec6e4"
android:layout_margin="16dip"
android:textColor="#FFFFFF"
/>
</LinearLayout>
</RelativeLayout>
LayerDrawable
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<bitmap
android:id="#+id/Idofbg3"
android:gravity="fill"
android:src="#drawable/bg3" />
</item>
<item>
<bitmap
android:id="#+id/Idofbg2"
android:gravity="fill"
android:src="#drawable/bg2" />
</item>
<item>
<bitmap
android:id="#+id/Idofbg1"
android:gravity="fill"
android:src="#drawable/bg1" />
</item>
</layer-list>
for lazy people who just do not want to declare fragments:
FragmentA
public class FragmentA extends Fragment {
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View v = inflater.inflate(R.layout.fragment_a,container,false);
return v;
}
}
fragment_a.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:id="#+id/FragmentA"
android:background="#android:color/transparent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="This is Fragment A"
android:textColor="#FFFFFF"
android:id="#+id/textView"
android:gravity="center"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_alignParentBottom="true" />
</RelativeLayout>

Set a ViewPager.PageTransformer to the ViewPager and achieve the desired animation using aplha and translation animation properties.
The most important input is the position parameter passed to transformPage callback. The position value indicates how the view is positioned currently.
Assuming the views in ViewPager are full width, here is how position value need to be interpreted.
------------------------------------------------------------------------------------
position | what does it mean
------------------------------------------------------------------------------------
0 | view is positioned in the center and fully visible to the user.
-1 | view is positioned in the left and not visible to the user.
1 | view is positioned in the right and not visible to the user.
>-1 & <0 | view is being scrolled towards left and is partially visible.
>0 & <1 | view is being scrolled towards right and is partially visible.
------------------------------------------------------------------------------------
mPager.setPageTransformer(true, new ViewPager.PageTransformer() {
#Override
public void transformPage(View view, float position) {
// Ensures the views overlap each other.
view.setTranslationX(view.getWidth() * -position);
// Alpha property is based on the view position.
if(position <= -1.0F || position >= 1.0F) {
view.setAlpha(0.0F);
} else if( position == 0.0F ) {
view.setAlpha(1.0F);
} else { // position is between -1.0F & 0.0F OR 0.0F & 1.0F
view.setAlpha(1.0F - Math.abs(position));
}
// TextView transformation
view.findViewById(R.id.textView).setTranslationX(view.getWidth() * position);
}
});
Here is the layout:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ImageView
android:layout_alignParentTop="true"
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/textView" />
</RelativeLayout>
Here is the screen record: