Android Apps Development Basic

©W3Engineers2018
Android Apps
Development
Md. Moniruzzaman (Monir)
Sr. Software Engineer
06-09-2018

Android apps development
Agenda
 Overview of the Android App component(Activities, Services,
Broadcast receivers, Content providers)
 Android Platform Architecture
 Activity
 Fragment
 Intent & Filters
 Context
 Android Layout

Agenda
 Toolbar
 Card view
 Navigation Drawer
 Android animation
 Android Resource management
 View pager
 Recycler View
 Adapter

Objectives
After attending this session you are expected to be able to
 Create a android project
 Activity/Fragment life cycle knowledge
 UI Design
 Display category-wise/section-wise list of data
 Android animation creation
 Fragment management

Android App component
App components are the essential building blocks of an Android app. Each component is an
entry point through which the system or a user can enter your app. Some components
depend on others.
There are four different types of app components:
• Activities.
• Services.
• Broadcast receivers.
• Content providers.
Each type serves a distinct purpose and has a distinct lifecycle that defines how the
component is created and destroyed.

Android Platform Architecture
Android is an open source, Linux-based software stack created for a wide array
of devices and form factors. The following diagram shows the major components
of the Android platform.

Anatomy of Android Application

Activities
Activities are one of the fundamental building blocks of apps on the Android
platform. Skillfully managing activities allows you to ensure that, for example:
• Orientation changes take place smoothly without disrupting the user
experience.
• User data is not lost during activity transitions.
• The system kills processes when it's appropriate to do so.

Activities
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}
}

The Activity Lifecycle
As a user navigates through, the Activity instances in your app transition through
different states in their lifecycle. The Activity class provides a number of callbacks
that allow the activity to know that a state has changed.
Activity-lifecycle concepts: To navigate transitions between stages of the
activity lifecycle, the Activity class provides a core set of six
callbacks: onCreate(), onStart(), onResume(), onPause(), onStop(),
and onDestroy().
continue…

Activity-lifecycle concepts

AndroidManifest.xml
An application can have one or more activities without any restriction. Every
activity you define for your application must be declared in
your AndroidManifest.xml file and the main activity for your app must be
declared in the manifest with an <intent-filter> that includes the MAIN action and
LAUNCHER category .
If either the MAIN action or LAUNCHER category are not declared for one of your
activities, then your app icon will not appear in the Home screen's list of apps.

AndroidManifest.xml
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.example.tutorialspoint7.myapplication">
<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>

Fragments
A Fragment is a piece of an activity which enable more modular activity design.
It will not be wrong if we say, a fragment is a kind of sub-activity.
You create fragments by extending Fragment class and You can insert a
fragment into your activity layout by declaring the fragment in the activity's layout
file, as a <fragment> element.

Fragment Life Cycle

Adding a Fragment to an Activity
There are two ways you can add a fragment to the activity layout:
• Declare the fragment inside the activity's layout file:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent">
<fragment android:name="com.example.news.ArticleListFragment"
android:id="@+id/list"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="match_parent" />
<fragment android:name="com.example.news.ArticleReaderFragment"
android:id="@+id/viewer"
android:layout_weight="2"
</LinearLayout>

Adding a Fragment to an Activity
● Or, programmatically add the fragment to an existing ViewGroup:
FragmentManager fragmentManager = getSupportFragmentManager();
FragmentTransaction fragmentTransaction =
fragmentManager.beginTransaction();
You can then add a fragment using the add() method, specifying the fragment to add and the view in
which to insert it. For example:
ExampleFragment fragment = new ExampleFragment();
fragmentTransaction.add(R.id.fragment_container, fragment);
fragmentTransaction.commit();
Note: To replace existing fragment : - fragmentTransaction.replace(R.id.fragment_container, fragment);

Android-Intents & Filters
An Android Intent is an abstract description of an operation to be performed. It can be used
with startActivity to launch an Activity, broadcastIntent to send it to any interested
BroadcastReceiver components, and startService(Intent) or bindService(Intent,
ServiceConnection, int) to communicate with a background Service.
Types of Intents:
There are following two types of intents supported by Android

Intents
● Explicit Intents
// Explicit Intent by specifying its class name
Intent i = new Intent(FirstActivity.this, SecondActivity.class);
// Starts TargetActivity
startActivity(i);
● Implicit Intents
Intent read1=new Intent();
read1.setAction(android.content.Intent.ACTION_VIEW);
read1.setData(ContactsContract.Contacts.CONTENT_URI);
startActivity(read1);

Context
You can get the context by invoking getApplicationContext(), getContext(), getBaseContext(), or this(
when in a class that extends from Context, such as the Application, Activity, Service and IntentService
classes)
Typical uses of context:
Creating new objects: Creating new views, adapters, listeners:
TextView tv = new TextView(getContext()); ListAdapter adapter = new
SimpleCursorAdapter(getApplicationContext(), ...);
Accessing components implicitly: Regarding content providers, broadcasts, intent
getApplicationContext().getContentResolver().query(uri, ...);

Android Layout
A layout defines the visual structure for a user interface, such as the UI for
an activity or app widget. You can declare a layout in two ways:
• Declare UI elements in XML. Android provides a straightforward XML
vocabulary that corresponds to the View classes and subclasses, such as
those for widgets and layouts.
• Instantiate layout elements at runtime. Your application can create View
and ViewGroup objects (and manipulate their properties) programmatically.

Layouts Types
There are different view layouts in an android mobile application. The six different
layouts are:
1. Linear Layout
2. Relative Layout
3. Table Layout
4. Frame Layout
5. Coordinator Layout
6. Constraint Layout

Layout Attributes
● android:id -- This is the ID which uniquely identifies the view.
● android:layout_width -- This is the width of the layout.
● android:layout_height -- This is the height of the layout
● android:layout_marginTop --This is the extra space on the top side of the
layout.
● android:layout_marginBottom --This is the extra space on the bottom side
of the layout.
● android:layout_marginLeft --This is the extra space on the left side of the
layout.
● android:layout_marginRight -- This is the extra space on the right side of
the layout.

Layout Attributes
● android:layout_gravity --This specifies how child Views are positioned.
● android:layout_weight -- This specifies how much of the extra space in the
layout should be allocated to the View
● android:layout_x -- This specifies the x-coordinate of the layout.
● android:layout_y --This specifies the y-coordinate of the layout.
● android:paddingLeft --This is the left padding filled for the layout.
● android:paddingRight --This is the right padding filled for the layout.
● android:paddingTop -- This is the top padding filled for the layout.
● android:paddingBottom -- This is the bottom padding filled for the layout.

Layout Attributes
You can specify width and height with exact measurements like dp (Density-
independent Pixels), sp ( Scale-independent Pixels), pt ( Points which is 1/72 of
an inch), px( Pixels), mm ( Millimeters) and finally in (inches).) but more often,
you will use one of these constants to set the width or height −
● android:layout_width=wrap_content tells your view to size itself to the
dimensions required by its content.
● android:layout_width=fill_parent tells your view to become as big as its
parent view.

ConstraintLayout
To use ConstraintLayout in your project, proceed as follows:
Ensure you have the maven.google.com repository declared in your module-levelbuild.gradle file:
repositories {
maven {
url 'https://maven.google.com'
}
}
Add the library as a dependency in the same build.gradle file:
dependencies {
compile 'com.android.support.constraint:constraint-layout:1.0.2'
}
In the toolbar or sync notification, click Sync Project with Gradle Files.
Now you're ready to build your layout with ConstraintLayout.

ConstraintLayout
Figure : The Attributes window includes controls for 1 size ratio, 2 delete
constraint, 3 height/width mode, 4margins, and 5 constraint bias.

Toolbar
<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>
</style>
</resources>
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:background="@color/colorPrimary" />

Toolbar
@Override
//getting the toolbar
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
//setting the title
toolbar.setTitle("My Toolbar");
//placing toolbar in place of actionbar
setSupportActionBar(toolbar);
}

Setting up a Menu on the Toolbar
Creating a Menu:
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="@+id/menuAbout"
android:title="About" />
<item
android:id="@+id/menuSettings"
android:title="Settings" />
<item
android:id="@+id/menuLogout"
android:title="Logout" />
</menu>

Setting up a Menu on the Toolbar
@Override
public boolean onCreateOptionsMenu(Menu menu) {
MenuInflater menuInflater = getMenuInflater();
menuInflater.inflate(R.menu.menu, menu);
return true;
}

Handling Menu Clicks
@Override
public boolean onOptionsItemSelected(MenuItem item) {
switch(item.getItemId()){
case R.id.menuAbout:
Toast.makeText(this, "You clicked about", Toast.LENGTH_SHORT).show();
break;
case R.id.menuSettings:
Toast.makeText(this, "You clicked settings", Toast.LENGTH_SHORT).show();
break;
case R.id.menuLogout:
Toast.makeText(this, "You clicked logout", Toast.LENGTH_SHORT).show();
break;
}
return true;
}

Navigation Drawer
● The navigation drawer is a UI panel that shows your app's main navigation
menu. It is hidden when not in use, but appears when the user swipes a
finger from the left edge of the screen:

Add a drawer to into layout

<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/drawer_layout"
android:layout_height="match_parent"
android:fitsSystemWindows="true">

<FrameLayout
android:id="@+id/content_frame"

Add a drawer to into layout

<android.support.design.widget.NavigationView
android:id="@+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true“
app:menu="@menu/drawer_view"
app:headerLayout="@layout/nav_header" />
</android.support.v4.widget.DrawerLayout>

Create the menu resource
Create the menu resource with the corresponding file name. For example, at res/menu/drawer_view.xml:
<menu xmlns:android="http://schemas.android.com/apk/res/android" >
<group android:checkableBehavior="single">
<item
android:id="@+id/nav_camera"
android:icon="@drawable/ic_menu_camera"
android:title="@string/import" />
<item
android:id="@+id/nav_gallery"
android:icon="@drawable/ic_menu_gallery"
android:title="@string/gallery" />
<item
android:id="@+id/nav_slideshow"
android:icon="@drawable/ic_menu_slideshow"
android:title="@string/slideshow" />
<item
android:id="@+id/nav_manage"
android:icon="@drawable/ic_menu_manage"
android:title="@string/tools" />
</group>
</menu>

Handle navigation click events
@Override
mDrawerLayout = findViewById(R.id.drawer_layout);
NavigationView navigationView = findViewById(R.id.nav_view);
navigationView.setNavigationItemSelectedListener(
new NavigationView.OnNavigationItemSelectedListener() {
@Override
public boolean onNavigationItemSelected(MenuItem menuItem) {
// set item as selected to persist highlight
menuItem.setChecked(true);
// close drawer when item is tapped
mDrawerLayout.closeDrawers();
// Add code here to update the UI based on the item selected
// For example, swap UI fragments here
return true;
}
});
}

Android animation
● Adding animations to your app interface will give high quality feel to your android
applications. Animations can be performed through either XML or android code.
● There are 3 types of Animations:
● Property Animations — They are used to alter property of objects (Views or non view
objects).
● View Animations — They are used to do simple animations like changing size,
position, rotation, control transparency.
● Drawable Animations —This is used to do animation using drawables. An XML file
specifying various list of drawables is made which are run one by one just like a roll of a
film. This is not much used so I won’t cover it.

Android Animation Using XML
Create an xml file which defines type of animation to perform. This file should be
located under anim folder under res directory (res ⇒ anim ⇒ animation.xml). If
you don’t have anim folder in your res directory create one. Following is example
of simple fade in animation.

Android Animation Using XML
● Create xml that defines the animation: fade_in.xml
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:fillAfter="true" >
<alpha
android:duration="1000"
android:fromAlpha="0.0"
android:interpolator="@android:anim/accelerate_interpolator"
android:toAlpha="1.0" />
</set>

Loading Animation
@Override
setContentView(R.layout.activity_fadein);
txtMessage = (TextView) findViewById(R.id.txtMessage);
// load the animation
Animation animFadein =
AnimationUtils.loadAnimation(getApplicationContext(),
R.anim.fade_in);
}

Animation state listeners
public class FadeInActivity extends Activity implements AnimationListener {
animFadein.setAnimationListener(this);
@Override
public void onAnimationEnd(Animation animation) {
// Take any action after completing the animation
}
@Override
public void onAnimationRepeat(Animation animation) {
// Animation is repeating
}
@Override
public void onAnimationStart(Animation animation) {
// Animation started
}
}

Start the animation
You can start animation whenever you want by calling startAnimation on any UI element by passing the
type of animation. In this example i am calling fade in animation on TextView:
// start the animation
txtMessage.startAnimation(animFadein);
However instead of xml we can also use android code to create animation such like a class is
ObjectAnimator
ObjectAnimator rotationAnimator =
ObjectAnimator.ofFloat(animateTextView, "rotation", 360f);
rotationAnimator.setDuration(2000);

Creating Lists and Cards
To create complex lists and cards with material design styles in your apps, you can use
the RecyclerView and CardView widgets.
Figure : The RecyclerView widget.
RecyclerView provides these built-in layout managers:
LinearLayoutManager shows items in a vertical or horizontal scrolling list.
GridLayoutManager shows items in a grid.
StaggeredGridLayoutManager shows items in a staggered grid.
To create a custom layout manager, extend
the RecyclerView.LayoutManager class.

RecyclerView

<android.support.v7.widget.RecyclerView
android:id="@+id/my_recycler_view"
android:scrollbars="vertical"
android:layout_height="match_parent"/>
Once you have added a RecyclerView widget to your layout, obtain a handle to
the object, connect it to a layout manager, and attach an adapter for the data to
be displayed:

RecyclerView
@Override
setContentView(R.layout.my_activity);
mRecyclerView = (RecyclerView) findViewById(R.id.my_recycler_view);
// use this setting to improve performance if you know that changes
// in content do not change the layout size of the RecyclerView
mRecyclerView.setHasFixedSize(true);
// use a linear layout manager
mLayoutManager = new LinearLayoutManager(this);
mRecyclerView.setLayoutManager(mLayoutManager);
// specify an adapter (see also next example)
mAdapter = new MyAdapter(myDataset);
mRecyclerView.setAdapter(mAdapter);
}

Adapter
The adapter provides access to the items in your data set, creates views for items, and replaces the content of some of the
views with new data items when the original item is no longer visible.
public class MyAdapter extends RecyclerView.Adapter<MyAdapter.ViewHolder> {
private String[] mDataset;
// Provide a reference to the views for each data item
// Complex data items may need more than one view per item, and
// you provide access to all the views for a data item in a view holder
public static class ViewHolder extends RecyclerView.ViewHolder {
// each data item is just a string in this case
public TextView mTextView;
public ViewHolder(TextView v) {
super(v);
mTextView = v;
}
}

Adapter
// Provide a suitable constructor (depends on the kind of dataset)
public MyAdapter(String[] myDataset) {
mDataset = myDataset;
}
// Create new views (invoked by the layout manager)
@Override
public MyAdapter.ViewHolder onCreateViewHolder(ViewGroup parent,
int viewType) {
// create a new view
TextView v = (TextView) LayoutInflater.from(parent.getContext())
.inflate(R.layout.my_text_view, parent, false);
// set the view's size, margins, paddings and layout parameters
ViewHolder vh = new ViewHolder(v);
return vh;
}

Adapter
// Replace the contents of a view (invoked by the layout manager)
@Override
public void onBindViewHolder(ViewHolder holder, int position) {
// - get element from your dataset at this position
// - replace the contents of the view with that element
holder.mTextView.setText(mDataset[position]);
}
// Return the size of your dataset (invoked by the layout manager)
@Override
public int getItemCount() {
return mDataset.length;
}
}

Different view in adapter
To handle the case where you want different types of view for different rows. For instance,
in a contacts application you may want even rows to have pictures on the left side and odd
rows to have pictures on the right. In that case, you would use:
@Override
public int getViewTypeCount() {
return 2;
}
@Override
public int getItemViewType(int position) {
return position % 2;
}

Different view in adapter
@Override
public MainVH onCreateViewHolder(ViewGroup parent, int viewType) {
int layoutRes;
switch (viewType) {
case VIEW_TYPE_HEADER:
layoutRes = R.layout.item_header;
break;
case VIEW_TYPE_FOOTER:
layoutRes = R.layout.item_footer;
break;
default:
layoutRes = R.layout.content_swipe;
break;
}
View v = LayoutInflater.from(parent.getContext())
.inflate(layoutRes, parent, false);
return new MainVH(v);
}

Create Cards
CardView extends the FrameLayout class and lets you show information inside cards that have a consistent look across the
platform. CardView widgets can have shadows and rounded corners.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
... >

<android.support.v7.widget.CardView
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:id="@+id/card_view"
android:layout_gravity="center"
android:layout_height="200dp"
card_view:cardCornerRadius="4dp">
<TextView
android:id="@+id/info_text"
</android.support.v7.widget.CardView>
</LinearLayout>

Add Dependencies
The RecyclerView and CardView widgets are part of the v7 Support Libraries. To
use these widgets in your project, add these Gradle dependencies to your app's
module:
dependencies {
compile 'com.android.support:cardview-v7:21.0.+'
compile 'com.android.support:recyclerview-v7:21.0.+‘
}

Android ViewPager
Android ViewPager widget is found in the support library and it allows the user to swipe left or right to
see an entirely new screen.
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_height="match_parent“/>
@Override protected void onCreate(Bundle savedInstanceState) {
ViewPager viewPager = (ViewPager) findViewById(R.id.viewpager);
viewPager.setAdapter(new CustomPagerAdapter(this));
}

PagerAdapter
public class CustomPagerAdapter extends PagerAdapter {
private Context mContext;
public CustomPagerAdapter(Context context) {
mContext = context;
}
@Override public Object instantiateItem(ViewGroup collection, int
position) {
ModelObject modelObject = ModelObject.values()[position];
LayoutInflater inflater = LayoutInflater.from(mContext);
ViewGroup layout = (ViewGroup)
inflater.inflate(modelObject.getLayoutResId(), collection, false);
collection.addView(layout); return layout;
}

PagerAdapter
@Override
public void destroyItem(ViewGroup collection, int position, Object view) {
collection.removeView((View) view);
}
@Override
public int getCount() { return ModelObject.values().length; }
@Override
public boolean isViewFromObject(View view, Object object) {
return view == object; }
@Override
public CharSequence getPageTitle(int position) {
ModelObject customPagerEnum = ModelObject.values()[position];
return mContext.getString(customPagerEnum.getTitleResId());
}

PagerAdapter
● CustomPagerAdapter(Context context) : The constructor needs a Context reference. The context is saved as
a member variable of the class since it’s used later to access the individual page layouts from the enum class
● instantiateItem : In this case, we use the enum and inflate the particular enum value’s associated layout. Then,
we add the newly inflated layout to the ViewGroup(collection of Views) maintained by the PagerAdapter, and
then we return that layout. The object being returned by this method is also used later on, as the second
parameter in the isViewFromObject method
● destroyItem : This method removes a particular view from the ViewGroup maintained by the PagerAdapter
● getCount : It simply returns the number of views that will be maintained by the ViewPager. For this example,
the count is the number of enum values in the model object
● isViewFromObject : This method checks whether a particular object belongs to a given position, which is
made simple. As noted earlier, the second parameter is of type Object and is the same as the return value from
the instantiateItem method
● getPageTitle : At a given position, we need to supply the PagerAdapter with a title. This usually manifests itself
in the ActionBar as the Activity’s title, or sometimes tabs will hook into this method for labelling each tab. In this
case we’ve kept it for labelling only

Assignment Details
Create a Application which have a navigation drawer with two tab option (Home and Food).
1. Home: User can see all order list he/she has already done.
2. Food: User can order any food item from list of category item including every item have a
multiple image showing option by swiping
Note: i) All the item design and layout design will be using only constraint layout and co-
ordinator layout. ii) Home and Food tab will be fragment. Basic features should be same what I
draw on the white board.
(Duration 4 days including today)

Assignment Guidelines
 (There will be toolbar , list of data will be shown using
recyclerview cardview and adapter )
 For showing multiple image there will be used viewpager,
adapter
 Data list could be static.
 For any help conduct with me or any android developer

Resources
• https://developer.android.com/guide/components/fundamentals.html#Components
• https://developer.android.com/guide/platform/index.html
• https://developer.android.com/guide/components/activities/activity-lifecycle.html
• https://developer.android.com/guide/components/fragments.html
• https://developer.android.com/training/basics/fragments/creating.html
• https://developer.android.com/guide/topics/ui/declaring-layout.html
• https://developer.android.com/training/basics/fragments/fragment-ui.html
• https://developer.android.com/guide/topics/resources/providing-
resources.html#ResourceTypes
• https://www.androidhive.info/2013/06/android-working-with-xml-animations/
• https://medium.com/mindorks/a-beginners-guide-to-implement-android-animations-part-1-2-
part-series-b5fce1fc85
• https://developer.android.com/training/material/lists-cards.html#RecyclerView
• https://developer.android.com/training/constraint-layout/
• https://www.tutorialspoint.com/android/index.htm

Android Apps Development Basic

Recommended

More Related Content

What's hot (20)

Similar to Android Apps Development Basic (20)

Recently uploaded (20)

Android Apps Development Basic