Free Android Shopping App Design with Dark Mode (source code included)
Free Shopping App design for android with dark mode. Design for maximizing user experience while maintaining a clean design. Just another inspiration for your next android project.
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.shopping">
<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.shopping.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).
included ‘de.hdodenhof:circleimageview:3.0.0’ library for circular profile image
apply plugin: 'com.android.application'
android {
compileSdkVersion 28
defaultConfig {
applicationId "com.appsnipp.shopping"
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'
//for circular image
implementation 'de.hdodenhof:circleimageview:3.0.0'
}
MainActivity.java
- place the code for bottom navigation
- in onCreate place code for setting night mode as default.
if(new DarkModePrefManager(this).isNightMode()){
AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_YES);
}
- 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.shopping;
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;
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);
if(new DarkModePrefManager(this).isNightMode()){
AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_YES);
}
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;
}
}
BottomNavigationBehavior.java
java file for hiding and showing bottom navigation on scroll.
package com.appsnipp.shopping;
/**
* 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.shopping;
/**
* 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
includes drawables and drawables for night mode (shopping icon is changed in night mode). Download both files
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.shopping.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
<?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"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
tools:context="com.appsnipp.shopping.MainActivity"
tools:showIn="@layout/app_bar_main"
style="@style/parent.contentLayout">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:paddingBottom="10dp"
android:elevation="999dp"
android:gravity="bottom"
android:paddingLeft="10dp"
android:paddingRight="10dp">
<de.hdodenhof.circleimageview.CircleImageView
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/profile_image"
android:layout_width="40dp"
android:layout_height="40dp"
android:src="@drawable/user_profile"
android:layout_alignParentBottom="true"/>
<TextView
style="@style/viewParent.headerText"
android:layout_marginLeft="15dp"
android:maxLines="1"
android:text="Treat Yo' Self!"
android:layout_toEndOf="@id/profile_image"
android:layout_alignParentBottom="true"/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_shopping_cart"
android:layout_alignParentRight="true"
android:layout_alignParentBottom="true"/>
</RelativeLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="?attr/actionBarSize">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:paddingRight="@dimen/normalPadding"
android:paddingLeft="@dimen/normalPadding">
<EditText
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/ic_edittext_bg"
android:hint="@string/text_hint"
android:paddingLeft="10dp"
android:layout_marginTop="10dp"
android:textStyle="bold"/>
<include layout="@layout/card_header" />
<!--replace with recycler view-->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:text="#shoes"
style="@style/tagTextStyle" />
<TextView
android:text="#womens_clothing"
style="@style/tagTextStyle" />
<TextView
android:text="#volleyball"
style="@style/tagTextStyle" />
<TextView
android:text="#"
style="@style/tagTextStyle" />
</LinearLayout>
<!--replace with recycler view-->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp">
<TextView
android:text="#shoes"
style="@style/tagTextStyle" />
<TextView
android:text="#womens_clothing"
style="@style/tagTextStyle" />
<TextView
android:text="#volleyball"
style="@style/tagTextStyle" />
<TextView
android:text="#"
style="@style/tagTextStyle" />
</LinearLayout>
<!--replace with recycler view-->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp">
<TextView
android:text="#shoes"
style="@style/tagTextStyle" />
<TextView
android:text="#womens_clothing"
style="@style/tagTextStyle" />
<TextView
android:text="#volleyball"
style="@style/tagTextStyle" />
<TextView
android:text="#"
style="@style/tagTextStyle" />
</LinearLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp">
<TextView
style="@style/viewParent.headerText"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:text="You may like" />
<TextView
style="@style/viewParent"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:text="See All"
android:textColor="@color/primaryTextColor"
android:textSize="@dimen/headerMoreTextSize"
android:textStyle="bold" />
</RelativeLayout>
<!--remove the below layout with recycler view, use card_product as model for design-->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:layout_marginBottom="10dp"
android:orientation="horizontal">
<include
layout="@layout/card_product" />
<include
layout="@layout/card_product" />
</LinearLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp">
<TextView
style="@style/viewParent.headerText"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:text="Fashion Trends" />
<TextView
style="@style/viewParent"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:text="See All"
android:textColor="@color/primaryTextColor"
android:textSize="@dimen/headerMoreTextSize"
android:textStyle="bold" />
</RelativeLayout>
<!--remove the below layout with recycler view, use card poplar courses as model for design-->
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp">
<include
layout="@layout/card_trends" />
<include
layout="@layout/card_trends" />
</LinearLayout>
</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>
card_header.xml
card header scroller. Can be used as recycler model, currently contents are set manually. (you could use a simple image if required)
<RelativeLayout android:layout_width="match_parent"
android:layout_height="wrap_content"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_marginTop="20dp"
xmlns:android="http://schemas.android.com/apk/res/android">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_marginBottom="20dp"
android:minHeight="200dp"
app:cardBackgroundColor="#A72683"
app:cardCornerRadius="16dp"
app:cardElevation="10dp"
app:cardPreventCornerOverlap="false">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:orientation="vertical"
android:padding="10dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Shop now, \npay Next Month"
android:textColor="@color/whiteBodyColor"
android:textSize="17sp"
android:textStyle="bold"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="15dp"
android:layout_marginLeft="20dp"
android:text="Introducing postpaid \nfor shopping."
android:textColor="@color/whiteBodyColor"
android:textSize="13sp"
android:textStyle="bold" />
</LinearLayout>
</android.support.v7.widget.CardView>
<ImageView
android:layout_width="150dp"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:adjustViewBounds="true"
android:cropToPadding="true"
android:layout_centerVertical="true"
android:elevation="44dp"
android:src="@drawable/hero_image" />
</RelativeLayout>
card_product.xml
card design for products. needs to convert it to the recycler, currently, data set manually.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<android.support.v7.widget.CardView
android:id="@+id/card_view"
android:layout_width="200dp"
android:layout_height="wrap_content"
card_view:cardElevation="5dp"
card_view:cardCornerRadius="7dp"
card_view:cardBackgroundColor="@color/whiteBodyColor"
card_view:cardPreventCornerOverlap="false"
android:layout_margin="@dimen/card_margin">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageView
android:id="@+id/productThubnail"
android:layout_width="200dp"
android:layout_height="170dp"
android:src="@drawable/product_image"
android:scaleType="centerCrop" />
<TextView
android:id="@+id/title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@id/productThubnail"
android:textColor="@color/frutorial_title"
android:layout_margin="5dp"
android:maxLines="1"
android:text="Winter is coming"
android:textSize="@dimen/frutorial_title"
android:textStyle="bold" />
<RatingBar
style="@style/Widget.AppCompat.RatingBar.Small"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/title"
android:layout_marginLeft="5dp"
android:rating="5" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Price : $15.30"
android:layout_below="@id/title"
android:textSize="12sp"
android:textStyle="bold"
android:textColor="#000"
android:layout_marginRight="5dp"
android:layout_alignParentRight="true"/>
</RelativeLayout>
</android.support.v7.widget.CardView>
</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="bottomNavigationTintColor">#B2B2B2</color>
<color name="bottomNavigationSelectedColor">#FC4926</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">#000</color>
<!--colors for light mode-->
<color name="contentBodyColor">#FCFCFC</color>
<color name="contentTextColor">#020000</color>
<color name="bottomNavigationBackground">#F7F7F7</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">#2A2E43</color>
<color name="contentTextColor">#fff</color>
<color name="bottomNavigationBackground">#2A2E43</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="normalPadding">10dp</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">Shopping App</string>
<string name="navigation_drawer_open">Open navigation drawer</string>
<string name="navigation_drawer_close">Close navigation drawer</string>
<string name="text_hint"><b>Search...</b></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>
</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="tagTextStyle">
<item name="android:layout_height">wrap_content</item>
<item name="android:layout_width">wrap_content</item>
<item name="android:textSize">16sp</item>
<item name="android:textStyle">bold</item>
<item name="android:textColor">@color/whiteTextColor</item>
<item name="android:background">@drawable/ic_tags_bk</item>
<item name="android:gravity">center</item>
<item name="android:layout_margin">5dp</item>
<item name="android:paddingLeft">3dp</item>
<item name="android:paddingRight">3dp</item>
</style>
</resources>
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!