Free Real-Time Sales report app design for android studio

Published by Kapil Mohan on April 26, 2019April 26, 2019

Free business sales backend app design with source code for android

Download flutter implementation from :- https://github.com/JideGuru/SalesApp
for core android tutorial, continue reading.

Preview
Project Structure

business app for sales report ui design with source code

The project includes all base design and resources. For better results, use quality images. we don’t include recycler or code for recycler view as this may cause chaos in tutorials.(For recycler view examples and learning android coding, visit androidhive )

Manifest.xml

Doesn’t require any additional code.Just add an empty activity from new > activity > empty activity

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

    <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=".SalesReportActivity"
            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(Module:app)

Uses minsdk 17 and target sdk 28

apply plugin: 'com.android.application'

android {
    compileSdkVersion 28
    defaultConfig {
        applicationId "com.appsnipp.salesapp"
        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'
}

SalesReportActivity.java

include code for making status bar transparent

        // Making notification bar transparent
        if (Build.VERSION.SDK_INT >= 21) {
            getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_STABLE | View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN);
        }

complete code for SalesReportActivity.java

package com.appsnipp.salesApp;

import android.os.Build;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.RelativeLayout;

public class SalesReportActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        // Making notification bar transparent
        if (Build.VERSION.SDK_INT >= 21) {
            getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_STABLE | View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN);
        }
        setContentView(R.layout.activity_sales_report);
    }
}

Res files

drawables

download drawable Download

copy the contents to drawable folder.

Layout

activity_sales_report.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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.appsnipp.salesApp.SalesReportActivity">

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


        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <RelativeLayout
                android:id="@+id/headerLayout"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@drawable/reports_header_bk"
                android:paddingLeft="20dp"
                android:paddingRight="20dp"
                android:paddingBottom="20dp"
                android:paddingTop="60dp">

                <TextView
                    android:id="@+id/dateTextView"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="01 April 2017 to 01 April 2019"
                    android:layout_alignParentTop="true"
                    android:textSize="18sp"
                    android:textStyle="bold"
                    android:textColor="@color/whiteTextColor"/>

                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_alignParentRight="true"
                    android:layout_alignParentTop="true"
                    android:src="@drawable/ic_dropdown_arrow" />

                <TextView
                    android:id="@+id/salesHeaderTextView"
                    android:text="Total Sale"
                    android:layout_marginTop="30dp"
                    style="@style/reportContentText" />

                <TextView
                    style="@style/viewParent.headerText"
                    android:layout_centerHorizontal="true"
                    android:textColor="@color/whiteTextColor"
                    android:layout_below="@id/salesHeaderTextView"
                    android:text="$15,990.00"
                    android:layout_marginTop="10dp"
                    android:layout_marginBottom="70dp"/>


            </RelativeLayout>

            <LinearLayout
                android:id="@+id/cardLayout"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_below="@id/headerLayout"
                android:layout_marginTop="-80dp">

                <android.support.v7.widget.CardView
                    app:cardCornerRadius="16dp"
                    app:cardBackgroundColor="@color/whiteTextColor"
                    style="@style/reportsCardStyle">

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

                        <TextView
                            style="@style/reportContentText"
                            android:textColor="#79D0A3"
                            android:text="This Month"/>

                        <TextView
                            style="@style/viewParent.headerText"
                            android:textSize="27sp"
                            android:text="$5,990.00"/>
                    </LinearLayout>

                </android.support.v7.widget.CardView>
                <android.support.v7.widget.CardView
                    app:cardCornerRadius="16dp"
                    app:cardBackgroundColor="@color/whiteTextColor"
                    style="@style/reportsCardStyle">
                    <LinearLayout
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center"
                        android:orientation="vertical">

                        <TextView
                            style="@style/reportContentText"
                            android:textColor="#79D0A3"
                            android:text="This Week"/>

                        <TextView
                            style="@style/viewParent.headerText"
                            android:textSize="27sp"
                            android:text="$200.00"/>
                    </LinearLayout>

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

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_below="@id/cardLayout"
                android:orientation="vertical">

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

            </LinearLayout>


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

</android.support.constraint.ConstraintLayout>

card_sales.xml

card design to be used for recycler model, if you wish to have static content then copy paste this code in main layout instead of using <include />tag.

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView 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"
    app:cardBackgroundColor="@color/whiteTextColor"
    app:cardCornerRadius="5dp"
    android:layout_marginTop="5dp"
    android:layout_marginBottom="5dp"
    android:layout_marginLeft="10dp"
    android:layout_marginRight="10dp">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="10dp">

        <ImageView
            android:id="@+id/salesImageView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_cash"/>

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:layout_centerVertical="true"
            android:layout_marginLeft="20dp"
            android:layout_toRightOf="@id/salesImageView">

            <TextView
                style="@style/reportContentText"
                android:text="Cash"
                android:textColor="#25C0DE"/>
            <TextView
                style="@style/viewParent.headerText"
                android:textSize="21sp"
                android:text="$1000.22"/>

        </LinearLayout>


    </RelativeLayout>

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

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>

    <!--colors for light mode-->
    <color name="contentTextColor">#020000</color>
    <color name="whiteTextColor">#fff</color>


</resources>

dimens.xml

<resources>
    <!-- Default screen margins, per the Android Design guidelines. -->
    <dimen name="headerTextSize">30sp</dimen>

</resources>

strings.xml

<resources>
    <string name="app_name">salesApp</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>

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

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

    <style name="reportsCardStyle">
        <item name="android:layout_width">0dp</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:minHeight">140dp</item>
        <item name="android:layout_weight">1</item>
        <item name="android:layout_margin">10dp</item>
    </style>

    <style name="reportContentText">
        <item name="android:layout_width">wrap_content</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:layout_centerHorizontal">true</item>
        <item name="android:textColor">@color/whiteTextColor</item>
        <item name="android:textStyle">bold</item>
        <item name="android:textSize">18sp</item>
        <item name="android:layout_below">@id/dateTextView</item>
    </style>


</resources>

Download Source Code

Download Sample APK

Help us improve by posting your suggestions and doubts in comments 🙂

Keywords:
sales app, business app, admin app, admin backend app, business sales details app design, free ui deisgn, android free ux, free app design, free business app design,