Welcome to Deco UI Kit For Ionic 3

Deco is user interface kit with more than 35 mobile app screens. This is Ionic documentation where you will find everything about Deco UI Kit.

Ionic 3- How to start Deco Ui KIT

deco andrid

      How to run demo app:

        1. Install Ionic framework

        2. Install Android Studio

        3. Extract source code

        4. Open terminal/cmd and run command npm install

        5. Run command ionic server - to show demo app in browser

        6. Run command ionic run android - to build mobile app to andrid phone

        7. Run command ionic run ios - to build mobile app to iPhone

    
    

Ionic 3- Introduction


      1. You have to copy assets folder to your project. In assets we store all images that you need.

      2. You have to copy theme folder to your project.

      3. Package.json
      {
        "name": "IonicDeco",
        "author": "Deco",
        "version": "0.0.1",
        "homepage": "https://decouikit.com/",
        "private": true,
        "scripts": {
          "clean": "ionic-app-scripts clean",
          "build": "ionic-app-scripts build",
          "ionic:build": "ionic-app-scripts build",
          "ionic:serve": "ionic-app-scripts serve"
        },
        "dependencies": {
          "@angular/common": "6.0.9",
          "@angular/compiler": "6.0.9",
          "@angular/compiler-cli": "6.0.9",
          "@angular/core": "6.0.9",
          "@angular/forms": "6.0.9",
          "@angular/http": "6.0.9",
          "@angular/platform-browser": "6.0.9",
          "@angular/platform-browser-dynamic": "6.0.9",
          "@ionic-native/core": "4.10.0",
          "@ionic-native/firebase": "4.10.0",
          "@ionic-native/splash-screen": "4.9.1",
          "@ionic-native/status-bar": "^4.10.0",
          "@ionic/storage": "2.1.3",
          "cordova-android": "7.0.0",
          "cordova-ios": "4.5.4",
          "cordova-plugin-compat": "^1.2.0",
          "cordova-plugin-console": "^1.1.0",
          "cordova-plugin-device": "^2.0.2",
          "cordova-plugin-firebase": "^1.0.5",
          "cordova-plugin-ionic-keyboard": "^2.1.2",
          "cordova-plugin-ionic-webview": "^2.0.2",
          "cordova-plugin-splashscreen": "^5.0.2",
          "cordova-plugin-statusbar": "^2.4.2",
          "cordova-plugin-whitelist": "^1.3.3",
          "cordova-plugin-x-toast": "^2.6.2",
          "firebase": "5.2.0",
          "ion-affix": "1.1.1",
          "ionic-angular": "3.9.2",
          "ionicons": "3.0.0",
          "ngx-clipboard": "9.0.1",
          "promise-polyfill": "8.0.0",
          "rxjs": "6.2.2",
          "rxjs-compat": "6.2.2",
          "sw-toolbox": "3.6.0",
          "zone.js": "0.8.26"
        },
        "devDependencies": {
          "@ionic/app-scripts": "3.1.11",
          "typescript": "2.9.2"
        },
        "cordovaPlugins": [
          "cordova-plugin-whitelist",
          "cordova-plugin-console",
          "cordova-plugin-statusbar",
          "cordova-plugin-device",
          "cordova-plugin-splashscreen",
          "ionic-plugin-keyboard"
        ],
        "cordovaPlatforms": [],
        "description": "Pre-designed UI elements for Ionic 3 framework..",
        "cordova": {
          "plugins": {
            "cordova-plugin-device": {},
            "cordova-plugin-firebase": {},
            "cordova-plugin-splashscreen": {},
            "cordova-plugin-statusbar": {},
            "cordova-plugin-whitelist": {},
            "cordova-plugin-x-toast": {},
            "cordova-plugin-console": {},
            "cordova-plugin-ionic-webview": {},
            "cordova-plugin-ionic-keyboard": {}
          },
          "platforms": [
            "ios",
            "android"
          ]
        }
      }

      4. Our components support lazy loading.
      If you want to use lazy loading you have to add component module for each components to page module section.

      import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
      import { ECommerce1Module } from '../../components/e-commerce/e-commerce-1/e-commerce-1.module';

      @NgModule({
        declarations: [
          NewPageForECommerce,
        ],
        imports: [
          IonicPageModule.forChild(NewPageForECommerce),
          ECommerce1Module
        ],
        schemas: [CUSTOM_ELEMENTS_SCHEMA]
      })

    
    

Ionic 3- Setup


        Start for Windows

        1. Extract your downloaded file
        2. Open extracted folder
        3. Open terminal with current location
        4. In the terminal write “npm install”
        5. In the terminal write “ionic serve”

        Start for iOS

        1. Extract your downloaded file
        2. Open extracted folder
        3. Open terminal with current location
        4. In the terminal write “sudo npm install”
        5. In the terminal write “sudo ionic serve”
        

Ionic 3- Setup Firebase

In our project open src/services/app-settings.ts

    
      export const AppSettings = {
          "IS_FIREBASE_ENABLED": false,
          "TOAST": {
              "duration": 1000,
              "position": "buttom"
          },
          "FIREBASE_CONFIG": {
              "apiKey": "AIzaSyAUJxrOJvrDKh0MVP80i8hdH0mN9k0V5Vs",
              "authDomain": "ionic-deco-design.firebaseapp.com",
              "databaseURL": "https://ionic-deco-design.firebaseio.com",
              "projectId": "ionic-deco-design",
              "storageBucket": "ionic-deco-design.appspot.com",
              "messagingSenderId": "494679492035"
          }
      };
    
    

IS_FIREBASE_ENABLED

If firebase enabled data will load from firebase, else data will load local services.

FIREBASE_CONFIG

If you want to use firebase, you have to create firebase project and set proper data. How to create an ionic project?
After you create firebase, you will need to import JSON file to the database.

DOWNLOAD JSON FILE:

Deco UI Kit - Multi-purpose Starter Android App Template - Android Studio

Ionic 3- Walkthrough

deco andrid


      1. In your project create folder components example (src/components)

      2. Copy component (src/components/walkthrought/) from download project to your project (src/components)

      3. Generate new page for your component - CLI commands
        (example: ionic generate  page yourPageNema)

      4. In your-page-nema.module.ts import your component module

          import { NgModule } from '@angular/core';
          import { IonicPageModule } from 'ionic-angular';
          import { YourPageNemaPage } from './your-page-nema';

          import { Walkthrought1Module } from '../../components/walkthrought-1/walkthrought-1.module';

          @NgModule({
            declarations: [
              YourPageNema,
            ],
            imports: [
              IonicPageModule.forChild(YourPageNema), Walkthrought1Module
            ],
          })

          export class YourPageNemaModule {}
        
        
      5. Add component to your page your-page-nema.html
          <walkthrought-1 [data]="data" [events]="events"></walkthrought-1>

      6. Data and Events you will find in WalkthroughService.ts services.

    

Ionic 3- Signup - Basic Login

deco andrid

      1. In your project create folder components example (src/components)

      2. Copy component (src/components/signup/signup-1) from download project to your project (src/components)

      3. Generate new page for your component - CLI commands
        (example: ionic generate  page yourPageNema)

      4. In your-page-nema.module.ts import your component module

          import { NgModule } from '@angular/core';
          import { IonicPageModule } from 'ionic-angular';
          import { YourPageNemaPage } from './your-page-nema';

          import { SignUp1Module } from '../../components/signup/signup-1/signup-1.module';

          @NgModule({
            declarations: [
              YourPageNema,
            ],
            imports: [
              IonicPageModule.forChild(YourPageNema), SignUp1Module
            ],
          })

          export class YourPageNemaModule {}
        
      5. Add component to your page your-page-nema.html
         <signup-1 [data]="data" [events]="events"></signup-1>

      6. Data and Events you will find in SignUpService.ts services.

    

Ionic 3- Signup - Basic Reset Password

deco andrid

       1. In your project create folder components example (src/components)

      2. Copy component (src/components/signup/signup-3) from download project to your project (src/components)

      3. Generate new page for your component - CLI commands
        (example: ionic generate  page yourPageNema)

      4. In your-page-nema.module.ts import your component module

          import { NgModule } from '@angular/core';
          import { IonicPageModule } from 'ionic-angular';
          import { YourPageNemaPage } from './your-page-nema';

          import { SignUp2Module } from '../../components/signup/signup-2/signup-2.module';

          @NgModule({
            declarations: [
              YourPageNema,
            ],
            imports: [
              IonicPageModule.forChild(YourPageNema), SignUp2Module
            ],
          })

          export class YourPageNemaModule {}

      5. Add component to your page your-page-nema.htmle
         <signup-3 [data]="data" [events]="events"></signup-3>

      6. Data and Events you will find in SignUpService.ts services.

    
    

Ionic 3- Signup - Basic Register

deco andrid

      1. In your project create folder components example (src/components)

      2. Copy component (src/components/signup/signup-2) from download project to your project (src/components)

      3. Generate new page for your component - CLI commands
        (example: ionic generate  page yourPageNema)

      4. In your-page-nema.module.ts import your component module

          import { NgModule } from '@angular/core';
          import { IonicPageModule } from 'ionic-angular';
          import { YourPageNemaPage } from './your-page-nema';

          import { SignUp2Module } from '../../components/signup/signup-2/signup-2.module';

          @NgModule({
            declarations: [
              YourPageNema,
            ],
            imports: [
              IonicPageModule.forChild(YourPageNema), SignUp2Module
            ],
          })

          export class YourPageNemaModule {}

      5. Add component to your page your-page-nema.html
         <signup-2 [data]="data" [events]="events"></signup-2>

      6. Data and Events you will find in SignUpService.ts services.

    
    

Ionic 3- Social - Feed Cards

deco andrid

      1. In your project create folder components example (src/components)

      2. Copy component (src/components/social/social-4) from download project to your project (src/components)

      3. Generate new page for your component - CLI commands
        (example: ionic generate  page yourPageNema)

      4. In your-page-nema.module.ts import your component module

          import { NgModule } from '@angular/core';
          import { IonicPageModule } from 'ionic-angular';
          import { YourPageNemaPage } from './your-page-nema';

          import { Social4Module } from '../../components/social/social-4/social-4.module';

          @NgModule({
            declarations: [
              YourPageNema,
            ],
            imports: [
              IonicPageModule.forChild(YourPageNema), Social4Module
            ],
          })

          export class YourPageNemaModule {}
        
        
      5. Add component to your page your-page-nema.html
         <social-4 [data]="data" [events]="events"></social-4>

      6. Data and Events you will find in SocialService.ts services.

    
    

Ionic 3- Social - Feed Full Width

deco andrid

     1. In your project create folder components example (src/components)

      2. Copy component (src/components/social/social-1) from download project to your project (src/components)

      3. Generate new page for your component - CLI commands
        (example: ionic generate  page yourPageNema)

      4. In your-page-nema.module.ts import your component module

          import { NgModule } from '@angular/core';
          import { IonicPageModule } from 'ionic-angular';
          import { YourPageNemaPage } from './your-page-nema';

          import { Social1Module } from '../../components/social/social-1/social-1.module';

          @NgModule({
            declarations: [
              YourPageNema,
            ],
            imports: [
              IonicPageModule.forChild(YourPageNema), Social1Module
            ],
          })

          export class YourPageNemaModule {}
        
        
      5. Add component to your page your-page-nema.html
         <social-1 [data]="data" [events]="events"></social-1>

      6. Data and Events you will find in SocialService.ts services.

    
    

Ionic 3- Social - Feed Big Images

deco andrid

      1. In your project create folder components example (src/components)

      2. Copy component (src/components/social/social-5) from download project to your project (src/components)

      3. Generate new page for your component - CLI commands
        (example: ionic generate  page yourPageNema)

      4. In your-page-nema.module.ts import your component module

          import { NgModule } from '@angular/core';
          import { IonicPageModule } from 'ionic-angular';
          import { YourPageNemaPage } from './your-page-nema';

          import { Social5Module } from '../../components/social/social-5/social-5.module';

          @NgModule({
            declarations: [
              YourPageNema,
            ],
            imports: [
              IonicPageModule.forChild(YourPageNema), Social5Module
            ],
          })

          export class YourPageNemaModule {}
        
        
      5. Add component to your page your-page-nema.html
         <social-5 [data]="data" [events]="events"></social-5>

      6. Data and Events you will find in SocialService.ts services.

    
    

Ionic 3- Social - Feed Image Cards

deco andrid

      1. In your project create folder components example (src/components)

      2. Copy component (src/components/social/social-3) from download project to your project (src/components)

      3. Generate new page for your component - CLI commands
        (example: ionic generate  page yourPageNema)

      4. In your-page-nema.module.ts import your component module

          import { NgModule } from '@angular/core';
          import { IonicPageModule } from 'ionic-angular';
          import { YourPageNemaPage } from './your-page-nema';

          import { Social3Module } from '../../components/social/social-3/social-3.module';

          @NgModule({
            declarations: [
              YourPageNema,
            ],
            imports: [
              IonicPageModule.forChild(YourPageNema), Social3Module
            ],
          })

          export class YourPageNemaModule {}
        
        
      5. Add component to your page your-page-nema.html
         <social-3 [data]="data" [events]="events"></social-3>

      6. Data and Events you will find in SocialService.ts services.
    
    

Ionic 3- Social - Comments

deco andrid

     1. In your project create folder components example (src/components)

      2. Copy component (src/components/social/social-6) from download project to your project (src/components)

      3. Generate new page for your component - CLI commands
        (example: ionic generate  page yourPageNema)

      4. In your-page-nema.module.ts import your component module

          import { NgModule } from '@angular/core';
          import { IonicPageModule } from 'ionic-angular';
          import { YourPageNemaPage } from './your-page-nema';

          import { Social6Module } from '../../components/social/social-6/social-6.module';

          @NgModule({
            declarations: [
              YourPageNema,
            ],
            imports: [
              IonicPageModule.forChild(YourPageNema), Social6Module
            ],
          })

          export class YourPageNemaModule {}
        
        
      5. Add component to your page your-page-nema.html
         <social-6 [data]="data" [events]="events"></social-6>

      6. Data and Events you will find in SocialService.ts services.

    
    

Ionic 3- Social - Write Comment

deco andrid

      1. In your project create folder components example (src/components)

      2. Copy component (src/components/social/social-9) from download project to your project (src/components)

      3. Generate new page for your component - CLI commands
        (example: ionic generate  page yourPageNema)

      4. In your-page-nema.module.ts import your component module

          import { NgModule } from '@angular/core';
          import { IonicPageModule } from 'ionic-angular';
          import { YourPageNemaPage } from './your-page-nema';

          import { Social9Module } from '../../components/social/social-9/social-9.module';

          @NgModule({
            declarations: [
              YourPageNema,
            ],
            imports: [
              IonicPageModule.forChild(YourPageNema), Social9Module
            ],
          })

          export class YourPageNemaModule {}
        
        
      5. Add component to your page your-page-nema.html
         <social-9 [data]="data" [events]="events"></social-9>

      6. Data and Events you will find in SocialService.ts services.

    
    

Ionic 3- Social - Activity Card

deco andrid

      1. In your project create folder components example (src/components)

      2. Copy component (src/components/social/social-7) from download project to your project (src/components)

      3. Generate new page for your component - CLI commands
        (example: ionic generate  page yourPageNema)

      4. In your-page-nema.module.ts import your component module

          import { NgModule } from '@angular/core';
          import { IonicPageModule } from 'ionic-angular';
          import { YourPageNemaPage } from './your-page-nema';

          import { Social7Module } from '../../components/social/social-7/social-7.module';

          @NgModule({
            declarations: [
              YourPageNema,
            ],
            imports: [
              IonicPageModule.forChild(YourPageNema), Social7Module
            ],
          })

          export class YourPageNemaModule {}
        
        
      5. Add component to your page your-page-nema.html
         <social-7 [data]="data" [events]="events"></social-7>

      6. Data and Events you will find in SocialService.ts services.

    
    

Ionic 3- Social - Image With Text

deco andrid

      1. In your project create folder components example (src/components)

      2. Copy component (src/components/social/social-10) from download project to your project (src/components)

      3. Generate new page for your component - CLI commands
        (example: ionic generate  page yourPageNema)

      4. In your-page-nema.module.ts import your component module

          import { NgModule } from '@angular/core';
          import { IonicPageModule } from 'ionic-angular';
          import { YourPageNemaPage } from './your-page-nema';

          import { Social10Module } from '../../components/social/social-10/social-10.module';

          @NgModule({
            declarations: [
              YourPageNema,
            ],
            imports: [
              IonicPageModule.forChild(YourPageNema), Social10Module
            ],
          })

          export class YourPageNemaModule {}
        
        
      5. Add component to your page your-page-nema.html
         <social-10 [data]="data" [events]="events"></social-10>

      6. Data and Events you will find in SocialService.ts services.
    
    

Ionic 3- Social - Article Cover Image

deco andrid

      1. In your project create folder components example (src/components)

      2. Copy component (src/components/social/social-8) from download project to your project (src/components)

      3. Generate new page for your component - CLI commands
        (example: ionic generate  page yourPageNema)

      4. In your-page-nema.module.ts import your component module

          import { NgModule } from '@angular/core';
          import { IonicPageModule } from 'ionic-angular';
          import { YourPageNemaPage } from './your-page-nema';

          import { Social8Module } from '../../components/social/social-8/social-8.module';

          @NgModule({
            declarations: [
              YourPageNema,
            ],
            imports: [
              IonicPageModule.forChild(YourPageNema), Social8Module
            ],
          })

          export class YourPageNemaModule {}
        
        
      5. Add component to your page your-page-nema.html
         <social-8 [data]="data" [events]="events"></social-8>

      6. Data and Events you will find in SocialService.ts services.
    
    

Ionic 3- Social - Article Author Card

deco andrid

      1. In your project create folder components example (src/components)

      2. Copy component (src/components/social/social-2) from download project to your project (src/components)

      3. Generate new page for your component - CLI commands
        (example: ionic generate  page yourPageNema)

      4. In your-page-nema.module.ts import your component module

          import { NgModule } from '@angular/core';
          import { IonicPageModule } from 'ionic-angular';
          import { YourPageNemaPage } from './your-page-nema';

          import { Social2Module } from '../../components/social/social-2/social-2.module';

          @NgModule({
            declarations: [
              YourPageNema,
            ],
            imports: [
              IonicPageModule.forChild(YourPageNema), Social2Module
            ],
          })

          export class YourPageNemaModule {}
        
        
      5. Add component to your page your-page-nema.html
         <social-2 [data]="data" [events]="events"></social-2>

      6. Data and Events you will find in SocialService.ts services.
    
    

Ionic 3- Profile - Avatar

deco andrid

      1. In your project create folder components example (src/components)

      2. Copy component (src/components/profile/profile-1) from download project to your project (src/components)

      3. Generate new page for your component - CLI commands
        (example: ionic generate  page yourPageNema)

      4. In your-page-nema.module.ts import your component module

          import { NgModule } from '@angular/core';
          import { IonicPageModule } from 'ionic-angular';
          import { YourPageNemaPage } from './your-page-nema';

          import { Profile1Module } from '../../components/profile/profile-1/profile-1.module';

          @NgModule({
            declarations: [
              YourPageNema,
            ],
            imports: [
              IonicPageModule.forChild(YourPageNema), Profile1Module
            ],
          })

          export class YourPageNemaModule {}
        
        
      5. Add component to your page your-page-nema.html
         <profile-1 [data]="data" [events]="events"></profile-1>

      6. Data and Events you will find in ProfileService.ts services.
    

Ionic 3- Profile - Card

deco andrid

      1. In your project create folder components example (src/components)

      2. Copy component (src/components/profile/profile-3) from download project to your project (src/components)

      3. Generate new page for your component - CLI commands
        (example: ionic generate  page yourPageNema)

      4. In your-page-nema.module.ts import your component module

          import { NgModule } from '@angular/core';
          import { IonicPageModule } from 'ionic-angular';
          import { YourPageNemaPage } from './your-page-nema';

          import { Profile3Module } from '../../components/profile/profile-3/profile-3.module';

          @NgModule({
            declarations: [
              YourPageNema,
            ],
            imports: [
              IonicPageModule.forChild(YourPageNema), Profile3Module
            ],
          })

          export class YourPageNemaModule {}
        
        
      5. Add component to your page your-page-nema.html
         <profile-3 [data]="data" [events]="events"></profile-3>

      6. Data and Events you will find in ProfileService.ts services.
    
    

Ionic 3- Profile - Cover Image

deco andrid

      1. In your project create folder components example (src/components)

      2. Copy component (src/components/profile/profile-2) from download project to your project (src/components)

      3. Generate new page for your component - CLI commands
        (example: ionic generate  page yourPageNema)

      4. In your-page-nema.module.ts import your component module

          import { NgModule } from '@angular/core';
          import { IonicPageModule } from 'ionic-angular';
          import { YourPageNemaPage } from './your-page-nema';

          import { Profile2Module } from '../../components/profile/profile-2/profile-2.module';

          @NgModule({
            declarations: [
              YourPageNema,
            ],
            imports: [
              IonicPageModule.forChild(YourPageNema), Profile2Module
            ],
          })

          export class YourPageNemaModule {}
        
        
      5. Add component to your page your-page-nema.html
         <profile-2 [data]="data" [events]="events"></profile-2>

      6. Data and Events you will find in ProfileService.ts services.
    
    

Ionic 3- Profile - Category

deco andrid

      1. In your project create folder components example (src/components)

      2. Copy component (src/components/profile/profile-4) from download project to your project (src/components)

      3. Generate new page for your component - CLI commands
        (example: ionic generate  page yourPageNema)

      4. In your-page-nema.module.ts import your component module

          import { NgModule } from '@angular/core';
          import { IonicPageModule } from 'ionic-angular';
          import { YourPageNemaPage } from './your-page-nema';

          import { Profile4Module } from '../../components/profile/profile-4/profile-4.module';

          @NgModule({
            declarations: [
              YourPageNema,
            ],
            imports: [
              IonicPageModule.forChild(YourPageNema), Profile4Module
            ],
          })

          export class YourPageNemaModule {}
        
        
      5. Add component to your page your-page-nema.html
         <profile-4 [data]="data" [events]="events"></profile-4>

      6. Data and Events you will find in ProfileService.ts services.
    
    

Ionic 3- Profile - Block

deco andrid

      1. In your project create folder components example (src/components)

      2. Copy component (src/components/profile/profile-5) from download project to your project (src/components)

      3. Generate new page for your component - CLI commands
        (example: ionic generate  page yourPageNema)

      4. In your-page-nema.module.ts import your component module

          import { NgModule } from '@angular/core';
          import { IonicPageModule } from 'ionic-angular';
          import { YourPageNemaPage } from './your-page-nema';

          import { Profile5Module } from '../../components/profile/profile-5/profile-5.module';

          @NgModule({
            declarations: [
              YourPageNema,
            ],
            imports: [
              IonicPageModule.forChild(YourPageNema), Profile5Module
            ],
          })

          export class YourPageNemaModule {}
        
        
      5. Add component to your page your-page-nema.html
         <profile-5 [data]="data" [events]="events"></profile-5>

      6. Data and Events you will find in ProfileService.ts services.
    
    

Ionic 3- Media - Single Image

deco andrid

      1. In your project create folder components example (src/components)

      2. Copy component (src/components/media/media-4) from download project to your project (src/components)

      3. Generate new page for your component - CLI commands
        (example: ionic generate  page yourPageNema)

      4. In your-page-nema.module.ts import your component module

          import { NgModule } from '@angular/core';
          import { IonicPageModule } from 'ionic-angular';
          import { YourPageNemaPage } from './your-page-nema';

          import { Media4Module } from '../../components/media/media-4/media-4.module';

          @NgModule({
            declarations: [
              YourPageNema,
            ],
            imports: [
              IonicPageModule.forChild(YourPageNema), Media4Module
            ],
          })

          export class YourPageNemaModule {}
        
        
      5. Add component to your page your-page-nema.html
         <media-4 [data]="data" [events]="events"></media-4>

      6. Data and Events you will find in MediaService.ts services.
    
    

Ionic 3- Media - Album Photos

deco andrid

      1. In your project create folder components example (src/components)

      2. Copy component (src/components/media/media-2) from download project to your project (src/components)

      3. Generate new page for your component - CLI commands
        (example: ionic generate  page yourPageNema)

      4. In your-page-nema.module.ts import your component module

          import { NgModule } from '@angular/core';
          import { IonicPageModule } from 'ionic-angular';
          import { YourPageNemaPage } from './your-page-nema';

          import { Media2Module } from '../../components/media/media-2/media-2.module';

          @NgModule({
            declarations: [
              YourPageNema,
            ],
            imports: [
              IonicPageModule.forChild(YourPageNema), Media2Module
            ],
          })

          export class YourPageNemaModule {}
        
        
      5. Add component to your page your-page-nema.html
         <media-2 [data]="data" [events]="events"></media-2>

      6. Data and Events you will find in MediaService.ts services.
    
    

Ionic 3- Media - Video List

deco andrid

      1. In your project create folder components example (src/components)

      2. Copy component (src/components/media/media-1) from download project to your project (src/components)

      3. Generate new page for your component - CLI commands
        (example: ionic generate  page yourPageNema)

      4. In your-page-nema.module.ts import your component module

          import { NgModule } from '@angular/core';
          import { IonicPageModule } from 'ionic-angular';
          import { YourPageNemaPage } from './your-page-nema';

          import { Media1Module } from '../../components/media/media-1/media-1.module';

          @NgModule({
            declarations: [
              YourPageNema,
            ],
            imports: [
              IonicPageModule.forChild(YourPageNema), Media1Module
            ],
          })

          export class YourPageNemaModule {}
        
        
      5. Add component to your page your-page-nema.html
         <media-1 [data]="data" [events]="events"></media-1>

      6. Data and Events you will find in MediaService.ts services.
    
    
    

Ionic 3- Media - All Albums

deco andrid

      1. In your project create folder components example (src/components)

      2. Copy component (src/components/media/media-3) from download project to your project (src/components)

      3. Generate new page for your component - CLI commands
        (example: ionic generate  page yourPageNema)

      4. In your-page-nema.module.ts import your component module

          import { NgModule } from '@angular/core';
          import { IonicPageModule } from 'ionic-angular';
          import { YourPageNemaPage } from './your-page-nema';

          import { Media3Module } from '../../components/media/media-3/media-3.module';

          @NgModule({
            declarations: [
              YourPageNema,
            ],
            imports: [
              IonicPageModule.forChild(YourPageNema), Media3Module
            ],
          })

          export class YourPageNemaModule {}
        
        
      5. Add component to your page your-page-nema.html
         <media-3 [data]="data" [events]="events"></media-3>

      6. Data and Events you will find in MediaService.ts services.
    
      

Ionic 3- E-Commerce - Shop With Cover

deco andrid

      1. In your project create folder components example (src/components)

      2. Copy component (src/components/e-commerce/e-commerce-10) from download project to your project (src/components)

      3. Generate new page for your component - CLI commands
        (example: ionic generate  page yourPageNema)

      4. In your-page-nema.module.ts import your component module

          import { NgModule } from '@angular/core';
          import { IonicPageModule } from 'ionic-angular';
          import { YourPageNemaPage } from './your-page-nema';

          import { ECommerce10Module } from '../../components/e-commerce/e-commerce-10/e-commerce-10.module';

          @NgModule({
            declarations: [
              YourPageNema,
            ],
            imports: [
              IonicPageModule.forChild(YourPageNema), ECommerce10Module
            ],
          })

          export class YourPageNemaModule {}
        
        
      5. Add component to your page your-page-nema.html
         <e-commerce-10 [data]="data" [events]="events"></e-commerce-10>

      6. Data and Events you will find in EcommerceService.ts services.
    
    

Ionic 3- E-Commerce - Shop With Slider

deco andrid

      1. In your project create folder components example (src/components)

      2. Copy component (src/components/e-commerce/e-commerce-9) from download project to your project (src/components)

      3. Generate new page for your component - CLI commands
        (example: ionic generate  page yourPageNema)

      4. In your-page-nema.module.ts import your component module

          import { NgModule } from '@angular/core';
          import { IonicPageModule } from 'ionic-angular';
          import { YourPageNemaPage } from './your-page-nema';

          import { ECommerce9Module } from '../../components/e-commerce/e-commerce-9/e-commerce-9.module';

          @NgModule({
            declarations: [
              YourPageNema,
            ],
            imports: [
              IonicPageModule.forChild(YourPageNema), ECommerce9Module
            ],
          })

          export class YourPageNemaModule {}
        
        
      5. Add component to your page your-page-nema.html
         <e-commerce-9 [data]="data" [events]="events"></e-commerce-9>

      6. Data and Events you will find in EcommerceService.ts services.
    
    

Ionic 3- E-Commerce - Shop With Cards

deco andrid

      1. In your project create folder components example (src/components)

      2. Copy component (src/components/e-commerce/e-commerce-1) from download project to your project (src/components)

      3. Generate new page for your component - CLI commands
        (example: ionic generate  page yourPageNema)

      4. In your-page-nema.module.ts import your component module

          import { NgModule } from '@angular/core';
          import { IonicPageModule } from 'ionic-angular';
          import { YourPageNemaPage } from './your-page-nema';

          import { ECommerce1Module } from '../../components/e-commerce/e-commerce-1/e-commerce-1.module';

          @NgModule({
            declarations: [
              YourPageNema,
            ],
            imports: [
              IonicPageModule.forChild(YourPageNema), ECommerce1Module
            ],
          })

          export class YourPageNemaModule {}
        
        
      5. Add component to your page your-page-nema.html
         <e-commerce-1 [data]="data" [events]="events"></e-commerce-1>

      6. Data and Events you will find in EcommerceService.ts services.
    
    

Ionic 3- E-Commerce - Product Color

deco andrid

      1. In your project create folder components example (src/components)

      2. Copy component (src/components/e-commerce/e-commerce-2) from download project to your project (src/components)

      3. Generate new page for your component - CLI commands
        (example: ionic generate  page yourPageNema)

      4. In your-page-nema.module.ts import your component module

          import { NgModule } from '@angular/core';
          import { IonicPageModule } from 'ionic-angular';
          import { YourPageNemaPage } from './your-page-nema';

          import { ECommerce2Module } from '../../components/e-commerce/e-commerce-2/e-commerce-2.module';

          @NgModule({
            declarations: [
              YourPageNema,
            ],
            imports: [
              IonicPageModule.forChild(YourPageNema), ECommerce2Module
            ],
          })

          export class YourPageNemaModule {}
        
        
      5. Add component to your page your-page-nema.html
         <e-commerce-2 [data]="data" [events]="events"></e-commerce-2>

      6. Data and Events you will find in EcommerceService.ts services.

    

Ionic 3- E-Commerce - Product Size

deco andrid

      1. In your project create folder components example (src/components)

      2. Copy component (src/components/e-commerce/e-commerce-3) from download project to your project (src/components)

      3. Generate new page for your component - CLI commands
        (example: ionic generate  page yourPageNema)

      4. In your-page-nema.module.ts import your component module

          import { NgModule } from '@angular/core';
          import { IonicPageModule } from 'ionic-angular';
          import { YourPageNemaPage } from './your-page-nema';

          import { ECommerce3Module } from '../../components/e-commerce/e-commerce-3/e-commerce-3.module';

          @NgModule({
            declarations: [
              YourPageNema,
            ],
            imports: [
              IonicPageModule.forChild(YourPageNema), ECommerce3Module
            ],
          })

          export class YourPageNemaModule {}
        
        
      5. Add component to your page your-page-nema.html
         <e-commerce-3 [data]="data" [events]="events"></e-commerce-3>

      6. Data and Events you will find in EcommerceService.ts services.
      

Ionic 3- E-Commerce - Product Type

deco andrid

      1. In your project create folder components example (src/components)

      2. Copy component (src/components/e-commerce/e-commerce-4) from download project to your project (src/components)

      3. Generate new page for your component - CLI commands
        (example: ionic generate  page yourPageNema)

      4. In your-page-nema.module.ts import your component module

          import { NgModule } from '@angular/core';
          import { IonicPageModule } from 'ionic-angular';
          import { YourPageNemaPage } from './your-page-nema';

          import { ECommerce4Module } from '../../components/e-commerce/e-commerce-4/e-commerce-4.module';

          @NgModule({
            declarations: [
              YourPageNema,
            ],
            imports: [
              IonicPageModule.forChild(YourPageNema), ECommerce4Module
            ],
          })

          export class YourPageNemaModule {}
        
        
      5. Add component to your page your-page-nema.html
         <e-commerce-4 [data]="data" [events]="events"></e-commerce-4>

      6. Data and Events you will find in EcommerceService.ts services.
      

Ionic 3- E-Commerce - Filters List

deco andrid

      1. In your project create folder components example (src/components)

      2. Copy component (src/components/e-commerce/e-commerce-5) from download project to your project (src/components)

      3. Generate new page for your component - CLI commands
        (example: ionic generate  page yourPageNema)

      4. In your-page-nema.module.ts import your component module

          import { NgModule } from '@angular/core';
          import { IonicPageModule } from 'ionic-angular';
          import { YourPageNemaPage } from './your-page-nema';

          import { ECommerce5Module } from '../../components/e-commerce/e-commerce-5/e-commerce-5.module';

          @NgModule({
            declarations: [
              YourPageNema,
            ],
            imports: [
              IonicPageModule.forChild(YourPageNema), ECommerce5Module
            ],
          })

          export class YourPageNemaModule {}
        
        
      5. Add component to your page your-page-nema.html
         <e-commerce-5 [data]="data" [events]="events"></e-commerce-5>

      6. Data and Events you will find in EcommerceService.ts services.
      

Ionic 3- E-Commerce - Filters

deco andrid

      1. In your project create folder components example (src/components)

      2. Copy component (src/components/e-commerce/e-commerce-6) from download project to your project (src/components)

      3. Generate new page for your component - CLI commands
        (example: ionic generate  page yourPageNema)

      4. In your-page-nema.module.ts import your component module

          import { NgModule } from '@angular/core';
          import { IonicPageModule } from 'ionic-angular';
          import { YourPageNemaPage } from './your-page-nema';

          import { ECommerce6Module } from '../../components/e-commerce/e-commerce-6/e-commerce-6.module';

          @NgModule({
            declarations: [
              YourPageNema,
            ],
            imports: [
              IonicPageModule.forChild(YourPageNema), ECommerce6Module
            ],
          })

          export class YourPageNemaModule {}
        
        
      5. Add component to your page your-page-nema.html
         <e-commerce-6 [data]="data" [events]="events"></e-commerce-6>

      6. Data and Events you will find in EcommerceService.ts services.
      

Ionic 3- E-Commerce - Shopping Cart

deco andrid

      1. In your project create folder components example (src/components)

      2. Copy component (src/components/e-commerce/e-commerce-7) from download project to your project (src/components)

      3. Generate new page for your component - CLI commands
        (example: ionic generate  page yourPageNema)

      4. In your-page-nema.module.ts import your component module

          import { NgModule } from '@angular/core';
          import { IonicPageModule } from 'ionic-angular';
          import { YourPageNemaPage } from './your-page-nema';

          import { ECommerce7Module } from '../../components/e-commerce/e-commerce-7/e-commerce-7.module';

          @NgModule({
            declarations: [
              YourPageNema,
            ],
            imports: [
              IonicPageModule.forChild(YourPageNema), ECommerce7Module
            ],
          })

          export class YourPageNemaModule {}
        
        
      5. Add component to your page your-page-nema.html
         <e-commerce-7 [data]="data" [events]="events"></e-commerce-7>

      6. Data and Events you will find in EcommerceService.ts services.
      

Ionic 3- E-Commerce - Product Big Image

deco andrid

      1. In your project create folder components example (src/components)

      2. Copy component (src/components/e-commerce/e-commerce-8) from download project to your project (src/components)

      3. Generate new page for your component - CLI commands
        (example: ionic generate  page yourPageNema)

      4. In your-page-nema.module.ts import your component module

          import { NgModule } from '@angular/core';
          import { IonicPageModule } from 'ionic-angular';
          import { YourPageNemaPage } from './your-page-nema';

          import { ECommerce8Module } from '../../components/e-commerce/e-commerce-8/e-commerce-8.module';

          @NgModule({
            declarations: [
              YourPageNema,
            ],
            imports: [
              IonicPageModule.forChild(YourPageNema), ECommerce8Module
            ],
          })

          export class YourPageNemaModule {}
        
        
      5. Add component to your page your-page-nema.html
         <e-commerce-8 [data]="data" [events]="events"></e-commerce-8>

      6. Data and Events you will find in EcommerceService.ts services.
      

Welcome to Deco UI Kit For Android

Deco is user interface kit with more than 35 mobile app screens. This is Android documentation where you will find everything about Deco UI Kit.

Android- Introduction

deco andrid

      1. To add component to your project you need first to copy  res/values/ to your project
                    - In res/values/strings.xml you have all string for all components. You can remove strings which is unnecessary.
                    - In res/values/dimens.xml you have all dimension for padding, margin, textSize, elevation etc...
                    - In res/values/color.xml you have all color which is used in our app

                  2. copy res/drawable/placeholder.png
                    - We used this image for placeholder

                  3. copy extension -> please change package name in all files
                    - When you copy extension folder in your project you have to change package name in all extension files.
                    - When you copy this folder you will copy our project name and that is reason why you need to change package name.


                  4. gradle.project
                    // Top-level build file where you can add configuration options common to all sub-projects/modules.

                    buildscript {
                      ext.kotlin_version = '1.2.60'
                      ext.android_support_version = '27.1.1'
                      ext.fuel_version = '1.9.0'
                      ext.constraint_layout_version = '1.1.1'


                      repositories {
                          google()
                          jcenter()
                      }
                      dependencies {
                          classpath 'com.android.tools.build:gradle:3.1.3'
                          classpath 'com.google.gms:google-services:4.0.2'
                          classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"

                          // NOTE: Do not place your application dependencies here; they belong
                          // in the individual module build.gradle files
                      }
                    }

                    allprojects {
                      repositories {
                          google()
                          mavenCentral()
                          jcenter()
                      }
                    }

                    task clean(type: Delete) {
                      delete rootProject.buildDir
                    }


                  5. gradle.module
                    apply plugin: 'com.android.application'

                    apply plugin: 'kotlin-android'

                    apply plugin: 'kotlin-android-extensions'

                    android {
                        compileSdkVersion 27
                        defaultConfig {
                            applicationId "com.deco.decodesign"
                            minSdkVersion 21
                            targetSdkVersion 27
                            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 "org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version"

                      implementation "com.android.support:support-v4:$android_support_version"
                      implementation "com.android.support:appcompat-v7:$android_support_version"
                      implementation "com.android.support:support-v4:$android_support_version"
                      implementation "com.android.support:cardview-v7:$android_support_version"
                      implementation "com.android.support:design:$android_support_version"
                      implementation "com.android.support:recyclerview-v7:$android_support_version"
                      implementation "com.android.support:support-v4:$android_support_version"

                      implementation "com.github.kittinunf.fuel:fuel-android:$fuel_version"
                      implementation "com.github.kittinunf.fuel:fuel-rxjava:$fuel_version"
                      implementation "com.github.kittinunf.fuel:fuel-gson:$fuel_version"

                      implementation "com.android.support.constraint:constraint-layout:$constraint_layout_version"
                      implementation 'com.google.firebase:firebase-core:16.0.1'
                      implementation 'com.android.support.constraint:constraint-layout:1.1.2'
                      testImplementation 'junit:junit:4.12'

                      implementation 'com.github.bumptech.glide:glide:4.6.1'
                      annotationProcessor 'com.github.bumptech.glide:compiler:4.6.1'
                      androidTestImplementation 'com.android.support.test:runner:1.0.2'
                      androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2'

                      implementation ('com.appyvet:materialrangebar:1.4.3') {
                          exclude module: 'support-compat'
                      }
                    }
      

Android- Walkthrough

deco andrid

      1. Copy components/wizard

      2. Copy menu/repositories/WizardRepository

      3. Copy res/layout/
         - activity_wizard.xml
         - fragment_wizard_page.xml

      4. Copy res/drawable/
         - wizard_indicator_default.xml
         - wizard_indicator_selected.xml
         - wizard_selector.xml

      5. Add component to ManifestFile and if you don't want toolbar add theme = @style/AppTheme.FullScreen
      <activity
        android:name=".components.wizard.activity.WizardActivity"
        android:screenOrientation="portrait"
        android:theme="@style/AppThem.FullScreen"/>



      

Android- Signup - Basic Login

deco andrid

      1. Copy components/signup/login

      2. Copy res/layout/
        - activity_login_basic.xml
        - content_login_basic.xml
        - fragment_login_basic.xml

      3. Copy res/drawable/
        - round_corner_accent_light.xml
        - round_corner_accent.xml
        - toggle_visibility_selector.xml

      4. Add component to ManifestFile and if you don't want toolbar add theme = @style/AppTheme.NoActionBar
      <activity
        android:name=".components.signup.login.activity.LoginBasicActivity"
        android:screenOrientation="portrait"
        android:theme="@style/AppThem.NoActionBar"/>


      

Android- Signup - Basic Reset Password

deco andrid

      1. Copy components/signup/resetPassword

      2. Copy res/layout/
         - activity_reset_password_basic.xml
         - content_register_basic.xml
         - fragment_reset_password_basic.xml

      3. Copy res/drawable/
         - round_corner_accent_light.xml
         - round_corner_accent.xml
         - toggle_visibility_selector.xml

      4. Add component to ManifestFile and if you don't want toolbar add theme = @style/AppTheme.NoActionBar
      <activity
        android:name=".components.signup.resetPassword.activity.ResetPasswordBasicActivity"
        android:screenOrientation="portrait"
        android:theme="@style/AppThem.NoActionBar"/>
      

Android- Signup - Basic Register

deco andrid

      1. Copy components/signup/register

      2. Copy res/layout/
         - activity_register_basic.xml
         - content_sign_up_basic.xml
         - fragment_register_basic.xml

      3. Copy res/drawable/
         - round_corner_accent_light.xml
         - round_corner_accent.xml
         - toggle_visibility_selector.xml

      4. Add component to ManifestFile and if you don't want toolbar add theme = @style/AppTheme.NoActionBar
      <activity
        android:name=".components.signup.register.activity.RegisterBasicActivity"
        android:screenOrientation="portrait"
        android:theme="@style/AppThem.NoActionBar"/>
      

Android- Social - Feed Cards

deco andrid

      1. Copy components/social/socialFeedCard

      2. Copy res/layout/
         - activity_social_feed_card_list.xml
         - fragment_social_feed_card_list.xml
         - content_social_feed_list.xml
         - social_feed_card_list_item_row.xml

      3. Copy menu/repositories/SocialFeedCardListRepository.kt

      4. Add component to ManifestFile and if you don't want toolbar add theme = @style/AppTheme.NoActionBar
      <activity
          android:name=".components.social.socialFeedCard.activity.SocialFeedCardListActivity"
          android:label="@string/social_feed_list_title"
          android:screenOrientation="portrait"/>
      

Android- Social - Feed Full Width

deco andrid

      1. Copy components/social/socialFeedCardFullWidth

      2. Copy res/layout/
         - activity_social_feed_full_width_list.xml
         - content_social_full_width_list.xml
         - fragment_social_feed_full_width_list.xml
         - social_feed_full_width_list_item_row.xml

      3. Copy menu/repositories/SocialFeedFullWidthListRepository.kt

      4. Add component to ManifestFile and if you don't want toolbar add theme = @style/AppTheme.NoActionBar
      <activity
          android:name=".components.social.socialFeedCardFullWidth.activity.SocialFeedFullWidthListActivity"
          android:label="@string/social_feed_list_title"
          android:screenOrientation="portrait"/>
      

Android- Social - Feed Big Images

deco andrid

      1. Copy components/social/socialFeedBigImages

      2. Copy res/layout/
         - activity_social_feed_big_image_list.xml
         - content_social_feed_list.xml
         - fragment_social_feed_big_image_list.xml
         - social_feed_big_image_list_item_row.xml

      3. Copy menu/repositories/SocialFeedBigImageListRepository.kt

      4. Add component to ManifestFile and if you don't want toolbar add theme = @style/AppTheme.NoActionBar
      <activity
          android:name=".components.social.socialFeedBigImages.activity.SocialFeedBigImagesListActivity"
          android:label="@string/social_feed_list_title"
          android:screenOrientation="portrait"/>
      

Android- Social - Feed Image Cards

deco andrid

      1. Copy components/social/socialFeedImageCard

      2. Copy res/layout/
         - activity_social_feed_image_card.xml
         - content_social_feed_image_card_list.xml
         - fragment_social_feed_image_card_list_activity.xml
         - social_feed_image_card_list_item_row.xml

      3. Copy res/drawable/
         - ic_like_white.xml

      4. copy menu/repositories/SocialFeedImageCardListRepository.kt

      5. Add component to ManifestFile and if you don't want toolbar add theme = @style/AppTheme.NoActionBar
      <activity
          android:name=".components.social.socialFeedImageCard.activity.SocialFeedImageCardActivity"
          android:label="@string/social_feed_list_title"
          android:screenOrientation="portrait"/>
      

Android- Social - Comments

deco andrid

      1. Copy components/social/socialComments

      2. Copy res/layout/
         - activity_social_comment.xml
         - content_social_comment.xml
         - fragment_social_comment_list.xml
         - social_comment_list_item_row.xml

      3. Copy menu/repositories/SocialCommentListRepository.kt

      4. Add component to ManifestFile and if you don't want toolbar add theme = @style/AppTheme.NoActionBar
      <activity
          android:name=".components.social.socialComments.activity.SocialCommentActivity"
          android:label="@string/social_comment"
          android:screenOrientation="portrait"/>
      

Android- Social - Write Comment

deco andrid

      1. Copy components/social/socialWriteComment

      2. Copy res/layout/
         - activity_social_comment.xml
         - content_social_comment.xml
         - fragment_social_comment_write.xml

      3. Add component to ManifestFile and if you don't want toolbar add theme = @style/AppTheme.NoActionBar
      <activity
          android:name=".components.social.socialWriteComment.activity.SocialWriteCommentActivity"
          android:label="@string/social_write_a_comment"
          android:screenOrientation="portrait"/>
      

Android- Social - Activity Card

deco andrid

      1. Copy components/social/socialActivityCards

      2. Copy res/layout/
         - activity_social_feed_big_image_list.xml
         - content_social_feed_list.xml
         - fragment_activity_card_list.xml
         - activity_card_list_item_row.xml

      3. Add component to ManifestFile and if you don't want toolbar add theme = @style/AppTheme.NoActionBar
      <activity
        android:name=".components.social.socialActivityCards.activity.ActivityCardListActivity"
        android:label="@string/social_activity_card"
        android:screenOrientation="portrait"/>

      

Android- Social - Image With Text

deco andrid

      1. Copy components/social/socialImageWithText

      2. Copy res/layout/
         - activity_single_image.xml
         - content_media_single_image.xml
         - fragment_social_image_with_text.xml

      3. Copy res/drawable/
        - ic_arrow_back_white_24px.xml

      4. Copy menu/repositories/SocialImageWithTextActivityRepository.kt

      5. Add component to ManifestFile and if you don't want toolbar add theme = @style/AppTheme.NoActionBar
      <activity
        android:name=".components.social.socialImageWithText.activity.SocialImageWithTextActivity"
        android:label="@string/social_activity_card"
        android:screenOrientation="portrait"/>
      

Android- Social - Article Cover Image

deco andrid

      1. Copy components/social/socialArticleCoverImage

      2. Copy res/layout/
         - activity_social_article_cover_image.xml
         - content_social_article_cover_image.xml
         - fragment_social_article_cover_image.xml

      3. Copy res/drawable/
        - round_corner_button_secondary.xml

      4. copy menu/repositories/SocialArticleCoverImageRepository.kt

      5. Add component to ManifestFile and if you don't want toolbar add theme = @style/AppTheme.NoActionBar
      <activity
          android:name=".components.social.socialArticleCoverImage.activity.SocialArticleCoverImageActivity"
          android:label="@string/social_article_cover_image"
          android:screenOrientation="portrait"/>
      

Android- Social - Article Author Card

deco andrid

      1. Copy components/social/socialArticleAuthorCard

      2. Copy res/layout/
         - activity_social_article_author_card.xml
         - content_social_article_author_card.xml
         - fragment_social_article_author_card.xml

      3. Copy res/drawable/
        - round_corner_button_secondary.xml

      4. copy menu/repositories/SocialArticleAuthorCardRepository.kt

      5. Add component to ManifestFile and if you don't want toolbar add theme = @style/AppTheme.NoActionBar
      <activity
        android:name=".components.social.socialArticleAuthorCard.activity.SocialArticleAuthorCardActivity"
        android:label="@string/social_article_cover_image"
        android:screenOrientation="portrait"/>
      

Android- Profile - Avatar

deco andrid

      1. Copy components/profile/profileAvatar

      2. Copy res/layout/
         - activity_profile_card.xml
         - content_profile_card.xml
         - fragment_profile_avatar.xml

      3. Copy res/drawable/
        - round_corner_accent.xml

      4. Copy menu/repositories/ProfileAvatarRepository.kt

      5. Add component to ManifestFile and if you don't want toolbar add theme = @style/AppTheme.NoActionBar
      <activity
        android:name=".components.profile.profileAvatar.activity.ProfileAvatarActivity"
        android:label="@string/profile_avatar_back"
        android:screenOrientation="portrait"/>
      

Android- Profile - Card

deco andrid

      1. Copy components/profile/profileCard

      2. Copy res/layout/
         - activity_profile_card.xml
         - content_profile_card.xml
         - fragment_profile_card.xml

      3. Copy res/drawable/
         - round_corner_accent.xml
         - round_corner_button_secondary.xml

      4. Copy menu/repositories/ProfileCardRepository.kt

      5. Add component to ManifestFile and if you don't want toolbar add theme = @style/AppTheme.NoActionBar
      <activity
        android:name=".components.profile.profileCard.activity.ProfileCardActivity"
        android:label="@string/profile_card_back"
        android:screenOrientation="portrait"/>
      

Android- Profile - Cover Image

deco andrid

      1. Copy components/profile/profileCoverImage

      2. Copy res/layout/
         - activity_profile_cover_image.xml
         - content_profile_cover_image.xml
         - fragment_profile_cover_image.xml
         - media_album_photo_item_row.xml

      3. Copy res/drawable/
         - round_corner_accent.xml
         - round_corner_button_secondary.xml

      4. Copy menu/repositories/ProfileCoverImageRepository.kt

      5. Add component to ManifestFile and if you don't want toolbar add theme = @style/AppTheme.NoActionBar
      <activity
          android:name=".components.profile.profileCoverImage.activity.ProfileCoverImageActivity"
          android:label="@string/profile_cover_image_back"
          android:screenOrientation="portrait"/>
      

Android- Profile - Category

deco andrid

      1. Copy components/profile/profileCategory

      2. Copy res/layout/
         - activity_profile_avatar.xml
         - content_profile_avatar.xml
         - fragment_profile_category.xml
         - social_feed_card_list_item_row.xml

      3. Copy menu/repositories/ProfileCategoryRepository.kt

      4. Add component to ManifestFile and if you don't want toolbar add theme = @style/AppTheme.NoActionBar
      <activity
          android:name=".components.profile.profileCategory.activity.ProfileCategoryActivity"
          android:label="@string/profile_category_back"
          android:screenOrientation="portrait"/>
      

Android- Profile - Block

deco andrid

      1. Copy components/profile/profileBlock

      2. Copy res/layout/
         - activity_profile_block.xml
         - content_profile_block.xml
         - fragment_profile_block.xml

      3. Copy res/drawable/
         - ic_like_white.xml
         - ic_baseline_photo_24px.xml

      4. Copy menu/repositories/ProfileBlockRepository.kt

      5. Add component to ManifestFile and if you don't want toolbar add theme = @style/AppTheme.NoActionBar
      <activity
          android:name=".components.profile.profileBlock.activity.ProfileBlockActivity"
          android:label="@string/profile_block_back"
          android:screenOrientation="portrait"/>

      

Android- Media - Single Image

deco andrid

      1. Copy components/media/mediaSingleImage

      2. Copy res/layout/
         - activity_single_image.xml
         - fragment_media_single_image.xml

      3. Copy res/drawable/
         - ic_arrow_back_white_24px.xml

      4. Copy menu/repositories/MediaSingleImageRepository.kt

      5. Add component to ManifestFile and if you don't want toolbar add theme = @style/AppTheme.FullScreen
      <activity
          android:name=".components.media.mediaSingleImage.activity.SingleImageActivity"
          android:screenOrientation="portrait"
          android:theme="@style/AppThem.FullScreen"/>

      

Android- Media - Album Photos

deco andrid

      1. Copy components/media/mediaListAlbumPhoto

      2. Copy res/layout/
         - activity_album_photo.xml
         - fragment_media_album_photos.xml
         - media_album_photo_item_row.xml

      3. Copy menu/repositories/MediaAlbumPhotoRepository.kt

      4. Add component to ManifestFile and if you don't want toolbar add theme = @style/AppTheme.NoActionBar
      <activity
          android:name=".components.media.mediaListAlbumPhoto.activity.ListAlbumPhotoActivity"
          android:screenOrientation="portrait"
          android:label="@string/media_list_album_photo_titl"/>

      

Android- Media - Video List

deco andrid

      1. Copy components/media/mediaListVideo

      2. Copy res/layout/
         - activity_album_video_list.xml
         - fragment_media_video_list.xml
         - media_video_list_item_row.xml

      3. Copy menu/repositories/MediaAlbumVideoListRepository.kt

      4. Add component to ManifestFile and if you don't want toolbar add theme = @style/AppTheme.NoActionBar
      <activity
          android:name=".components.media.mediaListVideo.activity.VideoListActivity"
          android:label="@string/media_video_list_title"
          android:screenOrientation="portrait"/>

      

Android- Media - All Albums

deco andrid

      1. Copy components/media/mediaListAlbum

      2. Copy res/layout/
         - activity_album_all_album_list.xml
         - fragment_media_video_list.xml
         - media_all_photo_list_item_row.xml

      3. Copy menu/repositories/MediaAlbumListRepository.kt

      4. Add component to ManifestFile and if you don't want toolbar add theme = @style/AppTheme.NoActionBar
      <activity
          android:name=".components.media.mediaListAlbum.activity.AlbumListActivity"
          android:label="@string/media_feed_list_title"
          android:screenOrientation="portrait"/>

      

Android- E-Commerce - Shop With Cover

deco andrid

      1. Copy components/ecommerce/eCommerceShopWithCover

      2. Copy res/layout/
         - activity_ecommerce_shop_with_cover.xml
         - content_e_commerce_shop_with_cover.xml
         - fragment_e_commerce_shop_with_cover.xml
         - e_commerce_shop_with_cover_list_item_row.xml

      3. Copy res/drawable/
         - ic_shopping.xml

      3. Copy menu/repositories/ECommerceShopWithCoverRepository.kt

      4. Add component to ManifestFile and if you don't want toolbar add theme = @style/AppTheme.NoActionBar
        <activity
            android:name=".components.ecommerce.eCommerceShopWithCover.activity.ECommerceShopWithCoverActivity"
            android:label="@string/e_commerce_shop_with_cover_title_activity"
            android:screenOrientation="portrait"/>

      

Android- E-Commerce - Shop With Slider

deco andrid

      1. Copy components/ecommerce/eCommerceShopWithSlider

      2. Copy res/layout/
         - activity_ecommerce_shop_with_slider.xml
         - content_e_commerce_shop_with_slider.xml
         - fragment_e_commerce_shop_with_slider.xml
         - e_commerce_shop_with_cover_list_item_row.xml

      3. Copy res/drawable/
         - e_commerce_shop_with_slider_selector.xml
         - e_commerce_shop_with_slider_indicator_selected.xml
         - e_commerce_shop_with_slider_indicator_default.xml

      4. Copy menu/repositories/ECommerceShopWithSliderRepository.kt

      5. Add component to ManifestFile and if you don't want toolbar add theme = @style/AppTheme.FullScreen
      <activity
          android:name=".components.ecommerce.eCommerceShopWithSlider.activity.ECommerceShopWithSliderActivity"
          android:label="@string/e_commerce_shop_with_slider_title_activity"
          android:screenOrientation="portrait"/>

      

Android- E-Commerce - Shop With Cards

deco andrid

      1. Copy components/ecommerce/eCommerceShopWithCards

      2. Copy res/layout/
         - activity_ecommerce_shop_with_cards.xml
         - content_e_commerce_shopping_cart.xml
         - fragment_e_commerce_shop_with_cards.xml
         - e_commerce_shop_with_cards_list_item_left_row.xml
         - e_commerce_shop_with_cards_list_item_right_row.xml


      3. Copy res/drawable/
         - ic_baseline_done_24px.xml
         - ic_shopping.xml

      4. Copy menu/repositories/ECommerceShopWithCardsRepository.kt

      5. Add component to ManifestFile and if you don't want toolbar add theme = @style/AppTheme.FullScreen
      <activity
          android:name=".components.ecommerce.eCommerceShopWithCards.activity.ECommerceShopWithCardsActivity"
          android:label="@string/e_commerce_product_type_title_activity"
          android:screenOrientation="portrait"/>

      

Android- E-Commerce - Product Color

deco andrid

      1. Copy components/ecommerce/eCommerceProductColor

      2. Copy res/layout/
         - activity_ecommerce_product_color.xml
         - content_e_commerce_product_color.xml
         - fragment_e_commerce_product_color.xml

      3. Copy res/drawable/
         - ic_baseline_done_24px.xml
         - circle.xml
         - ic_shopping.xml
         - round_corner_accent.xml

      4. Copy menu/repositories/ECommerceProductColorRepository.kt

      5. Add component to ManifestFile and if you don't want toolbar add theme = @style/AppTheme.FullScreen
      <activity
          android:name=".components.ecommerce.eCommerceProductColor.activity.ECommerceProductColorActivity"
          android:label="@string/e_commerce_product_color_title_activity"
          android:screenOrientation="portrait"/>

      

Android- E-Commerce - Product Size

deco andrid

      1. Copy components/ecommerce/eCommerceProductSize

      2. Copy res/layout/
         - activity_ecommerce_product_size.xml
         - content_e_commerce_product_size.xml
         - fragment_e_commerce_product_size.xml


      3. Copy res/drawable/
         - circle.xml
         - round_corner_accent.xml

      4. Copy menu/repositories/ECommerceProductSizeRepository.kt

      5. Add component to ManifestFile and if you don't want toolbar add theme = @style/AppTheme.FullScreen
      <activity
          android:name=".components.ecommerce.eCommerceProductSize.activity.ECommerceProductSizeActivity"
          android:label="@string/e_commerce_product_size_title_activity"
          android:screenOrientation="portrait"/>

      

Android- E-Commerce - Product Type

deco andrid

      1. Copy components/ecommerce/eCommerceProductType

      2. Copy res/layout/
         - activity_ecommerce_product_type.xml
         - content_e_commerce_product_type.xml
         - fragment_e_commerce_product_type.xml
         - e_commerce_product_type_list_item_row.xml

      3. Copy res/drawable/
         - round_corner_accent.xml
         - ic_baseline_done_24px.xml

      4. Copy menu/repositories/ECommerceProductTypeRepository.kt

      5. Add component to ManifestFile and if you don't want toolbar add theme = @style/AppTheme.FullScreen
      <activity
          android:name=".components.ecommerce.eCommerceProductType.activity.ECommerceProductTypeActivity"
          android:label="@string/e_commerce_product_type_title_activity"
          android:screenOrientation="portrait"/>

      

Android- E-Commerce - Filters List

deco andrid

      1. Copy components/ecommerce/eCommerceFilterList

      2. Copy res/layout/
         - activity_ecommerce_filter_list.xml
         - content_e_commerce_filter_list.xml
         - fragment_e_commerce_filter_list.xml
         - e_commerce_filter_list_item_row.xml

      3. Copy res/drawable/
         - ic_baseline_keyboard_arrow_right_24px.xml

      4. Copy menu/repositories/ECommerceFilterListRepository.kt

      5. Add component to ManifestFile and if you don't want toolbar add theme = @style/AppTheme.FullScreen
      <activity
          android:name=".components.ecommerce.eCommerceFilterList.activity.ECommerceFilterListActivity"
          android:label="@string/e_commerce_filter_list_title_activity"
          android:screenOrientation="portrait"/>

      

Android- E-Commerce - Filters

deco andrid

      1. Copy components/ecommerce/eCommerceFilter

      2. Copy res/layout/
         - activity_ecommerce_filter_list.xml
         - content_e_commerce_filter_list.xml
         - fragment_e_commerce_filter.xml
         - e_commerce_filter_list_item_row.xml

      3. Copy res/drawable/
         - ic_baseline_keyboard_arrow_right_24px.xml

      4. Copy menu/repositories/ECommerceFilterRepository.kt

      5. Add component to ManifestFile and if you don't want toolbar add theme = @style/AppTheme.FullScreen
      <activity
          android:name=".components.ecommerce.eCommerceFilter.activity.ECommerceFilterActivity"
          android:label="@string/e_commerce_filter_title_activity"
          android:screenOrientation="portrait"/>

      

Android- E-Commerce - Shopping Cart

deco andrid

      1. Copy components/ecommerce/eCommerceShoppingCart

      2. Copy res/layout/
         - activity_ecommerce_shopping_cart.xml
         - content_e_commerce_shopping_cart.xml
         - fragment_e_commerce_shopping_cart.xml
         - e_commerce_shopping_cart_list_item_row.xml

      3. Copy res/drawable/
         - ic_baseline_add_24px.xml
         - ic_baseline_remove_24px.xml
         - circle.xml

      4. Copy menu/repositories/ECommerceShoppingCartRepository.kt

      5. Add component to ManifestFile and if you don't want toolbar add theme = @style/AppTheme.FullScreen
      <activity
          android:name=".components.ecommerce.eCommerceShoppingCart.activity.ECommerceShoppingCartActivity"
          android:label="@string/e_commerce_shopping_cart_title_activity"
          android:screenOrientation="portrait"/>


      

Android- E-Commerce - Product Big Image

deco andrid

      1. Copy components/ecommerce/eCommerceProductBigImage

      2. Copy res/layout/
         - activity_ecommerce_product_big_image.xml
         - content_e_commerce_product_big_image.xml
         - fragment_e_commerce_product_big_image.xml

      3. Copy res/drawable/
         - round_corner_accent.xml
         - ic_baseline_done_24px.xml

      4. Copy menu/repositories/ECommerceProductBigImageRepository.kt

      5. Add component to ManifestFile and if you don't want toolbar add theme = @style/AppTheme.FullScreen
      <activity
          android:name=".components.ecommerce.eCommerceProductBigImage.activity.ECommerceProductBigImageActivity"
          android:label="@string/e_commerce_product_big_image_title_activity"
          android:screenOrientation="portrait"/>


      

LICENSE

You are allowed to:

  • You may create an End Product for only one client.
  • You may create an End Product for personal or commercial use.
  • You may modify or manipulate the product

You are not allowed to:

  • You can’t re-distribute the product as stock, in a tool or template.
  • You can’t re-distribute or share source files.
  • You can’t create End Product for sale, even if you modify the product.
  • You can’t create End Product for more than one client, if you wan’t to create new product for another client you must purchase Deco UI Kit again. Each purchase for only one client.

Other license terms:

  • You are not required to attribute Deco UI Kit in any of your projects.

Support or partnership:

  • If you have question or you're still unclear about what is or isn't allowed or have problems with Deco UI Kit, please contact us with email support@decouikit.comm

Affiliate: