Vtube all about Technology

Thursday, 16 January 2014

How to Add an Admin Control Panel in Blogger

A while ago I posted some tutorials on how you can remove the Blogger Navbar or add a Peek A Boo Effect so that it would show only when we mouse over on top of our page.

However, customizing or removing the Blogger Navbar also has its downside because the admin links for "New post", "Customize" and "Log Out" will be no longer visible and navigating through the blog functions could be really frustrating sometimes. When the navbar is visible, blog administrators can easily create a new post or customize their template with just one click; however, when the navbar is hidden, many more clicks are required to access the Blogger dashboard panel again.

In this tutorial, we'll see how to add an "Admin Control Panel" menu with many cool additions such as:

access to the Blogger's Homepage
create a New Page or Post
view all your posts
read your comments
access the Blog's layout to add or rearrange gadgets
edit the HTML of your Template
refresh current page or post
open a new tab with your blog's homepage
access the blog' settings
view your stats
log out

We will put all these options on the top of your page as a menu and we will make it visible only to the administrator of the blog, so our blog visitors will not be able to see it.

The result will look something like this:

Adding Admin Control Panel to Blogger template

The Admin Control Panel will only be visible when the blog author is logged in and will not display to blog readers, same with the Post Edit or widget pencil icons which are only visible to you while you are logged in.

To add the admin panel to Blogger, follow the steps below:

Step 1. Go to "Template" and click on the "Edit HTML" button:

Step 2. Click anywhere inside the code area and press the CTRL + F keys to open the Blogger' search box

Step 3. Paste this line inside the search box then hit Enter to find it:

<body expr:class='"loading" + data:blog.mobileClass'>

Note: if you can't find this line, try to find the <body> tag.

Step 4. Just below that line or tag, add the following code:

<span class='item-control blog-admin'>
<style>
.control-panel ul{z-index: 20; position: absolute; margin: 0px auto; background-color: #F6F6F6; width: 100%; }
.control-panel ul li{display: inline-block; float: left; padding: 7px 0px;}
.control-panel ul li a {color:#686868;padding: 7px 15px;border-right: 1px solid #E3E3E3;font-weight: bold;font-size: 13px;}
.control-panel a:hover {text-decoration:none; color:#FC8F44;}
</style>
<div class='control-panel'>
<ul>
<li><a href='http://www.blogger.com/home'>My Blogs</a></li>
<li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#editor/src=sidebar"' rel='nofollow'>New Post</a></li>
<li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#editor/target=page"' rel='nofollow'>New Page</a></li>
<li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#posts"' rel='nofollow'>All Posts</a></li>
<li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#comments"' rel='nofollow'>Comments</a></li>
<li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#pageelements"' rel='nofollow'>Layout</a></li>
<li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#templatehtml"' rel='nofollow'>Edit HTML</a></li>
<li><a href='#' onclick='location.reload(true); return false;'>Refresh</a></li>
<li><a href='/' target='_blank'>New Tab</a></li>
<li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#basicsettings"' rel='nofollow'>Settings</a></li>
<li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#overviewstats"' rel='nofollow'>Stats</a></li>
<li><a href='http://www.blogger.com/logout.g'>Logout</a></li>
</ul>
</div>
</span>

Step 4. Click on the "Save template" button to save the changes.

Now take a look on your blog. While you are logged in to Blogger, you should notice your control panel appear on top of your blog. Enjoy!

With this admin control panel for Blogger you can easily access the functions of the blog and you will not have to always open your blog page and the Blogger homepage at the same time.

How to Add Adsense Ads In the Middle or Anywhere inside Blogger Posts

In a previous post, we saw how and where we can place Adsense ads on our blog; however, these methods would only work when we place the ads on predetermined and fixed locations. For posts area, the most common places are below the title, at the beginning of the post or at the end of it.

But what if we want to display an AdSense ad in the middle of a post?

We can manipulate the location of the ads to be displayed by adding a script inside the template and using a tag inside our post to where we want the AdSense ad to appear. Once added, we can place the ads anywhere, be it between paragraphs or in the middle of the content etc.

Related: Insert AdSense inside posts after the first paragraph

Manually inserting AdSense ads in the middle of posts in Blogger is pretty easy, just follow these steps below:

Adding Adsense Ads In the Middle or Anywhere inside Blogger Posts

Before proceeding, it is recommended to backup your template: go to "Template" and click on the "Backup/restore" button to save a copy on your hard drive.

Adding the script

Step 1. First thing we need to do is to parse the AdSense code and convert it to plain text. Then go to "Template", click on the "Edit HTML" button and click anywhere inside the code area to search using CTRL + F keys for this tag:

<data:post.body/>

Note: you may find it several times, but we need to stop at the second one. Or, if you can't see any changes, test the third one.

Step 2. Replace <data:post.body/> with this code:

<div expr:id='"adsmiddle1" + data:post.id'></div>
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<div style="clear:both; margin:10px 0">

</div>
</b:if>
</b:if>
<div expr:id='"adsmiddle2" + data:post.id'>
<data:post.body/>
</div>
<script type="text/javascript">
var obj0=document.getElementById("adsmiddle1<data:post.id/>");
var obj1=document.getElementById("adsmiddle2<data:post.id/>");
var s=obj1.innerHTML;
var r=s.search(/\x3C!-- adsense --\x3E/igm);
if(r>0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+16);}
</script>

Step 3. Add the converted Adsense code on where you see the  annotation, then save the changes by clicking on the "Save template" button.

Note: For centering the ads, add the <center></center> tags before and after the AdSense code, like this:

<div style="clear:both; margin:10px 0">
<center>

</center>
</div>

Adding the AdSense annotation to display the ad

Step 4. When you create a New Post, add this annotation inside the "HTML" section to where you want the Google AdSense ads to appear:

For example:

This is a demo text. This is a demo text. This is a demo text. This is a demo text. This is a demo text. This is a demo text. This is a demo text. This is a demo text. This is a demo text. This is a demo text.<br /><br /> This is a demo text. This is a demo text. This is a demo text. This is a demo text. This is a demo text. This is a demo text. This is a demo text. This is a demo text. This is a demo text. This is a demo text.

AdSense annotation in the middle of the post content

Please note that if you don't add this annotation to specify where to display the ad, then it will appear below the title by default.

So this is how we can add AdSense ads in the middle or anywhere inside our Blogger posts. Don't worry about violating the Google's Terms of Service because applying this method will not modify the ad' structure.

Monday, 13 January 2014

How to create click events using CSS

An event is something that happens when we do something. In CSS, the most common is the hover selector which helps us to select elements when we mouse over them and then an event is executed automatically. There is one way to avoid this since in modern browsers there is a property called pointer-events which allows us to disable them. For instance, if we have a link and we set the pointer-events property value to none, it would simply not work:

<a href="page-url" style="pointer-events: none;">Click here</a>

Many use :target to make it work, however, this is not always the best choice if we consider its jumping behavior - click on the link below to see what happens:

Link with target

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu cursus dui, ac fermentum eros. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce elementum sapien et augue fringilla aliquam. Ut a viverra libero, eget commodo nisi. Maecenas ultrices facilisis dignissim.

<style>
#linktarget {display: none;}
#linktarget:target {display: block;}
</style>
<a href="#linktarget">Link with target</a>
<div id="linktarget">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu cursus dui, ac fermentum eros. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce elementum sapien et augue fringilla aliquam. Ut a viverra libero, eget commodo nisi. Maecenas ultrices facilisis dignissim.
</div>

Another option is to use the :focus selector which will make the hidden content to expand on mouse click.
The advantage of this selector is that the page stays still, however, we have to click anywhere "outside" to close the expanded content and besides this, the hidden content should be immediately after, with no intermediate tags:

Demo with focus

<style>
.focuselector {display: none;}
span:focus ~ .focuselector {display: block;}
</style>
<span tabindex="0">Link with focus</span>
<div class="focuselector">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu cursus dui, ac fermentum eros. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce elementum sapien et augue fringilla aliquam. Ut a viverra libero, eget commodo nisi. Maecenas ultrices facilisis dignissim.
</div>

The last method is more fancy even though it requires more tags but it works the best since it allows us to create a toggle effect, i.e., expand on click and then collapse when clicking again. In this case, we'll use the :checked selector:

Demo with checked

<style>
.checked-selector {display: none;}
:checked ~ .checked-selector {display: block;}
input.hidden[type=checkbox] {position: absolute;left: -999em;}
</style>

<label for="toggle-hidden">Demo with checked</label>
<input type="checkbox" id="toggle-hidden" class="hidden" />
<div class="checked-selector">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu cursus dui, ac fermentum eros. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce elementum sapien et augue fringilla aliquam. Ut a viverra libero, eget commodo nisi. Maecenas ultrices facilisis dignissim.
</div>

To apply these effects on the links and content that you want to hide and expand only on mouse click is very easy: when you create a post, paste one of the codes above inside the HTML box and replace the text in blue with the name of your link and add your text instead of the green one.

Sunday, 12 January 2014

How to add a thumbnail image/photo gallery in Blogger

For those who would like to show pictures in an image gallery, here's a beautiful gallery made with JavaScript and CSS. This image gallery displays the available thumbnails either vertically or horizontally on top of the chosen picture, thus making it easier for you to pick different images on mouse click.

With the help of CSS, we can make the <img> element to display on same position with the rest of the thumbs and style the thumbnails as small blocks with a defined height and width. The script will add a click-event for each <li> object that changes it's child's <img> visibility and will assign an "active" class name to the <li>.

Related: Image Slider with Mouse Hover Effect using CSS only

Demo blog

How to Add Image Gallery with Thumbnails to Blogger

Step 1. Log in to your Blogger account, select your blog and go to "Template", press the "Edit HTML" button.

Step 2. Click anywhere inside the code area and press the CTRL + F keys to open the search box:

Step 3. Type the following tag inside the search box and hit Enter to find it:

</head>

Step 4. Now pick one of the styles below and copy the code below it:

Style 1 Demo

<style type='text/css'>
#image-gallery {display: none;}
#jquery-gallery {padding:0;margin:0;list-style: none; width: 500px;}
#jquery-gallery li {width:84px; height: 80px;background-size: 100%;-webkit-background-size: cover;-moz-background-size: cover; -o-background-size: cover;background-size: cover;margin-right: 10px; border: 3px solid #fff; outline: 1px solid #E3E3E3; margin-bottom: 10px;opacity: .5; filter:alpha(opacity=50); float: left; display: block; }
#jquery-gallery li img { position: absolute; top: 100px; left: 0px; display: none;}
#jquery-gallery li.active img { display: block; border: 3px solid #fff; outline: 1px solid #E3E3E3; width:490px; max-height: 375px;}
#jquery-gallery li.active, #jquery-gallery li:hover { outline-color: #DFDFDF; opacity: .99;filter:alpha(opacity=99);}
#gallery-caption {background: rgba(0, 0, 0, 0.3);color: #fff;font-size: 16px;font-weight: bold;left: 3px;position: absolute;text-align: center;top: 103px;width: 490px;text-transform: uppercase;}
</style>

Style 2 Demo

<style type='text/css'>
#image-gallery { display: none; }
#jquery-gallery {padding:0;margin:0;list-style: none; width: 200px; }
#jquery-gallery li {background-size: 100%;-webkit-background-size: cover;-moz-background-size: cover; -o-background-size: cover;background-size: cover;margin-right: 10px; width: 80px; height: 80px; border: 3px solid #fff; outline: 1px solid #ddd; margin-right: 10px; margin-bottom: 10px; opacity: .5;filter:alpha(opacity=50); float: left; display: block; }
#jquery-gallery li img { position: absolute; top: 0px; left: 200px; display: none; }
#jquery-gallery li.active img { display: block; width:370px; border: 3px solid #fff; outline: 1px solid #E3E3E3; }
#jquery-gallery li.active, #jquery-gallery li:hover { outline-color: #bbb; opacity: .99;filter:alpha(opacity=99);}
#gallery-caption {background: rgba(0, 0, 0, 0.3);color: #fff;font-size: 16px;font-weight: bold;text-transform: uppercase;margin: 0 -17px;position: absolute;right: 0;text-align: center;top: 3px;width: 370px;}
</style>

Note: The display: none; for the first ID (#image-gallery) is to prevent images appear with their actual size before they go inside the gallery container.

In #jquery-gallery we have the width of the container for the thumbnails (200px), so that they display in two rows and for this we need to calculate the width of the thumbnail (80px) plus the margins between them.

The left declaration of #jquery-gallery li img is to move the larger thumbnail that shows on mouse click so that it doesn't overlap with the smaller thumbnails.

Step 5. Paste the code of the chosen style just above the </head> tag.

Step 6. Now above the same </head> tag, add this script:

<script type='text/javascript'>
//<![CDATA[
var gal = {
init : function() {
if (!document.getElementById || !document.createElement || !document.appendChild) return false;
if (document.getElementById('image-gallery')) document.getElementById('image-gallery').id = 'jquery-gallery';
var li = document.getElementById('jquery-gallery').getElementsByTagName('li');
li[0].className = 'active';
for (i=0; i<li.length; i++) {
li[i].style.backgroundImage = 'url(' + li[i].getElementsByTagName('img')[0].src + ')';
li[i].title = li[i].getElementsByTagName('img')[0].alt;
gal.addEvent(li[i],'click',function() {
var im = document.getElementById('jquery-gallery').getElementsByTagName('li');
for (j=0; j<im.length; j++) {
im[j].className = '';
}
this.className = 'active';
document.getElementById('gallery-caption').innerHTML = this.title;
});
}
},
addEvent : function(obj, type, fn) {
if (obj.addEventListener) {
obj.addEventListener(type, fn, false);
}
else if (obj.attachEvent) {
obj["e"+type+fn] = fn;
obj[type+fn] = function() { obj["e"+type+fn]( window.event ); }
obj.attachEvent("on"+type, obj[type+fn]);
}
}
}
gal.addEvent(window,'load', function() {
gal.init();
});
//]]>
</script>

Basically, what this script does is to check if there is any ID named "image-gallery" and get the different list items that may exist within it. These elements will be displayed as thumbnails and a function will decide what to do once they are clicked. So, each time we click on a thumbnail, the "active" class will be assigned and the thumbnail should be visible in the larger container.

Step 7. Finally, save the changes by clicking the "Save template" button.

And here's the HTML code providing a normal list with the image-gallery ID, enclosed within a DIV with a relative position in order to avoid side effects of other pre-existing positions.

Step 8. Paste the below HTML to where you want to display the gallery by going either to "Layout" and adding a new gadget (click on the "Add a gadget" link and choose "HTML/JavaScript" option), or inside a post/page in the HTML section.

<div style="position:relative;">
<ul id="image-gallery">
<li><img src="IMAGE-URL1" /></li>
<li><img src="IMAGE-URL2" /></li>
<li><img src="IMAGE-URL3" /></li>
<li><img src="IMAGE-URL4" /></li>
<li><img src="IMAGE-URL5" /></li>
</ul>
</div>

Note: if elements on your page overlap with this gallery, you might need to add the height declaration after "position: relative;". The value of height depends on the size of your gallery.

Example:

<div style="position:relative; height: 500px;">

Change IMAGE-URL1 with the image URL. If you don't know how to get the address of an image, see this tutorial: How to Upload Images and Get the URL

In case you need to make the pictures clickable, add this HTML structure instead:

<div style="position:relative;">
<ul id="image-gallery">
<li><a href="page-URL"><img src="IMAGE-URL1" /></a></li>
<li><a href="page-URL"><img src="IMAGE-URL2" /></a></li>
<li><a href="page-URL"><img src="IMAGE-URL3" /></a></li>
<li><a href="page-URL"><img src="IMAGE-URL4" /></a></li>
<li><a href="page-URL"><img src="IMAGE-URL5" /></a></li>
</ul>
</div>

Again, here you need to replace the page-URL text with the URL of your page/post.

Update: To add captions, please include the lines in orange and then replace the "Caption" with the text that you want to appear on each picture:

<div style="position:relative;">
<ul id="image-gallery">
<li><a href="page-URL"><img alt="Caption" src="IMAGE-URL1" /></a></li>
<li><a href="page-URL"><img alt="Caption" src="IMAGE-URL2" /></a></li>
<li><a href="page-URL"><img alt="Caption" src="IMAGE-URL3" /></a></li>
<li><a href="page-URL"><img alt="Caption" src="IMAGE-URL4" /></a></li>
<li><a href="page-URL"><img alt="Caption" src="IMAGE-URL5" /></a></li>
</ul>
<div id="gallery-caption"></div>
</div>

Save the widget or publish your page and you're done adding the thumbnail image / photo gallery in Blogger.

working with Fragments in android

Fragments are one of the most useful user interface components in android. Making of a very complex user interface made easy by using the fragments. We can easily categorize an android activity into separate modules using the fragment feature of android.
Ads by Google

Why we use the fragment ?

We know that there are a lot of android devices with different screen resolutions are available on the market. So the making of an android app for a particular device or resolution is not practical. Fragments help us to solve this problem. We can categorize the UI of an activity using fragments. If the app open in a high resolution device then the detailed representation of the activity shown and if it is a standard definition device then the system shows only one or more fragment view of that activity.

You can implement the Fragments in two ways

1. Insert the Fragment directly in to the XML file of an activity.

2. Insert the Fragment programatically to an activity.

While working with Fragments make sure that you select the minimum sdk version as Android 3.0 (API : 11)

How to insert a Fragment directly into the XML file of an android activity ?

Create a new android application project in eclipse IDE.

Step 1: Right click the layout folder and create a new android layout xml file and name it as fragment_layout.

fragment_layout.xml

1:  <?xml version="1.0" encoding="utf-8"?>  
2:  <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3:    android:layout_width="match_parent"  
4:    android:layout_height="match_parent"   
5:    android:background="#657578"  
6:    >  
7:    <TextView  
8:      android:id="@+id/textView1"  
9:      android:layout_width="wrap_content"  
10:      android:layout_height="wrap_content"  
11:      android:layout_alignParentTop="true"  
12:      android:layout_centerHorizontal="true"  
13:      android:layout_marginTop="141dp"  
14:      android:text="Welcome to first fragment"  
15:      android:textAppearance="?android:attr/textAppearanceLarge" />  
16:  </RelativeLayout>

Step 2 : Right click the package and create a new java class with name FirstFragment. Extends that class with Fragment and make the override method onCreateView(). Now inflate the Fragment layout through the inflate() method and finally return view of the fragment.

FirstFragment.java

1:  package com.fragment1;  
2:  import android.app.Fragment;  
3:  import android.os.Bundle;  
4:  import android.view.LayoutInflater;  
5:  import android.view.View;  
6:  import android.view.ViewGroup;  
7:  public class FirstFragment extends Fragment {  
8:       @Override  
9:       public View onCreateView(LayoutInflater inflater, ViewGroup container,  
10:                 Bundle savedInstanceState) {  
11:            // TODO Auto-generated method stub  
12:            View v;  
13:            v = inflater.inflate(R.layout.fragment_layout, container,false);  
14:            return v;  
15:       }  
16:  }

Step 3: Add the Fragment to the activity. In that Fragment the android:name indicates the Fragment class file.

1:  <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
2:    xmlns:tools="http://schemas.android.com/tools"  
3:    android:layout_width="match_parent"  
4:    android:layout_height="match_parent"  
5:    android:paddingBottom="@dimen/activity_vertical_margin"  
6:    android:paddingLeft="@dimen/activity_horizontal_margin"  
7:    android:paddingRight="@dimen/activity_horizontal_margin"  
8:    android:paddingTop="@dimen/activity_vertical_margin"  
9:    tools:context=".MainActivity"  
10:    android:background="#E0DDBD"  
11:     >  
12:    <TextView  
13:      android:id="@+id/textView1"  
14:      android:layout_width="wrap_content"  
15:      android:layout_height="wrap_content"  
16:      android:layout_alignParentLeft="true"  
17:      android:layout_alignParentTop="true"  
18:      android:layout_marginLeft="70dp"  
19:      android:text="Main Activity"  
20:      android:textAppearance="?android:attr/textAppearanceLarge" />  
21:    <fragment  
22:      android:id="@+id/fragment1"  
23:      android:name="com.fragment1.FirstFragment"  
24:      android:layout_width="wrap_content"  
25:      android:layout_height="match_parent"  
26:      android:layout_below="@+id/textView1"  
27:      android:layout_centerHorizontal="true"  
28:      android:layout_marginTop="31dp" />  
29:  </RelativeLayout>

Watch video of this topic

How to add Fragment Programatically to an Activity ?
Create a new android application project in eclipse. Create two fragments with layout names fragment_one and fragment_two and their corresponding class names are FragmentOne and FragmentTwo.
Add a button on the activity_main.xml file. Also don't forget to add an id for activity_mail.xml file.

1:  <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
2:    xmlns:tools="http://schemas.android.com/tools"  
3:    android:layout_width="match_parent"  
4:    android:layout_height="match_parent"  
5:    android:paddingBottom="@dimen/activity_vertical_margin"  
6:    android:paddingLeft="@dimen/activity_horizontal_margin"  
7:    android:paddingRight="@dimen/activity_horizontal_margin"  
8:    android:paddingTop="@dimen/activity_vertical_margin"  
9:    tools:context=".MainActivity"   
10:    android:id="@+id/main_id"  
11:    >  
12:    <TextView  
13:      android:id="@+id/textView1"  
14:      android:layout_width="wrap_content"  
15:      android:layout_height="wrap_content"  
16:      android:layout_alignParentTop="true"  
17:      android:layout_centerHorizontal="true"  
18:      android:text="Main Activity"  
19:      android:textAppearance="?android:attr/textAppearanceLarge" />  
20:    <Button  
21:      android:id="@+id/b1"  
22:      android:layout_width="wrap_content"  
23:      android:layout_height="wrap_content"  
24:      android:layout_below="@+id/textView1"  
25:      android:layout_centerHorizontal="true"  
26:      android:text="Show First Fragment" />  
27:  </RelativeLayout>

For connecting a fragment to an activity you need to get an object of API FragmentTransaction. For getting the FragmentTransaction, you can use the object of FragmentManager class. add() method is used to add the fragment to the activity. You need to commit a transaction to take effect.

1:  FragmentManager fm = getFragmentManager();  
2:  FragmentTransaction ft = fm.beginTransaction();  
3:  FragmentOne f1 = new FragmentOne();  
4:  ft.add(R.id.main_id, f1);  
5:  ft.commit();

Add a button on the first fragment layout for open the second fragment and don't forget to add an id for the first fragment layout.

fragment_one.xml

1:  <?xml version="1.0" encoding="utf-8"?>  
2:  <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3:    android:layout_width="match_parent"  
4:    android:layout_height="match_parent"  
5:    android:id="@+id/fr1_id"  
6:     >  
7:    <TextView  
8:      android:id="@+id/textView1"  
9:      android:layout_width="wrap_content"  
10:      android:layout_height="wrap_content"  
11:      android:layout_alignParentLeft="true"  
12:      android:layout_alignParentTop="true"  
13:      android:layout_marginLeft="91dp"  
14:      android:layout_marginTop="137dp"  
15:      android:text="First Fragment"  
16:      android:textAppearance="?android:attr/textAppearanceLarge" />  
17:    <Button  
18:      android:id="@+id/b2"  
19:      android:layout_width="wrap_content"  
20:      android:layout_height="wrap_content"  
21:      android:layout_below="@+id/textView1"  
22:      android:layout_centerHorizontal="true"  
23:      android:text="Show second Fragment" />  
24:  </RelativeLayout>

MainActivity.java

1:  import android.app.Activity;  
2:  import android.app.FragmentManager;  
3:  import android.app.FragmentTransaction;  
4:  import android.os.Bundle;  
5:  import android.view.Menu;  
6:  import android.view.View;  
7:  import android.view.View.OnClickListener;  
8:  import android.widget.Button;  
9:  import android.widget.Toast;  
10:  public class MainActivity extends Activity {  
11:       Button bn;  
12:       @Override  
13:       protected void onCreate(Bundle savedInstanceState) {  
14:            super.onCreate(savedInstanceState);  
15:            setContentView(R.layout.activity_main);  
16:            bn = (Button)findViewById(R.id.b1);  
17:            bn.setOnClickListener(new OnClickListener() {  
18:                 @Override  
19:                 public void onClick(View v) {  
20:                      // TODO Auto-generated method stub  
21:                      FragmentManager fm = getFragmentManager();  
22:                      FragmentTransaction ft = fm.beginTransaction();  
23:                      FragmentOne f1 = new FragmentOne();  
24:                      ft.add(R.id.main_id, f1);  
25:                      ft.commit();  
26:                 }  
27:            });  
28:       }  
29:       @Override  
30:       public boolean onCreateOptionsMenu(Menu menu) {  
31:            // Inflate the menu; this adds items to the action bar if it is present.  
32:            getMenuInflater().inflate(R.menu.main, menu);  
33:            return true;  
34:       }  
35:  }

Add the second fragment into the first fragment.

FragmentOne.java

1:  import android.app.FragmentTransaction;  
2:  import android.os.Bundle;  
3:  import android.view.LayoutInflater;  
4:  import android.view.View;  
5:  import android.view.View.OnClickListener;  
6:  import android.view.ViewGroup;  
7:  import android.widget.Button;  
8:  public class FragmentOne extends Fragment  
9:  {  
10:       Button bn;  
11:       @Override  
12:       public View onCreateView(LayoutInflater inflater, ViewGroup container,  
13:                 Bundle savedInstanceState) {  
14:            // TODO Auto-generated method stub  
15:            View v;  
16:            v = inflater.inflate(R.layout.fragment_one, container,false);  
17:            bn = (Button)v.findViewById(R.id.b2);  
18:            bn.setOnClickListener(new OnClickListener() {  
19:                 @Override  
20:                 public void onClick(View v) {  
21:                      // TODO Auto-generated method stub  
22:                 FragmentManager fm = getFragmentManager();  
23:                 FragmentTransaction ft = fm.beginTransaction();  
24:                 FragmentTwo f2 = new FragmentTwo();  
25:                 ft.add(R.id.fr1_id, f2);  
26:                 ft.commit();  
27:                 }  
28:            });  
29:            return v;  
30:       }  
31:  }

FragmentTwo.java

1:  package com.fragment2;  
2:  import android.app.Fragment;  
3:  import android.os.Bundle;  
4:  import android.view.LayoutInflater;  
5:  import android.view.View;  
6:  import android.view.ViewGroup;  
7:  public class FragmentTwo extends Fragment{  
8:       @Override  
9:       public View onCreateView(LayoutInflater inflater, ViewGroup container,  
10:                 Bundle savedInstanceState) {  
11:            View v;  
12:            v = inflater.inflate(R.layout.fragment_two, container,false);  
13:            return v;  
14:            }  
15:  }

fragment_two.xml

1:  <?xml version="1.0" encoding="utf-8"?>  
2:  <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3:    android:layout_width="match_parent"  
4:    android:layout_height="match_parent" >  
5:    <TextView  
6:      android:id="@+id/textView1"  
7:      android:layout_width="wrap_content"  
8:      android:layout_height="wrap_content"  
9:      android:layout_centerHorizontal="true"  
10:      android:layout_centerVertical="true"  
11:      android:text="Welcome to second fragment"  
12:      android:textAppearance="?android:attr/textAppearanceLarge" />  
13:  </RelativeLayout>

Watch Video of this topic

Click Here to watch part 2 of this topic