Android login form material design

It is important for any app to have good and consistent user interface. Well formed UI design not only attract users it also shows professionality of your application.This tutorial depict Android login form material design.

The android login form contains two text fields, one is for inputting username and another one is to enter password and the button at the bottom.

Android login form material design

دانلود سورس کد آموزش Android login form material design

Android login form

Involves 4 main files shown below.

MainActivity.java

On SIGNIN button click checkLogin() function is triggered in your android login form. Which validate for correct username and password. The checkLogin() method is specified in onClick attribute of button in activity_main.xml file.

If username and password is valid then proceed to next step else set error message for respective fields.

package com.guru.login;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.view.Window;
import android.view.WindowManager;
import android.widget.EditText;

import java.util.regex.Matcher;
import java.util.regex.Pattern;

public class MainActivity extends AppCompatActivity {

    private EditText emailEditText;
    private EditText passEditText;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // Address the email and password field
        emailEditText = (EditText) findViewById(R.id.username);
        passEditText = (EditText) findViewById(R.id.password);

    }

    public void checkLogin(View arg0) {

        final String email = emailEditText.getText().toString();
        if (!isValidEmail(email)) {
            //Set error message for email field
            emailEditText.setError("Invalid Email");
        }

        final String pass = passEditText.getText().toString();
        if (!isValidPassword(pass)) {
            //Set error message for password field
            passEditText.setError("Password cannot be empty");
        }

        if(isValidEmail(email) && isValidPassword(pass))
        {
            // Validation Completed
        }

    }

    // validating email id
    private boolean isValidEmail(String email) {
        String EMAIL_PATTERN = "^[_A-Za-z0-9-\\+]+(\\.[_A-Za-z0-9-]+)*@"
                + "[A-Za-z0-9-]+(\\.[A-Za-z0-9]+)*(\\.[A-Za-z]{2,})$";

        Pattern pattern = Pattern.compile(EMAIL_PATTERN);
        Matcher matcher = pattern.matcher(email);
        return matcher.matches();
    }

    // validating password
    private boolean isValidPassword(String pass) {
        if (pass != null && pass.length() >= 4) {
            return true;
        }
        return false;
    }
}

activity_main.xml

The xml file for MainActivity.java.

The all images required for android login form present in the path Your Android Project\app\src\main\res\mipmap-hdpi

Define xml file selector_xml_btn_yellow for background attribute of button. The content for xml file is specified below.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="@mipmap/back_login"
    android:padding="40dp">

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:inputType="textEmailAddress"
        android:ems="10"
        android:id="@+id/username"
        android:drawableLeft="@mipmap/account"
        android:hint="Username"
        android:layout_marginTop="170dp"
        android:textColor="#FFF"
        android:paddingLeft="0dp"
        android:drawablePadding="5dp"
        android:textColorHint="#999"/>

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:inputType="textPassword"
        android:ems="10"
        android:id="@+id/password"
        android:drawableLeft="@mipmap/lock"
        android:hint="Password"
        android:layout_marginTop="10dp"
        android:textColor="#FFF"
        android:paddingLeft="0dp"
        android:drawablePadding="5dp"
        android:textColorHint="#999"/>

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="30dp"
        android:text="SignIn"
        android:id="@+id/button"
        android:background="@drawable/selector_xml_btn_yellow"
        android:layout_gravity="center_horizontal"
        android:onClick="checkLogin"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:text="Forgot password?"
        android:id="@+id/textView3"
        android:layout_gravity="center_horizontal"
        android:layout_marginTop="40dp"
        android:textColor="#FFF"
        />

</LinearLayout>

selector_xml_btn_yellow.xml

Create this file in Your Android Project\app\src\main\res\drawable folder.

Specifies the background color, corner radius, color of text with respect to button state.

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" >
        <shape xmlns:android="http://schemas.android.com/apk/res/android">
            <corners android:radius="5dp" />
            <solid android:color="#D5AA00" />
        </shape>
    </item>
    <item >
        <shape xmlns:android="http://schemas.android.com/apk/res/android">
            <corners android:radius="5dp" />
            <solid android:color="#FFCC00" />
        </shape>
    </item>
</selector>

styles.xml

Location: Your Android Project\app\src\main\res\values\styles.xml

Specify AppTheme as Theme.AppCompat.Light.NoActionBar

<resources>

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

</resources>

Android login form material design

Chrome Custom Tabs Android Example

آموزش ایجاد کاستوم تب اندروید

Define custom color for chrome tabs(toolbar) and transition for chrome to meet your UI guideline when launching chrome browser from your app.

You may have situation where you need to launch webpage(ex: help page) from your app but launching browser having different aesthetic may degrade your UI(look and feel). So the better approach is to customize your browser according to your guideline. In this case Chrome Custom Tabs comes into picture.

Chrome tabs customization using CustomTabsIntent will let you do many thing like Defining overflow menu, action button, animation etc. In this example you likely to find, how to apply custom animation and change toolbar/actionbar color of chrome

Chrome Custom Tabs Android Example

دانلود سورس آموزش ایجاد کاستوم تب اندروید

Chrome Custom Tabs Implementation

Let’s see the files and methods require to build our Chrome Custom Tabs.

Chrome Custom Tabs Android Example

Adding Dependencies

Open your gradle.build(Module:app) file and add below highlighted code under dependencies.

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    testCompile 'junit:junit:4.12'
    compile 'com.android.support:appcompat-v7:23.4.0'
    compile 'com.android.support:customtabs:23.4.0'
}

Note: You may need to replace the version of customtabs dependency as your appcompat version, in my case version is 23.4.0.

Defining Custom Transition for chrome

The below files should be placed under res→anim resource directory. If you don’t find any anim folder inside res directory, then add it by Right clicking on res directory(Right click on res→New→Android Resource Directory).

Entry Transition

The below two file defines entry transition for Activity and chrome browser(Activity slides from on-screen to off-screen and at the same time chrome browser slides from off-screen to on-screen).

left_to_right_start.xml

<?xml version="1.0" encoding="utf-8"?>

<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate android:fromXDelta="100%"
        android:fromYDelta="0%"
        android:toXDelta="0%"
        android:toYDelta="0%"
        android:duration="500"/>
</set>

right_to_left_start.xml

<?xml version="1.0" encoding="utf-8"?>

<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:duration="500"
        android:fromXDelta="0%"
        android:fromYDelta="0%"
        android:toXDelta="-100%"
        android:toYDelta="0%" />
</set>

Exit Transition

The below two file defines exit transition for Activity and chrome browser(Activity slides from off-screen to on-screen and at the same time browser slides from on-screen to off-screen).

left_to_right_end.xml

<?xml version="1.0" encoding="utf-8"?>

<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate android:fromXDelta="0%"
        android:fromYDelta="0%"
        android:toXDelta="100%"
        android:toYDelta="0%"
        android:duration="500"/>
</set>

right_to_left_end.xml

<?xml version="1.0" encoding="utf-8"?>

<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:duration="500"
        android:fromXDelta="-100%"
        android:fromYDelta="0%"
        android:toXDelta="0%"
        android:toYDelta="0%" />
</set>

Creating Activity and it’s layout file

Let’s create activity MainActivity.java and i’ts layout file activity_main.xml.

MainActivity.java

Code on onCreate() method will do following jobs.

1. Create CustomTabsIntent and set start and exit animation from above xml files using CustomTabsIntent.builder().
2. Define chrome Toolbar color same as your App’s toolbar color.

Finally, on button click launch chrome with applied configuration.

File Location: App→java→Your package

package com.androidcss.chromecustomtabs;

import android.net.Uri;
import android.support.customtabs.CustomTabsIntent;
import android.support.v4.content.ContextCompat;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;

public class MainActivity extends AppCompatActivity {

    // website to be visited
    static final String SITE_URL = "http://androidcss.com/";

    // Define variables for custom tabs and its builder
    CustomTabsIntent customTabsIntent;
    CustomTabsIntent.Builder intentBuilder;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // Initialize intentBuilder
        intentBuilder = new CustomTabsIntent.Builder();

        // Set toolbar(tab) color of your chrome browser
        intentBuilder.setToolbarColor(ContextCompat.getColor(this, R.color.colorPrimary));

        // Define entry and exit animation
        intentBuilder.setExitAnimations(this, R.anim.right_to_left_end, R.anim.left_to_right_end);
        intentBuilder.setStartAnimations(this, R.anim.left_to_right_start, R.anim.right_to_left_start);
        intentBuilder.setSecondaryToolbarColor(ContextCompat.getColor(this, R.color.colorPrimary));

        // build it by setting up all
        customTabsIntent = intentBuilder.build();

    }

    // triggers when button clicked
    public void ButtonClicked(View arg0) {

        // go to website defined above
        customTabsIntent.launchUrl(this, Uri.parse(SITE_URL));

    }

}

activity_main.xml

Layout file for MainActivity.java.

File Location: App→res→values

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
    android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity">
    
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Go To androidcss.com"
        android:id="@+id/button"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="41dp"
        android:onClick="ButtonClicked"/>
    
</RelativeLayout>

Android Navigation Drawer Menu on top of Actionbar / Toolbar

در این آموزش نحوه Navigation Drawer برای منوهای اندروید رو آموزش میدیم.

Apps like gmail, you see when click on menu icon, a nice Navigation Drawer slides from left on top of Actionbar. Let’s see example layout.

The basic idea behind android navigation drawer on top of action bar is creating custom Actionbar and treat it as child of our main layout. Finally, build Navigation Drawer Layout on top of that. Browse below for project files.

آموزش Navigation Drawer اندروید

دانلود سورس آموزش

MainActivity.java

Setup custom toolbar and navigation drawer layout.

File Location: App→java→Your package

package com.androidcss.drawerexample;

import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBarDrawerToggle;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.Toolbar;
import android.view.View;

public class MainActivity extends AppCompatActivity {

    public static DrawerLayout mDrawerLayout;
    private Toolbar mToolbar;

    private ActionBarDrawerToggle mDrawerToggle;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // Setup Actionbar / Toolbar
        mToolbar = (Toolbar) findViewById(R.id.action_bar);
        setSupportActionBar(mToolbar);
        getSupportActionBar().setDisplayShowHomeEnabled(true);
        getSupportActionBar().setLogo(R.mipmap.ic_launcher);
        getSupportActionBar().setDisplayShowTitleEnabled(false);

        // Setup Navigation Drawer Layout
        mDrawerLayout=(DrawerLayout) findViewById(R.id.drawer_layout);
        mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, mToolbar, R.string.drawer_open, R.string.drawer_close) {

            @Override
            public void onDrawerOpened(View drawerView) {
                super.onDrawerOpened(drawerView);
            }

            @Override
            public void onDrawerClosed(View drawerView) {
                super.onDrawerClosed(drawerView);
            }
        };
        mDrawerLayout.setDrawerListener(mDrawerToggle);

        mDrawerLayout.post(new Runnable() {
            @Override
            public void run() {
                mDrawerToggle.syncState();
            }
        });
    }
}

Related files for MainActivity.java

Here are the files which participates in MainActivity.java

activity_main.xml

XML layout file for MainActivity.java

File location: App→res→Layout.

<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">


    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <include
            android:id="@+id/action_bar"
            layout="@layout/action_bar" />

    </RelativeLayout>

    <fragment
        android:id="@+id/fragment_navigation_drawer"
        android:name="com.androidcss.drawerexample.FragmentNavigationDrawer"
        android:layout_width="280dp"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:layout="@layout/fragment_navigation_drawer"
        tools:layout="@layout/fragment_navigation_drawer" />

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

action_bar.xml

This xml layout file contains custom toolbar which is supported in support library version 7 and we are included this file in activity_main.xml.

File Location: App→res→Layout.

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar 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="wrap_content"
    android:background="@color/colorPrimary"/>

strings.xml

Setting Up Drawer layout requires two string constants, specify them in your strings.xml. The code marked below.

File location: App→res→Values.

<resources>
    <string name="app_name">Drawer Example</string>
    <string name="drawer_open">Drawer Opened</string>
    <string name="drawer_close">Drawer Closed</string>
</resources>

آموزش Navigation Drawer اندروید

styles.xml

When i run my app, the menu icon(3 lines bar) is shown in grey color and i thought which does not look good so i changed it to white by adding following lines of marked code to my styles.xml file.

Make sure you are chosen the theme which as no action bar, i highlighted the theme below.

File location: App→res→Values.

<resources>

    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
        <item name="drawerArrowStyle">@style/BarStyle</item>
    </style>

    <style name="BarStyle" parent="Widget.AppCompat.DrawerArrowToggle">
        <item name="color">@android:color/white</item>
    </style>

</resources>

FragmentNavigationDrawer.java

Create fragment and interpret layout.

File Location: App→java→Your package

package com.androidcss.drawerexample;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class FragmentNavigationDrawer extends Fragment {

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

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        return inflater.inflate(R.layout.fragment_navigation_drawer, container, false);
    }
    
}

Related Files for FragmentNavigationDrawer.java

Here are the files which participates in FragmentNavigationDrawer.java

fragment_navigation_drawer.xml

XML design layout file for FragmentNavigationDrawer.java

While designing this layout i have not considered any material design guidelines, this is a tutorial on how to make drawer menu on top of actionbar, i just considered having a background with menu using LinearLayout. I hope, you consider material design guidelines from google and use ListView or RecyclerView for large menu.

File location: App→res→Layout.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/white"
    android:orientation="vertical">

    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fillViewport="true">

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

            <LinearLayout
                android:id="@+id/topBlock"
                android:layout_width="match_parent"
                android:layout_height="140dp"
                android:layout_marginBottom="10dp"
                android:background="@drawable/background"
                android:orientation="vertical"
                android:paddingBottom="20dp"
                android:paddingLeft="10dp"
                android:paddingRight="10dp"
                android:paddingTop="20dp">

            </LinearLayout>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal"
                android:padding="16dp">

                <ImageView
                    android:id="@+id/listIcon"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerVertical="true"
                    android:layout_marginRight="16dp"
                    android:src="@mipmap/ic_marine" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerVertical="true"
                    android:layout_gravity="center_vertical"
                    android:text="Android Dev"
                    android:textAppearance="?android:attr/textAppearanceMedium"
                    android:textColor="#666" />
            </LinearLayout>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal"
                android:padding="16dp">

                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerVertical="true"
                    android:layout_marginRight="16dp"
                    android:src="@mipmap/ic_backwater" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerVertical="true"
                    android:layout_gravity="center_vertical"
                    android:text="PHP and Mysql"
                    android:textAppearance="?android:attr/textAppearanceMedium"
                    android:textColor="#666" />
            </LinearLayout>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal"
                android:padding="16dp">

                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerVertical="true"
                    android:layout_marginRight="16dp"
                    android:src="@mipmap/ic_shellfish" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerVertical="true"
                    android:layout_gravity="center_vertical"
                    android:text="HTML and CSS"
                    android:textAppearance="?android:attr/textAppearanceMedium"
                    android:textColor="#666" />
            </LinearLayout>

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:orientation="horizontal"
                android:padding="16dp">

                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerVertical="true"
                    android:layout_marginRight="16dp"
                    android:src="@mipmap/ic_dryfish" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerVertical="true"
                    android:layout_gravity="center_vertical"
                    android:text="AndEngine Dev"
                    android:textAppearance="?android:attr/textAppearanceMedium"
                    android:textColor="#666" />
            </LinearLayout>

        </LinearLayout>

    </ScrollView>

</LinearLayout>

background.xml

On our drawer fragment you see a nice AndroidCSS text and logo right? Yes, it is a image and SettingUp background image for LinearLayout in fragment_navigation_drawer.xml is done by this XML file.

File location: App→res→drawable

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:bottom="1dp">
    <shape android:shape="rectangle">
        <stroke android:width="1dp" android:color="#DDD" />
        <solid android:color="#EEE" />
    </shape>
</item>
    <item >
    <bitmap
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:src="@drawable/logo"
        android:tileMode="disabled"
        android:dither="true"/>
    </item>
</layer-list>

در این آموزش نحوه نمایش اطلاعات JSON سرور در RecyclerView رو مرور میکنیم.

This tutorial demonstrates how to do Android JSON Parsing and display with RecyclerView or ListView. The data may be from JSON file or PHP.

To fetch JSON data in android i used java’s builtin class called AsyncTask and HttpUrlConnection and Android JSON Parsing will be done by using JSONArray and JSONObject class and finally, to display data i used RecyclerView(Supported in android suport library v7). Let’s get started.

Download Code From Github

Android JSON Parsing and display with RecyclerView

JSON

The below is an example of fish data i’m using which has some basic info like image url, fish name, category, size and price.

example.json

[{"fish_img":"1.jpg","fish_name":"Indian Mackerel","cat_name":"Marine Fish","size_name":"Medium","price":"100"},
{"fish_img":"2.jpg","fish_name":"Manthal Repti","cat_name":"Marine Fish","size_name":"Small","price":"200"},
{"fish_img":"3.jpg","fish_name":"Baby Sole Fish","cat_name":"Marine Fish","size_name":"Small","price":"600"},
{"fish_img":"4.jpg","fish_name":"Silver Pomfret","cat_name":"Marine Fish","size_name":"Large","price":"300"},
{"fish_img":"5.jpg","fish_name":"Squid","cat_name":"Shell Fish","size_name":"Small","price":"800"},
{"fish_img":"6.jpg","fish_name":"Clam Meat","cat_name":"Shell Fish","size_name":"Small","price":"350"},
{"fish_img":"7.jpg","fish_name":"Indian Prawns","cat_name":"Shell Fish","size_name":"Medium","price":"270"},
{"fish_img":"8.jpg","fish_name":"Mud Crab","cat_name":"Shell Fish","size_name":"Medium","price":"490"},
{"fish_img":"9.jpg","fish_name":"Grey Mullet","cat_name":"Backwater Fish","size_name":"Small","price":"670"},
{"fish_img":"10.jpg","fish_name":"Baasa","cat_name":"Backwater Fish","size_name":"Large","price":"230"},
{"fish_img":"11.jpg","fish_name":"Pearl Spot","cat_name":"Backwater Fish","size_name":"Small","price":"340"},
{"fish_img":"12.jpg","fish_name":"Anchovy","cat_name":"Marine Fish","size_name":"Small","price":"130"},
{"fish_img":"13.jpg","fish_name":"Sole Fish","cat_name":"Marine Fish","size_name":"Medium","price":"250"},
{"fish_img":"14.jpg","fish_name":"Silver Croaker","cat_name":"Marine Fish","size_name":"Small","price":"220"}]

Android

The files and steps used in this tutorial as follow.

Adding Dependencies

Open your build.gradle(Module: app) file and add the following dependencies highlighted below and sync your project gradle.

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    testCompile 'junit:junit:4.12'
    compile 'com.android.support:appcompat-v7:23.3.0'
    compile 'com.android.support:recyclerview-v7:23.3.0'
    compile 'com.github.bumptech.glide:glide:3.5.2'
}

Note: You may need to replace the version of dependency files added except glide dependency, in my case version is 23.3.0. You can find your build tool version on top of same page.

MainActivity.java: Fetch JSON and Android JSON Parsing

The step by step procedure as follow

1. Immediate after creation of activity an call to AsyncFetch class is made to carry out Asynchronous task.
2. onPreExecute(), invoked on the UI thread before the task is executed. Here We are displaying loading message.
3. doInBackground(Params…), invoked on the background thread immediately after
   onPreExecute() finishes executing. The recieving of data from JSON file using HttpURLConnection class has done in this function.
4. onPostExecute(Result), invoked on the UI thread after the background computation finishes. Here we are extracting data recieved from JSON file and Android JSON Parsing will be done.
5. Finally, the data is passed to adapter to display it on RecyclerView.

package com.androidcss.jsonexample;

import android.app.ProgressDialog;
import android.os.AsyncTask;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.widget.Toast;
import org.json.JSONArray;
import org.json.JSONException;
import org.json.JSONObject;
import java.io.BufferedReader;
import java.io.IOException;
import java.io.InputStream;
import java.io.InputStreamReader;
import java.net.HttpURLConnection;
import java.net.MalformedURLException;
import java.net.URL;
import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {

    // CONNECTION_TIMEOUT and READ_TIMEOUT are in milliseconds
    public static final int CONNECTION_TIMEOUT = 10000;
    public static final int READ_TIMEOUT = 15000;
    private RecyclerView mRVFishPrice;
    private AdapterFish mAdapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //Make call to AsyncTask
        new AsyncFetch().execute();
    }

    private class AsyncFetch extends AsyncTask<String, String, String> {
        ProgressDialog pdLoading = new ProgressDialog(MainActivity.this);
        HttpURLConnection conn;
        URL url = null;

        @Override
        protected void onPreExecute() {
            super.onPreExecute();

            //this method will be running on UI thread
            pdLoading.setMessage("\tLoading...");
            pdLoading.setCancelable(false);
            pdLoading.show();

        }

        @Override
        protected String doInBackground(String... params) {
            try {

                // Enter URL address where your json file resides
                // Even you can make call to php file which returns json data
                url = new URL("http://192.168.1.7/test/example.json");

            } catch (MalformedURLException e) {
                // TODO Auto-generated catch block
                e.printStackTrace();
                return e.toString();
            }
            try {

                // Setup HttpURLConnection class to send and receive data from php and mysql
                conn = (HttpURLConnection) url.openConnection();
                conn.setReadTimeout(READ_TIMEOUT);
                conn.setConnectTimeout(CONNECTION_TIMEOUT);
                conn.setRequestMethod("GET");

                // setDoOutput to true as we recieve data from json file
                conn.setDoOutput(true);

            } catch (IOException e1) {
                // TODO Auto-generated catch block
                e1.printStackTrace();
                return e1.toString();
            }

            try {

                int response_code = conn.getResponseCode();

                // Check if successful connection made
                if (response_code == HttpURLConnection.HTTP_OK) {

                    // Read data sent from server
                    InputStream input = conn.getInputStream();
                    BufferedReader reader = new BufferedReader(new InputStreamReader(input));
                    StringBuilder result = new StringBuilder();
                    String line;

                    while ((line = reader.readLine()) != null) {
                        result.append(line);
                    }

                    // Pass data to onPostExecute method
                    return (result.toString());

                } else {

                    return ("unsuccessful");
                }

            } catch (IOException e) {
                e.printStackTrace();
                return e.toString();
            } finally {
                conn.disconnect();
            }


        }

        @Override
        protected void onPostExecute(String result) {

            //this method will be running on UI thread

            pdLoading.dismiss();
            List<DataFish> data=new ArrayList<>();

            pdLoading.dismiss();
            try {

                JSONArray jArray = new JSONArray(result);

                // Extract data from json and store into ArrayList as class objects
                for(int i=0;i<jArray.length();i++){
                    JSONObject json_data = jArray.getJSONObject(i);
                    DataFish fishData = new DataFish();
                    fishData.fishImage= json_data.getString("fish_img");
                    fishData.fishName= json_data.getString("fish_name");
                    fishData.catName= json_data.getString("cat_name");
                    fishData.sizeName= json_data.getString("size_name");
                    fishData.price= json_data.getInt("price");
                    data.add(fishData);
                }

                // Setup and Handover data to recyclerview
                mRVFishPrice = (RecyclerView)findViewById(R.id.fishPriceList);
                mAdapter = new AdapterFish(MainActivity.this, data);
                mRVFishPrice.setAdapter(mAdapter);
                mRVFishPrice.setLayoutManager(new LinearLayoutManager(MainActivity.this));

            } catch (JSONException e) {
                Toast.makeText(MainActivity.this, e.toString(), Toast.LENGTH_LONG).show();
            }

        }

    }
}

DataFish.java

package com.androidcss.jsonexample;

public class DataFish {

    public String fishImage;
    public String fishName;
    public String catName;
    public String sizeName;
    public int price;
}

AdapterFish.java

Here Binding data to views and recycling of views will be done when user scroll through RecyclerView.

package com.androidcss.jsonexample;

import android.content.Context;
import android.support.v4.content.ContextCompat;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;
import com.bumptech.glide.Glide;
import java.util.Collections;
import java.util.List;

public class AdapterFish extends RecyclerView.Adapter<RecyclerView.ViewHolder> {

    private Context context;
    private LayoutInflater inflater;
    List<DataFish> data= Collections.emptyList();
    DataFish current;
    int currentPos=0;

    // create constructor to innitilize context and data sent from MainActivity
    public AdapterFish(Context context, List<DataFish> data){
        this.context=context;
        inflater= LayoutInflater.from(context);
        this.data=data;
    }

    // Inflate the layout when viewholder created
    @Override
    public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View view=inflater.inflate(R.layout.container_fish, parent,false);
        MyHolder holder=new MyHolder(view);
        return holder;
    }

    // Bind data
    @Override
    public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {

        // Get current position of item in recyclerview to bind data and assign values from list
        MyHolder myHolder= (MyHolder) holder;
        DataFish current=data.get(position);
        myHolder.textFishName.setText(current.fishName);
        myHolder.textSize.setText("Size: " + current.sizeName);
        myHolder.textType.setText("Category: " + current.catName);
        myHolder.textPrice.setText("Rs. " + current.price + "\\Kg");
        myHolder.textPrice.setTextColor(ContextCompat.getColor(context, R.color.colorAccent));

        // load image into imageview using glide
        Glide.with(context).load("http://192.168.1.7/test/images/" + current.fishImage)
                .placeholder(R.drawable.ic_img_error)
                .error(R.drawable.ic_img_error)
                .into(myHolder.ivFish);

    }

    // return total item from List
    @Override
    public int getItemCount() {
        return data.size();
    }


    class MyHolder extends RecyclerView.ViewHolder{

        TextView textFishName;
        ImageView ivFish;
        TextView textSize;
        TextView textType;
        TextView textPrice;

        // create constructor to get widget reference
        public MyHolder(View itemView) {
            super(itemView);
            textFishName= (TextView) itemView.findViewById(R.id.textFishName);
            ivFish= (ImageView) itemView.findViewById(R.id.ivFish);
            textSize = (TextView) itemView.findViewById(R.id.textSize);
            textType = (TextView) itemView.findViewById(R.id.textType);
            textPrice = (TextView) itemView.findViewById(R.id.textPrice);
        }

    }

}

activity_main.xml

The xml file for MainActivity.java

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    <android.support.v7.widget.RecyclerView
        android:id="@+id/fishPriceList"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:paddingTop="10dp"
        android:layout_weight="1"
        />
</LinearLayout>

container_fish.xml

The xml file for AdapterFish.java

<?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"
    android:clickable="true"
    android:orientation="horizontal"
    android:padding="10dp">

    <ImageView
        android:layout_width="60dp"
        android:scaleType="fitXY"
        android:layout_height="40dp"
        android:id="@+id/ivFish"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:text="fish name"
        android:id="@+id/textFishName"
        android:layout_marginLeft="5dp"
        android:layout_toRightOf="@id/ivFish"
        android:layout_toLeftOf="@+id/textPrice"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceSmall"
        android:text="price"
        android:id="@+id/textPrice"
        android:textColor="@color/colorAccent"
        android:layout_alignParentRight="true"
        android:layout_marginLeft="5dp"
        android:layout_marginRight="5dp"
        />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceSmall"
        android:text="Small Text"
        android:id="@+id/textSize"
        android:layout_marginLeft="5dp"
        android:layout_below="@id/textFishName"
        android:layout_toRightOf="@id/ivFish"
        android:layout_toEndOf="@id/ivFish"
        android:textColor="#666"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceSmall"
        android:text="sd"
        android:id="@+id/textType"
        android:layout_marginLeft="5dp"
        android:layout_below="@id/textSize"
        android:layout_toRightOf="@id/ivFish"
        android:textColor="#666"/>

</RelativeLayout>

AndroidManifest.xml

Don’t forget to add uses-permission for internet to your AndroidManifest.xml file, otherwise it will give access denied error.

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.androidcss.jsonexample" >
    <uses-permission android:name="android.permission.INTERNET"/>
    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:supportsRtl="true"
        android:theme="@style/AppTheme" >
        <activity android:name=".MainActivity" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

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

Android JSON Parsing and display with RecyclerView

Android Pull to Refresh RecyclerView with JSON PHP

در این آموزش نحوه swipe کردن RecyclerView با استفاده از اطلاعات json رو مرور میکنیم.

Pull down to fetch fresh data from PHP or JSON file into RecyclerView using Android Swipe Refresh Layout and AsyncTask.

When you swipe down to screen, you likely to see rounded button with refresh icon spinning indicating data is loading on background. In android it’s easy to implement that android pull to refresh layout. Let’s see how to do that.

از اینجا میتونین قطعه کد این آموزش رو دانلود کنین

Android Pull to Refresh RecyclerView with JSON PHP

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <android.support.v4.widget.SwipeRefreshLayout
        android:id="@+id/swifeRefresh"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/fishPriceList"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        />
    </android.support.v4.widget.SwipeRefreshLayout>

</LinearLayout>

MainActivity.java

Define the variable for SwipeRefreshLayout view on top of the class.

SwipeRefreshLayout mSwipeRefreshLayout;

Copy the below highlighted code into your oncreate() method of MainActivity.java class. Here we are getting reference to SwipeRefreshLayout widget and setting listener to listen for swipe down refresh and when user swipe down to screen, call AsyncTask to fetch fresh data.

@Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        // Swipe Refresh Layout
        mSwipeRefreshLayout = (SwipeRefreshLayout)findViewById(R.id.swifeRefresh);
        mSwipeRefreshLayout.setOnRefreshListener(new SwipeRefreshLayout.OnRefreshListener() {
            @Override
            public void onRefresh() {
                new AsyncFetch().execute();
            }
        });
        //Make call to AsyncTask
        new AsyncFetch().execute();
    }

We have made Swipe layout visible when user swipes the screen. It continues to visible even after data loaded so we need to hide the layout after our data loaded from server. At the end of your onPostExecute(String result) method add below code to hide SwipeRefreshLayout.

mSwipeRefreshLayout.setRefreshing(false);

Finally, to test your application remove some rows from json file or add some rows it. Now, in your phone, swipe vertically down to see updated data.

Android Pull to Refresh RecyclerView with JSON PHP

دانلود سورس ارتباط با دیتابیس اندروید Android Recycler View using Retrofit & Glide

This is an Implementation of RecyclerView using Retrofit & Glide to Create a simple Movie List with an Asp.Net(C#), Web Api and Azure Blob Storage Backend.

Find the source code on Github”
https://github.com/lambda2016/Retrofit-RecyclerVew

Api: http://orionadmin.azurewebsites.net/api/movies

دانلود سورس ارتباط با دیتابیس اندروید Android Recycler View using Retrofit & Glide

دانلود سورس اپ آزمون اندروید Android Online Quiz with Php and MYSQL

This is android quiz application that makes use of remote mysql database to store all information and questions related to this quiz.

It supports the following features

1. User Registration
2. User Login
3. Quiz Categories
4. Quiz Subcategory
5. User Profile Page
6. Quiz Score Board
7. Quiz Settings
8. Quiz Question
9. Quiz Timer Support
10. Material Design
11. Remote Online Database
12. Online web based admin panel
13. Clean and beautiful code
14. Settings
15. Rate App

دانلود سورس اپ آزمون اندروید Android Online Quiz with Php and MYSQL

دانلود سورس اپ فروشگاهی اندروید Android E-Commerce Shopping App

Android Ecommerce Shopping App with Pay Pal Integration.

You can also look at the tutorial on how you can create your own android shopping app and integrate Paypal as a payment method.

The complete source code for this tutorial is attached below.

The Premium version (Paid) of this android ecommerce app has the following features listed below

1. Material Design
2. Product Categories
3. Detailed Product Page
4. Best Selling Product
5. Products on Promotion
6. Notification
7. Order History
8. Favorite Products
9. Store Information
10. Settings
11. Navigation Drawer
12. User Profile
13. Shopping Cart
14. Tax
15. Shipping Cost
16. Discount
17. Pay on Delivery
18. Pay Pal
19. Stripe Payment Gateway (Credit Card)

دانلود سورس اپ فروشگاهی اندروید Android E-Commerce Shopping App

دانلود از گوگل پلی Google Play APK Downloader

100% responsive. Built with material skinned Bootstrap.
Visitors can paste Google Play Store URL or app id for download.
Uses cURL extansion. So fast.
Visitors can download with direct link or QR Code.
Very simple installation.
Fully documented.

دانلود از گوگل پلی Google Play APK Downloader