Android / ProblemSolving

Learn and Develope Android Application – Buyer and Seller System (Part – 4)

Hello Everyone !!

You must have clear idea of project and scheme . Now let’s start working on UI design. Before starting App UI Designing ,we should know basic UI components.

  1. Admin App Interface :
    1. Splash Screen:  In splash screen ,we are going to show app logo and app name.
      1. Logo : It will be Image View ,take a logo. Mostly prefer lower size and small height and width. Put in drawable/mipmap folder.
      2. App Name : It will be Text View. If you want to apply font to your app name text,then have font (*.ttf file) into assets folder. For Assets folder, right click on app module ,go to new ,then go to Folder,select assets folder. without changing anything, click finish.

Create A New Activity : Right click on app module, go to New -> go to Activity ->Select Basic Activity ->Enter Activity Name, Layout Name, Title, Check ” Launcher Activity Checkbox” if you want to view your screen as first screen, remain “Use a Fragment “, Check Package Name is entered,Target Source set as main and enter finish.

If you have two files one with activity_splashscreen.xml and content_splashscreen.xml, Don’t worry ,for now just focus on content_splashscreen.xml.

Note: Activity Name should start with capital letter  and Layout Name  should  be containing a-z,0-9 and underscore _

XML Code for Layout:

content_login.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"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context="your_package_name.SplashActivity"
    tools:showIn="@layout/activity_splash">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="123dp"
        android:layout_height="125dp"
        android:layout_marginLeft="131dp"
        android:layout_marginTop="123dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@drawable/logo"
        android:layout_marginRight="8dp"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintHorizontal_bias="0.0" />

    <TextView
        android:id="@+id/appname"
        android:textSize="25dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/app_name"
        android:layout_marginTop="26dp"
        app:layout_constraintTop_toBottomOf="@+id/imageView"
        android:layout_marginRight="8dp"
        app:layout_constraintRight_toRightOf="parent"
        android:layout_marginLeft="8dp"
        app:layout_constraintLeft_toLeftOf="parent" />
</android.support.constraint.ConstraintLayout>

Activity_SplashScreen.java Code:  In java code, we are going to add font to app name on splash screen. We will show splash screen for 3 seconds and then switch to next screen of the App. Create Login Activity without checking Launcher Activity checkbox and come back to splash Activity.

package ***your.Package.Name****;

import android.content.Intent;
import android.graphics.Typeface;
import android.os.Bundle;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.Snackbar;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.View;
import android.widget.TextView;

public class SplashActivity extends AppCompatActivity {

    Typeface typeface;
    TextView tvappname;
    Thread thread;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_splash);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        getSupportActionBar().hide(); //we don't show toolbar 

        FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)
                        .setAction("Action", null).show();
            }
        });
        fab.setVisibility(View.GONE); //we don't need floating action button now.

        tvappname=(TextView)findViewById(R.id.appname);
        typeface=Typeface.createFromAsset(getAssets(),"font.TTF");
        tvappname.setTypeface(typeface);
        thread=new Thread(new Runnable() {
            @Override
            public void run() {
                try{
                    Thread.sleep(3000);
                    Intent tologinactivity=new Intent(SplashActivity.this,LoginActivity.class);
                    startActivity(tologinactivity);
                    finish();
                }catch (InterruptedException interptexcep){
                    finish();
                }
            }
        });
        thread.start();
    }
}

Run App using Green play button or Go to Run -> Run ‘app’ . After the thread timer ends the intent statement will be executed. and splash activity will be finished and Login activity will be launched.

Next let’s move towards second Screen Login Activity,

content_login.xml:

On login screen we are going to have two input boxes called EditText View for accepting username and password. View password indicator, Forget password link, Register and SignIn Button.

Now we will use alternative method to hide/remove the floating action button from UI. Go to activity_login.xml, find the tag  and delete it.

sample tag : <android.support.design.widget.FloatingActionButton ...... />

Return to content_login.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"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context="fbasetrial.apps.shrenoid.com.myapplication.LoginActivity"
    tools:showIn="@layout/activity_login">


    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Login"
        android:textSize="25dp"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_marginTop="83dp"
        android:layout_marginLeft="162dp"
        app:layout_constraintLeft_toLeftOf="parent" />

    <EditText
        android:id="@+id/editText"
            android:layout_width="200dp"
        android:layout_height="wrap_content"
        android:ems="10"
        android:hint="Username"
        android:inputType="textPersonName"
        android:layout_marginTop="32dp"
        app:layout_constraintTop_toBottomOf="@+id/textView"
        android:layout_marginLeft="65dp"
        app:layout_constraintLeft_toLeftOf="parent"
        android:layout_marginRight="8dp"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintHorizontal_bias="0.36" />

    <EditText
        android:id="@+id/editText2"
        android:layout_width="201dp"
        android:layout_height="48dp"
        android:layout_marginTop="25dp"
        android:ems="10"
        android:hint="Password"
        android:inputType="textPassword"
        app:layout_constraintTop_toBottomOf="@+id/editText"
        android:layout_marginRight="8dp"
        app:layout_constraintRight_toRightOf="parent"
        android:layout_marginLeft="65dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintHorizontal_bias="0.363" />

    <Button
        android:id="@+id/register"
        android:background="#e2df39"
        android:layout_width="164dp"
        android:layout_height="52dp"
        android:layout_marginBottom="0dp"
        android:layout_marginLeft="16dp"
        android:text="Register"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_marginTop="8dp"
        app:layout_constraintVertical_bias="0.964"
        app:layout_constraintRight_toLeftOf="@+id/signin"
        android:layout_marginRight="8dp" />

    <Button
        android:id="@+id/signin"
        android:background="#27b608"
        android:layout_width="168dp"
        android:layout_height="55dp"
        android:layout_marginRight="16dp"
        android:text="Sign-In"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintBottom_toBottomOf="@+id/register"
        android:layout_marginBottom="0dp" />

    <TextView
        android:textColor="#e21d1d"
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Forget Password ?"
        android:layout_marginTop="20dp"
        app:layout_constraintTop_toBottomOf="@+id/editText2"
        android:layout_marginLeft="95dp"
        app:layout_constraintLeft_toLeftOf="parent" />

    <ImageView
        android:id="@+id/imageView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:srcCompat="@drawable/ic_visible"
        app:layout_constraintLeft_toRightOf="@+id/editText2"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="@+id/editText2"
        android:layout_marginTop="8dp" />
</android.support.constraint.ConstraintLayout>

 

Activity_Login.java Code: We will Accept username and password  after click  on SignIn Button. We will divert Forget password and Register to their respective screen. So just create to basic Activity_ForgetPass ,Activity_Register, MenuActivity and back to activity_login.java file :

We removed Floating action button from ui,so we need to remove below code from activity_login.java file:

FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
 fab.setOnClickListener(new View.OnClickListener() {
     @Override
     public void onClick(View view) {
         Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)
                 .setAction("Action", null).show();
     }
 });

And make following changes..

package ***Your_package_name****;

import android.content.Intent;
import android.os.Bundle;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.Snackbar;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.text.InputType;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.ImageView;
import android.widget.TextView;

public class LoginActivity extends AppCompatActivity {

    EditText etUSername,etPasswd;
    Button btnregister,btnsignin;
    ImageView imgvshowpass;
    TextView tvforgetpass;
    private int visiblecnt;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_login);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

        etUSername=(EditText)findViewById(R.id.editText);
        etPasswd=(EditText)findViewById(R.id.editText2);
        btnregister=(Button)findViewById(R.id.register);
        btnsignin=(Button)findViewById(R.id.signin);
        imgvshowpass=(ImageView)findViewById(R.id.imageView2);
        tvforgetpass=(TextView)findViewById(R.id.textView2);

        btnregister.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Intent toregister=new Intent(LoginActivity.this,RegisterActivity.class);
                startActivity(toregister);
            }
        });

        btnsignin.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Intent tosignin=new Intent(LoginActivity.this,MenuActivity.class);
                startActivity(tosignin);
            }
        });

        tvforgetpass.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Intent toforget=new Intent(LoginActivity.this,ForgetActivity.class);
                startActivity(toforget);
            }
        });


        imgvshowpass.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {

                if(visiblecnt==0){
                    imgvshowpass.setImageResource(R.drawable.ic_notvisible_24dp);
                    etPasswd.setInputType(InputType.TYPE_CLASS_TEXT);
                    visiblecnt=1;
                }else if(visiblecnt==1){
                    imgvshowpass.setImageResource(R.drawable.ic_visible);
                    etPasswd.setInputType(InputType.TYPE_CLASS_TEXT|InputType.TYPE_TEXT_VARIATION_PASSWORD);
                    visiblecnt=0;
                }
            }
        });
    }
}

Here we completed two UI Screens, Splash Screen and Login Screen. Now, In next post we are going to create forget password, menu screen, registration screen.

Concepts: 

Intents: 

Intents are objects of the android.content.Intent type. Your code can send them to the Android system defining the components you are targeting. For example, via the startActivity() method you can define that the intent should be used to start an activity.Similarlt you can start broadcast receviers, Services . An intent can contain data via a Bundle. This data can be used by the receiving component.

Views and ViewGroup:

ViewGroups: A ViewGroup is an invisible object used to contain other View and ViewGroup objects in order to organize and control the layout of a screen. ViewGroup objects are used for creating a hierarchy of View objects (see below) so that you can create more complex layouts. That said, the more simple you can keep a layout, the more performant it is.

Contraint Layout ,Relative Layout, Linear Layout are ViewGroups. Button, EditText ,TextView are Views.

If we want to use any of the view or viewgroups from in java activity code from layout linked with activity, we can find that view of viewgroup by id as: findViewById(R.id.idname_given_to_view)  it return view of that particular id.

 

One thought on “Learn and Develope Android Application – Buyer and Seller System (Part – 4)”

Leave a Reply

Your email address will not be published. Required fields are marked *