Free Multipurpose Home design with dark mode for android (Xml,Java)

Published by Kapil Mohan on

Home design with gradient cards now becoming more popular, so we thought of creating a modern clean UI which can be used for Service Listing, Directory Listing, Online Courses, shopping or the components can be simply used for designing.
Includes dark and light clean UI Versions.


As per request by many users, we are uploading migrated source code for androidx also.

Gradient card designs for android listing, shopping, education and other projects

The project includes all base design and resources. For better results, use isometric images from . It also includes java code for hiding bottom navigation and switching dark and light theme.


Doesn’t require any additional code. Just start by adding a new drawer activity from new > activity > Navigation Drawer Activity


Uses minsdk 17 and target sdk 28 (required for always displaying label in bottomnavigationbar).

Uses a library (‘net.colindodd:gradientlayout:1.2’) for displaying Gradient in layout, view GradientLayout tutorial at:

  • place the code for bottom navigation
  • in onCreate place code for setting night mode as default.

  • Create two functions for setting the dark mode and for changing the status bar color

If you are using multiple files for changing the layout, you can use a class file with these functions.

  • set hiding on scroll for bottom navigation

Full Code for MainActivity

java file for hiding and showing bottom navigation on scroll.

sharedPreference for storing light and dark mode preference.

res files


File for changing bottom navigation elements color on click. currently icons are set to orange color while selected. you can change this color in colors.xml file.

Stes for creating bottom_navigation_color.xml file.

  • Right click on res folder > new > android resource file.
  • type name as bottom_navigation_color.xml
  • change resource type as color

code for bottom_navigation_color.xml


download drawables and copy it to drawable folder.




set toolbar visibility to gone.


You could either design the card using a normal RelativeLayout and use a drawable resource for giving background Gradient.

For Recycler view copy the code for creating a model.

If you don’t want to follow the conventional method of creating drawable for gradient, you could use Gradient Library given in the description.

Note:- content main includes both these methods, so you can choose the best that suits you.

Complete code for content_main.xml








  • right click on values folder > new > value resource file
  • give name as colors
  • select night qualifier followed by >> button and press ok

code for colors.xml(night)



we’ve not extracted string resources.



As per request by many users, we are uploading migrated source code for AndroidX also.

Android X Users:

Project can be converted to androidX, may be the gradient library won’t work so you can use the code given for first design and remove the library.

If you like this post, please leave your suggestions and comments below 

Did you know? 
your comments can motivate us to create wonders.

NOTE:- source code includes XD Resources also!

We are planning to start complete tutorial on designing, if you are interested please leave a comment. If we receive enough comments, we will start rolling out designing tutorials.

Kapil Mohan

Like to add color to developers life and apps. Can create smile using Android, iOS, PHP, codeignitor, web technologies, etc... Feel free to contact me at [email protected] .