Professional Documents
Culture Documents
Presentation Layer Smells
Presentation Layer Smells
Presentation Layer Smells
Mabrouka Chouchane
School of computer science of Manouba, Tunisia
E-mail: chouchane.mabrouka@gmail.com
Makram Soui
College of Computing and Informatics Saudi Electronic University, Saudi Arabia
E-mail: m.soui@seu.edu.sa
Khaled Ghedira
Private Higher School of Engineering and Technology, Tunisia
E-mail: khaledghedira3@gmail.com
2 Mabrouka Chouchane et al.
1 Introduction
The detection of Android code smells process drawn the attention of several
authors [8–10] who define manually the related symptoms of each code smell
type in Android apps, then translating them into a combination of quality
metrics with their thresholds to design detection rules. In this context, defin-
ing manually these rules that can be used to detect the symptoms of code
smells is not easy, because there are several possible combinations of different
metrics with various thresholds values. In addition, several code smells can be
associated to same symptoms. As a result, there is no consensus about the
best definition of the symptoms of each code smell.
In the same context, some of the previous work examined how code smells
are introduced [16, 17], how it is developed over time [18–20], and how smells
affect the quality of applications, such as fault and change-proneness [21, 22],
code comprehensibility [23] and program maintainability [24–26]. Similarly,
other existing works [21, 27] studied the correlation between code change/fault-
proneness and the occurrence of code smells in projects. However, these works
focused only on code smells and its evolution. There are a lack of studies in the
fields of human computer interaction that take in consideration (i) the evolu-
tion of aesthetic defects of GAUI (Graphical Android user interface) and (ii)
the impact of the presentation layer quality of Android apps on the presences
of aesthetic defects.
Several existing methods and tools have been proposed to evaluate the
quality of Android apps. These studies can be classified into two categories:
(1) aesthetic defects detection which aims to discover the design issues of GAUI
of Android apps, and (2) code smells detection which consists to identify the
code problems of presentation layer of Android apps. However, in the best
of our knowledge, until now, there is no existing studies that analyzes the
relationship between the diffuseness of aesthetic user interface and the pre-
sentation layer code smells of Android apps. In this way, our work represents
the first attempt to study the impact of code smells on the aesthetic defects
of GMUI. In fact, our findings provide an idea for developers to improve the
quality of Android apps by considering the relationship between the aesthetic
and code smells. In the maintenance task, they should correct the Android
code smells without the introduction of aesthetic defects.
To study the impact of the diffuseness of Android code smells on the ap-
pearance of GAUI aesthetic defects, we will exploit the widely known metrics
related to the aesthetic quality. To this end, we use an existing plugin called
PLAIN (PLugin for predicting the usAbility of mobile user INterface) [28]
to identify the most interesting aesthetic defects. Regarding the quality code
smells, we use Android UI Detector tool which aims to detect the well-known
15 code smells in order to assess the presentation layer quality of Android apps.
4 Mabrouka Chouchane et al.
After the identification of the two types of smells, we calculate the occurrence
of the GAUI design defects and Android code smells. Then, we determine the
correlation between aesthetic and code smells based on Spearman test corre-
lation to discover its relationship.
2 Related work
The definition of Android code smells is a strenuous task for many developers
who try to overcome the bad quality and trying to improve the maintainability
of their applications. In this context, there are several studies that focus on
the definition of code smells of Android application [8–10, 29, 30].
complexity of Android apps. The obtained results confirm that after the main-
tainability of Android apps, the complexity of these applications is reduced.
In this context, Olbrich and Cruzes [33] have examined the relationship
between two types of code smells: God and Brain classes by considering their
change frequency and change-size during different releases. The results reveal
that the class size makes God and Brain classes more vulnerable to defects.
Therefore, the frequency of code smells can be minimized by separating fea-
tures into different classes.
Tufano et al. [38] aim to evaluate the developer’s perception of test smells.
These experiments conclude that the detection of test smells is considered as
a complicated task that requires an automation process. The findings also re-
vealed that the commitment of test code gives rise to the introduction of test
smells.
Bavota et al. [39] studied the impact of smells on test code understand-
ability and maintainability. In another study, they empirically investigate the
diffusion of test smells in both open-source and industrial software systems
6 Mabrouka Chouchane et al.
[40]. The results confirm that the JUnit tests are diffused by 86% able to ex-
hibit at least one test smell. However, these findings also reveal that these test
smells have a strong negative impact on program comprehension and mainte-
nance.
However, to the best of our knowledge, until now, there is no existing study
that analyzes the relationship between the diffuseness of aesthetic user inter-
face and the presentation layer code smells of Android apps. In this way, our
work represents the first attempt to study the impact of code smells of the
presentation layer of Android apps on the aesthetic defects of GMUI. To cope
with this limitation, we use an automated tool called Android UI Detector
proposed by [30] which aims to detect 15 Android code smells extracted from
the source code of Android apps in order to evaluate the presentation layer of
Android apps.
In this section, we present some concepts that are prerequisites for our pro-
posed approach and an illustrative example to more understand the objective
of this study.
3.1 Background
Code smell is defined as bad design practices that may affect the quality of an
application such as maintainability, understandability, and so on [42]. In the
Title Suppressed Due to Excessive Length 7
literature, code-smells, also called bad smells [43], design flaws [19], anomalies
or anti-patterns [44]. There are considered as a metaphor to describe prob-
lems resulting from programming practices and bad design. However, to the
best of our knowledge, until now, there is no existing study that analyzes the
relationship between the diffuseness of aesthetic user interface and the presen-
tation layer code smells of Android apps. In this way, our work represents the
first attempt to study the impact of code smells of the presentation layer of
8 Mabrouka Chouchane et al.
Elements Descriptions
Component Ele-
ments
Activity Designed the UI screen of the Android app, and it is respon-
sible on the configuration and interaction of the UI
Fragment It is the responsible part of an activity which divides the
activities into encapsulated and reusable components that
have their own life cycle and their own GUI.
Adapter It acts as a link between an adapter view and a set of col-
lected data for this view. It supplies the access to the data
items.
Listener It represents a set of interfaces that provide one or more
methods which can therefore be implemented differently de-
pending on the case and the needs, to respond to events.
Resources elements
Layout It is a visual representation of the Android application. The
layouts can be built from an XML file or directly in the Java
code, at the time of execution of the application.
String It is used to define text strings for the Android application
with optional text styling and formatting.
Style It defines the appearance and shape of Android components
in XML resource files.
Drawable It is a general concept for a graphic which is drawn on the
screen and retrieved with APIs or applied to another XML
resource.
Title Suppressed Due to Excessive Length 9
To fix the GSR code smell, we distribute the resources declared in style.xml
file into three different XML files to reduce the number of LOC in the resource
file. Figure 3 shows the new structure of the resources files. As depicted in
figure 4, after this improvement in the source code, we note also that the
overloaded MUI defect is fixed. In this way, we decide to conduct an empirical
study to discover the impact of the code smells of the presentation layer on
the diffuseness of aesthetic defects of Android apps.
Title Suppressed Due to Excessive Length 11
The purpose of this work is to study the diffuseness of 8 aesthetic defects in 120
Android apps (8480 GAUIs) and the impact of code smells on the generation of
the GUI defects. The study is conducted by addressing the following research
questions:
– RQ1:Up to what level are the considered aesthetic defects and code smells
diffused in the studied Android apps?
– RQ2: To what extent the code smells affect the aesthetic defects for a
given Android apps ?
12 Mabrouka Chouchane et al.
– RQ3: How accurately the aesthetic metrics predict the code smells for a
given Android app?
The aim of the first research question (RQ1) is to study the diffuseness of
aesthetic defects and code smells with the goal of investigating the relevance
of the considered smells based on its occurrences.
To answer our research questions, we selected 8480 user interfaces of 120 open-
source Android apps that will be evaluated in order to identify the code smells
and aesthetic defects. These applications have different sizes (from 3 to 540
UIs), related to different application fields (education apps, entertainment,
health, gaming, etc.). The used Android apps have different user rating (30
apps with a high user rating, 36 apps with lower user rating and 34 apps have
medium user rating). Our experiments are based on the source code of these
apps hosted in open-source repositories and found on GitHub [45].
The manual evaluation of these applications is a hard task and very ex-
pensive. To this end, we used an automatic tools to identify two categories of
smells. The first one is PLAIN which parses the dump file of Android emulator
to measure the aesthetic metrics based on the properties values of the GAUI
components. The second one is Android UI Detector tool which determines
a set of heuristics in order to identify the presentation layer code smells of
Android apps.
In this subsection, we give an overview of the aesthetic defects and code smells
detection by analyzing the source code of Android apps with the goal of inves-
tigating whether the presence of code smells affects the aesthetic defects. As
depicted in figure 5, our approach has five phases: 1) Source code parser, 2)
Aesthetic metrics computation , 3)Code smells detection Strategies, 4) Aes-
thetic defects detection, 5) Empirical investigation phase.
Title Suppressed Due to Excessive Length 13
Fig. 5 Aesthetic defects and code smells detection and data analysis
14 Mabrouka Chouchane et al.
The goal of this phase is to parse the source code of the studied Android apps
in order to extract code properties (number of classes, number of activities,
number of fragment, etc.). The extracted code properties are used to identify
the code smells. The extraction process is based on two parsers. The first one
is JavaParser which parses Java files in a lightweight and straightforward way,
while the second one is JDOM which analyses the XML files [30].
In this phase, we used the plugin developed by Soui [28] in order to evaluate
the quality of Android applications. This plugin parses the source code of
GAUI to extract properties values of GAUI components. This plugin exploits
extracting (width, height, alignment, axis of coordinates for the left top point
of an object, etc) that are used to measure the quality metrics.
This phase aims to identify the code smells related to the presentation layer
of Android apps. To this end, the Android UI detector tool proposed by [30]
is used to detect 15 Android code smells. This tool is based on three type of
detection strategies: decidable rules, threshold based rules and heuristic rules.
This phase aims to detect the aesthetic defects based on a java plug-in called
PLAIN suggested by [28]. In fact, the detection defects of GAUI process is
based on the evaluation rules proposed by [46]. These rules are a combination
of a set of context criteria, 8 aesthetic metrics described in table 2 and the
8 aesthetic defects proposed by [41] (table 1). For example, we can consider
the following evaluation rules used to detect aesthetic defects where the IAW
defect is detected using the rule R1 while OM defect is identified using the
rule R2 based on a combination of a set of metrics values.
only 20 hidden layer, the number of epochs is initialized to 50, the number
of neurons in each layer is 150 and the learning rate and the momentum
rate are 0.8 and 0.5 respectively. In the other hand, MLP gives the best
results when the size of hidden layer is 150 and the values of learning rate
and random state are 0 and 0.8 respectively. Regarding the decision tree
algorithm, the highest accuracy rate is obtained when the number of es-
timators is equal to 150 and random state is 1. On the bright side, the
Naive Bayes algorithm provides the best results when the value of alpha
parameter is 0.0001.
5 Results Analysis
To assess our work for Android apps evaluation, we conducted a set of exper-
iments based on 120 Android applications with source code hosted in open
source repositories and found on [45]. The goal of the study is: (i) assessing
the diffuseness of aesthetic defects and code smells in the tested Android apps,
(ii)investigating how the existence of such a code smell has a positive impact
on the occurrence of aesthetic defects of the same apps, and (iii) building an
accurate model to predict the code smells based on the aesthetic metrics.
5.1 Up to what level are the considered aesthetic defects and code smells
diffused in the studied Android apps?
In this subsection, we study the diffuseness of aesthetic defects and code smells
in each Android app based on the co-occurrence of these two types of defects.
At this level, we used PLAIN to determine the number of aesthetic defects
and Android UI Detector tool to detect the code smells. Figure 6 highlights
the diffuseness of aesthetic defects.
The first thing that leaps to the eyes is that aesthetic defects such as
Incorrect Data Presentation (IDP), Incorrect Layout of Widgets (ILW) and
Imbalance of MUI (IM) are poorly diffused. The percentage of ILW diffuse-
ness is 0.42% in all the studied apps. The highest number of its appearance
is 9 times in Nectrod app. While, IM defect affects 1% (222 instances) of the
evaluated GMUIs. For example, in the most affected application (aCal app)
which has 500 GAUIs, the IM defect is present only 14 times. For IDP defect,
the percentage of its diffuseness is 1.34% out of 8480 evaluated GAUIs (302
instances in 120 Android apps). In fact, the highest peak of its appearance
is 30 in BatteryDrog app. In another hand, other aesthetic defects are very
diffused. The most frequent aesthetic defect identified in all the tested apps
is Overloaded MUI (OM), with a percentage of 28% of the total number of
aesthetic defects detected in 8480 GAUIs. We mention that Overloaded MUI
defect is present in all the studied applications, with a probability of 73.75%
to be present in a given GAUI. In weather app, OM defect is the most fre-
quent defect which affects 265 GAUI among 370 GAUIs with the percentage
of 71.63%. Another proliferated aesthetic defect is Complicated MUI, that af-
fects the totality of the releases, with a probability of 22.84% in all the GAUIs.
Quicksettings app is the most infected app by this defect. It is present in 230
GAUIs among the total number of UI of this app. Finally, Difficult naviga-
tion defect affects 4100 GAUIs of the total number of studied GAUIs (8480
GAUIs), with a percentage of 18.29% of the total number of aesthetic defects
detected in all GAUIs. The highest number of occurrences of this defect is 150
in OpenLauncher app.
Title Suppressed Due to Excessive Length 19
In another hand, figure 7 shows the diffuseness of the Android code smells
in all the studied apps. For instance, the most frequent Android code smell
detected in all the tested classes is Suspicious Behavior (SB) with a percentage
of 5.7% of the total number of the studied classes and with a probability of
56.16% that a given class is infected by this smell. Among the 10,130 ana-
lyzed classes, this smell affects 5,690 classes of the studied Android apps. The
highest number of occurrences of SB smell is 570 in the Quicksettings app.
Another frequently diffused code smell is God String Resources (GSR) with a
high number of occurrences equal to 5,490 in all the classes of studied apps.
This smell is present with a probability of 5.5% in a given class followed by
God STyle Resource (GSTR), Deep Nested Layout (DNL) and Brain UI Com-
ponent (BUC) smells that are present with a likelihood ratio of 5.3%. While,
we find that FLex Adapter (FLA), Missing Image (MI) and Excessive Use of
Fragments (EUF) are not frequent smells as they have a maximum number of
occurrences per class that do not exceed 1.17%. The findings of our empirical
study confirm the same conclusion found by [30] which affirm that SB, GSR,
GSTR and DNL are highly diffused smells and FLA, MI and EUF are not
frequent smells.
Table 6 The co-occurrence of the most diffused aesthetic defects and code smells.
As a matter of fact, the results of this research question (RQ1) confirm that
the most diffused code smells and aesthetic defects of Android apps are the
most relevant ones. In addition, we conclude that the most diffused aesthetic
defects appear in the largest classes of Android apps. Moreover, we deduce that
the application which has the highest number of the most frequent defects, has
also the highest number of smells. These findings help developer to prioritize
the correction of these critical smells by fixing the most important, riskiest
and severest ones.
5.2 To what extent the code smells affect the aesthetic defects for a given
Android apps?
To answer the second research question, we used the Spearman rank corre-
lation analysis [47]. To this end, we determine the correlation between the
number of occurrences of aesthetic defects and Android code smells of the
same application. The following tables summarize the obtained results. The
findings are intended as statistically significant at alpha= 0.01.
Table 7 The correlation Rs between code smells (BUC, CUC, SB, FA, EUF, NUF, FLA) and aesthetic defects
Aesthetic defects
DN IAW ICM IDP ILW IM OM CM
Code smells
Aesthetic defects
DN IAW ICM IDP ILW IM OM CM
Code smells
The results presented in tables 7 and 8 show that the code smell Brain UI
Component (BUC) positively affects four aesthetic defects (OM, ICM, ILW
and CM) with correlation coefficient Rs values: 0.88, 0.87, 0.63 and 0.79 respec-
tively as shown with pink color. From the obtained results shown in section
5.1, we observe that among the 5120 GMUIs infected by CM aesthetic defect,
there are 4045 GMUIs related to 3710 classes also having BUC Android code
smell at the same time. For example, figure 8 presents an activity XML file
extracted from Lock pattern app with BUC Android code smell. This code
smell appears because the XML file includes elements of code related to busi-
ness logic, I/O processes, data transfer. Moreover, we mention that the MUI
related to this XML file suffers from CM aesthetic defect. The existence of the
BUC smell in the XML file may affect the aesthetic complexity of MUI.
In addition, the Android code smell God Style Resource (GSR) has an impact
on two aesthetic defects DN and OM with correlation values 0.877 and 0.784
respectively. In fact, among 6254 GMUIs infected by OM defect, there are
5000 GMUIs related to 4282 classes having GS code smell at the same time.
The motivation example explained in section 3.2 demonstrates the relationship
between GSR Android code smell and OM aesthetic defect.
Moreover, the Android code smell Magic Resource (MR) has an impact on
three aesthetic defects: DN, IAW and IM. Its correlation values with MR code
smell are 0.931, 0.78 and 0.811 respectively. In this context, we mention that
among the 4100 GMUIs infected by DN aesthetic defect, there are 3817 GMUIs
related to 2945 classes having MR Android code smell at the same time. For
example, sometimes developer uses different colors to improve the navigability
of the MUI. Let’s take the aCal app which suffers from MR Android code
24 Mabrouka Chouchane et al.
smell. This smell appears due the definition of the color in ” Colourpicker-
widgets” file rather than its definition in a resource file. The GMUI shown in
figure 9 is without color despite the color definition in ” Colourpicker-widgets”
file which is not a resource file. This wrong definition of the color in the XML
file may lead to a difficult navigation through the MUI related to this file.
Besides, we observe that the diffuseness of Android code smell Excessive Use
smell are 0.87, 0.83, and 0.931 respectively. Among 5120 GMUIs infected by
CM aesthetic defect, there are 4766 GMUIs related to 4620 classes having SB
Android code smell. As shown in figure 12, this code smell appears because
an internal class is used called ”diceClick” in ”GameController” activity file
of the Yahtzee application to define event code of selected dices. In fact, the
developer defines all the buttons related to all the dice selection options in the
same activity file. This definition of event code makes the source code com-
plicated and less readable. As a consequence, this complexity of source code
26 Mabrouka Chouchane et al.
To this end, we can accept the hypothesis H1 for the 10 smells (BUC,
CUC, DNL, MR, HL, SB, GSR, EUF, NUF and LR) but we fail to accept it
for (DSA, GSTR, MI, FLA and FA) smells.
The results of research question 2 (RQ2) show that the diffuseness of code
smells has a significant impact on the occurrence of aesthetic defects in the
tested Android apps. This finding may help developer to identify a possible
reason for the appearance of code smells.
5.3 How accurately the aesthetic metrics predict the code smells for a given
Android apps?
accuracy rate (98%), and achieves the highest AUC with an average of 98%,
followed by the Naive Bayes model with an average of 94% of accuracy and
90% of AUC.
Performance indicators
Table 10 Runtime in micro-seconds of Brute Force and used machine learning algorithms.
According to the results presented in table 10, we can conclude that SVM
and Naive Bayes algorithms are able to help developer to predict the smelly
classes in early phases of Android apps development with the less time cost.
28 Mabrouka Chouchane et al.
The main implication derived from this study is related to the maintainability
of the Android apps. In fact, the discovered correlation between code smells
and aesthetic defects, helps the developers to fix bugs. In fact, the diffuseness
of code smells in android apps gives the developer an idea about the required
source code change-proneness. Moreover, our results show that classes with
such violations are more prone to change than other classes that may need
additional maintenance efforts. Further, the priority is given for code smells
having an impact on several aesthetic defects for example BUC smell that has
an impact on four aesthetic defects (OM, CM, ILW and ICM).
6 Conclusion
code smells that affected the presentation layer of Android apps. The findings
of this study prove that the results of the Spearmen correlation reveal the
significant impact of the diffuseness of Android code smells on the occurrence
of the aesthetic defects. In this work, we used only 120 Android apps and this
may not be enough to generalize our findings, and that’s why we are planning
on extending the number of analyzed projects to challenge the scalability of
our results. Moreover, we plan to develop a new plugin able to suggest appro-
priate refactoring operations to fix the GUI defects of Android apps.
References
44. W.H. Brown, R.C. Malveau, H.W. McCormick, T.J. Mowbray, AntiPatterns: refactoring
software, architectures, and projects in crisis (John Wiley & Sons, Inc., 1998)
45. C. Mabrouka. Expriment. URL https://github.com/mabroukachouchane/master-
Jmetal
46. M. Soui, M. Chouchane, M.W. Mkaouer, M. Kessentini, K. Ghedira, Soft Computing
pp. 1–30 (2019)
47. Student, Biometrika pp. 263–282 (1921)
48. J. Cohen, Current directions in psychological science 1(3), 98 (1992)
49. I. Gondra, Journal of Systems and Software 81(2), 186 (2008)
50. R. Malhotra, A. Jain, Journal of Information Processing Systems 8(2), 241 (2012)
51. R. Jindal, R. Malhotra, A. Jain, in Proceedings of 3rd International Conference on
Reliability, Infocom Technologies and Optimization (IEEE, 2014), pp. 1–6
52. Y. Freund, R. Schapire, N. Abe, Journal-Japanese Society For Artificial Intelligence
14(771-780), 1612 (1999)
53. L. Breiman, Machine learning 45(1), 5 (2001)
54. B. Yegnanarayana, Artificial neural networks (PHI Learning Pvt. Ltd., 2009)
55. J.R. Quinlan, C4. 5: programs for machine learning (Elsevier, 2014)
56. S. Ting, W. Ip, A.H. Tsang, et al., International Journal of Software Engineering and
Its Applications 5(3), 37 (2011)
57. L. Yang, A. Shami, Neurocomputing 415, 295 (2020)