TechQA.

How to Apply Shimmer Effect android swipeProgress?

2k views Asked by At

How to connect my rssfragment to Apply Shimmer Effect swipeProgress. I need to show you a shimmer layout when rssfragment is in progress. I tried and lyt_shimmer did not show me

swipeRefreshLayout.setOnRefreshListener(new SwipeRefreshLayout.OnRefreshListener() {
        @Override
        public void onRefresh() {
            refreshItems();
        }
    });

I need to include_shimmer_recipes_list when refreshing

RssFragment

    public class RssFragment extends Fragment {
    // Added argument key for URL
    private static final String ARG_URL = "url_string";
    public static final int RECIPES_LIST_SMALL = 0;
    public static final int RECIPES_LIST_BIG = 1;
    public static final int RECIPES_GRID_2_COLUMN = 2;
    public static final int RECIPES_GRID_3_COLUMN = 3;
    private RSSFeed rssFeed = null;
    private ArrayList<RSSItem> postsList;
    private RssAdapter listAdapter;

    private ViewModeUtils viewModeUtils;
    private SwipeRefreshLayout swipeRefreshLayout;
    SharedPref sharedPref;
    private Activity mAct;
    private RelativeLayout ll;
    private String url;
    private AdView mAdView;
    private View rootView;
    private ShimmerFrameLayout lyt_shimmer;
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        ll = (RelativeLayout) inflater.inflate(R.layout.fragment_list_refresh, container, false);
        return ll;
    }

    @Override
    public void onViewCreated(View view, @Nullable Bundle savedInstanceState) {
        super.onViewCreated(view, savedInstanceState);
        setHasOptionsMenu(true);
        lyt_shimmer = ll.findViewById(R.id.shimmer_view_container);
        RecyclerView listView = ll.findViewById(R.id.list);
        postsList = new ArrayList<>();
        listAdapter = new RssAdapter(getContext(), postsList);
        listAdapter.setModeAndNotify(InfiniteRecyclerViewAdapter.MODE_PROGRESS);
        listView.setAdapter(listAdapter);
        listView.setLayoutManager(new LinearLayoutManager(getContext(), LinearLayoutManager.VERTICAL, false));

        swipeRefreshLayout = ll.findViewById(R.id.swipeRefreshLayout);
        swipeRefreshLayout.setOnRefreshListener(new SwipeRefreshLayout.OnRefreshListener() {
            @Override
            public void onRefresh() {
                refreshItems();
                initShimmerLayout();
            }





            private void initShimmerLayout() {

                View lyt_shimmer_recipes_list_big = ll.findViewById(R.id.lyt_shimmer_recipes_list_big);


                if (sharedPref.getRecipesViewType() == RECIPES_LIST_SMALL) {

                    lyt_shimmer_recipes_list_big.setVisibility(View.GONE);


                } else if (sharedPref.getRecipesViewType() == RECIPES_LIST_BIG) {

                    lyt_shimmer_recipes_list_big.setVisibility(View.VISIBLE);


                } else if (sharedPref.getRecipesViewType() == RECIPES_GRID_2_COLUMN) {
        ;
                    lyt_shimmer_recipes_list_big.setVisibility(View.GONE);


                } else if (sharedPref.getRecipesViewType() == RECIPES_GRID_3_COLUMN) {

                    lyt_shimmer_recipes_list_big.setVisibility(View.GONE);


                }
            }
        });
    }

    @Override
    public void onActivityCreated(Bundle savedInstanceState) {
        super.onActivityCreated(savedInstanceState);
        mAct = getActivity();

// get URL from arguments
        url = RssFragment.this.getArguments().getString(ARG_URL);
        refreshItems();
    }

    private class RssTask extends AsyncTask<Void, Void, Void> {

        @Override
        protected Void doInBackground(Void... arg0) {
            try {
// Pass the URL string as parameter to URL class
                URL rssUrl = new URL(url);
                SAXParserFactory mySAXParserFactory = SAXParserFactory.newInstance();
                SAXParser mySAXParser = mySAXParserFactory.newSAXParser();
                XMLReader myXMLReader = mySAXParser.getXMLReader();
                RSSHandler myRSSHandler = new RSSHandler();
                myXMLReader.setContentHandler(myRSSHandler);
                InputSource myInputSource = new InputSource(rssUrl.openStream());
                myXMLReader.parse(myInputSource);

                rssFeed = myRSSHandler.getFeed();

            } catch (ParserConfigurationException | IOException | SAXException e) {
                Log.printStackTrace(e);
            }

            return null;
        }

        @Override
        protected void onPostExecute(Void result) {
            if (rssFeed != null) {
                if (rssFeed.getList().size() > 0) {
                    postsList.addAll(rssFeed.getList());
                }

                listAdapter.setHasMore(false);
                listAdapter.setModeAndNotify(InfiniteRecyclerViewAdapter.MODE_LIST);
                swipeRefreshLayout.setRefreshing(false);

            } else {
                String message = null;
                if (!url.startsWith("http"))
                    message = "Debug info: '" + url + "' is most likely not a valid RSS url. Make sure the url entered in your configuration starts with 'http' and verify if it's valid XML using validator.w3.org/feed";
                Helper.noConnection(mAct, message);

                listAdapter.setModeAndNotify(InfiniteRecyclerViewAdapter.MODE_EMPTY);
                swipeRefreshLayout.setRefreshing(false);

            }

            super.onPostExecute(result);
        }

    }

    @Override
    public void onCreateOptionsMenu(Menu menu, MenuInflater inflater) {
        inflater.inflate(R.menu.rss_menu, menu);
        viewModeUtils = new ViewModeUtils(getContext(), getClass());
        viewModeUtils.inflateOptionsMenu(menu, inflater);
        ThemeUtils.tintAllIcons(menu, mAct);
    }

    private void refreshItems() {
        postsList.clear();
        lyt_shimmer.setVisibility(View.GONE);
        lyt_shimmer.stopShimmer();
        listAdapter.setModeAndNotify(InfiniteRecyclerViewAdapter.MODE_PROGRESS);
        new RssTask().execute(


        );
    }

    private void swipeProgress(final boolean show) {
        if (!show) {
            swipeRefreshLayout.setRefreshing(show);
            lyt_shimmer.setVisibility(View.GONE);
            lyt_shimmer.stopShimmer();
            return;
        }
        swipeRefreshLayout.post(() -> {
            swipeRefreshLayout.setRefreshing(show);
            lyt_shimmer.setVisibility(View.VISIBLE);
            lyt_shimmer.startShimmer();
        });
    }

    @Override
    public void onDestroy() {
        super.onDestroy();
        swipeProgress(false);

        lyt_shimmer.stopShimmer();
    }







    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        viewModeUtils.handleSelection(item, new ViewModeUtils.ChangeListener() {
            @Override
            public void modeChanged() {
                listAdapter.notifyDataSetChanged();
            }
        });
        switch (item.getItemId()) {
            case R.id.info:
//show information about the feed in general in a dialog
                if (rssFeed != null) {
                    String FeedTitle = (rssFeed.getTitle());
                    String FeedDescription = (rssFeed.getDescription());
//String FeedPubdate = (myRssFeed.getPubdate()); most times not present
                    String FeedLink = (rssFeed.getLink());

                    AlertDialog.Builder builder = new AlertDialog.Builder(mAct);

                    String titlevalue = getResources().getString(R.string.feed_title_value);
                    String descriptionvalue = getResources().getString(R.string.feed_description_value);
                    String linkvalue = getResources().getString(R.string.feed_link_value);

                    if (FeedLink.equals("")) {
                        builder.setMessage(titlevalue + ": \n" + FeedTitle +
                                "\n\n" + descriptionvalue + ": \n" + FeedDescription);
                    } else {
                        builder.setMessage(titlevalue + ": \n" + FeedTitle +
                                "\n\n" + descriptionvalue + ": \n" + FeedDescription +
                                "\n\n" + linkvalue + ": \n" + FeedLink);
                    }

                    builder.setNegativeButton(getResources().getString(R.string.ok), null)
                            .setCancelable(true);
                    builder.create();
                    builder.show();

                }
                return true;
            default:
                return super.onOptionsItemSelected(item);
        }}

    // This is the factory to instantiate the RssFragment instance with the url string as arguments
    public static RssFragment newInstance(String url) {
        RssFragment newInstance = new RssFragment();
        Bundle bundle = new Bundle();
        bundle.putString(ARG_URL, url);
        newInstance.setArguments(bundle);
        return newInstance;
    }
}

fragment_list_refresh

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto">


<androidx.swiperefreshlayout.widget.SwipeRefreshLayout
    android:id="@+id/swipeRefreshLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="210dp"
            android:layout_marginEnd="5dp"
            android:layout_marginStart="5dp"
            android:layout_marginTop="5dp">

            <com.Tamillive.newspaper.EnchantedViewPager
                android:id="@+id/viewPager"
                android:layout_width="match_parent"
                android:layout_height="210dp" />

            <me.relex.circleindicator.CircleIndicator
                android:id="@+id/indicator_unselected_background"
                android:layout_width="wrap_content"
                android:layout_height="30dp"
                android:layout_alignParentBottom="true"
                android:layout_alignParentEnd="true"
                android:layout_marginBottom="5dp"
                android:layout_marginEnd="10dp"
                app:ci_drawable="@drawable/selecteditem_dot"
                app:ci_drawable_unselected="@drawable/nonselecteditem_dot"
                app:ci_height="6dp"
                app:ci_width="6dp"
                android:layout_alignParentRight="true"
                android:layout_marginRight="10dp" />
        </RelativeLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp"
            android:background="@color/background_white"
            android:orientation="vertical">


            <androidx.recyclerview.widget.RecyclerView
                android:id="@+id/list"
                style="@style/listStyleNoPadding"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:divider="@null"
                android:focusable="false" />


        </LinearLayout>

    </LinearLayout>
</androidx.swiperefreshlayout.widget.SwipeRefreshLayout>

    <com.facebook.shimmer.ShimmerFrameLayout
        android:id="@+id/shimmer_view_container"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:shimmer_duration="1000">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">



            <include
                android:id="@+id/lyt_shimmer_recipes_list_big"
                layout="@layout/include_shimmer_recipes_list_big" />





        </RelativeLayout>

    </com.facebook.shimmer.ShimmerFrameLayout>

</RelativeLayout>

include_shimmer_recipes_list

    <?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"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:padding="10dp"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:orientation="vertical">

        <androidx.constraintlayout.widget.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <RelativeLayout
                android:layout_width="0dp"
                android:layout_height="0dp"
                app:layout_constraintDimensionRatio="H,2:1.1"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintRight_toRightOf="parent"
                app:layout_constraintTop_toTopOf="parent">

                <View
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="@drawable/bg_shimmer" />

            </RelativeLayout>

        </androidx.constraintlayout.widget.ConstraintLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp"
            android:orientation="vertical">

            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content">

                <View
                    android:layout_width="match_parent"
                    android:layout_height="16dp"
                    android:layout_marginRight="100dp"
                    android:layout_marginEnd="100dp"
                    android:background="@drawable/bg_shimmer" />

            </RelativeLayout>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center_vertical"
                android:layout_marginTop="8dp"
                android:orientation="horizontal">

                <View
                    android:layout_width="100dp"
                    android:layout_height="12dp"
                    android:background="@drawable/bg_shimmer" />

            </LinearLayout>

        </LinearLayout>

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:layout_marginTop="16dp"
        android:orientation="vertical">

        <androidx.constraintlayout.widget.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <RelativeLayout
                android:layout_width="0dp"
                android:layout_height="0dp"
                app:layout_constraintDimensionRatio="H,2:1.1"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintRight_toRightOf="parent"
                app:layout_constraintTop_toTopOf="parent">

                <View
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="@drawable/bg_shimmer" />

            </RelativeLayout>

        </androidx.constraintlayout.widget.ConstraintLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp"
            android:orientation="vertical">

            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content">

                <View
                    android:layout_width="match_parent"
                    android:layout_height="16dp"
                    android:layout_marginRight="100dp"
                    android:layout_marginEnd="100dp"
                    android:background="@drawable/bg_shimmer" />

            </RelativeLayout>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center_vertical"
                android:layout_marginTop="8dp"
                android:orientation="horizontal">

                <View
                    android:layout_width="100dp"
                    android:layout_height="12dp"
                    android:background="@drawable/bg_shimmer" />

            </LinearLayout>

        </LinearLayout>

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:layout_marginTop="16dp"
        android:orientation="vertical">

        <androidx.constraintlayout.widget.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <RelativeLayout
                android:layout_width="0dp"
                android:layout_height="0dp"
                app:layout_constraintDimensionRatio="H,2:1.1"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintRight_toRightOf="parent"
                app:layout_constraintTop_toTopOf="parent">

                <View
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="@drawable/bg_shimmer" />

            </RelativeLayout>

        </androidx.constraintlayout.widget.ConstraintLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp"
            android:orientation="vertical">

            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content">

                <View
                    android:layout_width="match_parent"
                    android:layout_height="16dp"
                    android:layout_marginRight="100dp"
                    android:layout_marginEnd="100dp"
                    android:background="@drawable/bg_shimmer" />

            </RelativeLayout>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center_vertical"
                android:layout_marginTop="8dp"
                android:orientation="horizontal">

                <View
                    android:layout_width="100dp"
                    android:layout_height="12dp"
                    android:background="@drawable/bg_shimmer" />

            </LinearLayout>

        </LinearLayout>

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:layout_marginTop="16dp"
        android:orientation="vertical">

        <androidx.constraintlayout.widget.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <RelativeLayout
                android:layout_width="0dp"
                android:layout_height="0dp"
                app:layout_constraintDimensionRatio="H,2:1.1"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintRight_toRightOf="parent"
                app:layout_constraintTop_toTopOf="parent">

                <View
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="@drawable/bg_shimmer" />

            </RelativeLayout>

        </androidx.constraintlayout.widget.ConstraintLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp"
            android:orientation="vertical">

            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content">

                <View
                    android:layout_width="match_parent"
                    android:layout_height="16dp"
                    android:layout_marginRight="100dp"
                    android:layout_marginEnd="100dp"
                    android:background="@drawable/bg_shimmer" />

            </RelativeLayout>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center_vertical"
                android:layout_marginTop="8dp"
                android:orientation="horizontal">

                <View
                    android:layout_width="100dp"
                    android:layout_height="12dp"
                    android:background="@drawable/bg_shimmer" />

            </LinearLayout>

        </LinearLayout>

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:layout_marginTop="16dp"
        android:orientation="vertical">

        <androidx.constraintlayout.widget.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <RelativeLayout
                android:layout_width="0dp"
                android:layout_height="0dp"
                app:layout_constraintDimensionRatio="H,2:1.1"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintRight_toRightOf="parent"
                app:layout_constraintTop_toTopOf="parent">

                <View
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="@drawable/bg_shimmer" />

            </RelativeLayout>

        </androidx.constraintlayout.widget.ConstraintLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp"
            android:orientation="vertical">

            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content">

                <View
                    android:layout_width="match_parent"
                    android:layout_height="16dp"
                    android:layout_marginRight="100dp"
                    android:layout_marginEnd="100dp"
                    android:background="@drawable/bg_shimmer" />

            </RelativeLayout>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center_vertical"
                android:layout_marginTop="8dp"
                android:orientation="horizontal">

                <View
                    android:layout_width="100dp"
                    android:layout_height="12dp"
                    android:background="@drawable/bg_shimmer" />

            </LinearLayout>

        </LinearLayout>

    </LinearLayout>

</LinearLayout>

This layout should come when I have data progress. If anyone knows you please help me

android shimmer
Original Q&A
2

There are 2 answers

4
Nikhil Jain On

You can use ShimmerFrameLayout Library from Facebook.

If you want to show the Shimmer effect while your RecyclerView Items are loading then you can follow this link to implement it in your Project.

0
Malik Basit On

So what I understand from your query that you need to show the shimmer effect layout once the user swipes to the screen and progress starts showing.

  • You need to implement the onRefresh method of OnRefreshListener using the SwipeRefreshLayout object.
  • When the user swipes to refresh the screen there will be a callback in the above method from that you can hide your main layout and show shimmer effect layout and once data refreshes via remote or local data source you can hide the shimmer effect layout and show the main content layout again in the same RSS fragment.

Here's the sample implementation, maybe that helps you :

val listener = object : SwipeRefreshLayout.OnRefreshListener {
        override fun onRefresh() {
            swipeRefreshLayout.visibility = View.GONE
            showShimmerAnimation()
        }
    }

swipeRefreshLayout.setOnRefreshListener(listener)

fun showShimmerAnimation() {
shimmer_view_container.apply {
       visibility = View.VISIBLE
       startAnimation()
   }
}

fun hideShimmerAnimation() {
shimmer_view_container.apply {
       visibility = View.GOE
       stopAnimation()
   }
}

fun onDataLoaded() {
    hideShimmerAnimation()
    swipeRefreshLayout.visibility = View.VISIBLE
}

Related Questions in ANDROID

Related Questions in SHIMMER

Popular Questions

Popular Tags

javascript python java c# php android html jquery c++ css ios sql mysql r reactjs node.js arrays c asp.net json python-3.x ruby-on-rails .net sql-server swift django angular objective-c pandas excel

Trending Questions