Develop Reference

Materialio Appbar does not hide when scrolling down

I've followed the material documentation for top app bars and implemented a part of it in my app to be able to hide it, when scrolling down my list.
My Layout:
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:id="#+id/ddd"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
tools:context=".pkgTestforend.DriverListFragment">
<com.example.dochjavatestimplementation.pkgTestforend.CustomLinearLayout
android:layout_width="match_parent"
android:id="#+id/cusLL"
android:layout_height="match_parent"
app:elevation="0dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ListView
android:id="#+id/listAllDrivers"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</RelativeLayout>
</com.example.dochjavatestimplementation.pkgTestforend.CustomLinearLayout>
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:liftOnScroll="true" >
<com.google.android.material.appbar.MaterialToolbar
android:id="#+id/topAppBar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:title="PageTitle"
app:menu="#menu/top_app_bar"
app:layout_scrollFlags="scroll|enterAlways|snap"
app:navigationIcon="#drawable/baseline_menu_24"
style="#style/Widget.MaterialComponents.Toolbar.Primary"
/>
</com.google.android.material.appbar.AppBarLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
And the corresponding fragment:
public class DriverListFragment extends Fragment implements View.OnClickListener {
public DriverListFragment() {
}
public static DriverListFragment newInstance(String param1, String param2) {
return new DriverListFragment();
}
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setHasOptionsMenu(true);
}
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.fragment_driver_list, container, false);
setUpToolbar(view);
return view;
}
private void setUpToolbar(View view) {
Toolbar toolbar = view.findViewById(R.id.topAppBar);
AppCompatActivity activity = (AppCompatActivity) getActivity();
if (activity != null) {
activity.setSupportActionBar(toolbar);
}
}
#Override
public void onCreateOptionsMenu(Menu menu, MenuInflater menuInflater) {
menuInflater.inflate(R.menu.top_app_bar, menu);
super.onCreateOptionsMenu(menu, menuInflater);
}
ListView listViewDriver;
DriverListAdapter adapter;
RoomWithRxJavaViewModel viewModel;
public void onViewCreated(View view, #Nullable Bundle savedInstanceState) {
listViewDriver = view.findViewById(R.id.listAllDrivers);
viewModel = new RoomWithRxJavaViewModel(getActivity().getApplication());
Disposable d = viewModel.getDrivers()
.subscribe(allusers ->
{
adapter = new DriverListAdapter(getContext(), (ArrayList<Driver>) allusers);
listViewDriver.setAdapter(adapter);
}, e -> {
//show err mes
}
);
}
}
The setup is pretty simple build.
I just have a custom linearlayout which I am planning to modify later. And yes, the relative layout for the listview is on purpose so I can easily modify my future button positions.
The result looks like this:
So the issue is that, altough the app bar at the top is visible, it wont hide when I scroll down my list (see picture above), eventough I am using app:liftOnScroll="true" and app:layout_scrollFlags="scroll|enterAlways|snap".
What am I missing exactly? Is it cause I use my custom linearlayout?
Putting the appbar before the custom linearlayout didn't change the output unfourntatly.

how to call fragment from another fragment in tablayout with viewpager

I want to call a fragment on button click which is a fragment. I tried this code but it's not working. with this code when I click on the button it shows next fragment but not its designing. I see only a blank page.
This is my main xml :-
<LinearLayout
android:id="#+id/main_layout"
android:orientation="vertical"
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=".MainActivity">
<!-- our toolbar -->
<!-- our tablayout to display tabs -->
<android.support.design.widget.TabLayout
android:id="#+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabMode="scrollable"
app:tabGravity="fill"
android:background="#fa4022"
android:minHeight="?attr/actionBarSize"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"/>
<!-- View pager to swipe views -->
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="fill_parent"/>
I have an dashboard tab in this TabLayout. In this dashboard tab i have an button which id is userprofile. after click on this button i want to go on user_profile.xml
public class Dashboard extends Fragment implements View.OnClickListener {
Button userprofile;
#Nullable
#Override
public View onCreateView(LayoutInflater inflater, #Nullable ViewGroup container, #Nullable Bundle savedInstanceState) {
View rootView = inflater.inflate(R.layout.dashboard, container, false);
userprofile=(Button)rootView.findViewById(R.id.userprofile);
userprofile.setOnClickListener(this);
return rootView;
}
#Override
public void onClick(View view) {
Fragment fragment = null;
switch (view.getId()) {
case R.id.userprofile:
fragment = new User_Profile();
replaceFragment(fragment);
break;
}
}
private void replaceFragment(Fragment fragment) {
User_Profile user_profile = new User_Profile();
FragmentTransaction transaction = getFragmentManager().beginTransaction();
transaction.replace(R.id.pager, fragment);
transaction.addToBackStack(null);
transaction.commit();
}
User_Profile class code is :-
public class User_Profile extends Fragment {
#Nullable
#Override
public View onCreateView(LayoutInflater inflater, #Nullable ViewGroup container, #Nullable Bundle savedInstanceState) {
View rooView=inflater.inflate(R.layout.user_profile, container, false);
return rooView;
}
}
user_profile.xml is :-
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="User Profile"
android:textSize="30dp"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"/>

If you can see fragment on button click but not designing then its may error in your fragment .xml file. By using proper view problem can be solve. If there is also a problem with same post their .xml file code.

Can you show us some more data please? What's the XML for the pager fragment you're trying to replace the current fragment with?
Could you check that you're referring to the layout of that XML file, and not the individual pager element too?
(Since transaction.replace requires a fragment container as it's first argument)

Depth Pager Transformer just like SnapChat

I'm trying to implement ViewPager with DepthPageTransformer just like Snapchat application. In SnapChat application, there is a Camera screen which always comes in center of ViewPager and swiping from left or right brings other fragments on top of camera screen.
I've found code for DepthPageTransformer from this link. But the problem with this demo is that it brings all the next screen views from behind. Just like SnapChat I've a Camera screen in center and 2 screens coming on top from left and two screens coming on top from right on Camera screen.
So, how can I create a PageTransformer which brings fragments from left or right on the top of my center screen which is Camera?

I think you should provide 5 fragments in your FragmentPagerAdapter, the third (index=2) fragment will be fragment with camera view,
viewPager.setCurrentItem(2); //2 is index of camera fragment
Then your ViewPager.PageTransformer should look like this:
#Override
public void transformPage(View page, float position) {
int pageIndex = (int) page.getTag(); //im stroing pageIndex of fragment in its tag
if(pageIndex == 2) { //2 is index of camera fragment
float currentTranslation = - position * page.getWidth();
ViewCompat.setTranslationX(page, currentTranslation);
ViewCompat.setTranslationZ(page, -1);
return;
}
I am stroing pageIndex while fragment's view is created in its tag.
#Nullable
#Override
public View onCreateView(LayoutInflater inflater, #Nullable ViewGroup container, #Nullable Bundle savedInstanceState) {
...
view.setTag(pageIndex);
return view;
}
Here is gif with results:
https://media.giphy.com/media/OIwmXdr3nukq4/giphy.gif
Fragment with food is the one you should replace with your camera fragment.

This is what they have done, if you don't get the concept shoot a comment.
Basically what they are doing is they have a MainActivity which is showing the camera and it is holding those three buttons in the bottom plus its holding viewpager that viewpager is holding three fragments
1.LeftFragment (Fragment on the left side).
2.CenterFragment (This fragment is transparent so when it comes in center the mainactivity content is visible which is camera).
3.RightFragment(Fragment on the right side).
Now Comes the coding part.
MainActivity.java.
public class MainActivity extends AppCompatActivity {
private ViewPager mViewPager;
#RequiresApi(api = Build.VERSION_CODES.KITKAT_WATCH)
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mViewPager = (ViewPager) findViewById(R.id.view_pager);
mViewPager.setAdapter(new PagerAdapter(getSupportFragmentManager()));
mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
#Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
//Here calculate the amount by which the pages are scrolled and animate your buttons accordingly.
}
#Override
public void onPageSelected(int position) {
}
#Override
public void onPageScrollStateChanged(int state) {
}
});
}
class PagerAdapter extends FragmentStatePagerAdapter {
public PagerAdapter(FragmentManager fm) {
super(fm);
}
#Override
public Fragment getItem(int position) {
switch (position) {
case 0:
return new LeftFragment();
case 1:
return new CenterFragment();
case 2:
return new RightFragment();
}
return null;
}
#Override
public int getCount() {
return 3;
}
}
}
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:openDrawer="start">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:text="Here is your camera."
android:textAppearance="?android:attr/textAppearanceLarge"/>
<android.support.v4.view.ViewPager
android:id="#+id/view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:text="Button"/>
</RelativeLayout>
Then comes the fragments
LeftFragment.java
public class LeftFragment extends BaseController {
#Override
public View onCreateView(LayoutInflater inflater, #Nullable ViewGroup container, Bundle savedInstanceState) {
View rootView = inflater.inflate(R.layout.fragment_sheet2, container, false);
return rootView;
}
}
fragment_left.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView
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="match_parent"
android:layout_margin="2dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#FFA726"
android:orientation="vertical"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_gravity="center"
android:fontFamily="sans-serif"
android:text="Left"
android:textColor="#fff"
android:textSize="30sp"/>
</RelativeLayout>
</android.support.v7.widget.CardView>
RightFragment.java
public class RightFragment extends BaseController {
#Nullable
#Override
public View onCreateView(LayoutInflater inflater, #Nullable ViewGroup container, Bundle savedInstanceState) {
View rootView = inflater.inflate(R.layout.fragment_sheet1, container, false);
return rootView;
}
}
fragment_right.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView
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="match_parent"
android:layout_margin="2dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#FFA726"
android:orientation="vertical"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_gravity="center"
android:fontFamily="sans-serif"
android:text="Right"
android:textColor="#fff"
android:textSize="30sp"/>
</RelativeLayout>
</android.support.v7.widget.CardView>
I have left the animation part which I think you can achieve with little bit of calculation in viewpager OnPageChangeListener.
Happy Coding.

Android fragment transaction with SlidingTabLayout not working in API level < 21

in my app I have an ActionBarActivity (I'm using support library with AppCompat) that uses the SlidingTabLayout class from Google (taken from here). So this is the XML code of the activity's layout:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/activity_series_details"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".SeriesDetailsActivity">
<com.my.package.SlidingTabLayout
android:id="#+id/series_details_tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:elevation="2dp"
android:background="#color/primary_material_dark" />
<android.support.v4.view.ViewPager
android:id="#+id/series_details_pager"
android:layout_height="0dp"
android:layout_width="match_parent"
android:layout_weight="1" />
</LinearLayout>
In this activty, when user press an option in the action bar, I want to add a Fragment with a custom animation. This is the code that handle menu click:
#Override
public boolean onOptionsItemSelected(MenuItem item) {
switch (item.getItemId()) {
/* ... OTHER CASES ... */
case R.id.menu_voption:
newFragment = MyNewFragment.newInstance();
getSupportFragmentManager().beginTransaction()
.setCustomAnimations(
R.anim.slide_up,
R.anim.slide_down
)
.add(R.id.activity_series_details, newFragment)
.commit();
editing = true;
break;
default:
return super.onOptionsItemSelected(item);
}
return true;
Doing this, my new fragment is correctly added to the activty and replace the currente fragment but not tab layout, tha remains visible. So I've tryed to add this line before start transaction:
tabsHost.setVisibility(View.GONE);
where tabsHost is the SlidingTabLayout. With this modification, the tabs layout disappear and the new fragment is correctly shown, but only in the API Level >= 21. In my Samsung Galaxy S4 (that runs API 19) and in all other emulators with lesser API level than 21 (my target is 11+), the tabs layout disappear but new fragment is not visible. I'm pretty sure is my fault, but I can't figure why. Thanks all for attention.

Since the SlidingTabLayout is not a fragment, it cannot be managed by the FragmentManager. You would have to make it part of a fragment and add it to your Activity. This is possible with getChildFragmentManager.
Move your activity layout to a fragment:
activity_main.xml
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/activity_series_details"
android:layout_width="match_parent"
android:layout_height="match_parent">
</FrameLayout>
fragment_sliding_tab.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/activity_series_details"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<com.my.package.SlidingTabLayout
android:id="#+id/series_details_tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:elevation="2dp"
android:background="#color/primary_material_dark" />
<android.support.v4.view.ViewPager
android:id="#+id/series_details_pager"
android:layout_height="0dp"
android:layout_width="match_parent"
android:layout_weight="1" />
</LinearLayout>
SlidingTabFragment.java
public class SlidingTabFragment extends Fragment {
private PagerAdapter mPagerAdapter;
private ViewPager mViewPager;
public static SlidingTabFragment newInstance() {
SlidingTabFragment fragment = new SlidingTabFragment();
return fragment;
}
public SlidingTabFragment() {
// Required empty public constructor
}
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
}
#Override
public void onAttach(Activity activity) {
super.onAttach(activity);
}
#Override
public void onViewCreated(View view, #Nullable Bundle savedInstanceState) {
super.onViewCreated(view, savedInstanceState);
mPagerAdapter = new PagerAdapter(getChildFragmentManager());
// Set up the ViewPager with the sections adapter.
mViewPager = (ViewPager) view.findViewById(R.id.series_details_pager);
mViewPager.setAdapter(mSectionsPagerAdapter);
SlidingTabLayout tabs = (SlidingTabLayout) view.findViewById(R.id.series_details_tabs);
tabs.setViewPager(mViewPager);
}
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
return inflater.inflate(R.layout.fragment_sliding_tab, container, false);
}
}
Add your fragment in your Activity's onCreate:
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Fragment slidingTabFragment = SlidingTabFragment.newInstance();
FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();
transaction.replace(R.id.activity_series_details, slidingTabFragment).commit();
}

Custom Adapter within a Nested Fragment

I have a ViewPager which holds multiple base fragments, each base fragment have four more nested fragments and each nested fragment is a combination of 5 imageViews and textView.
(This is what I intended to do)
I have created a sample application but I am not able to implement that properly. I cannot see any view in the nested fragment or the base fragment.
Here's the code for the sample application
main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<fragment android:name="com.example.nestedfragments.BaseFragment"
android:id="#+id/left_fragment"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="match_parent"/>
</LinearLayout>
MainActivity.java
package com.example.nestedfragments;
import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
public class MainActivity extends FragmentActivity {
/**
* Called when the activity is first created.
*/
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
}
}
base_fragment.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:gravity="center">
<Button
android:id="#+id/button1"
android:text="Launch Nested Fragment"
android:gravity="center"
android:layout_alignParentBottom="true"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:paddingBottom="10dp"/>
</RelativeLayout>
BaseFragment.java
public class BaseFragment extends Fragment {
Button doNestingButton;
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// set the view
View root = inflater.inflate(R.layout.base_fragment, container, false);
doNestingButton = (Button) root.findViewById(R.id.button1);
doNestingButton.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
Fragment videoFragment = new NestedFragment();
// we get the 'childFragmentManager' for our transaction
FragmentTransaction transaction = getChildFragmentManager().beginTransaction();
// make the back button return to the main screen
// and supply the tag 'left' to the backstack
transaction.addToBackStack("left");
// add our new nested fragment
transaction.add(getId(), videoFragment, "left");
// commit the transaction
transaction.commit();
}
});
return root;
}
}
nested_fragment.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="154dp"
android:layout_height="154dp"
android:id="#+id/imageView" android:layout_gravity="left|center_vertical"
android:src="#drawable/ic_splash"/>
</LinearLayout>
NestedFragment.java
public class NestedFragment extends Fragment {
public NestedFragment() {
}
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
View root = inflater.inflate(R.layout.nested_fragment, container, false);
ImageView doNestingButton = (ImageView) root.findViewById(R.id.imageView);
return root;
}
Once again this is a sample application, please guide me.

From your above code, you have not used the fragment container layout such as FrameLayout in base_fragment.xml .So add the frame layout for nested fragment inbase_fragment.xml