Develop Reference

ViewPager indicator scrolling up/down with whole page

I've made Activity with ViewPager and I also have adapter for it and Fragment which is displayed by ViewPager. Whole Fragment (in XML) is inside ScrollView. When I'm scrolling page up and down the indicator doesn't scroll with whole layout.
I know the reason why this is happening (indicator is inside Activity layout and ScrollView is inside Fragment XML file). I need some help or advice how to make it scroll or any other solution how to avoid that because indicator at "start position" is looking good but when I scroll down it covers part of text.
I know it is possible because I've seen it on Instagram but I don't know how to achieve this.
Let me provide some code:
Activity with ViewPager:
<?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:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".Album.AlbumPagerActivity">
<android.support.design.widget.FloatingActionButton
android:id="#+id/album_pager_fab_left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentStart="true"
android:layout_marginBottom="10dp"
android:layout_marginStart="15dp"
android:alpha=".7"
android:backgroundTint="#color/CKBrownie"
android:elevation="2dp"
android:scaleType="center"
android:src="#drawable/back_ico"
android:tint="#color/CKGold"
android:translationZ="0dp"
app:backgroundTint="#color/CKBrownie" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/album_pager_fab_right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentEnd="true"
android:layout_marginBottom="10dp"
android:layout_marginEnd="15dp"
android:alpha=".7"
android:backgroundTint="#color/CKBrownie"
android:elevation="2dp"
android:scaleType="center"
android:src="#drawable/forward_ico"
android:tint="#color/CKGold"
android:translationZ="0dp"
app:backgroundTint="#color/CKBrownie" />
<android.support.v4.view.ViewPager
android:id="#+id/album_view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent">
</android.support.v4.view.ViewPager>
<me.relex.circleindicator.CircleIndicator
android:id="#+id/indicator"
android:layout_width="match_parent"
android:layout_height="48dp"
android:layout_alignTop="#+id/album_view_pager"
android:layout_marginTop="#dimen/_360sdp" />
</RelativeLayout>
Fragment:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView
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:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/backgroudmck">
<android.support.constraint.ConstraintLayout 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:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".Album.PhotoFragment">
<com.github.chrisbanes.photoview.PhotoView
android:id="#+id/photo_pager_image"
android:layout_width="#dimen/_240sdp"
android:layout_height="#dimen/_360sdp"
android:layout_marginTop="#dimen/_12sdp"
android:background="?android:attr/selectableItemBackground"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/photo_pager_image_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/_24sdp"
android:layout_marginTop="#dimen/_16sdp"
android:layout_marginEnd="#dimen/_24sdp"
android:gravity="left"
android:text="Image title"
android:textColor="#FFFFFF"
android:textSize="22sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/photo_pager_image" />
<LinearLayout
android:id="#+id/underline_photo_fragment"
android:layout_width="match_parent"
android:layout_height="#dimen/_2sdp"
android:layout_marginStart="#dimen/_22sdp"
android:layout_marginTop="#dimen/_20sdp"
android:layout_marginEnd="#dimen/_22sdp"
android:background="#color/CKGold"
android:orientation="horizontal"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/photo_pager_image_title" />
<TextView
android:id="#+id/photo_pager_image_technique"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/_24sdp"
android:layout_marginTop="#dimen/_8sdp"
android:layout_marginEnd="#dimen/_24sdp"
android:textSize="#dimen/_18sdp"
android:text="Additional info about image"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/underline_photo_fragment" />
<TextView
android:id="#+id/photo_pager_image_description"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/_24sdp"
android:layout_marginTop="#dimen/_16sdp"
android:layout_marginEnd="#dimen/_24sdp"
android:layout_marginBottom="#dimen/_2sdp"
android:textSize="#dimen/_18sdp"
android:text="Long image description (because of this TextView I had to make it scrollable)"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/photo_pager_image_technique" />
</android.support.constraint.ConstraintLayout>
</ScrollView>
Adapter:
public class AlbumViewPagerAdapter extends FragmentStatePagerAdapter {
private int number;
public AlbumViewPagerAdapter(FragmentManager fm, int number) {
super(fm);
this.number = number;
}
#Override
public Fragment getItem(int i) {
PhotoFragment pf;
Bundle bundle;
switch (i) {
case 0:
bundle = new Bundle();
bundle.putInt("num", i);
bundle.putInt(Constants.NUMBER, number);
pf = new PhotoFragment();
pf.setArguments(bundle);
return pf;
case 1:
bundle = new Bundle();
bundle.putInt("num", i);
bundle.putInt(Constants.NUMBER, number);
pf = new PhotoFragment();
pf.setArguments(bundle);
return pf;
case 2:
bundle = new Bundle();
bundle.putInt("num", i);
bundle.putInt(Constants.NUMBER, number);
pf = new PhotoFragment();
pf.setArguments(bundle);
return pf;
}
return null;
}
#NonNull
#Override
public Object instantiateItem(#NonNull ViewGroup container, int position) {
Object obj = super.instantiateItem(container, position);
return obj;
}
#Override
public int getCount() {
return 3;
}
}
Instagram app has a ViewPager with indicator placed below a photo but above a text and when I navigate between "pages" the text and the photo are changing but when I scroll page up/down the indicator move with whole page up and down. Maybe it's a problem with my indicator placement? But when I try to put it inside the Fragment I won't be able to attach it to my ViewPager which is created inside Activity

Horizontal Recyclerview not scrolling properly

I have a fragment layout that is a part of a PageViewer.
The fragment has 2 RecyclerViews - one on the top of the layout which is horizontal, the other one at the bottom which is vertical.
Here is my XML :
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="7dp"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="#string/fragment_marketplace_marketplace_title"
android:textSize="30sp"
android:textStyle="bold" />
<SearchView
android:id="#+id/fragment_marketplace_searchview"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:queryHint="Search..."
app:iconifiedByDefault="false"
tools:layout_editor_absoluteX="1dp"
tools:layout_editor_absoluteY="1dp" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="14dp"
android:layout_marginLeft="14dp"
android:layout_marginTop="15dp"
android:text="#string/fragment_marketplace_discover_products_from_myverte"
android:textSize="17sp"
android:textStyle="bold" />
<android.support.v7.widget.RecyclerView
android:id="#+id/fragment_marketplace_brands_recycler_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="15dp"
android:orientation="horizontal"
app:layoutManager="android.support.v7.widget.LinearLayoutManager"
tools:listitem="#layout/fragment_marketplace_vendor_row_item" />
<android.support.v4.widget.NestedScrollView
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="14dp"
android:layout_marginLeft="14dp"
android:background="#color/very_light_grey"
android:paddingTop="15dp"
android:text="#string/fragment_marketplace_featured_products"
android:textSize="17sp"
android:textStyle="bold" />
<android.support.v7.widget.RecyclerView
android:id="#+id/fragment_marketplace_products_recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:background="#color/very_light_grey"
tools:listitem="#layout/fragment_marketplace_products_row_item" />
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
</LinearLayout>
1) When scrolling left/right the scrolling sometimes gets stuck and not responsive. Why does this happen?
2) How do I make the view shows some part of the next views in the list, so it will make the filling of an actual scrollable list and not just a stale image?
edit -
here is my row item xml -
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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="200dp"
android:padding="10dp">
<ImageView
android:id="#+id/vendorImageview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#mipmap/ic_launcher"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
edit -
my recyclerview initing -
private void initViews(View view) {
gson = new Gson();
miniVendorModelList = new ArrayList<>();
miniProductModelList = new ArrayList<>();
searchView = view.findViewById(R.id.fragment_marketplace_searchview);
Drawable drawable = getResources().getDrawable(R.drawable.search_widget_very_light_grey_background);
searchView.setBackground(drawable);
//adapters
vendorsAdapter = new VendorAdapter(miniVendorModelList);
productsAdapter = new ProductsAdapter(miniProductModelList, getContext());
//lists
vendorsList = view.findViewById(R.id.fragment_marketplace_brands_recycler_view);
productsList = view.findViewById(R.id.fragment_marketplace_products_recycler_view);
vendorsList.setNestedScrollingEnabled(false);
productsList.setNestedScrollingEnabled(false);
//brands recycler
vendorsList.setHasFixedSize(true);
vendorsList.setLayoutManager(new LinearLayoutManager(getContext(),LinearLayoutManager.HORIZONTAL, false));
vendorsList.setAdapter(vendorsAdapter);
//products recycler
productsList.setLayoutManager(new GridLayoutManager(getContext(), 2));
productsList.setHasFixedSize(true);
productsList.setAdapter(productsAdapter);
}
my adapter -
package com.twoverte.adapters;
import android.support.annotation.NonNull;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import com.twoverte.R;
import com.twoverte.adapters.holder.VendorsHolder;
import com.twoverte.models.Vendor.MiniVendorModel;
import java.util.ArrayList;
public class VendorAdapter extends RecyclerView.Adapter<VendorsHolder> {
private ArrayList<MiniVendorModel> miniVendorModels;
public VendorAdapter(ArrayList<MiniVendorModel> miniVendorModels) {
this.miniVendorModels = miniVendorModels;
}
#NonNull
#Override
public VendorsHolder onCreateViewHolder(#NonNull ViewGroup viewGroup, int i) {
View view = LayoutInflater.from(viewGroup.getContext()).inflate(R.layout.fragment_marketplace_vendor_row_item, viewGroup, false);
return new VendorsHolder(view);
}
#Override
public void onBindViewHolder(#NonNull VendorsHolder vendorsHolder, int i) {
MiniVendorModel model = miniVendorModels.get(i);
Picasso.get().load(model.getImageURL()).memoryPolicy(MemoryPolicy.NO_CACHE).into(vendorsHolder.vendorImageView);
}
#Override
public int getItemCount() {
return miniVendorModels.size();
}
}

How do I make the view shows some part of the next views in the list, so it will make the filling of an actual scrollable list and not just a stale image?
What you can do here is make your layout/fragment_marketplace_vendor_row_item occupy say 80% width also add some padding
update width to 80%
android:layout_width="0dp"
android:layout_weight="0.8"
When scrolling left/right the scrolling sometimes gets stuck and not responsive. Why does this happen?
this might have been answered here

Found a solution for bad scrolling - wrapped the horizontal RV with a NestedScrollView. Works perfectly, I have no idea why. Just trial and error.
If someone knows why this works it would be awesome.

how to move main content and action bar to right in navigation drawer using fragments

i have a custom navigation drawer that opens from left to right using fragment. i want to move my content and action bar to right when navigation opens, i read some sources, they override onDrawerSlide method to do so, but since i using fragment to open and close navigation, i do not have such a method to override, I'll be grateful someone could help me (:
I tried this link to move the contents
and used this to create a custom navigation view
there is main activity :
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/container">
<TextView
android:id="#+id/homeContents"
android:text="this is gonna be ur main page"
android:layout_width="200dp"
android:layout_height="46dp" />
</FrameLayout>
</LinearLayout>
and this is drawer :
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
android:id="#+id/rootLayout"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="250dp"
android:layout_height="match_parent">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/nav_profile"
android:layout_gravity="center"
android:layout_marginTop="40dp"
android:layout_width="77dp"
android:layout_height="77dp"
android:src="#drawable/ic_user"
/>
<LinearLayout
android:layout_marginTop="5dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:drawableLeft="#drawable/ic_user_plus"
android:drawablePadding="5dp"
android:paddingLeft="10dp"
android:id="#+id/sign_in"
android:layout_width="91dp"
android:layout_height="40dp"
android:layout_marginStart="20dp"
android:background="#drawable/more_btn_coop_req"
android:text="SIGNUP"
android:textColor="#color/blue" />
<Button
android:drawableLeft="#drawable/ic_sign_in_alt"
android:drawablePadding="5dp"
android:paddingLeft="10dp"
android:id="#+id/sign_up"
android:layout_width="91dp"
android:layout_height="40dp"
android:layout_marginStart="25dp"
android:background="#drawable/more_btn_coop_req"
android:text="ENTER"
android:textColor="#color/blue" />
</LinearLayout>
<Spinner
android:layout_marginTop="16dp"
android:background="#drawable/spinner_background"
android:id="#+id/cities_spinner"
android:layout_gravity="center"
android:layout_width="190dp"
android:layout_height="40dp">
</Spinner>
</LinearLayout>
<LinearLayout
android:orientation="vertical"
android:layout_marginTop="250dp"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:drawableLeft="#drawable/ic_check"
android:drawablePadding="25dp"
android:id="#+id/bookmark_centers"
android:layout_gravity="center"
android:background="#drawable/drawer_buttons_style"
android:text="تخفیف های نشان شده"
android:layout_width="186dp"
android:layout_height="40dp" />
<Button
android:drawableLeft="#drawable/ic_store"
android:id="#+id/followed_centers"
android:layout_marginTop="10dp"
android:layout_gravity="center"
android:background="#drawable/drawer_buttons_style"
android:text="مراکز دنبال شده"
android:layout_width="186dp"
android:layout_height="40dp" />
<Button
android:id="#+id/tems"
android:drawableLeft="#drawable/ic_info"
android:background="#drawable/drawer_buttons_style"
android:layout_marginTop="20dp"
android:layout_gravity="center"
android:text="شرایط استفاده"
android:layout_width="186dp"
android:layout_height="40dp" />
<Button
android:id="#+id/contact_us"
android:layout_gravity="center"
android:layout_marginTop="10dp"
android:drawableLeft="#drawable/ic_phone"
android:background="#drawable/drawer_buttons_style"
android:text="ارتباط با ما"
android:layout_width="186dp"
android:layout_height="40dp" />
<Button
android:id="#+id/share_us"
android:layout_gravity="center"
android:text="پیشنهاد به دوستان"
android:layout_marginTop="10dp"
android:drawableLeft="#drawable/ic_share_alt"
android:background="#drawable/drawer_buttons_style"
android:layout_width="186dp"
android:layout_height="40dp" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:orientation="horizontal">
<Button
android:id="#+id/EXIT"
android:layout_width="72sp"
android:layout_height="40dp"
android:layout_marginStart="32dp"
android:background="#drawable/drawer_buttons_style"
android:drawableLeft="#drawable/ic_sign_out_alt"
android:text="خروج" />
<Button
android:id="#+id/edit"
android:layout_width="105dp"
android:layout_height="40dp"
android:layout_marginStart="10dp"
android:background="#drawable/drawer_buttons_style"
android:drawableLeft="#drawable/ic_cog"
android:text="ویرایش" />
</LinearLayout>
</LinearLayout>
</RelativeLayout>
there is a custom toolbar and base activity that merged both toolbar and
drawer, but i think it is not necessary.
this is menu fragment class :
package TestNavigationDrawer;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.GestureDetector;
import android.view.LayoutInflater;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewGroup;
import android.widget.RelativeLayout;
import com.example.deathstroke.uniqueoff1.R;
public class MenuFragment extends Fragment implements
View.OnTouchListener {
GestureDetector gestureDetector;
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
View rootView = inflater.inflate(R.layout.slider_menu, container,
false);
RelativeLayout root = rootView.findViewById(R.id.rootLayout);
/*gestureDetector=new GestureDetector(getActivity(),new
OnSwipeListener(){
#Override
public boolean onSwipe(Direction direction) {
if (direction==Direction.up){
//do your stuff
((MainActivity ) getActivity()).hideFragment();
}
if (direction==Direction.down){
//do your stuff
}
return true;
}
});
root.setOnTouchListener(this);*/
return rootView;
}
#Override
public boolean onTouch(View v, MotionEvent event) {
gestureDetector.onTouchEvent(event);
return true;
}
}
and there is mainActivity class :
package com.example.deathstroke.uniqueoff1;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentTransaction;
import android.util.Log;
import android.view.View;
import android.widget.ImageView;
import android.widget.RelativeLayout;
import android.widget.TextView;
import TestNavigationDrawer.*;
public class MainActivity extends BaseActivity {
boolean isFragmentLoaded;
Fragment menuFragment;
TextView title;
ImageView menuButton;
RelativeLayout rootLayout;
TextView textView;
#Override
protected void onCreate(Bundle savedInstanceState) {
Log.e("onCreate", "onCreate: " );
super.onCreate(savedInstanceState);
initAddlayout(R.layout.activity_main);
Log.e("onCreate", "onCreate: " );
rootLayout = findViewById(R.id.rootLayout);
textView = findViewById(R.id.homeContents);
title = findViewById(R.id.title_top);
menuButton = findViewById(R.id.menu_icon);
title.setText("Menu Activity");
menuButton.setOnClickListener((View)-> {
try {
if (!isFragmentLoaded) {
loadFragment();
title.setText("Profile");
} else {
if (menuFragment != null) {
if (menuFragment.isAdded()) {
hideFragment();
}
}
}
}catch (Exception e){
Log.e("Menu", "onCreate: menu on click, e: " + e);
}
});
}
public void hideFragment(){
FragmentTransaction fragmentTransaction =
getSupportFragmentManager().beginTransaction();
fragmentTransaction.setCustomAnimations(R.anim.slide_left,
R.anim.slide_right);
fragmentTransaction.remove(menuFragment);
fragmentTransaction.commit();
menuButton.setImageResource(R.drawable.ic_menu);
isFragmentLoaded = false;
title.setText("Main Activity");
}
public void loadFragment(){
FragmentManager fm = getSupportFragmentManager();
menuFragment = fm.findFragmentById(R.id.container);
menuButton.setImageResource(R.drawable.ic_up_arrow);
if(menuFragment == null){
menuFragment = new MenuFragment();
FragmentTransaction fragmentTransaction =
getSupportFragmentManager().beginTransaction();
fragmentTransaction.setCustomAnimations(R.anim.slide_left,
R.anim.slide_right);
fragmentTransaction.add(R.id.container,menuFragment);
fragmentTransaction.commit();
}
isFragmentLoaded = true;
}
}
as you can see, i am using loadFragment and hideFragment to open and close drawer, so how can i move main content (there is a simple textview but consider it whole lots of stuff)

Hey you can use this I guess you want the same output
The below link

Shared Elements Transitions only working in 2/3 cases

I was playing around with the Shared Element Transition and developed a testapp with 4 Fragments.
In the picture you can see, the first Fragment contains a "start now" message, when it's clicked I want to replace the container with the Fragment in the middle. As an eye candy I want an Animation by using Shared Element Transitions.
Problem
My Problem is, if I leave the first Fragment empty (without starting message) and I for example set the OnClickListener to the Icon itself, everything is working alright with a nice animation. But if the first Fragment has that message in it only the first Icon (the second Fragment, picture in mid) doesn't have an animation anymore. It's just replacing the first fragment. The curios thing is, if I change my OnClickListener and let it start the second page (right picture) the animation is working fine again. So only the first/left Icon does not provide an animation though all Methods and XML are mostly 1:1 the same.
As I couldn't develope a better solution, each "toolbar" is designed in the Fragment itself.
Main Activity
public class FirstStartupActivity extends AppCompatActivity {
#Override
protected void onCreate(#Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_firststartup);
doFragmentTransaction(new MainFragment(), "TAG", false, null);
}
public void doFragmentTransaction(Fragment fragment, String tag, boolean addToBackStack, List<View> sharedElements){
FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();
transaction.replace(R.id.ActivityFirstStartup_fragmentContainer, fragment, tag);
if(addToBackStack){
transaction.addToBackStack(tag);
}
if( sharedElements != null && !sharedElements.isEmpty()){
for(int i = 0; i < sharedElements.size(); i++){
View view = sharedElements.get(i);
transaction.addSharedElement(view, view.getTransitionName());
}
}
transaction.commit();
}}
First Fragment with Message
public class MainFragment extends Fragment {
#Nullable
#Override
public View onCreateView(#NonNull LayoutInflater inflater, #Nullable ViewGroup container, #Nullable Bundle savedInstanceState) {
View v = inflater.inflate(R.layout.fragment_firststartup_home, container, false);
View view = v.findViewById(R.id.relLayoutPageOne);
final List<View> listview = new ArrayList<>();
listview.add(view);
View view2 = v.findViewById(R.id.relLayoutPageTwo);
final List<View> listview2 = new ArrayList<>();
listview2.add(view2);
Button button = v.findViewById(R.id.buttonStart);
button.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
((FirstStartupActivity)getActivity()).doFragmentTransaction(new UsernameFragment(), "test", true, listview);
//((FirstStartupActivity)getActivity()).doFragmentTransaction(new CameraFragment(), "TEST2", true, listview2);
}
});
RelativeLayout rel2 = v.findViewById(R.id.relLayoutPageTwo);
rel2.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
((FirstStartupActivity)getActivity()).doFragmentTransaction(new CameraFragment(), "TEST2", true, listview2);
}
});
return v;
}}
Second Fragment No Animation
public class UsernameFragment extends Fragment {
#Nullable
#Override
public View onCreateView(#NonNull LayoutInflater inflater, #Nullable ViewGroup container, #Nullable Bundle savedInstanceState) {
View v = inflater.inflate(R.layout.fragment_firststartup_pgone, container, false);
postponeEnterTransition();
return v;
}
#Override
public void onCreate(#Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP){
setSharedElementEnterTransition(TransitionInflater.from(getContext()).inflateTransition(android.R.transition.move));
}
}}
Third Fragment Working
public class CameraFragment extends Fragment {
#Nullable
#Override
public View onCreateView(#NonNull LayoutInflater inflater, #Nullable ViewGroup container, #Nullable Bundle savedInstanceState) {
View v = inflater.inflate(R.layout.fragment_firststartup_pgtwo, container, false);
return v;
}
#Override
public void onCreate(#Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP){
setSharedElementEnterTransition(TransitionInflater.from(getContext()).inflateTransition(android.R.transition.move));
}
}}
Second Fragment (Picture in middle) No Animation when replacing)
<android.support.constraint.ConstraintLayout
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:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.constraint.ConstraintLayout
android:id="#+id/constraintLayout2"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#drawable/draw_login_edittext">
</android.support.constraint.ConstraintLayout>
<RelativeLayout
android:id="#+id/relLayoutPageTwo"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_marginTop="4dp"
android:background="#drawable/draw_login_edittext_rounded"
android:transitionName="ProfileCam"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<ImageView
android:transitionName="ProfileCam"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="fitStart"
app:srcCompat="#mipmap/testtwo" />
</RelativeLayout>
<RelativeLayout
android:id="#+id/relLayoutPageThree"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:background="#drawable/draw_login_edittext_rounded"
android:transitionName="ProfileGender"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.95"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="fitStart"
app:srcCompat="#mipmap/testthree" />
</RelativeLayout>
<RelativeLayout
android:transitionName="ProfilePic"
android:layout_width="273dp"
android:layout_height="210dp"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:background="#drawable/draw_login_edittext_rounded"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/constraintLayout2">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="fitStart"
app:srcCompat="#mipmap/test" />
</RelativeLayout>
First Fragment (Picture left)
<android.support.constraint.ConstraintLayout
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:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.constraint.ConstraintLayout
android:id="#+id/constraintLayout2"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#a8655c">
</android.support.constraint.ConstraintLayout>
<RelativeLayout
android:transitionName="ProfilePic"
android:id="#+id/relLayoutPageOne"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:background="#drawable/draw_login_edittext_rounded"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.049"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="fitStart"
app:srcCompat="#mipmap/test" />
</RelativeLayout>
<RelativeLayout
android:id="#+id/relLayoutPageTwo"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:background="#drawable/draw_login_edittext_rounded"
android:transitionName="ProfileCam"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="fitStart"
app:srcCompat="#mipmap/testtwo" />
</RelativeLayout>
<RelativeLayout
android:id="#+id/relLayoutPageThree"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:background="#drawable/draw_login_edittext_rounded"
android:transitionName="ProfileGender"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.95"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="fitStart"
app:srcCompat="#mipmap/testthree" />
</RelativeLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:forceHasOverlappingRendering="true"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:background="#drawable/draw_login_edittext_rounded"
android:padding="25dp"
android:transitionName="ProfilePic"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/constraintLayout2">
<TextView
android:id="#+id/text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:text="Bevor du loslegen könnst benötigen wir noch kurz ein paar Informationen über dich! :)"
android:textAlignment="center"
android:textColor="#BFFFFFFF" />
<Button
android:id="#+id/buttonStart"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/text"
android:layout_centerHorizontal="true"
android:layout_marginHorizontal="15dp"
android:layout_marginTop="15dp"
android:background="#drawable/draw_rounded_edittext_dark"
android:text="Start now"
android:textColor="#BFFFFFFF" />
</RelativeLayout>
Third Fragment (right Picture) Animation when replacing
<android.support.constraint.ConstraintLayout
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:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.constraint.ConstraintLayout
android:id="#+id/constraintLayout2"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#drawable/draw_login_edittext">
</android.support.constraint.ConstraintLayout>
<RelativeLayout
android:id="#+id/relLayoutPageOne"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:background="#drawable/draw_login_edittext_rounded"
android:transitionName="ProfilePic"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.049"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<ImageView
android:id="#+id/imageView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="fitStart"
app:srcCompat="#mipmap/test" />
</RelativeLayout>
<RelativeLayout
android:id="#+id/relLayoutPageThree"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:background="#drawable/draw_login_edittext_rounded"
android:transitionName="ProfileGender"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.95"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="fitStart"
app:srcCompat="#mipmap/testthree" />
</RelativeLayout>
<RelativeLayout
android:layout_width="273dp"
android:layout_height="210dp"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:background="#c8c8c8"
android:transitionName="ProfileCam"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/constraintLayout2">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="fitStart"
app:srcCompat="#mipmap/testtwo" />
</RelativeLayout>
Visual Description
First Icon doesn't work but the second one works like charm
For some Reason the first GIF is way too fast, its popping up normally the only Problem is the missing Animation

Well I tried to change some things and I made everything worse. Then I "repaired" it and now it works, unfortunetly I can't show you a solution for that. I try to work through the codes again
EDIT: #LieForBanana had the solution but I understood him wrong, indeed my first Fragment also had the Transition Name it (3x TransitionName ProfilePic). I am ashamed, it was just one silly mistake

Grid Image & swipe the screen Horizontally for next image grid

I want to do following things:
Create grid(3 * 3) of images on one screen
Horizontal Swipe the first screen to next one to display the other grid(i.e remaining images)
Similar to the Grid we see in our android mobile Phone's
Any answer truly Appreciated...

You can achive this by using a ViewPager and a GridLayout or a TableLayout. You can find many samples for using ViewPager.
Here is a complete sample code for you. Just copy it(with layouts) to your project and run it. Sample uses a TableLayout but you can change it to use a GridLayout if you want.
Also read TODO'S, in code;)
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
public class PagerDemo extends FragmentActivity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.sample_main);
ViewPager viewPager = (ViewPager)findViewById(R.id.viewPager);
viewPager.setAdapter(new CustomViewPagerAdapter(getSupportFragmentManager()));
}
private static class CustomViewPagerAdapter extends FragmentPagerAdapter {
public CustomViewPagerAdapter(FragmentManager fm) {
super(fm);
}
#Override
public Fragment getItem(int position) {
// TODO switch for position value to create different fragments
return PagerFragment.newInstance(position);
}
#Override
public int getCount() {
return 3;
}
}
public static class PagerFragment extends Fragment {
private int index;
// This is a best practice to instantiate a Fragment
public static Fragment newInstance(int index) {
// TODO: Change your newInstance method with new parameters for your need
PagerFragment f = new PagerFragment();
Bundle args = new Bundle();
args.putInt("index", index);
f.setArguments(args);
return f;
}
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
index = getArguments().getInt("index", 0);
}
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {
ViewGroup root = (ViewGroup) inflater.inflate(R.layout.sample_table_layout, null);
return root;
}
}
}
sample.xml under res/layout:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.view.ViewPager
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/viewPager"
android:layout_width="match_parent"
android:layout_height="match_parent" />
sample_table_layout.xml under res/layout:
<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<TableRow
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/ic_launcher" />
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/ic_launcher" />
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/ic_launcher" />
</TableRow>
<TableRow
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/ic_launcher" />
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/ic_launcher" />
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/ic_launcher" />
</TableRow>
<TableRow
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/ic_launcher" />
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/ic_launcher" />
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/ic_launcher" />
</TableRow>
</TableLayout>