DEV Community: Pete

WebRTC For Beginners. Part 1

Pete — Tue, 30 Sep 2025 00:58:56 +0000

WebRTC is an open source project that enables peer-to-peer communication between browsers or applications.
WebRTC enables two internet clients to exchange any kind of media through the web without any plugin or framework. Whether the media type is audio, video or any other kind of data, it doesn't matter. WebRTC will enable two clients to exchange data seamlessly.

WebRTC is currently being used by many well-known applications, including but not limited to:

Google Meet
Google Hangouts
Facebook Messenger
Discord

Components Of A WebRTC System

The basic components of any WebRTC system are:

Signaling Server
STUN Server
TURN Server
Client

Signaling Server

A signaling server is a server that clients use to exchange necessary information about each other. The clients use this exchanged information to establish a connection between themselves.
The process of exchanging information is called signaling and signaling can be done using Websocket or XMLHttpRequest

STUN Server

STUN stands for Session Traversal Utilities for NAT. A stun server allows a client to request information about their public address and the type of NAT they are behind. This information is part of the data sent to the signaling server.

So the way STUN servers fit into this flow is that the client asks the STUN server for information, the STUN server responds with the information, and then the client sends that information to the signaling server

TURN Server

TURN stands for Traversal Using Relay NAT.
It is a protocol for relaying network traffic. In 15 to 20% of cases, the stun server can fail to provide information to client. If that happens, it won't be possible for the clients to set up a peer-to-peer connection with each other.
Cases like that are where the TURN server comes in.
If a peer-to-peer connection can not be established, A TURN server is used to connect the clients to each other. In this case, instead of exchanging data directly, the clients will send data to each other but the data will pass through the TURN server.

You can look at the diagram above for more clarity.

Basically, a TURN server acts as a fallback or backup communication channel in cases where the peer-to-peer connection can not be created.

How It Works

There are usually two clients involved in a WebRTC connection but for us to understand how things work a lot more easily, I'll explain the processes that are involved from the perspective of one client - not two.

First off, we must know the types of data that a client sends to the signaling server. They are:

Multimedia communication sessions using SDP
ICE Candidates

Don't get overwhelmed by these terms. As you have probably already discovered, verbose terms in computer science always refer to very simple concepts. I don't know why computer science just chooses to embrace verbosity, but I know that the underlying concepts are usually simplistic.

SDP

SDP stands for Session Description Protocol. SDP is a format for describing properties of the media you want to exchange like video and audio codecs, source addresses and timing information of audio and video. These properties of the media are called multimedia communication sessions and they are used for creating WebRTC offers and session invitations

SDP is not used to deliver the actual media. It is just used to tell the signaling server and the other client what kind of media you want to exchange.

It is important to note that the data sent using SDP does not come from the STUN server. It comes from the client itself.

ICE Candidates

ICE Candidates hold information about a client's internet connection.
The ICE Candidate is fetched from the STUN Server and it contains information like the client's IP address and the available methods the peers will use to communicate(either directly or through a TURN server)

In essence, the process of signalling is:

Client sends info to the signaling server using SDP
Client asks STUN server for ICE Candidate
STUN Server sends ICE candidate to client
Client sends ICE Candidate to signaling server

Each of these steps is also repeated on the receiving client's end. So the final flow diagram for establishing a connection would, in essence, look like this👇

👆 A successful p2p connection

👆 A fallback connection with a TURN server

Running Spring Boot Applications With Gradle and Maven

Pete — Thu, 17 Oct 2024 09:56:50 +0000

You can either run a Spring Boot application or build a jar from it. You can do both with either Gradle or Maven

Gradle

The command for running a Spring Boot app with Gradle is:

./gradlew bootRun

The command for building a jar from a Spring Boot application is:

./gradlew build

The command for running a jar is:

java -jar build/libs/<jar_filename>.jar

In the above command for running the jar, the jar filename refers to the name of the jar file including its version number but not including its .jar file extension and not including its full path.

Maven

The command for running a Spring Boot app with Maven is:

./mvnw spring-boot:run

The command for building a jar from a Spring Boot application with Maven is:

./mvnw clean package

The command for running a jar is:

java -jar build/libs/<jar_filename>.jar

When you run a Maven build, it runs your tests before producing the final output. If any tests fail, the build will fail.

Jar Locations in Gradle and Maven

When you build a jar with Gradle, the JAR file is stored in /build/libs/ while when you build the JAR with Maven, it is stored in /target

P.S. The app is much faster when you run the JAR than when you do a regular run.

Spring Boot Controllers Basics

Pete — Mon, 14 Oct 2024 10:16:11 +0000

In Spring Boot, a controller is a class that contains methods that process HTTP requests. A controller is created by annotating a class with RestController.

@RestController
public class ExampleController {
    private ExampleRepository exampleRepository;
    private static final String template = "Hello, %s!";

    @GetMapping("/examples/{requestedId}")
    public ResponseEntity<Example> findById(@PathVariable Long requestedId) {
    }
}

The GetMapping annotation is used to route all GET requests that match a string pattern to a method in a controller. In the code example you just looked at, the GetMapping annotation was used to route all GET requests to the URL /examples/* to the findById method. With this code, when a request is sent to /examples/, the findById method will be called.

RequestMapping

There are other annotations for other request methods like PostMapping and DeleteMapping. They are all derived from the parent annotation RequestMapping and you can use RequestMapping in their place, although, when you use RequestMapping you have to specify the HTTP method it is supposed to handle

@RestController
public class ExampleController {
    private ExampleRepository exampleRepository;
    private static final String template = "Hello, %s!";

    @RequestMapping(method="GET", path="/examples/{requestedId}")
    public ResponseEntity<Example> findById(@PathVariable Long requestedId) {
    }
}

RequestMapping is most commonly used to specify the URLs that you want a RestController to handle.

@RestController
@RequestMapping("/api/v1/examples")  // This is the base path
public class ExampleController {
    @GetMapping
    public String getAllExamples() {
    }

    @GetMapping("/{id}")
    public String getExampleById(@PathVariable("id") Long id) {
    }

    @PostMapping
    public String createExample() {
    }

    @DeleteMapping("/{id}")
    public String deleteExample(@PathVariable("id") Long id) {
    }
}

In the code snippet above, by annotating the RestController class with RequestMapping, the url /api/v1/examples acts as a prefix for all the routes within the class. This means the getExampleById method that has a GetMapping of /{id} actually has a GetMapping of /api/v1/examples/{id} and the same applies to every single method in this class that has a RequestMapping associated with it.

Spring Boot Controllers Basics

Pete — Mon, 14 Oct 2024 10:16:11 +0000

In Spring Boot, a controller is a class that contains methods that process HTTP requests. A controller is created by annotating a class with RestController.

@RestController
public class ExampleController {
    private ExampleRepository exampleRepository;
    private static final String template = "Hello, %s!";

    @GetMapping("/examples/{requestedId}")
    public ResponseEntity<Example> findById(@PathVariable Long requestedId) {
    }
}

RequestMapping

@RestController
public class ExampleController {
    private ExampleRepository exampleRepository;
    private static final String template = "Hello, %s!";

    @RequestMapping(method="GET", path="/examples/{requestedId}")
    public ResponseEntity<Example> findById(@PathVariable Long requestedId) {
    }
}

RequestMapping is most commonly used to specify the URLs that you want a RestController to handle.

@RestController
@RequestMapping("/api/v1/examples")  // This is the base path
public class ExampleController {
    @GetMapping
    public String getAllExamples() {
    }

    @GetMapping("/{id}")
    public String getExampleById(@PathVariable("id") Long id) {
    }

    @PostMapping
    public String createExample() {
    }

    @DeleteMapping("/{id}")
    public String deleteExample(@PathVariable("id") Long id) {
    }
}

CSS Positioning

Pete — Sun, 16 Oct 2022 12:55:04 +0000

.box {
  position: relative;
}

The position of an HTML element can either be static, relative, absolute or fixed. And recently, sticky has been added to the mix.
You can set the position of an element with the CSS property position
The position property works together with the properties top, right, bottom, and left. I'll call them co-ordinate properties. Co-ordinate properties function like margin properties and when I start explaining the different types of positioning, you'll understand it even more.

Relative Positioning

You can position an element relatively by giving its position property the value of relative.

.box {
  position: relative;
  top: 20px;
}

When an element is positioned relatively, it is shifted from where it is originally supposed to be by 0px. This means its new position is relative to its old position. If you add a co-ordinate property like top: 20px, it is shifted in such a way that it will have a top margin of 20px from its original position.

When it moves to its new position, the elements around it don't re-arrange themselves to adjust to its new position. They stay put, behaving as if the relatively-positioned element is still in its original position.

You can add other co-ordinate properties to the element that is positioned relatively like the property left.

.relative-box {
  position: relative:
  top: 20px;
  left: 30px
}

The code snippet above will make the element with class relative-box to move down by 20px and move right by 30px so that it will have a top margin of 20px and a left margin of 30px from its original position.

Note that to a relatively-positioned element, if you add a top property, the element moves down; if you add a left property, the element moves right and the same applies to the other co-ordinate properties.

Absolute Positioning

You can position an element absolutely by giving its position property the value of absolute.

.absolute-box {
  position: absolute;
  top: 20px;
}

Absolute positioning works similarly to relative positioning. It works together with co-ordinate properties. There are just a few differences.

Differences between absolute and relative positioning

Relatively positioned elements are positioned relative to their original position but absolutely positioned elements are positioned relative to the HTML's body tag(<body></body>).

If you don't set any top, left, bottom or right properties on .relative-box, the element will stay in its original position but if you don't set any of those properties on .absolute-box, you will find .absolute-box at the top-left corner of the page.

When you position an element absolutely, the other elements in the page will re-arrange themselves to adjust to the new position of the element in the page.

This means that when you add a co-ordinate property to set its margin, the element will have that margin but the margin will be from the edge of the page, and not from its original position.

.absolute-box {
  position: absolute;
  top: 10px;
  left: 20px;
}

The code snippet above will make the element .absolute-box to have a top margin of 10px from the top of the page and a left margin of 20px from the left of the page.

Absolute positioning has another important behavior. You can use absolute positioning to position an element relative to another element.

If the parent of .absolute-box is relatively positioned, .absolute-box will be positioned relative to that parent.
This means that .absolute-box will have a top margin of 10px from the top edge of its parent and a left margin of 20px from the left edge of its parent.

Long story short, an element that is positioned absolutely will be relative to the body of the page but if it is inside a parent element that is positioned relatively, it will be positioned relative to that parent.

Fixed Positioning

.fixed-box {
  position: fixed;
  top: 5px;
  left: 10px;
}

An element with a fixed position will be placed in a position relative to the browser window. It is taken out of the flow of the page completely and it will not scroll along with the page. It will stay fixed at a particular point.

The element with class fixed-box will have a top margin of 5px from the top of the browser window and a left margin of 10px from the left of the browser window.

If you don't add any top, left, bottom or right properties, you'll find fixed-box at the top-left corner of the browser window.

When you give an element a fixed position, the other elements on the page will re-arrange themselves in response to the fixed element being removed from the page.

Static positioning

All HTML elements are positioned statically by default. Static is the default position of HTML elements on the page.

The Easy Way To Do Basic CSS Animations

Pete — Tue, 04 Oct 2022 20:54:16 +0000

Do animations run automatically once the page loads? YES.

Animation in CSS sounds like a cool thing that manages to be complex at the same time, but an animation is just a change of a CSS property(e.g height) from one value to another. Simple.

Defining Animations

To define a CSS animation, you must specify some keyframes. A keyframe just contains the styles the element you want to animate will have at different times.
You also use keyframes to define the name of an animation. Look at the code snippet below.

@keyframes demo-animation {
  from {
    height: 24px;
  }
  to {
    height: 48px;
  }
}

Code breakdown

The code snippet above will animate the height of any element from 24px to 48px and the animation's name will be demo-animation
In other words, when the animation starts, the height of the element you animate will be 24px and when the animation ends the height will be 48px.

Applying an Animation To an Element

If we want to use the animation we defined on an element with an id animated-element, we simply set the element's animation-name property to demo-animation (the name of the animation that we defined with keyframes).
Look at the code snippet below.

#animated-element {
  animation-name: demo-animation;
  animation-duration: 2s;
}

Code breakdown

animation-name is a CSS property whose value must be a CSS animation that has been defined somewhere with keyframes

demo-animation is the name of the animation. That's what we are passing to animation-name

animation-duration is another CSS property that dictates how long the animation will last. Setting it to 2s means that when the animation starts, the height of the element will be 24px and after two seconds, the height of the element will be 48px.

There are other properties you can assign to an element that affect how the animation you have defined will be run. They include:

animation-delay - the amount of time to wait before the animation starts running.
animation-iteration-count - the number of times the animation should run.
animation-direction - whether the animation should play from start-to-end or from end-to-start. Its values are normal(default), reverse, alternate and alternate-reverse.

You can look the other properties up on MDN

Note that animation properties(CSS properties that start with "animation-") are not to be used inside keyframes. They are to be used inside the style ruleset of the HTML element or elements you want to animate.

Using Fragments Dynamically

Pete — Fri, 23 Sep 2022 10:41:33 +0000

One difference between the lifecycle methods of activities and fragments is in their access modifiers. Activity lifecycle methods are protected while Fragment lifecycle methods are public.

The First Problem With Fragments

In fragments, adding the onClick property to a button or any subclass of the Button class does not work the expected way.
When you add the onClick property in a fragment, android looks for the callback method in the fragment's parent activity, and if the method isn't there, the app crashes(even if the method is in the Fragment class).

The Solution???

You can try to solve this problem by moving the fragment's methods into the parent activity. That solution would work but its side effect would be that if you wanted to reuse the fragment in another activity, you would have to declare the same methods in that activity.

You want your fragments to be self-contained so that won't be recommended. Like every programming problem, there is a solution somewhere. You just have to find it.

The Real Solution

To be able to define your onClick handler methods in your fragment, you can take these steps:

Make your Fragment class implement the View.OnClickListener interface.
Override the fragment's onClick method and use an if-else or a switch to give it different callbacks depending on the id of the view that was clicked. 3 For every button you want to handle, attach the onClick listener to it with button.setOnClickListener(this).

The Second Problem With Fragments

A dynamic fragment's state does not survive configuration changes if it is nested into an activity's layout with the <fragment/> tag. However, it survives if it is added to the activity with a FragmentTransaction and a little tweak.

The Little Tweak

The tweak is adding a fragment to a FrameLayout dynamically and doing that only if the activity is being created from scratch so that you won't overlay a fragment that is being recreated.

Doing this is very simple. Add code to the onCreate method of the activity that checks if the Bundle named savedInstanceState is null.
If the bundle is null, it means the activity is being created from scratch. If it isn't null, it means the activity is being recreated.

Look at the code snippet below.

@Override
protected void onCreate(Bundle savedInstanceState) {
  ...
  if (savedInstanceState == null) {
    DemoFragment frag = new DemFragment();
    FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();
    transaction.add(R.id.fragment_container, frag);
    transaction.addToBackStack(null);
    transaction.commit();
  }
}

Code breakdown

This code snippet is used to add a fragment to an activity only if the activity is being created from scratch.

DemoFragment is the name of the fragment class that you must have created somewhere in your code.

frag is the name of the Fragment instance that you want to add to the activity.

fragment_container is the id of the FrameLayout you want to place your fragment in.

If savedInstanceState is null, it means the activity is being created from scratch, the child fragment has not been rendered yet, and you proceed to add logic for adding the child fragment.

Be sure to notice how the onCreate method's access modifier is protected

Previous article: Switching Fragments With Code

Next article: Displaying Nested Fragments

Switching Fragments With Code

Pete — Mon, 12 Sep 2022 11:21:26 +0000

FragmentTransaction is a class that enables us to add and remove fragments programatically. It works with the backstack just like the one activities use. All we need is a ViewGroup to hold the fragments.

I'm going to list the steps required to work with FragmentTransaction instances. All the code snippets I'll write down will base on the assumption that in our layout xml file there is a FrameLayout with an id of fragmentcontainer that contains or will contain the fragments we will transact with and that the reference to the new fragment is named newFragment.
The steps required are:

Create a FragmentTransaction instance in your activity.
Specify the changes the transaction should include.
Add the transaction to the backstack.
Commit the transaction.

Let's look at each of these steps in detail.

Creating a fragment transaction

Fragment transactions are created inside activities. To create a FragmentTransaction, you call the method beginTransaction() on the result of calling getSupportFragmentManager().

You can create a FragmentTransaction with the code snippet below:

FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();

Specifying Changes in a Fragment Transaction

There are different changes a FragmentTransaction can contain. Each change is specified by a method. Some of these methods are add(), replace(), and remove().

add() and replace()

The add() method adds a new fragment to the backstack. The code snippet below shows how to use the method:

transaction.add(R.id.fragmentcontainer, newFragment);

The replace() method replaces the existing fragment with a new one. The code snippet below shows how to use the method:

transaction.replace(R.id.fragmentcontainer, newFragment);

Code breakdown

The add() and replace() methods take two arguments. They are:

The id of the ViewGroup that contains the fragment
The new fragment that you want to add or replace the old fragment with.

In the code snippets above, transaction is a FragmentTransaction instance, fragmentcontainer is the id of the ViewGroup in our activity that contains the fragment, and newFragment is a reference to the new fragment that we want to add to the backstack or replace the current one with.

remove()

The remove() method removes a fragment from the fragment backstack.

transaction.remove(currentFragment);

Code breakdown

The remove method takes one argument - a reference to the fragment we want to remove. The code snippet above will remove the fragment referenced by currentFragment from the backstack.

Adding a FragmentTransaction to the Backstack

You add a FragmentTransaction to the backstack with the method addToBackStack().
This method takes one argument - a string that you use to label the transaction in case you need to retrieve the transaction programatically.

transaction.addToBackstack("transaction_id");

In the code above, the string "transaction_id" can be used later to retrieve the transaction. You can also pass null into the addToBackStack() method if you don't want to pass a string.

Committing a Transaction

You commit a FragmentTransaction by calling the method commit() on the transaction instance.

transaction.commit();

When you call commit(), the changes you saved in the FragmentTransaction are applied to your application.

Summary

To switch fragments programatically, take these steps:

Create a FragmentTransaction in your activity.

FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();

Specify the changes the transaction should include.

transaction.add(R.id.fragmentcontainer, newFragment);

Add the transaction to the backstack.

transaction.addToBackstack("transaction_id");

Commit the transaction.

transaction.commit();

Previous article: List Fragments
Coming up next: Dynamic Fragments

List Fragments

Pete — Thu, 08 Sep 2022 20:11:55 +0000

ListFragment is a subclass of the Fragment class. List fragments are fragments that extend the ListFragment class. Fragments like this have special methods for working with lists and adapters, they do not need a layout file because they automatically have their own layout, and they have just one root view - a ListView. Modern list fragments can have a GridView though.

Creating a ListFragment

When you create a ListFragment subclass, you won't need to override onCreateView() unless you want to add some custom behavior to it.
If you want to override it however, you'll have to call super() in the method body.
Let's create a list fragment named DemoListFragment and override onCreateView()

public class DemoListFragment extends ListFragment {
    @Override
    public View onCreateview(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        return super.onCreateView(inflate, container, savedInstanceState);
    }
}

Code breakdown
In the onCreateView method, we did not inflate an xml layout file. This is because list fragments have their own layout automatically and so we don't need to inflate our own xml file.

Binding Data to ListFragments

In list fragments, you bind data to their ListViews with adapters just like in activities, but there are two major differences. They are:

The constructor of an Adapter usually takes a Context argument. If you were constructing the Adapter in an activity, you would have passed it this as the Context argument because activities implement Context. But since the adapter is getting constructed in a fragment(an object that doesn't implement Context), you have to get the context from somewhere else. You have to pass it the result of calling getContext() on the LayoutInflater object.

Assuming you want to create an ArrayAdapter named adapter, for an array named demoArray and the layout for one list item is defined in the file list_item.xml, you can do the job with the code snippet below.

ArrayAdapter<String> adapter = new ArrayAdapter(inflater.getContext(), android.R.layout.list_item, demoArray);
setListAdapter(adapter);

We use setListAdapter() to set the adapter, and not .setAdapter(). That is because ListFragments already have a built-in reference to the list that you want to bind the adapter to. So you don't need to call it explicitly.

Responding to Clicks in the List Fragment

ListFragment implements a listener automatically so you just have to implement the method onListItemClick() to respond to clicks.
You can implement onListItemClick() the default way - just by adding custom code to it - but it will make your Fragment tightly coupled to your activity. To achieve loose coupling, you'll have to go extra steps. These steps are:

Create an interface named Listener that has a handler method named itemClicked(). Any activity that we want to respond to clicks will implement the interface and override its method.

static interface Listener {
    void itemClicked(long id);
}

Create a private field inside the ListFragment to keep a reference to the activity that is listening.

private Listener listener;

@Override void onAttach(Context context) {
    super.onAttach(context);
    this.listener = (Listener) context;
}

In the list fragment's onListItemClick() method, respond to clicks by calling the listener's handler method named itemClicked().

public void onListItemClick(ListView listView, View itemView, int position, long id) {
    if (listener != null) {
        listener.itemClicked(id);
    }
}

With these done, we can implement the Listener interface in any Activity our ListFragment will be attached to, override its itemClicked() method and write some custom logic in it to handle the click.

class DemoActivity extends AppCompatAtivity implements Listener {
    @Override 
    void itemClicked(long id) {
        // You can add custom logic here
    }
}

Previous article: Getting an Activity and a Fragment to Interact

Coming up next: Switching Fragments Programatically

Getting an Activity and a Fragment to Interact

Pete — Wed, 07 Sep 2022 13:32:59 +0000

There are two ways activities and fragments interact. It's either the actvity calls the methods in its fragments or the fragment calls the methods in its parent activity.
When an activity calls the methods of its fragments, it can pass data into and receive data from the fragments through the fragment's methods. The same goes for when fragments call methods on their activities. Now let's get into it.

Activity to Fragment Communication

For an activity to communicate with its fragment, it needs a reference(or pointer) to the fragment. You get this reference to the fragment by calling the method findFragmentById() on the result of calling either getFragmentManager() or getSupportFragmentManager().
If we had a fragment called DemoFragment with an id of demofragment, we would get a reference to it with the code below:

FragmentManager fragmentManager = getSupportFragmentManager();
DemoFragment demoFragment = (DemoFragment)fragmentManager.findFragmentById(R.id.demofragment);

Code breakdown
Calling the function getSupportFragmentManager() returns a FragmentManager instance. That instance has a method named findFragmentById().

It's important to know that the id of a fragment must be assigned in the <fragment/> tag in the activity's xml layout file. This way, one fragment can have different ids in different activities.

When you call the method findFragmentById on the fragment manager, you need to type-cast it as the fragment class you want. The result of calling this method will be a reference to the fragment.

When the activity has that reference to the fragment, it can access all its public fields and properties, and call all its public methods. That is how an activity can communicate with a fragment.

Fragment to Activity Communication

For a fragment to communicate with its parent activity, it needs to get a reference to its activity.
Assuming we have an activity named DemoActivity and we want to call one of its public methods named demoMethod(), we can do the job with the code snippet below:

((DemoActivity)getActivity()).demoMethod();

Code breakdown

To explain the code, let's divide it into two parts. Everything before the dot( . ) is the first part and everything after it is the second part. Let's look at the first part.

((DemoActivity)getActivity()):
In this part, we are calling the method getActivity() and converting it to an instance of our activity with type-casting. The result we'll get from this operation will be a reference to our activity. Now let's look at the second part.

demoMethod():
This is a private method defined in our DemoActivity class. We are calling it through the activity reference we just got.

Fragment Lifecycle Methods

Fragment lifecycle methods are linked to Activity lifecycle methods. This is a list of the fragment lifecycle methods:

onAttach(Context): This method is called when a fragment is associated with a context

onCreate(Bundle): This method is the fragment's equivalent ot onCreate().

onCreateView(LayoutInflater, ViewGroup, Bundle): This is the method that's called to inflate the fragment's view.

onActivityCreated(Bundle): This method is called when the parent activity's onCreate method has completed.

onStart(): is called when the fragment is created fully in the background.

onResume(): is called when the fragment becomes visible in the foreground.

onPause(): is called when a fragment leaves the foreground.

onStop(): is called when the fragment stops being visible to the user (when it enters the background)

onDestroyView: This method is called when the UI of the frgament is destroyed. It gives the developer the chance to clear any resources that are associated with the fragment's view.

onDestroy(): This method is used to clear any other resources associated with the fragment's class.

onDetach(): This method is called when the fragment is disassociated with the activity.

The diagram below shows how the fragment lifecycle relates to the activity lifecycle and the points at which their lifecycles intersect. The fragment lifecycle callbacks are on the right.

The Fragment class doesn't implement the Context interface so a fragment isn't a type of context, and therefore doesn't have access to global information about the app environment. For fragments to access this data, they must use the context of other objects such as their parent activity.

Previous article: Android Fragments
Coming up next: List Fragments

Android Fragments

Pete — Tue, 06 Sep 2022 12:39:48 +0000

To understand this article, you need to know that a fragment is a reusable component, it has a layout file that declares its UI and other basic stuff. I'll be showing you how to use it from first principle.

Creating Fragments

All fragments must have a public constructor with no parameters(I'll be calling it a 'public no-arg constructor'). If you create a fragment class without one, you'll get a runtime exception. Java auto-generates a public no-arg constructor at runtime if there are no other constructors in the class but if you declare another constructor in the class, you'll have to declare the public no-arg constructor by yourself.

Fragments have a method named onCreateView(). This method is where the fragment's layout gets inflated. The method signature and body are usually like this:

public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
    return inflater.inflate(R.layout.<layoutFileName>,container, false);
}

Code Breakdown
We can see that the method takes three arguments - A LayoutInflater instance used to inflate or bind the layout you want to the component, a ViewGroup that represents the portion of the activity's layout that the fragment will be inflated onto, and a Bundle for saving instance state.

Inside the method body, the LayoutInflater calls its inflate() method. Its inflate method takes 3 arguments:

The layout you want to inflate
The ViewGroup passed into onCeateView()
a boolean value called attachToRoot

In summary, the LayoutInflater object creates a View object and the onCreateView method returns the View that's created.

Adding a Fragment To An Activity

To add a fragment to an activity's layout, we add the <fragment/> tag to the activity's xml layout file. The name property of the fragment tag must be the fully-qualified name of the fragment class we want to associate with the layout.

<fragment
    android:name="com.example.demoapp.ExampleFragment"
    android:layout_width="match_parent" />

The code above assumes that we are building an app with the package name com.example.demoapp and that the name of the fragment class is either ExampleFragment.java or ExampleFragment.kt

You can apply other regular xml properties to your <fragment/> tag. If there are no other views in your activity, your fragment can be its root layout.

Next: Getting an Activity and a Fragment to Interact

My Goals For HNG i8

Pete — Sun, 15 Aug 2021 07:58:44 +0000

I'm a mobile app developer skilled in building Flutter applications and I recently joined the HNG i8 internship.

The HNG internship is like military and coding bootcamps combined. It is highly competitive. It pushes everyone beyond their limits, teaches people industry-standard work practices and it does it in a very practical, hands-on way. In HNG, you either push yourself to perform or you take the next bus home.

I'm a developer who gets creative when my fight or flight response is triggered and so HNG is the place for me.

As an intern in HNG, my goals are to adapt to working in a fast-paced, real world environment, to build and debug real world software, collaborate with like-minded people, expand my network, catch the attention of big tech companies and to get that legendary T-shirt.

The registration link for the internship is:
https://internship.zuri.team

Figma tutorial link:
https://youtu.be/jk1T0CdLxwU

Git tutorial link:
https://youtu.be/8JJ101D3knE

HTML tutorial link:
https://youtu.be/qz0aGYrrlhU

Dart language tutorial link:
https://youtu.be/Ej_Pcr4uC2Q

Flutter tutorial link:
https://youtube.com/playlist?list=PLSzsOkUDsvdtl3Pw48-R8lcK2oYkk40cm