1.
Android Apps Development
Md. Moniruzzaman
Sr. Software Engineer
W3 Engineers Ltd.
Date: 03-02-2018

2.
 Overview of the Android App component(Activities, Services, Broadcast
receivers, Content providers)
 Android Platform Architecture
 Activity
 Fragment
 Android Layout
 Android Resource management
 Android animation
 RecyclerView
 Adapter
Agenda

3.
After attending this session you are expected to be able to
 Create a android project
 Managing android resources
 Display category-wise/section-wise list of data
 Android animation
 Fragment management
Objectives

4.
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 App component

5.
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.
Android Platform Architecture
Figure : The Android software
stack

6.
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

7.
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…
The Activity Lifecycle

8.
Activity-lifecycle concepts

9.
public class MainActivity extends Activity {
String msg = "Android : ";
/** Called when the activity is first created. */
@Override
Public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}
/** Called when the activity is about to become visible. */
@Override
protected void onStart() {
super.onStart();
} Continue…
Activity Class

10.
/** Called when the activity has become visible. */
@Override
protected void onResume() {
super.onResume();
}
/** Called when another activity is taking focus. */
@Override
protected void onPause() {
super.onPause();
}
}
Continue…
Activity Class

11.
/** Called when the activity is no longer visible. */
@Override
protected void onStop() {
super.onStop();
Log.d(msg, "The onStop() event");
/** Called just before the activity is destroyed. */
@Override
public void onDestroy() {
super.onDestroy();
Log.d(msg, "The onDestroy() event");
}
}
Activity Class

12.
An application can have one or more activities without any restrictions. 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

13.
<?xml version="1.0" encoding="utf-8"?>
<manifestxmlns: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>
AndroidManifest.xml

14.
Figure: The lifecycle of a fragment (while its
activity is running).
Fragment-lifecycle

15.
Design Philosophy
Android introduced fragments in Android 3.0 (API level 11), primarily to
support more dynamic and flexible UI designs on large screens, such as
tablets.
Figure 1. An example of how two UI modules defined
by fragments can be combined into one activity for a
tablet design, but separated for a handset design.

16.
Adding a Fragment to an Activity
<?xml version="1.0" encoding="utf-8"?>
<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"
android:layout_width="0dp"
android:layout_height="match_parent" />
</LinearLayout>
Continue…
There are two ways you can add a fragment to the activity layout:
• Declare the fragment inside the activity's layout file.

17.
Adding a Fragment to an Activity
At any time while your activity is running, you can add fragments to your activity
layout. You simply need to specify a ViewGroup in which to place the fragment.
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();
• Or, programmatically add the fragment to an existing ViewGroup.

18.
Adding a Fragment to an Activity
A great feature about using fragments in your activity is the ability to add,
remove, replace, and perform other actions with them, in response to user
interaction. Each set of changes that you commit to the activity is called a
transaction and you can perform one using APIs in FragmentTransaction.
For example, here's how you can replace one fragment with another, and
preserve the previous state in the back stack:
// Create new fragment and transaction
Fragment newFragment = new ExampleFragment();
FragmentTransaction transaction =
getSupportFragmentManager().beginTransaction();
// Replace whatever is in the fragment_container view with this fragment,
// and add the transaction to the back stack
transaction.replace(R.id.fragment_container, newFragment);
transaction.addToBackStack(null);
// Commit the transaction
transaction.commit();

19.
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

20.
Figure: Visualization of a view hierarchy with layout parameters
associated with each view.
Layouts Parameters
XML layout attributes named layout_something define layout parameters for
the View that are appropriate for the ViewGroup in which it resides.

21.
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
1. Linear Layout-
In a linear layout, like the name suggests, all the elements are displayed in a
linear fashion(below is an example of the linear layouts),
either Horizontally or Vertically and this behavior is set
in android:orientationwhich is an attribute of the node LinearLayout.
Example of Vertical layout snippet
<LinearLayout android:orientation="vertical"> .... </LinearLayout>
Example of Horizontal layout snippet
<LinearLayout android:orientation="horizontal"> .... </LinearLayout>
Continue…

22.
Layouts Types
2. Relative Layout-
In a relative layout every element arranges itself relative to other elements or
a parent element.
As an example, lets consider the layout defined below. The “Cancel” button is
placed relatively, to the right ofthe “Login” button parallely. Here is the code
snippet that achieves the mentioned alignment (Right of Login button
parallely)
Example code snippet-
<Button android:id="@+id/btnLogin" ..></Button>
<Button android:layout_toRightOf="@id/btnLogin"
android:layout_alignTop="@id/btnLogin" ..></Button>
Continue…

23.
Layouts Types
3. Table Layout-
Table layouts in Android works in the same way HTML table layouts work. You
can divide your layouts into rows and columns.
<TableLayout >
<TableRow > …….</TableRow>
<TableRow > …….</TableRow>
<TableRow > …….</TableRow>
</TableLayout >
4. FrameLayout - It behave as a single object and its child views are get
overlapped over each other. FrameLayout takes the size of as per the biggest
child element.
5. Coordinator Layout - This is the most powerful ViewGroup introduced in
Android support library. It behaves as FrameLayout and has a lot of
functionality to coordinates amongst its child views. e.g floating button and
snackbar, Toolbar with scrollable view.

24.
Resources Overview
You should always externalize resources such as images and strings from your
application code, so that you can maintain them independently.
For any type of resource, you can specify default and
multiple alternative resources for your application:
• Default resources are those that should be used regardless of the device
configuration or when there are no alternative resources that match the
current configuration.
• Alternative resources are those that you've designed for use with a
specific configuration. To specify that a group of resources are for a
specific configuration, append an appropriate configuration qualifier to
the directory name.

25.
Grouping Resource Types
You should place each type of resource in a specific subdirectory of your
project's res/ directory. For example, here's the file hierarchy for a simple
project:
MyProject/
src/
MyActivity.java
res/
drawable/
graphic.png
layout/
main.xml
info.xml
mipmap/
icon.png
values/
strings.xml

26.
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.

27.
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.

28.
Android Animation Using XML
Create xml that defines the animation:
fade_in.xml
<?xml version="1.0" encoding="utf-8"?>
<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>

29.
Loading Animation
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_fadein);
txtMessage = (TextView) findViewById(R.id.txtMessage);
// load the animation
Animation animFadein =
AnimationUtils.loadAnimation(getApplicationContext(),
R.anim.fade_in);
}

30.
Animation listeners (Optional)
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
}
}

31.
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);

32.
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.

33.
RecyclerView
<!-- A RecyclerView with some commonly used attributes -->
<android.support.v7.widget.RecyclerView
android:id="@+id/my_recycler_view"
android:scrollbars="vertical"
android:layout_width="match_parent"
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:
Continue…

34.
RecyclerView
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
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);
}

35.
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;
}
}
Continue…

36.
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;
}
Continue…

37.
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;
}
}

38.
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;
}
Continue…

39.
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);
}

40.
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"
... >
<!-- A CardView that contains a TextView -->
<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_width="200dp"
android:layout_height="200dp"
card_view:cardCornerRadius="4dp">
<TextView
android:id="@+id/info_text"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</android.support.v7.widget.CardView>
</LinearLayout>

41.
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.+‘
}

42.
 Showing section wise/category wise list of static data
 Each item must have image, title and details
 When click on a single item get details view of item
 Collapsing functionality on the details page
 Last date/time of submission
Assignment Details

43.
 Android studio, SDK , Java.
 Recyclerview, Adapter, XML layout design, Animation
 For any help conduct with me or any android developer
Assignment Guidelines

44.
• https://developer.android.com/guide/components/fundamentals.html#Co
mponents
• 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
Resources

45.
Q & A

46.
Thank You