Develop Reference

Bottom Navigation and Fragment Tab Layout

I have a tab layout with 3 Fragments, I also have a BottomNavigation. So should I place BottomNavigation in an Activity for 3 Fragments or place a bottom navigation in each Fragment? Because I have a ListView in each Fragment so I think each Fragment should have one BottomNavigation for click event.

Just one BottomNavigation for all fragment.
You can easily use this library and then in YOUR_ACTIVITY_LAYOUT set it like this:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout
android:layout_above="#id/bottom_navigation"
android:name="com.ali.digikalaapp.Fragment_pager_one"
android:id="#+id/frameLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<com.ss.bottomnavigation.BottomNavigation
android:id="#+id/bottom_navigation"
android:layout_width="match_parent"
android:layout_height="56dp"
android:layout_alignParentBottom="true"
android:background="#color/colorPrimary">
<com.ss.bottomnavigation.TabItem
android:id="#+id/tab_home"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
app:tab_text="Home"
app:tab_icon="#drawable/ic_home_white_24dp"
/>
<com.ss.bottomnavigation.TabItem
android:id="#+id/tab_images"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
app:tab_text="Images"
app:tab_icon="#drawable/ic_image_black_24dp"
/>
<com.ss.bottomnavigation.TabItem
android:id="#+id/tab_camera"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
app:tab_text="Camera"
app:tab_icon="#drawable/ic_camera_white_24dp"
/>
</com.ss.bottomnavigation.BottomNavigation>
</RelativeLayout>
and if you have 3 Fragment , replace fragment like this in YOUR_ACTIVITY:
public class YOUR_ACTIVITY extends AppCompatActivity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.YOUR_ACTIVITY_LAYOUT);
BottomNavigation bottomNavigation = (BottomNavigation) findViewById(R.id.bottom_navigation);
bottomNavigation.setOnSelectedItemChangeListener(new OnSelectedItemChangeListener() {
#Override
public void onSelectedItemChanged(int itemId) {
switch (itemId) {
case R.id.tab_home:
Fragment_Home home = new Fragment_Home();
FragmentManager fragment = getSupportFragmentManager();
FragmentTransaction transaction = fragment.beginTransaction();
transaction.replace(R.id.frameLayout, home);
break;
case R.id.tab_images:
Fragment_Image image = new Fragment_Image();
FragmentManager fragment = getSupportFragmentManager();
FragmentTransaction transaction = fragment.beginTransaction();
transaction.replace(R.id.frameLayout, image);
break;
case R.id.tab_camera:
Fragment_Camera camera = new Fragment_Camera();
FragmentManager fragment = getSupportFragmentManager();
FragmentTransaction transaction = fragment.beginTransaction();
transaction.replace(R.id.frameLayout, camera);
break;
}
transaction.commit();
}
}
}
and here is one Fragment example :
public class Fragment_Home extends Fragment {
public Fragment_Home() {
}
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
return inflater.inflate(R.layout.fragment_home, container, false);
}
}
and here is fragment_home XML :
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".Fragment.Fragment_Home">
<TextView
android:text="Blank Fragment"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</FrameLayout>

how to replace a fragment with another fragment in android studio

i am trying to replace a displaynews fragment with homescreen fragment but the fragment is being adding instead of replacing in the code here
content_main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/content_main"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context="com.ajitesh.newson.MainActivity"
tools:showIn="#layout/app_bar_main">
<fragment
android:id="#+id/home_fragment"
android:name="com.ajitesh.newson.DisplayNews"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
</LinearLayout>
mainacitivity.class
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
fragmentClass=HomeScreen.class;
try {
fragment = (Fragment) fragmentClass.newInstance();
} catch (Exception e) {
e.printStackTrace();
}
// Insert the fragment by replacing any existing fragment
FragmentManager fragmentManager = getSupportFragmentManager();
fragmentManager.beginTransaction().replace(R.id.home_fragment,fragment).commit();
displaynews.class
public class DisplayNews extends Fragment {
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
return inflater.inflate(R.layout.displaynews, container, false);
}
}
displaynews.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="wrap_content"
android:id="#+id/display_news"
android:layout_height="wrap_content">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="helllooooo"/>
</LinearLayout>
HomeScreen.class
public class HomeScreen extends Fragment {
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
return inflater.inflate(R.layout.home_screen, container, false);
}
}
home_screen.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/text1"
android:text="this is home page"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="click"/>
</LinearLayout>

Fragments cannot be replaced if hard-coded in xml, you should add it dynamically to replace a fragment with another.
// Create new fragment and transaction
Fragment newFragment = new ExampleFragment();
FragmentTransaction transaction = getFragmentManager().beginTransaction();
// Replace whatever is in the fragment_container view with this fragment,
// and add the transaction to the back stack if needed
transaction.replace(R.id.fragment_container, newFragment);
transaction.addToBackStack(null);
// Commit the transaction
transaction.commit();
source // example -- still getting problems? You may find a solution here

FragmentTabHost content filling remaining space

I've been experimenting with tab navigation on android but I can't set up the content area correctly.
The layout of the application:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.app.FragmentTabHost
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/tabhost"
android:tag="tabhost"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:tag="linear">
<TabWidget
android:id="#+id/tabs"
android:tag="tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
</TabWidget>
<FrameLayout
android:id="#+id/tabFrameLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
</RelativeLayout>
</android.support.v4.app.FragmentTabHost>
The fragment:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/info_drawer_root"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#e0e0e0">
<FrameLayout
android:id="#+id/info_content_frame"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Fragment info"
android:id="#+id/info_textView"
android:layout_gravity="center_horizontal" />
</FrameLayout>
<ListView android:id="#+id/info_drawer"
android:layout_width="240dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:choiceMode="singleChoice"
android:divider="#android:color/transparent"
android:dividerHeight="0dp"
android:background="#111"/>
</android.support.v4.widget.DrawerLayout>
And the code I used in the activity:
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
tabHost = (FragmentTabHost)findViewById(R.id.tabhost);
tabHost.setup(this, getSupportFragmentManager(), R.id.tabFrameLayout);
tabHost.addTab(tabHost.newTabSpec("Tab 0").setIndicator("", getResources().getDrawable(R.drawable.ic_launcher)), InfoFragment.class, null);
tabHost.addTab(tabHost.newTabSpec("Tab 1").setIndicator("Tab 1"), HomeFragment.class, null);
tabHost.addTab(tabHost.newTabSpec("Tab 2").setIndicator("", getResources().getDrawable(R.drawable.ic_launcher)), AppsFragment.class, null);
}
This generates the following result:
As you can see the content area overlaps the tabs. I would simply like it to be below them and fill up the remaining space like this:
I've tried wrapping them in a RelativeLayout tag and applying the below attribute but it didn't work. I trid using the weight attribute without any luck as well.
Thanks.

You don't need to have the FrameLayout inside the Tabhost, when you do that you're using the same space for the content of the fragments and the tabs themselves.
Just put the TabHost inside a vertical LinearLayout and put the FrameLayout outside, below the TabHost.
Just like this:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.v4.app.FragmentTabHost
android:id="#android:id/tabhost"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TabWidget
android:id="#android:id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"/>
</android.support.v4.app.FragmentTabHost>
<FrameLayout
android:id="#+id/realtabcontent"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
</LinearLayout>

Sorry, i cannot go into detail with your specific code, but if you anyway just try to implement it for the first time i would go this approach, its really easy to understand and to manage. The code is pretty easy and serves all you need i think.
You just have to make own layoutfiles for the 3 (or whatever) fragments like this:
Layoutfile for a Fragment:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_margin="15sp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="Notebook"
android:id="#+id/tv_hdl_tab3"
android:textColor="#android:color/holo_blue_light"
android:textSize="#dimen/dim_hdl_h1" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="#string/tab3_introText"
android:id="#+id/tv_tab3_IntroText"
android:layout_marginTop="5sp"
android:layout_marginBottom="5sp"
android:textSize="#dimen/dim_txt_p" />
MainActivity:
public class MainActivity extends Activity {
ActionBar.Tab tab1, tab2, tab3;
Fragment fragmentTab1 = new FragmentTab1();
Fragment fragmentTab2 = new FragmentTab2();
Fragment fragmentTab3 = new FragmentTab3();
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_tab_test);
ActionBar actionBar = getActionBar();
actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
tab1 = actionBar.newTab().setText("Home");
tab2 = actionBar.newTab().setText("Calculator");
tab3 = actionBar.newTab().setText("Notebook");
tab1.setTabListener(new MyTabListener(fragmentTab1));
tab2.setTabListener(new MyTabListener(fragmentTab2));
tab3.setTabListener(new MyTabListener(fragmentTab3));
actionBar.addTab(tab1);
actionBar.addTab(tab2);
actionBar.addTab(tab3);
}
And a fragment looks like this then (3 of them of course, one for every tab as long it should be different):
public class FragmentTab3 extends Fragment {
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState){
View view = inflater.inflate(R.layout.tab3, container, false);
TextView textview = (TextView) view.findViewById(R.id.tabtextview);
textview.setText(R.string.Three);
return view;
}
}
And the Tablistener:
public class MyTabListener implements ActionBar.TabListener {
Fragment fragment;
public MyTabListener(Fragment fragment) {
this.fragment = fragment;
}
public void onTabSelected(ActionBar.Tab tab, FragmentTransaction ft) {
ft.replace(R.id.fragment_container, fragment);
}
public void onTabUnselected(ActionBar.Tab tab, FragmentTransaction ft) {
ft.remove(fragment);
}
public void onTabReselected(ActionBar.Tab tab, FragmentTransaction ft) {
// nothing done here
}
}
Code comes from http://www.linux.com/learn/tutorials/761642-android-app-development-for-beginners-navigation-with-tabs

Replace fragments in Android

I can't replace the fragments using the codes below. I mean that the second fragment appeared under the first fragment. The first fragmnent didn't hide as I expected. What is wrong here?
Thanks a lot!
My activity :
public class MainActivity extends Activity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
final FragmentManager fm = this.getFragmentManager();
final Fragment fragmenttwo = new FragmentTwo();
Button fmchangebutton = (Button) this.findViewById(R.id.fmchangebutton);
fmchangebutton.setOnClickListener(new OnClickListener(){
#Override
public void onClick(View v) {
FragmentTransaction ft = fm.beginTransaction();
ft.replace(R.id.fragment1, fragmenttwo);
ft.commit();
}
});
};
};
activity_main.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<Button
android:id="#+id/fmchangebutton"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Change Fragment" />
<fragment
android:id="#+id/fragment1"
android:name="com.example.fragementex.FragmentOne"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
fragmnetone.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<EditText
android:id="#+id/editText1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="clip_horizontal"
android:ems="10"
android:gravity="center_vertical|center_horizontal|top|fill_vertical"
android:text="This is Fragment One" >
</EditText>
</LinearLayout>
fragmnettwo.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<EditText
android:id="#+id/editText1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="clip_horizontal"
android:ems="10"
android:gravity="center_vertical|center_horizontal|top|fill_vertical"
android:text="This is Fragment Two" >
</EditText>
</LinearLayout>

You cannot replace a fragment attached to the layout, you need to create a host container as FrameLayout like this:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<Button
android:id="#+id/fmchangebutton"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Change Fragment" />
<FrameLayout
android:id="#+id/frame_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
Then, you will able to - first - add and display the first fragment and replace it with the second as follows:
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
// set the layout which contains the framelayout
setContentView(R.layout.activity_main);
final FragmentManager fm = this.getFragmentManager();
final Fragment fragmentone = new FragmentOne();
final Fragment fragmenttwo = new FragmentTwo();
// if first initialization
if(savedInstanceState == null) {
// display with "add" the first fragment
this.getFragmentManager().beginTransaction()
.add(R.id.frame_layout, fragmentone).commit();
}
Button fmchangebutton = (Button) this.findViewById(R.id.fmchangebutton);
fmchangebutton.setOnClickListener(new OnClickListener(){
#Override
public void onClick(View v) {
FragmentTransaction ft = fm.beginTransaction();
// "replace" the fragment inside the framelayout
ft.replace(R.id.frame_layout, fragmenttwo);
ft.commit();
}
});
}

Fragment not being replaced correctly

I created an activity with a navigation drawer and a FrameLayout. This frame layout should contain the fragment which corresponds the selected navigation item. So I followed the instructions in android tutorials, but it doesn't work.
Problem:
It seems to me the fragments are only added and not replaced. What am I doing wrong?
My activity xml:
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/mainViewDrawerLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<FrameLayout
android:id="#+id/mainViewContentFrame"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginLeft="#dimen/drawer_content_padding" >
</FrameLayout>
<ListView android:id="#+id/mainViewDrawerList"
android:layout_width="#dimen/drawer_size"
android:layout_height="match_parent"
android:layout_gravity="start"
android:choiceMode="none"
android:divider="#android:color/transparent"
android:dividerHeight="0dp"
android:background="#color/drawer_background"
/>
</android.support.v4.widget.DrawerLayout>
my first fragment xml:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:paddingLeft="#dimen/activity_vertical_margin"
android:paddingRight="#dimen/activity_vertical_margin"
android:paddingTop="#dimen/activity_horizontal_margin"
android:paddingBottom="#dimen/activity_horizontal_margin"
android:id="#id/fragmentProfile">
<TextView
style="#android:style/TextAppearance.Small"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="#string/mainViewProfileGivenNameLabel"
/>
<TextView
android:id="#+id/profileGivenNameTextView"
style="#android:style/TextAppearance.Large"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
/>
</LinearLayout>
my second fragment xml:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#id/fragmentProtocol">
<ListView android:id="#+id/protocolTableListView"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:transcriptMode="alwaysScroll"
android:cacheColorHint="#00000000"
android:listSelector="#android:color/transparent"/>
</LinearLayout>
my transition method in the activity:
private void switchToFragment(int navigationId, boolean addToBackStack){
FragmentManager fragmentManager = getFragmentManager();
String fragmentTag = null;
boolean fragmentCreated = false;
switch(navigationId) {
case NavigationItemProvider.NAVIGATIONITEM_PROFILE:
fragmentTag = NAVIGATIONTAG_PROFILE;
break;
case NavigationItemProvider.NAVIGATIONITEM_PROTOCOL:
fragmentTag = NAVIGATIONTAG_PROTOCOL;
break;
}
// determine if the fragment is already instanciated otherwise create
FragmentBase fragment = (FragmentBase)fragmentManager.findFragmentByTag(fragmentTag);
if (fragment == null){
if (fragmentTag == NAVIGATIONTAG_PROFILE) {
fragment = new ProfileFragment();
fragmentCreated = true;
}
else if(fragmentTag == NAVIGATIONTAG_PROTOCOL) {
fragment = new ProtocolFragment();
fragmentCreated = true;
}
}
// switch to fragment
if (fragment.isVisible()){
return;
}
FragmentTransaction transaction = fragmentManager.beginTransaction();
if (fragmentCreated) {
transaction.replace(R.id.mainViewContentFrame, fragment, fragmentTag);
}
else{
transaction.show(fragment);
}
if(addToBackStack)
{
transaction.addToBackStack(null);
}
transaction.commit();
}

solved the problem:
In onCreate I returned the result of super.onCreate and not the result of Layoutinfalter.inflate and in addition I didn't call inflate with last parameter set to false.