UNIT-3

USER INTERFACE AND THEMES

SYLLABUS

 Designing User interface

 Designing by declaration
 creating the opening screen, using alternate resources
 implementing an about box
 applying a theme
 adding settings
 debugging with log messages
 debugging with debugger
What is a user interface?

 User interface design focuses on creating an interface that caters to the

user’s needs, wishes, preferences, and behaviors.
 By putting the user in the center of your design process, you can create an
interface that efficiently addresses their wishes and presents a top-notch
consumer experience.
 Designing a User Interface

In Android, there are two primary methods for creating UIs:

[Link] Approach:
•In this method, developers write code directly in the program to design interfaces.
•While this approach provides flexibility, it can lead to tightly coupled code where UI
elements and behavior are closely tied together.
[Link] Approach:
•The declarative approach involves designing UIs using XML files located under
the res folder.
•For example, you can create a button by defining it in an XML layout file
(e.g., res/layout/[Link]) using the <Button> tag.

(Note : Declarative approach is already discussed in unit-2 using Param attributes

programin unit-2)
Creating an opening screen

 A splash screen is the initial screen that appears when an app launches,
providing a branded experience for users.
 It basically consists of an app icon, icon background, and window background:
 Android 12 and higher, introduces the SplashScreen API for creating splash
screens with animations and consistent branding across different Android
versions
 Different ways to create splash screen :
 Customizable elements (creating your own splash screen for your app)
 Using Splash screen API library
 Using Alternative resources ( downloading images )
1. Create your own splash screen

Step 1 : Create a new activity and name the layout file as splash [Link]
Step 2 : Copy a png image in drawable
Step 3: Design the [Link] file and include an image view tag and
indlude the image
Step 4: Write the handler code in splash screen .java file.
Step 6: Include the intent filter in the splash screen activity and make that
exported attribute true.
Implementing splash screen

new Handler().postDelayed(new Runnable() {

public void run() { Intent intent = new Intent([Link],
[Link]);
startActivity(intent);
finish(); } },6000);

PostDelayed(runnable,6000 ms)
new Runnable(){ public void run(){ }}
 Styles and themes

A style is a collection of attributes that specifies the appearance for a single view.
It allows you to define a set of attributes once and reuse them across multiple
widgets.
• A style can be applied to a view (from within a layout file) Or to an entire activity
OR application (from within the manifest file)
•You can create a new style by adding a <style> element in your
project’s res/values/[Link] file.
•Each style should have a unique name.
•For each style, add an <item> element for each attribute you want to define.
• The name in each <item> specifies an attribute that you would otherwise use as an
XML attribute in your layout.
[Link] file code

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

<resources>
<style name="CustomFontStyle">
<item name="android:layout_width">fill_parent</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:capitalize">characters</item>
<item name="android:typeface">monospace</item>
<item name="android:textSize">12pt</item>
<item name="android:textColor">#00FF00</item>
</style>
</resources>
Using Style in layout file

 Once your style is defined, you can use it in your XML Layout file
using style attribute as follows −

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

<LinearLayout
xmlns:android="[Link]
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<TextView android:id="@+id/text_id"
style="@style/CustomFontStyle"
android:text="@string/hello_world" />
</LinearLayout>
Example for theme inheritance

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

Inheriting attributes of style with name large
<resources>
<style name="[Link]" parent="[Link]">
<item name="android:textColor">#00FF00</item>
<item name="android:textStyle">bold</item>
</style>
<style name="large" parent="[Link]">
<item name="android:textSize">100dp</item>
</style>
</resources>
 Themes

•A theme is a collection of attributes that’s applied to an entire app, activity, or view

hierarchy—not just an individual view.
•When you apply a theme, every view in the app or activity applies each of the
theme’s attributes that it supports. Themes can also apply styles to non-view
elements, such as the status bar and window background.
•Themes assign semantic names (e.g., colorPrimary,colorPrimaryDark,colorAccent) to Android
resources and an action bar (Darkaction bar / No action bar)
•Styles and themes work together. For example, you might have a style that specifies
part of a button’s appearance, and the actual definitions of colors are provided in the
theme.
 Applying an existing theme
You can create a theme the same way you create styles.
The difference is how you apply it: instead of applying a style with the style attribute on a view, you apply a
theme with the android:theme attribute on either the <application> tag or an <activity> tag in
the [Link] file.
For example, here's how to apply the Android Support Library's Material Design "dark" theme to the whole
app:
<manifest ... >
<application android:theme="@style/[Link]" ... >
</application>
</manifest>
 themes

And here's how to apply the "light" theme to just one activity:

<manifest ... >

<application ... >
<activity android:theme="@style/[Link]" ... >
</activity>
</application>
</manifest>
 Implementing themes

 To implement a custom theme create or edit

MyAndroidApp/res/values/[Link] and add the following −

<style name="AppTheme" parent="[Link]">

<!-- Customize your theme here. -->
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>

<item name="colorAccent">@color/colorAccent</item></style>
About Box

 An About Box is a common feature in Android apps that provides

information about the app, such as its version, author, and other
relevant details.
 About box can be created using [Link]
 Two steps :
 Retrieve the Version name using package manager
 Create an [Link] and pass the version name
Implementing an about Box

 Step 1 : Create the following code to retrieve the version name of the app
:
static String getVersionName(Context context)
{
try
{
return
[Link]().getPackageInfo([Link](),
0).versionName;
}
catch ([Link] e)
{
return "Unknown";
}
About Box

 Step 2 : Create a AboutBox class file in java folder under your package
and write the following code :

final Context applicationContext1 = getApplicationContext();

[Link] builder = new [Link](this);

[Link]("About My App").setMessage("Version: "
+[Link](this)+ "\n\nYour app description goes
here.").setPositiveButton("OK", null).show();
}}
 Settings

 Settings let users change the functionality and behavior of an app. Settings can affect
background behavior, such as how often the app synchronizes data with the cloud, or
they can be wider-reaching, such as changing the contents and presentation of the
user interface.
Starting with Android 10, the platform [Link] library is deprecated.
 To integrate user configurable settings into your app, use the AndroidX Preference library.
 This library manages the user interface and interacts with storage so that you define only the
individual settings that the user can configure. The library comes with a Material Design theme
that provides a consistent user experience across devices and OS versions.
 Implementing Settings

Step 1 :Before you start, add the Preference library dependency to

your [Link] file:
<PreferenceScreen
dependencies {
xmlns:app="[Link]
implementation "[Link]:preference-ktx:1.2.0" [Link]/apk/res-auto">
}
<SwitchPreferenceCompat
Step 2 : In your project, navigate to res/xml folder, create app:key="notifications"
a [Link] file, and add the following code to it: app:title="Enable message
notifications"/>

This hierarchy contains two Preference objects: <Preference

a SwitchPreferenceCompat that lets users toggle a setting app:key="feedback"
app:title="Send feedback"
on and off, and a basic Preference with no widget. app:summary="Report
When building a hierarchy, each Preference must have a technical issues or suggest new
unique key. features"/>

</PreferenceScreen>
 Implementing Settings
Step 3 : To inflate a hierarchy from an XML attribute, create a PreferenceFragmentCompat,
,
override onCreatePreferences() and provide the XML resource to inflate

public class MySettingsFragment extends PreferenceFragmentCompat {

@Override
public void onCreatePreferences(Bundle savedInstanceState, String rootKey) {
setPreferencesFromResource([Link], rootKey);
}
}

Step 4 : Add this Fragment to your Activity as you do with any other Fragment
Debugging

 A debugger is a tool that allows you to examine the state of a running program. Debugging is the
process of locating and then removing bugs or errors in a program. It is the methodical process of
locating and eliminating bugs or defects in a computer program.
 Need for Debugging:
When errors in a program code are identical, it is necessary to first identify the precise program
statements responsible for the errors and then fix them. Debugging is the process of identifying and
correcting errors in program code.
Debugging with log messages

Debugging with log messages in Android is a common practice to identify issues and track the flow
of your app. It focuses on providing information to assist in identifying and resolving bugs or
defects.
[Link] Logcat in Android Studio:
•Logcat is a powerful tool that allows you to view logs from your app in real time. It displays messages
from various sources, including those added using the Log class in your code.
•To access Logcat in Android Studio:
[Link] and run your app on a physical device or emulator.
[Link] View > Tool Windows > Logcat from the menu bar.
[Link] default, Logcat scrolls to the end. You can turn this feature off by clicking in the Logcat view or
scrolling up using your mouse wheel.
[Link] turn it back on, click Scroll to the End from the toolbar
 Debugging with log messages

3. Custom Log Messages:

2. Reading Logs: •You can add custom log messages to
•Each log entry in Logcat has the following components:
your app using the Log class. For
•Date and timestamp: When the log message was
generated. example:
•Process and thread ID: Identifies the origin of the log. •Log.d("MyApp", "This is a debug
•Tag: A label that helps categorize the log (e.g., message.");
“ProfileInstaller”).
•Priority: Indicates the severity level (e.g., DEBUG, INFO,
ERROR).
•Message: The actual log content.
•Different tags have unique colors to help identify the type of
log. Each log entry has a priority of
FATAL,ERROR,WARNING,INFO,DEBUG OR VERBOSE
Logcat window

 LogCat Window is the place where various messages can be printed when an application
runs. Suppose, you are running your application and the program crashes, unfortunately. Then,
Logcat Window is going to help you to debug the output by collecting and viewing all the
messages that your emulator throws.
 This means, that when you run your app in your emulator, then you will see a lot of messages which
include all the information, all the verbose messages, and all the errors that you are getting in your
application. Suppose, an application of about 10000 lines of code gets an error. So, in that 10000
line codes, to detect the error Logcat helps by displaying the error messages.
 Using LogCat window:
 The LogCat prints an error using a Log Class. The class which is used to print the log messages is
actually known as a Log Class. So, this class is responsible to print messages in the Logcat terminal.
There are lots of methods that are present in the log class like v(String,String ) for Verbose (least
priority) ,d(String,String) for debug etc.
Logcat window

 Using LogCat window:

 The LogCat prints an error using a Log Class. The class which is used to print the log
messages is actually known as a Log Class. So, this class is responsible to print messages in
the Logcat terminal.
There are lots of methods that are present in the log class like v(String,String ) for
Verbose (least priority) ,d(String,String) for debug etc.

// for verbose Log.v("TAG", "MESSAGE"); (least priority)

// for debug Log.d("TAG", "MESSAGE");
// for information Log.i("TAG", "MESSAGE");
// for warning Log.w("TAG", "MESSAGE");
// for error Log.e("TAG", "MESSAGE"); (highest priority)
Debugging with debugger

Debugging Android apps using a debugger is an essential skill for developers.

Let’s dive into the steps and tools you can use:
1. Enable USB Debugging on Your Device:
1. If you’re using an emulator, debugging is enabled by default. However, for a
physical device, you need to enable debugging in the device’s developer
options.
2. To enable developer options, go to your device’s settings, find “About phone,”
and tap on the “Build number” repeatedly until it says you are a developer.
3. Then, go back to the settings, find “Developer options,” and turn on USB
debugging.
Debugging with debugger

2. Set Up Your Project:

•Make sure you’re using a build variant that includes debuggable true in the
build configuration. Usually, the default “debug” variant works well.
•If you define new build types, ensure they are also debuggable by
adding debuggable true to the build type configuration.
3. Start Debugging:
1. Set breakpoints in your app’s code where you want to inspect variables or evaluate
expressions.
2. In Android Studio, select a device to debug your app from the target device menu in the
toolbar.
3. Click the “Debug” button. If your app is already running, Android Studio will ask if you
want to switch from “Run” to “Debug.” Confirm to start debugging.
A Breakpoint is that point of the code where the execution
stops
 THEMES &
STYLES DEBUGGING

USER
INTERFACE

END OF UNIT-3

SHIVANJALI KESHARWANI