Android Material Design Slidenerd Style
- Create any app in Android that uses material design
Understand the visual and functional APIs involved in material design
Learn which colors to use, how to use colors, styles for material design
- Work with navigation drawers, customize them as per other standard apps
- Create Floating Action Buttons with menus and use 3rd party libraries for doing the same
- Work with RecyclerViews as an alternative to ListViews, customize them, load dynamic data inside them, section them, animate their modifications, animate their visual perception when the user loads them
- Download and parse JSON
- Understand how to use Volley library for loading images and data inside your Lists
- Validate material design specifications suggested by your designer vs. what you actually build
- Understand and experiment with the Touch Event Framework in Android
- Build Ripple effects for lists and normal items on both Android Lollipop and pre-lollipop devices
- Build custom material tabs
- Using RottenTomatoes API effectively
- Making VectorDrawables and AnimatedVectorDrawables on both Android Lollipop and prelollipop devices
- Understanding how to use JobScheduler API as an alternative to IntentService + AlarmManager
- Use Swipe To Refresh pattern from Material Design
- Perform Activity Transitions, Content Transitions and Shared Element Transitions between your activities
- Perform several different types of animations with your views
- Initialize, Customize and Use the Toolbar as a replacement for the ActionBar
This Android Tutorial shows how to use material design colors in Android by modifying the styles.xml file to add android:primaryColor, android:primaryColorDark, android:accentColor and to resolve the error "You need to use a Theme.AppCompat theme (or descendant) with this activity" which arises in the Lollipop devices if AppTheme.Base is not used.
This Android Tutorial shows you an example of ToolBar in Android by letting you specify the ToolBar as the default ActionBar or App Bar inside your app using the setSupportActionBar method inside your Activity. You need to use a Theme.AppCompat.NoActionBar or Theme.AppCompat.Light.NoActionBar to prevent the default action bar from displaying. Create a separate layout file called app_bar.xml to include the android.support.widget.v7.ToolBar inside the file and use the <include> to add the ToolBar to your activity_main.xml
This Android Material Design Tutorial video shows how to customize toolbar in Android. It shows you how to define app:theme and app:popupTheme in styles.xml, how to change the title color in ActionBar/Toolbar using the textColorPrimary and how to change color of overflow icon in ActionBar/Toolbar using textColorSecondary
This Android Tutorial video shows how to add actions/action items/action icons to the ToolBar/ActionBar/AppBar and how to reuse the ToolBar between different Activities, how to navigate back to the MainActivity or parent Activity by setting up affordance on the ToolBar using the methods setHomeButtonEnabled and setDisplayHomeAsUpEnabled using the NavUtils class
This Android Tutorial shows how to implement Navigation Drawer using Material Design in Android. Create a DrawerLayout, make 2 children, one as the main content, the other as the content for the NavigationDrawer. The DrawerLayout uses has the layout_gravity attribute to open the Drawer from left to right. DrawerLayout.DrawerListener enables you to listen to events such as onDrawerOpened, onDrawerClosed, onDrawerSlide.
This Android Material Design Tutorial shows how to make a navigation drawer using the DrawerLayout, the NavigationDrawerFragment and ActionBarDrawerToggle in conjunction with the android.support.v7.widget.Toolbar. Add the DrawerLayout with 2 children, one representing the main content on the screen, the other, a Fragment representing the content displayed inside a NavigationDrawer. Specify the layout_gravity="start" to ensure the drawer opens from the left. Create a Fragment that'll link the ToolBar, the Activity with the DrawerLayout with the help of the ActionBarDrawerToggle class.
This Android Tutorial video shows how to build a navigation drawer using Material Design specifications suggested by Google. In this video we track whether the navigation drawer was shown before the user or not in a boolean variable and store that variable in a SharedPreferences.
This Android Tutorial video shows how to build the navigation drawer using material design in Android Studio. We use the ActionBarDrawerToggle's methods onDrawerOpened and onDrawerClosed to call invalidateOptionsMenu() and inside the onDrawerOpened method we track the boolean variable indicating whether the user is aware of the drawer or not and set it to true indicating that the user knows about the navigation drawer. Finally we add a background color to the container of the root View representing the Drawer's XML layout file and we call the openDrawer method only if the user has never seen the drawer before and the Activity or Fragment hosting this drawer is being started for the first time
This Android Tutorial video talks about the different types of navigation drawers possible in material design. How to make a navigation drawer on top of the toolbar, how to make the toolbar on top of the navigation drawer, how to fade the toolbar when the navigation drawer is opened. We use the onDrawerSlide method to animate the alpha value of the Toolbar as the user slides the drawer.
This Android Tutorial shows how to make your status bar translucent in material design. Define android:windowTranslucentStatus="true" in the styles-v21.xml which will make your status bar non-colorable but translucent, use the android:fitSystemWindows="true" for pushing the content considering padding of layout by considering space for extra items like Status Bar, Navigation Bar.
This Android Material Design Tutorial video talks about how to make a colored translucent or transparent status bar for kitkat and Lollipop using a hack where the Toolbar is supplied with different padding values for different versions of Android. On devices running pre-lollipop, the Toolbar has no extra padding specified but on devices running Kit or Lollipop or above, the Toolbar has an extra 24 dp of top padding to push the content down. The Navigation Drawer itself uses the same technique to push its content by a different measure for devices running on different versions of Android. The status bar height in Android is 24 dp as per Material Design documentation.
This video shows an example of RecyclerView in Android. The RecyclerView is considered as a replacement for the standard ListView. It requires the android.support.v7.widget.RecyclerView and uses a LayoutManager such as LinearLayoutManager to arrange items similar to a ListView, GridLayoutManager to arrange items in a Grid, StaggeredGridLayoutManager to arrange variable size items in a Grid. It uses the RecyclerView.Adapter that requires a RecyclerView.ViewHolder to inflate the layout inside the onCreateViewHolder. The user can enter or specify values for the current row inside the RecyclerView using the onBindViewHolder method.
This Android Tutorial shows how to use the RecyclerView.Adapter to display data inside your RecyclerView. Create a class that extends the RecyclerView.ViewHolder and return an object of this class from the onCreateViewHolder where you use the LayoutInflater to inflate an XML file for displaying your custom row.
This Android Tutorial video shows how to use the RecyclerView in Android with its RecyclerView.Adapter to support the onCreateViewHolder and onBindViewHolder. Use the onCreateViewHolder to inflate your custom layout file with a LayoutInflater, and pass the root of this layout to your instance of RecyclerView.ViewHolder so that it can call findViewById on all your child views for your root layout. Use the onBindViewHolder to get the data at current position and update the child views inside your root layout instance.
This Android Tutorial shows you how to display a RecyclerView with the help of its adapter RecyclerView.Adapter. Give it a data source to read data from which in our case is a List object. Use the Collections.emptyList to avoid dealing with null pointer exceptions inside the adapter. Use the material design iconography guidelines to create icons at 54% opacity with basic geometric shapes in the RecyclerView.
This Android video shows how to handle onClick for items in the RecyclerView and how to delete items from RecyclerView adapter on click. Use an onClickListener inside your RecyclerView.ViewHolder or onBindViewHolder method, pass the position using the getPosition method. Delete items from the Adapter using the notifyItemRemoved from RecyclerView.Adapter instead of using notifyDataSetChanged
This Android Tutorial video talks about the onTouchEvent in Android and the touch handling cycle. The Activity calls its dispatchTouchEvent which is propogated to the ViewGroup under its layout. The dispatchTouchEvent will call the onInterceptedTouchEvent on the ViewGroup. If it returns false, it forwards the MotionEvent to the View object where the onTouchEvent is called giving the child View a chance to process the event and return true or false indicating whether the event was consumed or not. If the Child View returns false, the onTouch for the ViewGroup is called and the event propagates upwards in the chain finally calling the Activity's onTouchEvent
This Android Tutorial shows an example of onTouchEvent with the help of a custom ViewGroup and a custom View. The Activity forwards the ACTION_DOWN MotionEvent through its dispatchTouchEvent where we call the super implementation to forward this event to the custom ViewGroup's dispatchTouchEvent. Here we can forward this to onInterceptedTouchEvent to decide whether we want to process the MotionEvent here in the ViewGroup or pass the event to the children of this ViewGroup. If we return false here, it means let the children process the event and hence the dispatchTouchEvent is called for the children where the onTouchEvent will be triggered. if the View returns true , it means the View is interested in consuming the event thus breaking the cycle, otherwise the parents are given a chance to process the same event bubbling up from the child inside their onTouchEvent respectively. The last call is to the Activity's onTouchEvent after which the event is lost if none of them are willing to process it. By default, all of them return false in their super implementation.
This Android Tutorial shows how to handle the touch Event in Android for a View and a ViewGroup or Layout. To ensure a View receives a Touch Event in Android, return false from the onInterceptedTouchEvent of a Layout or ViewGroup containing that view. The super.onInterceptedTouchEvent returns false by default and you'll need to handle this only if you are writing a custom layout. Next step, ensure that you return a true from the onTouchEvent method of the View to indicate that it has successfully handled the touch event. All future calls for successive MotionEvent such as ACTION_MOVE , ACTION_UP are forwarded to the View in this case. To ensure your layout or ViewGroup handles the touch event, return true from the onInterceptedTouchEvent of your layout to indicate that your layout or ViewGroup is interested in processing the touch event. This will trigger the onTouchEvent method of your Layout or ViewGroup where you get a chance to process the touch event. Return true from the onTouchEvent to indicate that your layout has successfully consumed the MotionEvent and hence the Activity's onTouchEvent wont be triggered.
This Android Tutorial video shows how to block touch events from reaching the child by returning true from the onInterceptTouchEvent of your parent layout for certain events while letting certain events to be handled by the childView. The Child View receives an ACTION_CANCEL when the parent blocks the touch event and all further events until the next ACTION_DOWN are blocked from reaching the Child View. At the same time, the Child View can also prevent the parent from intercepting touch events such as a ListView inside a ScrollView by simply setting the requestDisallowInterceptTouchEvent to true by means of which all further events won't be intercepted by the parent.
This Android Tutorial shows you how to start an Activity from your Navigation Drawer using the RecyclerView's onClick. We demonstrate 2 ways of handling the item click of the RecyclerView in this video 1)Implement the View.OnClickListener in your class that implements RecyclerView.ViewHolder and override the onClick method to perform the action you want. 2) Use the same technique described in 1) but add an interface to handle the click event inside the Fragment instead of the Adapter and let the Fragment implement that interface.
This Android Tutorial shows you an example of RecyclerView.OnItemTouchListener. Create a class that extends the RecyclerView.OnItemTouchListener and override its methods onInterceptTouchEvent and onTouchEvent. Create an instance of GestureDetector to handle the onSingleTapUp and onLongPress events. Use the MotionEvent object's x and y coordinates by calling getX and getY to retrieve the child View that was clicked inside the RecyclerView and fire the events on an object implementing the custom interface suppporting both click and long click. Call findChildUnderPosition and getChildPosition of the RecyclerView to get the coordinates and position of a child View
This Android Tutorial shows how to display ripple effect in Android using Material design techniques and RippleDrawable. The RippleDrawable is available only on API21 and further and hence use the xml ripple tag to specify a color and an item with android:id=@android:id/mask to constrain the ripple bounds
This Android Tutorial video shows an example of SlidingTabLayout to display tabs using ViewPager in material design. Copy paste the code for SlidingTabLayout and SlidingTabStrip to your project workspace in Android Studio. Declare the slidingtablayout tag in your XML below the Toolbar and above the ViewPager. Create an Adapter extension of PagerAdapter and define a custom Fragment that will display the currently selected item. Set the adapter on the ViewPager using the setAdapter method and call the setViewPager method of SlidingTabLayout to display the fully working Tabs.
This Android Tutorial shows how to create slidingtablayout with icons. Create a custom layout file and call slidingTabLayout.setCustomTabView(layout_id, textview_id). inside the getPageTitle method of your PagerAdapter, construct a Drawable object for the icon you wish to display. Create an ImageSpan to attach with the SpannableString using the Spanned.EXCLUSIVE_EXCLUSIVE flag to construct the icon. Use the setDistributeEvenly method to ensure all tabs take up equal space and the setCustomTabColorizer to define a custom tab indicator for each tab.
This Android Tutorial talks about how you can add Material Design tabs supporting both scrollable/scrolling and Swipe Tabs with the help of the materialtabs library from GitHub. Add a compile time dependency for the library inside build.gradle file. Add the MaterialTabHost inside the layout xml file along with a ViewPager, use the MaterialTabListener to be notified of tab changes and update the ViewPager accordingly, Use the ViewPager's SimpleOnPageChangeListener to update the tabs accordingly when the content is swiped across the ViewPager.
This Android JSON Tutorial video talks about what is json with respect to Android, It explores the two structures in JSON, which are JSONObject and JSONArray and explores the data types such as integer, real, boolean and null along with the difference between JSON and XML. It finally shows how to read a JSON feed manually with the help of the Facebook graph API
This Android Tutorial shows an example of android volley library and rotten tomatoes API. Construct an object of RequestQueue using Volley.newRequestQueue() and add a StringRequest to it with Response.Listener and Error.Listener callbacks. If the request is successful the onResponse method is called in the main thread with the requested data, else onError is invoked with the appropriate error message. Register at rottentomatoes.com to access their JSON API which will be used in our app
This Android Volley Tutorial video talks about how to setup the Android volley singleton class that contains an instance variable of RequestQueue and ImageLoader which can be used throughout the app. Create a custom Application object and invoke getApplicationContext() to get access to the context needed by Volley library. Pass this context to the Volley.newRequestQueue method , Construct an object of LruCache to maintain a cache for the ImageLoader, use the Runtime.getRuntime() and its method getMaxMemory() to determine the size of the cache.
This Android Tutorial shows how to access the JSON endpoints of RottenTomatoes API to search for movies, upcoming movies, top grossing movies, and movie info such as reviews and cast. We explore the different JSON endpoints and we need an API key provided by RottenTomatoes to access all the data.
This video shows an example of vector drawable in Android. Simply upload the svg file to http://inloop.github.io/svg2android/ to generate the vector.xml file that contains the path descriptions, use the android:tint to specify colors for the drawable. Use the vector element from API 21 to declare a vector drawable containing groups and paths.
This Android Tutorial shows how to implement vector drawable on prelollipop and lollipop devices with the MrVector library which acts as a support library or VectorDrawableCompat. Simply declare the vector xml file under the drawable folder. Prefix auto and android attributes everywhere and call MrVector.inflate passing the resources object and id of the vector drawable to inflate.
This Android Tutorial video shows an example of animated vector drawable in Android. Create A Vector Drawable in Android using the Mr vector library, Add the vector tag with group and path to do so. Each group contains one or more paths that can be animated together. Specify an animated vector xml file in the next step that specifies which group will have what animation. Specify separate animation files with the object animator and start the animation in code by checking if the inflated drawable is an instance of Animatable or not. If the Android version is more than Lollipop then inflate the animated vector drawable file else inflate the simple vector file.
This Android tutorial shows how to make a JSONObjectRequest or JSONrequest with volley library. construct 3 fragments which will load data from rotten tomatoes API, use your API key, construct a request and send it to one of the json endpoints, Supply the Method as GET, the url of the json endpoint, the jsonobject post paramter if any or null, the Response.Listener and the VolleyError.Listener. Use a FragmentPagerAdapter for static data inside your ViewPager where Fragment state wont be saved or use the FragmentStatePagerAdapter for dynamic data where state information is also saved.
This Android JSON Parsing Tutorial video talks about how to parse the JSONObject received in the onResponse method using volley library. Use the has method to check if key exists, Use the getInt, getLong, getString, getJSONObject and getJSONArray methods to extract specific data from a JSONObject, dont forget to catch JSONException if the key-value pair is not found, use a simpledateformat with yyyy-MM-dd format to convert string to date object in java.
This Android Web Service Tutorial uses the JSON feed from Rotten tomatoes API to display data inside a RecyclerView using the Volley library. First step, create a RecyclerView inside the xml layout file and instantiate it in your Fragment class. In the second step, create a custom layout file that contains the result of a single Movie. in the next step create a RecyclerView.ViewHolder and RecyclerView.Adapter to combine the data from JSON feed and custom layout inside the onBindViewHolder method. Use the VolleySingleton and ImageLoader in Volley to load images inside the onBindViewHolder to load images. In the final step set the Adapter on the RecyclerView when the data has been fully loaded from the JSON feed.
This Android Tutorial shows how to do JSON Parsing in Android and handle errors that may arise while parsing a json feed. it starts by showing the difference between the jsonobject;s has() and isNull() method. Use a combination of both has() and isNull() to ensure you get a proper key from the JSON feed. set all default values to handle case where one or more json keys may be missing. To make the android ratingbar small, set the style to RatingBar.Small and set the isIndicator attribute of the ratingbar to true to indicate that user cannot modify the ratingbar.
This android video talks about volley error handling in Android. Use the android volleyerror class and its subclasses to detect different types of errors such as class AuthFailureError indicating that there was an authentication failure when performing a Request, class NetworkError Indicates that there was a network error when performing a Volley request.class NoConnectionError indicating that no connection could be established when performing a Volley request.class ParseError Indicates that the server's response could not be parsed. class ServerError Indicates that the error responded with an error response. class TimeoutError Indicates that the connection or the socket timed out.
This Android Tutorial video shows how to make Floating action buttons which are used for a special type of promoted action. They are distinguished by a circled icon floating above the UI and have special motion behaviors related to morphing, launching, and the transferring anchor point. Floating action buttons come in two sizes: the default, which should be used in most cases, and the mini, which should only be used to create visual continuity with other elements on the screen. FloatingActionMenu is the essential class for the menu. Other two classes, FloatingActionButton and SubActionButton are just views and they can be replaced with any other view. You are completely free to create your own menu button and item views.
This Android Tutorial shows how to create a floating action button or FAB in Android that can tackle important actions. In our app we have a floating action menu with 3 menu items, each for sorting movie results by name, date and ratings. We use the java comparator and override the compareTo method to compare Lhs and Rhs movie objects and return results of comparison. Dont forget to call adapter.notifyDataSetChanged after sorting the results.
This Android Tutorial shows an example of Parcelable in Android. use the Android Parcelable interface to save data from custom objects inside a Parcel, load data from the Parcel using readXXX methods and save data to the Parcel using writeXXX methods. Use the parcelable.CREATOR static final field to provide access to a constructor of your custom class that takes a Parcel object as input. Save arraylist of objects on rotation or screen orientation change using Parcelable.
This Android Tutorial video talks about the job scheduler API in Android. Create an object of JobInfo.Builder to specify constraints such as setMinimumLatency, setPeriodic, setOverrideDeadline, setPersisted, setRequiredNetworkType, setRequiresCharging, setRequiresDeviceIdle, and call build() method to create a JobInfo object. Obtain a reference of JobScheduler using context.getSystemService or JobScheduler.getInstance if you are using the compat library. and define a class that extends JobService class where your logic goes inside the onStartJob method. Define an asynctask or background thread to perform work inside onStartJob and call jobFinished if all goes good. Declare this service in the manifest without fail with the adequate permissions
This Android Tutorial video shows an example of job scheduler in Android. Use this library https://github.com/evant/JobSchedulerCompat to run JobScheduler on prelollipop devices in Android. Add a gradle dependency in the build.gradle file. Construct your class that extends JobService. override the onStartJob and onStopJob methods. Create a JobInfo.Builder object with constraints to specify periodic updates, updates across device reboots, network requirements, backoff policies and stuff. Call the schedule() method of the JobScheduler to run the JobService. Dont forget to add the appropriate WAKE_LOCK, RECEIVE_BOOT_COMPLETED and ACCESS_NETWORK_STATE permissions in your Manifest file.
This Android Tutorial shows how to use jobscheduler service to insert data into sqlite database and load data from cursor inside recyclerview. Create an asynctask inside JobService and perform SQLIte bulk insert from the doInBackground method of AsyncTask. Load the data into a Cursor and from there into a RecyclerView using query method.
This Android Tutorial video shows recyclerview animation example to animate items when they are added or removed from the recyclerview. Use the DefaultItemAnimator to specify default item animations. To add more animations, check the libraries https://github.com/gabrielemariotti/RecyclerViewItemAnimators and https://github.com/wasabeef/recyclerview-animators
This Android Tutorial show an example of RecyclerView animation using ObjectAnimator. Use the ofFloat method to specify properties like translationX, translationY, scaleX, scaleY, rotationX, rotationY,alpha etc. Call the setDuration method to specify animation duration in milliseconds and finally call start, Use an AnimatorSet to group together several animations together.
This Android Tutorial shows an example of SwipeRefreshLayout. Swipe to Refresh or Pull to Refresh is a pattern where user pulls the list down and a progress bar appears to indicate more data being loaded in the background, use the setRefreshing false or true to hide and display the progress bar, use the setOnRefreshListener that has a single method onRefresh where user can check if new data needs to be loaded. The code however is available here now https://github.com/slidenerd/materialtest
The Volley library gives an error saying reference to JSONObjectRequest is ambiguous both constructor JsonObjectRequest(int,String,String,Listener JSONObject ,ErrorListener) in JsonObjectRequest and constructor JsonObjectRequest(int,String,JSONObject,Listener JSONObject ,ErrorListener) in JsonObjectRequest match, so how to fix it? simple! GOOGLE + stackoverflow
This Android Tutorial shows an example of Activity Transition in Android. There are 4 important methods to work with transition API in Android setEnterTransition, setExitTransition, setReturnTransition and setReenterTransition. There are 3 types of transitions that can be accomplished 1) Content Transitions or transitions between 2 activities 2)Shared Element Transitions or transitions where one or more views may be shared between the activity or fragments for the purpose of animation. and 3)Transition that runs within the same property with the help of the TransitionManager.beginDelayedTransition.
This Android Tutorial shows an example of activity transition in android also called content transitions. Create two activities, enable transitions in XML with the android:windowContentTransition and set it to true, use the TransitionInflater to inflate transitions from the R.transition directory. or define transitions such as Slide, Fade, Explode in code, getWindow().setEnterTransition(), getWindow().setExitTransition() let you specify what transitions should run when Activity A exits and Activity B enters. when you press back button, you can control which transitions to run with the getWindow().setReturnTransition() and getWindow().setReenterTransition() in A
This Android Tutorial shows a simple example of shared element transitions in android. Create 2 activities containing a view that you wish to share. Set the android:transitionName to the same value for the common elements in both Activities. Use the ActivityOptionsCompat.makeSceneTransitionAnimation where you pass the name of the sharedelement view and its transitionName attribute value. Create an XML transition under res-transition to support changeBounds or changeImageTransform or any type of sharedelement transition that you are interested in
This Android Tutorial shows how to hide the Floating Action Button FAB when the Navigation Drawer is open and show it when the drawer is closed. Use the offset provided by onDrawerSlide to translate your Floating Action Button outside the screen with a setTranslateX.
- Object Oriented Java
- Basics of Android (Intents/SQLite/Networking/ListViews)
Material Design in Android is the new and future way of designing and developing apps. It involves new APIs that not only enhance the visual perception of your apps but also the functionality in terms of how you create them and how the user perceives them.
- This course walks through the process of building a simple app that displays list of movies but dives into absolute detail while building the app.
- The concepts learnt through this course can be applied to any other app you plan to design using material design terminology.
- You will be able to make apps that use Navigation Drawer, Toolbar, Transitions, RecyclerView, Animations, Ripple Effects, Material Tabs, Vector Drawables, JSON Parsing, Volley library, JobScheduler API and several other fixes after completing this course.
- Learn how to validate your design with your code with thirdy party APIs and libraries discussed in the course
- You need to be familiar with Object Oriented Java and Basic Android programming concepts like Intents, Activities, Fragments, ListView
- Have Android Studio IDE installed
- Over 50 lectures in Material Design , worth over 20 hours of content
- Become proficient in Material Design APIs
- Learn to build apps that use RecyclerView instead of ListView
- Learn to integrate database with background data processing
- Understand libraries like Volley for background data processing
- Anyone who wants to build apps with material design and has some basic knowledge in Java and Android
- If you want to make an app that uses material design, this course dives deeper than most others
- if you want to use custom animations, touch handling, recyclerviews, dynamic data , networking libraries, animation libraries, in material design, this course is perfect for you
- This course does not dive deep into the designing aspect of making an app such as using PhotoShop or Illustrator, hence not suited if you want to be a designer after completing this course