android ui design app source code

Android Services App free UI Design with Dark Mode (source code included)

Services app inspiration for home services, quick selection , etc… with android studio ready source code .

Preview
Project Structure

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.services">      <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.services.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)

          apply plugin: 'com.android.application'  android {     compileSdkVersion 28     defaultConfig {         applicationId "com.appsnipp.education"         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' }

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.services;  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

create a new java file for hiding and showing bottom navigation on scroll.

          package com.appsnipp.services;  /**  * 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

Create a new java file named DarkModePrefManager. sharedPreference for storing light and dark mode preference.

          package com.appsnipp.services;  /**  * 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

copy the contents to drawables folder, we have included xd file with the source code which can be used for creating similar images.

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.services.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.services.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">              <ImageView                 android:layout_width="wrap_content"                 android:layout_height="wrap_content"                 android:adjustViewBounds="true"                 android:cropToPadding="true"                 android:src="@drawable/hero_image" />              <TextView                 android:text="Services"                 android:layout_marginTop="20dp"                 android:layout_marginBottom="20dp"                 style="@style/viewParent.headerText" />              <include layout="@layout/card_services"/>             <include layout="@layout/card_services"/>             <include layout="@layout/card_services"/>             <include layout="@layout/card_services"/>             <include layout="@layout/card_services"/>            </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_services.xml

card design for services. Can be used as recycler model, currently contents are set manually. Replace the <include /> sections in content_main.xml and replace it with recycler view.

          <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"     android:layout_width="match_parent"     android:layout_height="wrap_content"     xmlns:app="http://schemas.android.com/apk/res-auto">      <android.support.v7.widget.CardView         android:layout_width="match_parent"         android:layout_height="wrap_content"         android:layout_marginTop="5dp"         android:layout_marginBottom="5dp"         android:layout_marginLeft="30dp"         android:layout_marginRight="2dp"         android:minHeight="120dp"         app:cardBackgroundColor="@color/whiteBodyColor"         app:cardElevation="2dp"         app:cardCornerRadius="16dp">          <LinearLayout             android:layout_width="match_parent"             android:layout_height="wrap_content"             android:orientation="vertical"             android:layout_gravity="center"             android:layout_marginLeft="50dp">              <TextView                 android:text="Plumping"                 style="@style/viewParent.headerText"                 android:textColor="@color/primaryTextColor" />              <TextView                 android:layout_width="wrap_content"                 android:layout_height="wrap_content"                 android:text="200+ Skilled plumbers ready to work"                 android:textStyle="bold"                 android:textSize="14sp"/>          </LinearLayout>      </android.support.v7.widget.CardView>      <ImageView         android:layout_width="60dp"         android:layout_height="60dp"         android:src="@drawable/img_plumping"         android:layout_centerVertical="true"         android:elevation="13dp"/>  </RelativeLayout>

Menu

contents for menu folder

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>

main.xml

currently not using, can be removed.

          <?xml version="1.0" encoding="utf-8"?> <menu xmlns:android="http://schemas.android.com/apk/res/android"     xmlns:app="http://schemas.android.com/apk/res-auto">     <item         android:id="@+id/action_settings"         android:orderInCategory="100"         android:title="@string/action_settings"         app:showAsAction="never" /> </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

contents for values folder

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">#25C0DE</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="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="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">Services</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>   </resources>