Quotza: A Colored Quotes App – Java + MVVM + Retrofit + MySQL CRUD + Search + Pagination
Quotza is a Quotes app designed for you to use as a template. It is designed for programmers who prefer Java over Kotlin. It uses modern technologies and is perfect for people looking to master Android usage with PHP MySQL. It is efficient and easy to understand.
Concepts it teaches
Quotza is designed as a teaching project, thus best practices are used. Here are the concepts it is designed to teach you:
- Java Programming Language
- MVVM - Model View ViewModel
- PHP MySQL CRUD
- Server side search
- Load more pagination
- Swipe to Refresh
- Full App development
Here are the widgets used:
- Activities as Pages.
- DialogFragment for searching quotes.
- Collapsing toolbar layout in both the dashboard and detail page.
- Material EditTexts to enter quotes.
- RecyclerView - To render quotes.
- SearchView for realtime search filter.
- Toolbar Menus for navigation.
- Transition animations across activities.
- CardView, textviews, progressbars etc.
Let's look at the pages in this application:
(a). Splash Screen
This is the first page. It is optional in an application of this nature and is purely for decorative and branding purposes. Use it to show your brand to your users.
(b). Dashboard Page
This is our second activity. It is designed to be used as a cental page where you can navigate to other activities. It contains a collapsing toolbar layout and several cardviews and a button.
There isn't any serious coding in this page. The design is purely XML.
(c). Quote Editor
We have a full activity for publishing a quote. We also use the same page for editing/updating the quote or deleting it. Users can enter the quote, then author, then choose a category from a chooser dialog.
(d). Quote Listing Page
We list quotes using recyclerview. We do in two modes:
- Staggered Grid Mode - 2 columns
- Linear Layout - 1 column
The user can switch easily between the two modes without requiring data re-download. This is possible because we are temporarily caching data statically in memory.
Then there is the load more functionality. As the user scrolls, we automatically attempt to download more quotes from the server. This chunked download of data ensures that our app does not gobble up users' bandwith and is efficient and fast.
(e). Search Fragment
We will use androidx dialogfragment to do our search and filter. This ensures that we don't have to navigate to another page to do our search, neither do we interfere with the already downloaded and rendered data in our recyclerview. The fragment overlays the recyclerview, clicking outside the dialogfragment's view port dismisses it.
The search is a realtime search filter. We are actually making calls to the server as the user types the data but we do it efficiently.
(f). Detail Page
The detail page allows you to view the quote, alongside all it's details in a complete page. Even though quotes are typically shorter, we've included this page so that you can find it easier, for example to modify this app into something different like a blog post.
(g). About Us Page
There is a static about us page that you can use to show details about your company.