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.




Download Source code
Download Sample apk

UPDATE

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

Download Source Code for AndroidX




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 freepik.com . It also includes java code for hiding bottom navigation and switching dark and light theme.

Manifest.xml

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

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.appsnipp.schooleducation">

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity
            android:name="com.appsnipp.schooleducation.MainActivity"
            android:label="@string/app_name"
            android:theme="@style/AppTheme.NoActionBar">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

gradle

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:

https://appsnipp.com/gradient-layout-for-dynamic-gradients-in-android-without-drawable-library/

apply plugin: 'com.android.application'

android {
    compileSdkVersion 28
    defaultConfig {
        applicationId "com.appsnipp.schooleducation"
        minSdkVersion 17
        targetSdkVersion 28
        versionCode 1
        versionName "1.0"
        testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}

dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    implementation 'com.android.support:appcompat-v7:28.0.0'
    implementation 'com.android.support:design:28.0.0'
    implementation 'com.android.support:cardview-v7:28.0.0'
    implementation 'com.android.support.constraint:constraint-layout:1.1.3'
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'com.android.support.test:runner:1.0.2'
    androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2'
    implementation 'net.colindodd:gradientlayout:1.2'
}

MainActivity.java

  • place the code for bottom navigation
  • in onCreate place code for setting night mode as default.
setDarkMode(getWindow());
  • Create two functions for setting the dark mode and for changing the status bar color
    //create a seperate class file, if required in multiple activities
    public void setDarkMode(Window window){
        if(new DarkModePrefManager(this).isNightMode()){
            AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_YES);
            changeStatusBar(0,window);
        }else{
            AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_NO);
            changeStatusBar(1,window);
        }
    }
    public void changeStatusBar(int mode, Window window){
        if(Build.VERSION.SDK_INT>= Build.VERSION_CODES.M){
            window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
            window.setStatusBarColor(this.getResources().getColor(R.color.contentBodyColor));
            //white mode
            if(mode==1){
                window.getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR);
            }
        }
    }

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

bottomNavigationView = findViewById(R.id.navigation);
        bottomNavigationView.setOnNavigationItemSelectedListener(mOnNavigationItemSelectedListener);
//
        CoordinatorLayout.LayoutParams layoutParams = (CoordinatorLayout.LayoutParams) bottomNavigationView.getLayoutParams();
        layoutParams.setBehavior(new BottomNavigationBehavior());
 
        bottomNavigationView.setSelectedItemId(R.id.navigationHome);

Full Code for MainActivity

package com.appsnipp.schooleducation;

import android.os.Build;
import android.os.Bundle;
import android.support.annotation.NonNull;
import android.support.design.widget.BottomNavigationView;
import android.support.design.widget.CoordinatorLayout;
import android.support.v4.app.Fragment;
import android.support.v7.app.AppCompatDelegate;
import android.support.design.widget.NavigationView;
import android.support.v4.view.GravityCompat;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBarDrawerToggle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.MenuItem;
import android.view.View;
import android.view.Window;
import android.view.WindowManager;

public class MainActivity extends AppCompatActivity
        implements NavigationView.OnNavigationItemSelectedListener {

    private BottomNavigationView bottomNavigationView;


    private BottomNavigationView.OnNavigationItemSelectedListener mOnNavigationItemSelectedListener
            = new BottomNavigationView.OnNavigationItemSelectedListener() {

        @Override
        public boolean onNavigationItemSelected(@NonNull MenuItem item) {
            Fragment fragment;
            switch (item.getItemId()) {
                case R.id.navigationMyProfile:
                    return true;
                case R.id.navigationMyCourses:
                    return true;
                case R.id.navigationHome:
                    return true;
                case  R.id.navigationSearch:
                    return true;
                case  R.id.navigationMenu:
                    DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
                    drawer.openDrawer(GravityCompat.START);
                    return true;
            }
            return false;
        }
    };

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        setDarkMode(getWindow());

        setContentView(R.layout.activity_main);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);


        DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
        ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(
                this, drawer, toolbar, R.string.navigation_drawer_open, R.string.navigation_drawer_close);
        drawer.addDrawerListener(toggle);
        toggle.syncState();

        NavigationView navigationView = (NavigationView) findViewById(R.id.nav_view);
        navigationView.setNavigationItemSelectedListener(this);

        bottomNavigationView = findViewById(R.id.navigation);
        bottomNavigationView.setOnNavigationItemSelectedListener(mOnNavigationItemSelectedListener);
//
        CoordinatorLayout.LayoutParams layoutParams = (CoordinatorLayout.LayoutParams) bottomNavigationView.getLayoutParams();
        layoutParams.setBehavior(new BottomNavigationBehavior());

        bottomNavigationView.setSelectedItemId(R.id.navigationHome);

    }

    @Override
    public void onBackPressed() {
        DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
        if (drawer.isDrawerOpen(GravityCompat.START)) {
            drawer.closeDrawer(GravityCompat.START);
        } else {
            super.onBackPressed();
        }
    }


    @SuppressWarnings("StatementWithEmptyBody")
    @Override
    public boolean onNavigationItemSelected(MenuItem item) {
        // Handle navigation view item clicks here.
        int id = item.getItemId();

        if (id == R.id.nav_camera) {
            // Handle the camera action
        } else if (id == R.id.nav_gallery) {

        } else if (id == R.id.nav_slideshow) {

        } else if (id == R.id.nav_manage) {

        } else if (id == R.id.nav_share) {

        } else if (id == R.id.nav_dark_mode) {
            //code for setting dark mode
            //true for dark mode, false for day mode, currently toggling on each click
            DarkModePrefManager darkModePrefManager = new DarkModePrefManager(this);
            darkModePrefManager.setDarkMode(!darkModePrefManager.isNightMode());
            AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_NO);
            recreate();

        }

        DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
        drawer.closeDrawer(GravityCompat.START);
        return true;
    }

    //create a seperate class file, if required in multiple activities
    public void setDarkMode(Window window){
        if(new DarkModePrefManager(this).isNightMode()){
            AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_YES);
            changeStatusBar(0,window);
        }else{
            AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_NO);
            changeStatusBar(1,window);
        }
    }
    public void changeStatusBar(int mode, Window window){
        if(Build.VERSION.SDK_INT>= Build.VERSION_CODES.M){
            window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
            window.setStatusBarColor(this.getResources().getColor(R.color.contentBodyColor));
            //white mode
            if(mode==1){
                window.getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR);
            }
        }
    }
}

BottomNavigationBehavior.java

java file for hiding and showing bottom navigation on scroll.

package com.appsnipp.schooleducation;

/**
 * Created by kapil on 05/10/18.
 */

import android.content.Context;
import android.support.design.widget.BottomNavigationView;
import android.support.design.widget.CoordinatorLayout;
import android.support.v4.view.ViewCompat;
import android.util.AttributeSet;
import android.view.View;
import android.widget.FrameLayout;

public class BottomNavigationBehavior extends CoordinatorLayout.Behavior<BottomNavigationView> {

    public BottomNavigationBehavior() {
        super();
    }

    public BottomNavigationBehavior(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    @Override
    public boolean layoutDependsOn(CoordinatorLayout parent, BottomNavigationView child, View dependency) {
        boolean dependsOn = dependency instanceof FrameLayout;
        return dependsOn;
    }

    @Override
    public boolean onStartNestedScroll(CoordinatorLayout coordinatorLayout, BottomNavigationView child, View directTargetChild, View target, int nestedScrollAxes) {
        return nestedScrollAxes == ViewCompat.SCROLL_AXIS_VERTICAL;
    }

    @Override
    public void onNestedPreScroll(CoordinatorLayout coordinatorLayout, BottomNavigationView child, View target, int dx, int dy, int[] consumed) {
        if (dy < 0) {
            showBottomNavigationView(child);
        } else if (dy > 0) {
            hideBottomNavigationView(child);
        }
    }

    private void hideBottomNavigationView(BottomNavigationView view) {
        view.animate().translationY(view.getHeight());
    }

    private void showBottomNavigationView(BottomNavigationView view) {
        view.animate().translationY(0);
    }
}

DarkModePrefManager.java

sharedPreference for storing light and dark mode preference.

package com.appsnipp.schooleducation;

/**
 * Created by kapil on 20/01/17.
 */
import android.content.Context;
import android.content.SharedPreferences;


public class DarkModePrefManager {
    SharedPreferences pref;
    SharedPreferences.Editor editor;
    Context _context;

    // shared pref mode
    int PRIVATE_MODE = 0;

    // Shared preferences file name
    private static final String PREF_NAME = "education-dark-mode";

    private static final String IS_NIGHT_MODE = "IsNightMode";


    public DarkModePrefManager(Context context) {
        this._context = context;
        pref = _context.getSharedPreferences(PREF_NAME, PRIVATE_MODE);
        editor = pref.edit();
    }

    public void setDarkMode(boolean isFirstTime) {
        editor.putBoolean(IS_NIGHT_MODE, isFirstTime);
        editor.commit();
    }

    public boolean isNightMode() {
        return pref.getBoolean(IS_NIGHT_MODE, true);
    }

}

res files

bottom_navigation_color.xml

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

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true" android:color="@color/bottomNavigationSelectedColor" />
    <item android:state_checked="false" android:color="@color/bottomNavigationTintColor"/>
</selector>

drawables

drawableDownload

download drawables and copy it to drawable folder.

Layout

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout 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:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:openDrawer="start">

    <include
        layout="@layout/app_bar_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <android.support.design.widget.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:fitsSystemWindows="true"
        app:headerLayout="@layout/nav_header_main"
        app:menu="@menu/activity_main_drawer" />

</android.support.v4.widget.DrawerLayout>

app_bar_main.xml

set toolbar visibility to gone.

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout 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="com.appsnipp.schooleducation.MainActivity">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.v7.widget.Toolbar
            android:visibility="gone"
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/AppTheme.PopupOverlay" />

    </android.support.design.widget.AppBarLayout>

    <include layout="@layout/content_main" />

    <android.support.design.widget.BottomNavigationView
        android:id="@+id/navigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:background="?android:attr/windowBackground"
        android:foreground="?attr/selectableItemBackground"
        app:menu="@menu/master_bottom_navigation"
        app:elevation="10dp"
        app:labelVisibilityMode="labeled"
        app:itemIconTint="@color/bottom_navigation_color"
        app:itemTextColor="@color/bottom_navigation_color"
        app:itemBackground="@color/bottomNavigationBackground"/>

</android.support.design.widget.CoordinatorLayout>

content_main.xml

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

   <!--Example with RelativeLayout and Gradient Drawable -->
            <!-- for Recycler view use any of the layout as model-->
            <android.support.v7.widget.CardView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:cardCornerRadius="15dp"
                app:cardPreventCornerOverlap="true"
                android:layout_marginTop="10dp">

                <RelativeLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:minHeight="100dp"
                    android:background="@drawable/home_gradient_maths"
                    android:padding="10dp">

                    <TextView
                        android:id="@+id/textViewSub1Title"
                        android:text="Maths"
                        style="@style/viewParent.headerText.HomeCardTitle" />

                    <TextView
                        android:text="Study nature, love nature,\nclose to nature"
                        style="@style/viewParent.headerText.homeCardContent"
                        android:layout_below="@id/textViewSub1Title"/>

                    <ImageView
                        android:maxHeight="90dp"
                        android:src="@drawable/home_ic_maths"
                        style="@style/homeCardImage" />

                </RelativeLayout>
            </android.support.v7.widget.CardView>

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.

            <!--if the second one is used as model for recyclerView, refer:
            
Gradient Layout for dynamic gradients in android (without drawable) – Library

            -->

            <android.support.v7.widget.CardView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:cardCornerRadius="15dp"
                app:cardPreventCornerOverlap="true"
                android:layout_marginTop="10dp">

                <net.colindodd.gradientlayout.GradientRelativeLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:minHeight="100dp"
                    gl:start_color="@color/gradientLightYellow"
                    gl:end_color="@color/gradientOrange"
                    gl:orientation="LEFT_RIGHT"
                    android:padding="10dp">

                    <TextView
                        android:id="@+id/textViewSub2Title"
                        android:text="Physics"
                        style="@style/viewParent.headerText.HomeCardTitle" />

                    <TextView
                        android:text="Study nature, love nature,\nclose to nature"
                        style="@style/viewParent.headerText.homeCardContent"
                        android:layout_below="@id/textViewSub2Title"/>

                    <ImageView
                        android:maxHeight="90dp"
                        android:src="@drawable/home_ic_physics"
                        style="@style/homeCardImage" />

                </net.colindodd.gradientlayout.GradientRelativeLayout>
            </android.support.v7.widget.CardView>

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

Complete code for content_main.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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"
    xmlns:gl="http://schemas.android.com/apk/res-auto"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context="com.appsnipp.schooleducation.MainActivity"
    tools:showIn="@layout/app_bar_main"
    style="@style/parent.contentLayout">

    <android.support.v4.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent">

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

            <TextView
                android:text="School Education"
                style="@style/viewParent.headerText" />

            <TextView
                android:text="Never trust anyone who has not brought a book with them."
                style="@style/viewParent.headerText.contentText"
                android:layout_marginBottom="20dp"/>


            <!--Example with RelativeLayout and Gradient Drawable -->
            <!-- for Recycler view use any of the layout as model-->
            <android.support.v7.widget.CardView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:cardCornerRadius="15dp"
                app:cardPreventCornerOverlap="true"
                android:layout_marginTop="10dp">

                <RelativeLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:minHeight="100dp"
                    android:background="@drawable/home_gradient_maths"
                    android:padding="10dp">

                    <TextView
                        android:id="@+id/textViewSub1Title"
                        android:text="Maths"
                        style="@style/viewParent.headerText.HomeCardTitle" />

                    <TextView
                        android:text="Study nature, love nature,\nclose to nature"
                        style="@style/viewParent.headerText.homeCardContent"
                        android:layout_below="@id/textViewSub1Title"/>

                    <ImageView
                        android:maxHeight="90dp"
                        android:src="@drawable/home_ic_maths"
                        style="@style/homeCardImage" />

                </RelativeLayout>
            </android.support.v7.widget.CardView>


            <!--if the second one is used as model for recyclerView, refer:
            
Gradient Layout for dynamic gradients in android (without drawable) – Library

            -->

            <android.support.v7.widget.CardView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:cardCornerRadius="15dp"
                app:cardPreventCornerOverlap="true"
                android:layout_marginTop="10dp">

                <net.colindodd.gradientlayout.GradientRelativeLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:minHeight="100dp"
                    gl:start_color="@color/gradientLightYellow"
                    gl:end_color="@color/gradientOrange"
                    gl:orientation="LEFT_RIGHT"
                    android:padding="10dp">

                    <TextView
                        android:id="@+id/textViewSub2Title"
                        android:text="Physics"
                        style="@style/viewParent.headerText.HomeCardTitle" />

                    <TextView
                        android:text="Study nature, love nature,\nclose to nature"
                        style="@style/viewParent.headerText.homeCardContent"
                        android:layout_below="@id/textViewSub2Title"/>

                    <ImageView
                        android:maxHeight="90dp"
                        android:src="@drawable/home_ic_physics"
                        style="@style/homeCardImage" />

                </net.colindodd.gradientlayout.GradientRelativeLayout>
            </android.support.v7.widget.CardView>


            <android.support.v7.widget.CardView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:cardCornerRadius="15dp"
                app:cardPreventCornerOverlap="true"
                android:layout_marginTop="10dp">

                <net.colindodd.gradientlayout.GradientRelativeLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:minHeight="100dp"
                    gl:end_color="@color/gradientLightYellow2"
                    gl:start_color="@color/gradientLightOrange2"
                    gl:orientation="LEFT_RIGHT"
                    android:padding="10dp">

                    <TextView
                        android:id="@+id/textViewSub3Title"
                        android:text="Chemistry"
                        style="@style/viewParent.headerText.HomeCardTitle" />

                    <TextView
                        android:text="Study nature, love nature,\nclose to nature"
                        style="@style/viewParent.headerText.homeCardContent"
                        android:layout_below="@id/textViewSub3Title"/>

                    <ImageView
                        android:maxHeight="90dp"
                        android:src="@drawable/home_ic_chemistry"
                        style="@style/homeCardImage" />

                </net.colindodd.gradientlayout.GradientRelativeLayout>
            </android.support.v7.widget.CardView>


            <android.support.v7.widget.CardView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:cardCornerRadius="15dp"
                app:cardPreventCornerOverlap="true"
                android:layout_marginTop="10dp">

                <net.colindodd.gradientlayout.GradientRelativeLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:minHeight="100dp"
                    gl:start_color="@color/gradientLightOrange2"
                    gl:end_color="@color/gradientOrange3"
                    gl:orientation="LEFT_RIGHT"
                    android:padding="10dp">

                    <TextView
                        android:id="@+id/textViewSub4Title"
                        android:text="Biology"
                        style="@style/viewParent.headerText.HomeCardTitle" />

                    <TextView
                        android:text="Study nature, love nature,\nclose to nature"
                        style="@style/viewParent.headerText.homeCardContent"
                        android:layout_below="@id/textViewSub4Title"/>

                    <ImageView
                        android:maxHeight="90dp"
                        android:src="@drawable/home_ic_biology"
                        style="@style/homeCardImage" />

                </net.colindodd.gradientlayout.GradientRelativeLayout>
            </android.support.v7.widget.CardView>

            <android.support.v7.widget.CardView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:cardCornerRadius="15dp"
                app:cardPreventCornerOverlap="true"
                android:layout_marginTop="10dp">

                <net.colindodd.gradientlayout.GradientRelativeLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:minHeight="100dp"
                    gl:start_color="@color/gradientViolet"
                    gl:end_color="@color/gradientLightBlue"
                    gl:orientation="LEFT_RIGHT"
                    android:padding="10dp">

                    <TextView
                        android:id="@+id/textViewSub5Title"
                        android:text="Geography"
                        style="@style/viewParent.headerText.HomeCardTitle" />

                    <TextView
                        android:text="Study nature, love nature,\nclose to nature"
                        style="@style/viewParent.headerText.homeCardContent"
                        android:layout_below="@id/textViewSub5Title"/>

                    <ImageView
                        android:maxHeight="90dp"
                        android:src="@drawable/home_ic_geography"
                        style="@style/homeCardImage" />

                </net.colindodd.gradientlayout.GradientRelativeLayout>
            </android.support.v7.widget.CardView>

            <android.support.v7.widget.CardView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:cardCornerRadius="15dp"
                app:cardPreventCornerOverlap="true"
                android:layout_marginTop="10dp">

                <net.colindodd.gradientlayout.GradientRelativeLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:minHeight="100dp"
                    gl:start_color="@color/gradientLightGreen"
                    gl:end_color="@color/gradientLightBlue"
                    gl:orientation="LEFT_RIGHT"
                    android:padding="10dp">

                    <TextView
                        android:id="@+id/textViewSub6Title"
                        android:text="Politics"
                        style="@style/viewParent.headerText.HomeCardTitle" />

                    <TextView
                        android:text="Study nature, love nature,\nclose to nature"
                        style="@style/viewParent.headerText.homeCardContent"
                        android:layout_below="@id/textViewSub6Title"/>

                    <ImageView
                        android:maxHeight="90dp"
                        android:src="@drawable/home_ic_chemistry"
                        style="@style/homeCardImage" />

                </net.colindodd.gradientlayout.GradientRelativeLayout>
            </android.support.v7.widget.CardView>

        </LinearLayout>
    </android.support.v4.widget.NestedScrollView>

</android.support.constraint.ConstraintLayout>

nav_header_main.xml

<?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="@dimen/nav_header_height"
    android:background="@drawable/side_nav_bar"
    android:gravity="bottom"
    android:orientation="vertical"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:theme="@style/ThemeOverlay.AppCompat.Dark">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:paddingTop="@dimen/nav_header_vertical_spacing"
        app:srcCompat="@mipmap/ic_launcher_round" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingTop="@dimen/nav_header_vertical_spacing"
        android:text="Android Studio"
        android:textAppearance="@style/TextAppearance.AppCompat.Body1" />

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="[email protected]" />

</LinearLayout>

Menu

activity_main_drawer.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    tools:showIn="navigation_view">

    <group android:checkableBehavior="single">
        <item
            android:id="@+id/nav_camera"
            android:icon="@drawable/ic_menu_camera"
            android:title="Import" />
        <item
            android:id="@+id/nav_gallery"
            android:icon="@drawable/ic_menu_gallery"
            android:title="Gallery" />
        <item
            android:id="@+id/nav_slideshow"
            android:icon="@drawable/ic_menu_slideshow"
            android:title="Slideshow" />
        <item
            android:id="@+id/nav_manage"
            android:icon="@drawable/ic_menu_manage"
            android:title="Tools" />
    </group>

    <item android:title="Only Toggle Theme would work">
        <menu>
            <item
                android:id="@+id/nav_share"
                android:icon="@drawable/ic_menu_share"
                android:title="Share" />
            <item
                android:id="@+id/nav_dark_mode"
                android:icon="@android:drawable/ic_menu_day"
                android:title="Toggle Theme" />
        </menu>
    </item>

</menu>

master_bottom_navigation.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:id="@+id/navigationMenu"
        android:icon="@android:drawable/ic_menu_sort_by_size"
        android:title="Menu" />

    <item
        android:id="@+id/navigationMyCourses"
        android:icon="@drawable/ic_effort"
        android:title="Courses" />

    <item
        android:id="@+id/navigationHome"
        android:icon="@drawable/ic_home"
        android:title="Home" />

    <item
        android:id="@+id/navigationSearch"
        android:icon="@android:drawable/ic_menu_search"
        android:title="Search" />

    <item
        android:id="@+id/navigationMyProfile"
        android:icon="@drawable/ic_user"
        android:title="User" />

</menu>

Values

colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#FCFCFC</color>
    <color name="colorPrimaryDark">#2A2E43</color>
    <color name="colorAccent">#FF402D</color>
    <color name="bottomNavigationTextColor">#B2B2B2</color>
    <color name="bottomNavigationTintColor">#B2B2B2</color>
    <color name="bottomNavigationSelectedColor">#FC4926</color>
    <color name="statusBarColor">#000</color>
    <color name="whiteBodyColor">#FCFCFC</color>
    <color name="darkTextColor">#020000</color>
    <color name="primaryTextColor">#019AE8</color>
    <color name="whiteTextColor">#fff</color>
    <color name="frutorial_title">#4c4c4c</color>

    <!--colors for light mode-->
    <color name="contentBodyColor">#FCFCFC</color>
    <color name="contentTextColor">#020000</color>
    <color name="miniTitleColor">#6F6A6A</color>
    <color name="bottomNavigationBackground">#F7F7F7</color>

    <!--gradient colors-->
    <color name="gradientOrange">#FF416C</color>
    <color name="gradientViolet">#8A52E9</color>
    <color name="gradientLightYellow">#FFA72F</color>
    <color name="gradientLightOrange">#FF641A</color>
    <color name="gradientLightYellow2">#FFC92B</color>
    <color name="gradientLightOrange2">#FF7765</color>
    <color name="gradientOrange3">#F7A23C</color>
    <color name="gradientLightBlue">#376DF6</color>
    <color name="gradientLightGreen">#21E8AC</color>

</resources>

colors.xml(night)

  • 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)

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!--colors for dark mode-->
    <color name="contentBodyColor">#000</color>
    <color name="contentTextColor">#fff</color>
    <color name="bottomNavigationBackground">#000</color>
    <color name="miniTitleColor">#fff</color>


</resources>

dimens.xml

<resources>
    <!-- Default screen margins, per the Android Design guidelines. -->
    <dimen name="activity_horizontal_margin">16dp</dimen>
    <dimen name="activity_vertical_margin">16dp</dimen>
    <dimen name="nav_header_vertical_spacing">8dp</dimen>
    <dimen name="nav_header_height">176dp</dimen>
    <dimen name="fab_margin">16dp</dimen>
    <dimen name="normalPadding">20dp</dimen>
    <dimen name="headerTextSize">25sp</dimen>
    <dimen name="headerMoreTextSize">18sp</dimen>
    <dimen name="card_margin">5dp</dimen>
    <dimen name="frutorial_title">15sp</dimen>

</resources>

strings.xml

we’ve not extracted string resources.

<resources>
    <string name="app_name">Education</string>

    <string name="navigation_drawer_open">Open navigation drawer</string>
    <string name="navigation_drawer_close">Close navigation drawer</string>

    <string name="action_settings">Settings</string>
</resources>

styles.xml

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

    <style name="AppTheme.NoActionBar">
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
    </style>

    <style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />

    <style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />

    <!--styles for education app-->
    <style name="viewParent">
        <item name="android:layout_width">wrap_content</item>
        <item name="android:layout_height">wrap_content</item>
    </style>
    <style name="parent">
        <item name="android:layout_width">match_parent</item>
        <item name="android:layout_height">match_parent</item>
    </style>

    <style name="parent.contentLayout">
        <item name="android:background">@color/contentBodyColor</item>
        <item name="android:padding">@dimen/normalPadding</item>
    </style>

    <style name="viewParent.headerText">
        <item name="android:textColor">@color/contentTextColor</item>
        <item name="android:textSize">@dimen/headerTextSize</item>
        <item name="android:textStyle">bold</item>
    </style>

    <style name="viewParent.headerText.contentText">
        <item name="android:textSize">14sp</item>
        <item name="android:textColor">@color/miniTitleColor</item>
    </style>

    <style name="homeCardImage">
        <item name="android:layout_width">wrap_content</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:layout_alignParentRight">true</item>
        <item name="android:adjustViewBounds">true</item>
        <item name="android:cropToPadding">true</item>
        <item name="android:layout_centerVertical">true</item>
    </style>

    <style name="viewParent.headerText.homeCardContent" parent="viewParent.headerText.contentText">
        <item name="android:paddingTop">5dp</item>
        <item name="android:paddingBottom">10dp</item>
        <item name="android:textColor">@color/whiteTextColor</item>
    </style>

    <style name="viewParent.headerText.HomeCardTitle">
        <item name="android:paddingTop">10dp</item>
        <item name="android:textColor">@color/whiteTextColor</item>
        <item name="android:layout_alignParentTop">true</item>
    </style>


</resources>




Download Source code
Download Sample apk

UPDATE

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

Download Source Code for AndroidX




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.

Categories: AndroidAndroid designsAndroid UI
Tags:

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] .

Related Posts

free classroom ui android studio project
Android Android designs Android UI

Free ClassroomUI android studio project by Shashank Singhal

Classroom UI android studio project Ideal template for edutech, e-commerce, listing, social media applications. Includes complete source code for free

android studio payment app ui
Android Android Animations Android designs Android UI Kotlin

Android studio payment app UI design by Shashank Singhal

Android studio Xml, Kotlin payment app ui with complete source code for free by Shashank Singhal. Ideal for payment app, homepage design templates etc.

free android pinterest ui design xml
Android Android designs Android UI

Free android studio Pinterest UI Xml by Shashank Singhal

Free android xml UI design of pinterest with complete source code by Shashank singhal. For more free designs visit appsnipp.com