unit-4 mobile application development
unit-4 mobile application development
User Interface Screen elements, Designing User Interfaces with Layouts, Drawing and Working with
Anima on. Playing Audio and Video, Recording Audio and Video, Using the Camera to Take and
Process Pictures
Android provides a wide variety of screen elements (also known as widgets) to design intui ve and interac ve user interfaces
(UIs). These elements are part of the Android UI toolkit and are categorized into View and ViewGroup classes.
1. TextView
o Example:
o <TextView
o android:id="@+id/textView"
o android:layout_width="wrap_content"
o android:layout_height="wrap_content"
o android:text="Hello, World!"
o android:textSize="18sp"
o android:textColor="#000000" />
2. EditText
o Example:
o <EditText
o android:id="@+id/editText"
o android:layout_width="match_parent"
o android:layout_height="wrap_content"
3. Bu on
o Example:
o <Bu on
o android:id="@+id/bu on"
o android:layout_width="wrap_content"
o android:layout_height="wrap_content"
4. ImageView
o Example:
o <ImageView
o android:id="@+id/imageView"
o android:layout_width="100dp"
o android:layout_height="100dp"
o android:src="@drawable/ic_launcher_foreground" />
5. CheckBox
o Example:
o <CheckBox
o android:id="@+id/checkBox"
o android:layout_width="wrap_content"
o android:layout_height="wrap_content"
6. RadioBu on
o Example:
o <RadioGroup
o android:layout_width="wrap_content"
o android:layout_height="wrap_content">
o <RadioBu on
o android:id="@+id/radioBu on1"
o android:layout_width="wrap_content"
o android:layout_height="wrap_content"
o <RadioBu on
o android:id="@+id/radioBu on2"
o android:layout_width="wrap_content"
o android:layout_height="wrap_content"
o </RadioGroup>
7. ToggleBu on / Switch
o Provides a toggle switch for on/off func onality.
o Example:
o <Switch
o android:id="@+id/switch"
o android:layout_width="wrap_content"
o android:layout_height="wrap_content"
o android:text="Switch" />
8. ProgressBar
o Example:
o <ProgressBar
o android:id="@+id/progressBar"
o android:layout_width="wrap_content"
o android:layout_height="wrap_content"
o android:indeterminate="true" />
9. SeekBar
o Example:
o <SeekBar
o android:id="@+id/seekBar"
o android:layout_width="match_parent"
o android:layout_height="wrap_content" />
10. Spinner
o Example:
o <Spinner
o android:id="@+id/spinner"
o android:layout_width="wrap_content"
o android:layout_height="wrap_content" />
Containers (ViewGroups)
1. LinearLayout
o Example:
o <LinearLayout
o android:layout_width="match_parent"
o android:layout_height="wrap_content"
o <TextView
o android:layout_width="wrap_content"
o android:layout_height="wrap_content"
o <Bu on
o android:layout_width="wrap_content"
o android:layout_height="wrap_content"
o </LinearLayout>
o Posi ons child views rela ve to each other or the parent container.
o Example:
o <Rela veLayout
o android:layout_width="match_parent"
o android:layout_height="wrap_content">
o <TextView
o android:id="@+id/textView"
o android:layout_width="wrap_content"
o android:layout_height="wrap_content"
o <Bu on
o android:layout_width="wrap_content"
o android:layout_height="wrap_content"
o android:layout_below="@id/textView"
o </Rela veLayout>
3. ConstraintLayout
o A flexible and efficient layout that allows posi oning and aligning views using constraints.
o Example:
o <ConstraintLayout
o android:layout_width="match_parent"
o android:layout_height="match_parent">
o
o <Bu on
o android:id="@+id/bu on"
o android:layout_width="wrap_content"
o android:layout_height="wrap_content"
o android:layout_marginTop="100dp"
o app:layout_constraintTop_toTopOf="parent"
o app:layout_constraintStart_toStartOf="parent"
o app:layout_constraintEnd_toEndOf="parent"
o </ConstraintLayout>
4. FrameLayout
o Example:
o <FrameLayout
o android:layout_width="match_parent"
o android:layout_height="match_parent">
o <ImageView
o android:layout_width="match_parent"
o android:layout_height="match_parent"
o android:src="@drawable/background_image" />
o <TextView
o android:layout_width="wrap_content"
o android:layout_height="wrap_content"
o android:text="Overlay Text"
o android:layout_gravity="center" />
o </FrameLayout>
5. ScrollView
o Example:
o <ScrollView
o android:layout_width="match_parent"
o android:layout_height="match_parent">
o <LinearLayout
o android:layout_width="match_parent"
o android:layout_height="wrap_content"
o </ScrollView>
6. RecyclerView
o Example:
o <androidx.recyclerview.widget.RecyclerView
o android:id="@+id/recyclerView"
o android:layout_width="match_parent"
o android:layout_height="match_parent" />
1. CardView
o Example:
o <androidx.cardview.widget.CardView
o android:layout_width="match_parent"
o android:layout_height="wrap_content"
o app:cardEleva on="4dp"
o app:cardCornerRadius="8dp">
o <TextView
o android:layout_width="wrap_content"
o android:layout_height="wrap_content"
o </androidx.cardview.widget.CardView>
2. WebView
o Example:
o <WebView
o android:id="@+id/webView"
o android:layout_width="match_parent"
o android:layout_height="match_parent" />
3. Toolbar
o Example:
o <androidx.appcompat.widget.Toolbar
o android:id="@+id/toolbar"
o android:layout_width="match_parent"
o android:layout_height="wrap_content"
o android:background="?a r/colorPrimary"
layout_width and layout_height: Define size (match_parent, wrap_content, or specific values like 100dp).
By combining these UI elements, Android developers can create complex and visually appealing user interfaces that meet the
needs of their applica ons.
In Android, layouts are used to arrange and organize UI components (Views) on the screen. A layout defines the
structure for a user interface in your app, specifying how the UI components (widgets) are displayed, aligned, and
nested. Layouts are defined either in XML files or programma cally in Java/Kotlin.
Types of Layouts
1. LinearLayout
Descrip on: Arranges child views in a single row (horizontal) or column (ver cal).
Key A ributes:
Example:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
<Bu on
android:layout_width="wrap_content"
android:layout_height="wrap_content"
</LinearLayout>
Descrip on: Posi ons child views rela ve to each other or to the parent container.
Key A ributes:
Example:
<Rela veLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello!" />
<Bu on
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/textView"
</Rela veLayout>
3. ConstraintLayout
Descrip on: A flexible layout that allows you to posi on and size widgets by defining constraints rela ve to
other widgets or the parent container.
Key Features:
Example:
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<Bu on
android:id="@+id/bu on"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
</androidx.constraintlayout.widget.ConstraintLayout>
4. FrameLayout
Descrip on: A simple layout that stacks child views on top of each other.
Example:
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="@drawable/sample_image" />
<ProgressBar
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center" />
</FrameLayout>
5. TableLayout
Descrip on: Arranges child views in a tabular format with rows and columns.
Key A ributes:
Example:
<TableLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TableRow>
<TextView
<TextView
</TableRow>
<TableRow>
<TextView
<TextView
</TableRow>
</TableLayout>
6. ScrollView
Descrip on: A container that allows scrolling for content that exceeds the screen size.
Usage:
o Can only have one child view (usually a layout like LinearLayout).
Example:
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
<TextView
</LinearLayout>
</ScrollView>
7. GridLayout
Key A ributes:
Example:
<GridLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:rowCount="2"
android:columnCount="2">
<TextView
<TextView
<TextView
<TextView
</GridLayout>
1. Use ConstraintLayout:
o Create addi onal layouts in res/layout-sw600dp, res/layout-land, etc., for larger screens or
orienta ons.
o Use Android Studio’s Layout Editor for a visual representa on of the design.
By using layouts effec vely, developers can create visually appealing and highly func onal UIs for Android
applica ons, ensuring a smooth and intui ve user experience.
Android provides a robust framework for crea ng custom drawings and anima ons to enhance user interfaces. These features
allow developers to create visually appealing effects, transi ons, and interac ve elements.
1. Drawing in Android
Custom drawings are implemented using the Canvas API and Paint objects in Android. You can use these to create custom views or
graphical elements.
Custom Drawing
Custom drawing is done by overriding the onDraw() method in a custom View class.
super(context);
paint.setColor(Color.RED);
paint.setStyle(Paint.Style.FILL);
@Override
super.onDraw(canvas);
// Draw a circle
Usage in Layout
<com.example.CustomView
android:layout_width="match_parent"
android:layout_height="match_parent" />
Anima ons in Android are used to bring life to your UI by adding mo on and transi ons. Android provides mul ple types of
anima on frameworks:
Property anima on is the most powerful and flexible anima on system in Android. It allows you to animate any object property.
Key Classes
anima on.start();
Example: AnimatorSet
animatorSet.playTogether(moveX, fadeOut);
animatorSet.setDura on(1000);
animatorSet.start();
These anima ons are used for simple transforma ons like moving, fading, rota ng, or scaling.
XML Example
<translate
xmlns:android="h p://schemas.android.com/apk/res/android"
android:fromXDelta="0%"
android:toXDelta="100%"
Usage in Code
Drawable anima ons are frame-by-frame anima ons using a sequence of drawable resources.
Usage in Code
imageView.setBackgroundResource(R.drawable.anima on_list);
anima onDrawable.start();
Physics-based anima ons (introduced in Android API 16+) simulate realis c mo on such as springs and flings.
Spring Anima on
springAnima on.start();
3. Transi on Framework
Transi ons animate the movement, addi on, or removal of views in a scene.
Usage Example
You can combine anima ons and use interpolators to achieve custom effects.
Custom Interpolators
Interpolators define the rate of change for anima ons. Android provides several interpolators like:
LinearInterpolator
AccelerateInterpolator
BounceInterpolator
anima on.start();
3. Op mize Performance:
4. Leverage Tools:
o Use Android Studio's Layout Inspector and Profiler to debug and op mize anima ons.
By combining drawing and anima on techniques, you can create highly interac ve and visually compelling Android applica ons.
Android provides a comprehensive framework for handling media tasks such as playing and recording audio and video. Developers
can u lize these features to integrate mul media func onality into their applica ons.
Playing Audio
Steps:
mediaPlayer.start();
Streaming Audio
mediaPlayer.setDataSource("h p://example.com/audio.mp3");
mediaPlayer.prepareAsync();
Android uses the VideoView class and MediaPlayer for video playback.
XML Layout
<VideoView
android:id="@+id/videoView"
android:layout_width="match_parent"
android:layout_height="match_parent" />
Java Code
videoView.start();
videoView.setMediaController(mediaController);
mediaController.setAnchorView(videoView);
Recording Audio
recorder.setAudioSource(MediaRecorder.AudioSource.MIC);
recorder.setOutputFormat(MediaRecorder.OutputFormat.THREE_GPP);
recorder.setOutputFile("/sdcard/recorded_audio.3gp");
recorder.setAudioEncoder(MediaRecorder.AudioEncoder.AMR_NB);
try {
recorder.prepare();
recorder.start();
} catch (IOExcep on e) {
e.printStackTrace();
// Stop recording
recorder.stop();
recorder.release();
Recording Video
mediaRecorder.setVideoSource(MediaRecorder.VideoSource.CAMERA);
mediaRecorder.setOutputFormat(MediaRecorder.OutputFormat.MPEG_4);
mediaRecorder.setOutputFile("/sdcard/recorded_video.mp4");
mediaRecorder.setVideoEncoder(MediaRecorder.VideoEncoder.H264);
mediaRecorder.setPreviewDisplay(surfaceHolder.getSurface());
try {
mediaRecorder.prepare();
mediaRecorder.start();
} catch (IOExcep on e) {
e.printStackTrace();
// Stop recording
mediaRecorder.stop();
mediaRecorder.release();
Best Prac ces
Permissions
For Android 6.0+ (API 23), request run me permissions for recording and storage:
Ac vityCompat.requestPermissions(this,
Error Handling
Resource Management
Advanced Features
1. Audio Focus Handling: Manage audio focus using the AudioManager to avoid conflicts with other apps.
3. audioManager.requestAudioFocus(...);
5. Camera2 API: For advanced video recording features like real- me filters and high-resolu on support, use the Camera2 API.
6. ExoPlayer: For more control and flexibility, consider using ExoPlayer, an open-source media player developed by Google.
By leveraging these capabili es, you can build feature-rich mul media applica ons for Android.
Android provides APIs for integra ng camera func onality into your applica on. You can launch the camera app to capture
pictures or use the Camera2 API to control the camera hardware directly.
You can launch the device's na ve camera app using an Intent and retrieve the captured image in your app.
o Use the FileProvider to securely share the file loca on with the camera app.
o Use MediaStore.ACTION_IMAGE_CAPTURE.
if (photoFile != null) {
intent.putExtra(MediaStore.EXTRA_OUTPUT, photoUri);
try {
} catch (IOExcep on e) {
e.printStackTrace();
return image;
@Override
}
}
For more control over the camera (e.g., resolu on, focus, exposure), use the Camera2 API. This API provides fine-grained control of
camera hardware and is preferred for advanced camera func onality.
1. Add Permissions:
3. Set Up a TextureView:
try {
@Override
createCameraPreviewSession(camera);
@Override
camera.close();
@Override
camera.close();
}, null);
} catch (CameraAccessExcep on e) {
e.printStackTrace();
}
texture.setDefaultBufferSize(previewWidth, previewHeight);
try {
CaptureRequest.Builder previewRequestBuilder =
cameraDevice.createCaptureRequest(CameraDevice.TEMPLATE_PREVIEW);
previewRequestBuilder.addTarget(surface);
cameraDevice.createCaptureSession(Arrays.asList(surface),
new CameraCaptureSession.StateCallback() {
@Override
try {
} catch (CameraAccessExcep on e) {
e.printStackTrace();
@Override
// Handle failure
}, null);
} catch (CameraAccessExcep on e) {
e.printStackTrace();
if (!packageManager.hasSystemFeature(PackageManager.FEATURE_CAMERA_ANY)) {
// No camera available
}
Handle Permissions: For Android 6.0+ (API 23), request run me permissions:
Use Async Tasks: Perform image processing in a background thread to prevent blocking the UI.
Op mize Storage: Save images in appropriate formats (e.g., JPEG) and compress them to reduce file size.
By leveraging Android's camera APIs and processing capabili es, you can create powerful mul media applica ons that allow users
to capture and edit images seamlessly.