1. How Inflation Works!

2. Examine the following code public class MainActivity extends Activity { @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); }

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

4. Examine the following code public class MainActivity extends Activity { @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); }

5. Result when calling setContentView()

6. What is setContentView() doing? @Override public void setContentView(int layoutResID) { 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

7. What is setContentView() doing? @Override public void setContentView(int layoutResID) { 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()

8. Inflation?? Inflation happens when you instantiate an XML layout resource file into its corresponding View objects.

9. Let’s try explaining inflation with HTML Let's explain how Inflation works!

10. In the background, we have the DOM Let's explain how Inflation works! html body p DOM Tree

11. 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.

12. How to add this HTML Snippet into the ? I am some text that will be inflated 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

13. html body p I am some text that will be inflated A naive attempt. Directly add HTML to DOM nodes.

14. html body p I am some text that will be inflated A naive attempt. Directly add HTML to DOM nodes. BAD!!!

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

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

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

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

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

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

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

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

23. Inflation: Going from HTML to Node Object I am some text that will be inflated snippet.html Inflater Machine

24. Objects Inflation: Going from HTML to Node Object I am some text that will be inflated snippet.html HTMLHTML Inflater Machine bg-color: red #text: I am…

25. Bringing it all together html body p bg-color: red #text: I am…

26. Let's explain how Inflation works! I am some text that will be inflated html body p bg-color: red #text: I am…

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