How Inflation Works!

How Inflation Works!

Examine the following code publicclassMainActivityextends Activity { @Override publicvoidonCreate(Bundle savedInstanceState){ super.onCreate(savedInstanceState); } }

This is what happens when you don’t call setContentView()

Examine the following code publicclassMainActivityextends Activity { @Override publicvoidonCreate(Bundle savedInstanceState){ super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); } }

Result when calling setContentView()

What is setContentView() doing? @Override publicvoidsetContentView(intlayoutResID){ if(mContentParent==null){ installDecor(); }else{ mContentParent.removeAllViews(); } mLayoutInflater.inflate(layoutResID,mContentParent); final Callback cb=getCallback(); if(cb!=null&&!isDestroyed()){ cb.onContentChanged(); } } Taken from PhoneWindow.java

What is setContentView() doing? @Override publicvoidsetContentView(intlayoutResID){ if(mContentParent==null){ installDecor(); }else{ mContentParent.removeAllViews(); } mLayoutInflater.inflate(layoutResID,mContentParent); final Callback cb=getCallback(); if(cb!=null&&!isDestroyed()){ cb.onContentChanged(); } } 1 Passing in specified layout resource to LayoutInflater.inflate()

Inflation?? Student: Professor Raley, you keep saying this word inflation over and over again but I still have no idea what you’re talking about. Me: Inflation happens when you instantiate a XML layout resource file into its corresponding View objects. Student: ?????

Let’s try explaining inflation with HTML <html> <body> <p>Let's explain how Inflation works!</p> </body> </html>

In the background, we have the DOM <html> <body> <p>Let's explain how Inflation works!</p> </body> </html> html body p DOM Tree

DOM Refresh • The DOM is a tree of node objects representing an HTML document. • The DOM is not actual HTML markup, it is javascript node Objects.

How to add this HTML Snippet into the <body>? <divstyle="background-color:red"> <p>I am some text that will be inflated</p> </div> • Imagine this HTML is stored in a separate file called snippet.html • We want to take this snippet and somehow add it into the DOM

A naive attempt. Directly add HTML to DOM nodes. html body p <divstyle="background-color:red"> <p>I am some text that will be inflated</p> </div>

BAD!!! A naive attempt. Directly add HTML to DOM nodes. html body p <divstyle="background-color:red"> <p>I am some text that will be inflated</p> </div>

Convert HTML to node <divstyle="background-color:red"> <p>I am some text that will be inflated</p> </div> <scripttype="text/javascript"> //create a new <div> node var div =document.createElement("div"); //set background color of <div> to red div.style.backgroundColor="red"; //create a <p> node var p =document.createElement("p"); p.innerHTML="I am some text that will be inflated"; //find <body> var body =document.getElementByTagName("body")[0]; //attach <p> to <div> div.appendChild(p); //attach <div> to <body> body.appendChild(div); </script>

Convert HTML to node <scripttype="text/javascript"> //create a new <div> node var div =document.createElement("div"); //set background color of <div> to red div.style.backgroundColor="red"; //create a <p> node var p =document.createElement("p"); p.innerHTML="I am some text that will be inflated"; //find <body> var body =document.getElementByTagName("body")[0]; //attach <p> to <div> div.appendChild(p); //attach <div> to <body> body.appendChild(div); </script>

Convert HTML to node <div> <scripttype="text/javascript"> //create a new <div> node var div =document.createElement("div"); //set background color of <div> to red div.style.backgroundColor="red"; //create a <p> node var p =document.createElement("p"); p.innerHTML="I am some text that will be inflated"; //find <body> var body =document.getElementByTagName("body")[0]; //attach <p> to <div> div.appendChild(p); //attach <div> to <body> body.appendChild(div); </script>

Convert HTML to node bg-color: red <div> <scripttype="text/javascript"> //create a new <div> node var div =document.createElement("div"); //set background color of <div> to red div.style.backgroundColor="red"; //create a <p> node var p =document.createElement("p"); p.innerHTML="I am some text that will be inflated"; //find <body> var body =document.getElementByTagName("body")[0]; //attach <p> to <div> div.appendChild(p); //attach <div> to <body> body.appendChild(div); </script>

Convert HTML to node bg-color: red <p> <div> <scripttype="text/javascript"> //create a new <div> node var div =document.createElement("div"); //set background color of <div> to red div.style.backgroundColor="red"; //create a <p> node var p =document.createElement("p"); p.innerHTML="I am some text that will be inflated"; //find <body> var body =document.getElementByTagName("body")[0]; //attach <p> to <div> div.appendChild(p); //attach <div> to <body> body.appendChild(div); </script>

Convert HTML to node bg-color: red #text: I am… <p> <div> <scripttype="text/javascript"> //create a new <div> node var div =document.createElement("div"); //set background color of <div> to red div.style.backgroundColor="red"; //create a <p> node var p =document.createElement("p"); p.innerHTML="I am some text that will be inflated"; //find <body> var body =document.getElementByTagName("body")[0]; //attach <p> to <div> div.appendChild(p); //attach <div> to <body> body.appendChild(div); </script>

Convert HTML to node <body> bg-color: red #text: I am… <p> <div> <scripttype="text/javascript"> //create a new <div> node var div =document.createElement("div"); //set background color of <div> to red div.style.backgroundColor="red"; //create a <p> node var p =document.createElement("p"); p.innerHTML="I am some text that will be inflated"; //find <body> var body =document.getElementByTagName("body")[0]; //attach <p> to <div> div.appendChild(p); //attach <div> to <body> body.appendChild(div); </script>

Inflation: Going from HTML to Node Object snippet.html <divstyle="background-color:red"> <p>I am some text that will be inflated</p> </div> Inflater Machine

Inflation: Going from HTML to Node Object snippet.html <divstyle="background-color:red"> <p>I am some text that will be inflated</p> </div> HTML bg-color: red <div> #text: I am… Inflater Machine <p> Objects

Bringing it all together html body p bg-color: red <div> #text: I am… <p>

html body bg-color: red <div> #text: I am… <p> p <html> <body> <p>Let's explain how Inflation works!</p> <divstyle="background-color:red"> <p>I am some text that will be inflated</p> </div> </body> </html>

In Android World • ((Activity)context).getLayoutInflater() • .inflate(R.layout.rating_text_view,this);

How Inflation Works!