Horizontal Scrollable Tabs Using FragmentTabHost In A Class That Extends Fragment - android

I am using a class that extends Fragment and not FragmentActivity and I cannot seem to make horizontal scroll to work. I first used a layout as simple as the first code below and it works perfectly (without the scroll of course). I decided to put a horizontal scroll because when my tab reaches 6, the text is so hard to read and when the text is too long, the complete text is not written. I tried to use the layout of other people that said "This works!". Please refer to the second code below; the third code is my fragment class. Thank you!
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
The layout that other people said "It works"
<android.support.v4.app.FragmentTabHost xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#android:id/tabhost"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<HorizontalScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fillViewport="true"
android:scrollbars="none" >
<TabWidget
android:id="#android:id/tabs"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom" />
</HorizontalScrollView>
<FrameLayout
android:id="#android:id/tabcontent"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
</LinearLayout>
</android.support.v4.app.FragmentTabHost>
Lastly, my Fragment class. Maybe I'm missing something out?
public class AlarmTab extends Fragment {
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
FragmentTabHost tabHost;
tabHost = new FragmentTabHost(getActivity());
tabHost.setup(getActivity(), getChildFragmentManager(), R.layout.alarm_tab);
for(int i=0; i<SmashDeviceData.get_instance().devices.size(); i++) {
Bundle bundle = new Bundle();
bundle.putInt("Arg for Frag" + i, 1);
tabHost.addTab(tabHost.newTabSpec("Tab"+i).setIndicator(SmashDeviceData.get_instance().devices.get(i).deviceName), AlarmActivity.class, bundle);
}
return tabHost;
}
public static Fragment newInstance() {
Fragment fragment = new AlarmTab();
return fragment;
}
}

try the below
for xml
<android.support.v4.app.FragmentTabHost xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#android:id/tabhost"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical" >
<HorizontalScrollView
android:id="#+id/horizontalScrollView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/tabsColor"
android:scrollbars="none" >
<TabWidget
android:id="#android:id/tabs"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/tabsColor"
android:gravity="center_horizontal" />
</HorizontalScrollView>
<FrameLayout
android:id="#android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="fill_parent" />
</LinearLayout>
</android.support.v4.app.FragmentTabHost>
for your fragment
public class HomeFragment extends Fragment {
private FragmentTabHost mTabHost;
TabWidget widget;
HorizontalScrollView hs;
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
View rootView = inflater.inflate(R.layout.fragment_home, container,
false);
initView(rootView);
return rootView;
}
private void initView(View rootView) {
mTabHost = (FragmentTabHost) rootView
.findViewById(android.R.id.tabhost);
widget = (TabWidget) rootView.findViewById(android.R.id.tabs);
hs = (HorizontalScrollView) rootView
.findViewById(R.id.horizontalScrollView);
mTabHost.setup(getActivity(), getChildFragmentManager(),
android.R.id.tabcontent);
}
}

Related

Placing Tabs in DialogFragment

I am attempting to place TabHost inside of DialogFragment but at present it is none functional and returns null on the line:
tabs.findViewById(R.id.tabHost);
How can tabhost be initialized in the DialogFragment to allow the tabs to appear?
Tabbed DialogLog class:
public class InviteFriendTabbedAlertDialog extends DialogFragment {
TabHost tabs;
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
//return inflater.inflate(R.layout.invite_friend_tabbed_dialog, null);
// Add tabs
tabs.findViewById(R.id.tabHost);
tabs.setup();
TabHost.TabSpec tabpage1 = tabs.newTabSpec("one");
tabpage1.setContent(R.id.shareIndividual);
tabpage1.setIndicator("Tab 1", getResources().getDrawable(R.drawable.abc_ab_solid_dark_holo));
TabHost.TabSpec tabpage2 = tabs.newTabSpec("two");
tabpage2.setContent(R.id.shareGroup);
tabpage2.setIndicator("Tab 2", getResources().getDrawable(R.drawable.abc_ab_bottom_transparent_light_holo));
tabs.addTab(tabpage1);
tabs.addTab(tabpage2);
return inflater.inflate(R.layout.invite_friend_tabbed_dialog, null);
}
}
tabbed layout file:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<TabHost
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/tabHost"
android:layout_gravity="center_horizontal">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
<TabWidget
android:id="#android:id/tabs"
android:layout_width="fill_parent"
android:layout_height="wrap_content"></TabWidget>
<FrameLayout
android:id="#android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout
android:id="#+id/shareIndividual"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"></LinearLayout>
<LinearLayout
android:id="#+id/shareGroup"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"></LinearLayout>
</FrameLayout>
</LinearLayout>
</TabHost>
</RelativeLayout>
Initialize tabs and also use inflated view in which have TabHost with tabHost to initialize tabs variable :
#Override
public View onCreateView(LayoutInflater inflater,
ViewGroup container, Bundle savedInstanceState) {
View view=inflater.inflate(R.layout.invite_friend_tabbed_dialog, null);
// Add tabs
tabs=(TabHost)view.findViewById(R.id.tabHost);
//...your code here
return view;
}

Android FragmentTabHost

I've already implemented FragmentTabHost, but my Fragments are going outside the tabhost.
Here is my Activity:
public class MainActivity extends ActionBarActivity {
private FragmentTabHost mTabHost;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mTabHost = (FragmentTabHost) findViewById(android.R.id.tabhost);
mTabHost.setup(this, getSupportFragmentManager(),android.R.id.tabhost);
mTabHost.addTab(mTabHost.newTabSpec("simple").setIndicator("Simple"),
PlaceholderFragment.class,null);
mTabHost.addTab(mTabHost.newTabSpec("contacts")
.setIndicator("Contacts"), PlaceholderFragment2.class, null);
}
}
And here is my fragment:
public class PlaceholderFragment2 extends Fragment {
public PlaceholderFragment2() {
}
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
View rootView = inflater.inflate(R.layout.fragment_main2, container, false);
return rootView;
}
}
activity_main.xml
<android.support.v4.app.FragmentTabHost
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#android:id/tabhost"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/container"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
tools:context=".MainActivity"
/>
</android.support.v4.app.FragmentTabHost>
And fragment_main.xml
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView android:text="#string/hello_world" android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/imageView"
android:src="#drawable/ic_launcher"
android:layout_alignParentTop="true"
android:layout_alignParentStart="true"
android:layout_marginTop="159dp" />
</FrameLayout>
The problem is that the fragment goes outside it's tab.
Here's the photo
Change your activity_main.xml to
<android.support.v4.app.FragmentTabHost
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#android:id/tabhost"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<TabWidget
android:id="#android:id/tabs"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"/>
<FrameLayout
android:id="#android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1" />
</LinearLayout>
</android.support.v4.app.FragmentTabHost>
and your activity's onCreate to
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mTabHost = (FragmentTabHost) findViewById(android.R.id.tabhost);
mTabHost.setup(this, getSupportFragmentManager(), android.R.id.tabcontent);
mTabHost.addTab(mTabHost.newTabSpec("simple").setIndicator("Simple"),
PlaceholderFragment.class,null);
mTabHost.addTab(mTabHost.newTabSpec("contacts")
.setIndicator("Contacts"), PlaceholderFragment2.class, null);
}
Although I strongly suggestion not using a tabhost at all. I would instead go for something in the lines of this solution.

Fragment with Tabs in android

I have 2 fragments FragmentA and FragmentB. FragmentA is on top of FragmentB. Now I want to add tabs on FragmentB. Please Help.
My code so far :-
layout/fragmentA.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" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Top Fragment" />
</LinearLayout>
layout/fragmentB.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:background="#F5F6CE"
android:orientation="vertical" >
<TabHost
android:id="#android:id/tabhost"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<TabWidget
android:id="#android:id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
</TabWidget>
<FrameLayout
android:id="#android:id/tabcontent"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<include
android:id="#+id/tabdata1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
layout=“#layout/tabdata1_view"/>
<include
android:id="#+id/tabdata2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
layout=“#layout/tabdata2_view"
/>
</FrameLayout>
</LinearLayout>
</TabHost>
</LinearLayout>
FragmentB.java
public class Fragment2 extends Fragment{
TabHost myTabHost;
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
View rootView = inflater.inflate(R.layout.fragment2_layout, container, false);
myTabHost = (TabHost) getView().findViewById(R.id.tabhost)
return rootView;
}
}
Error:-
The line “myTabHost = (TabHost) getView().findViewById(R.id.tabhost)”gives an error as it cannot find tabhost.
Please suggest a way to achieve this.
Try this
myTabHost = (TabHost) rootview.findViewById(android.R.id.tabhost);
This should remove the error which you are facing now
That's because until you return from onCreateView, the fragment does not actually have a view yet. You just need to call findViewById relative to rootView. Like this:
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
View rootView = inflater.inflate(R.layout.fragment2_layout, container, false);
myTabHost = (TabHost) rootView.findViewById(R.id.tabhost)
return rootView;
}

FragmentTabHost shows content in tab

im trying to set up a FragmentTabHost with 3 tabs. The problem im having is the content of each tab is actually being displayed in the tab tittle as well. Why is this happening? The layout for tab1 has a textview that says "Tab1" this is being displayed in the tab and not the content area. also if i change the background it changes the background of the tabs not the content area.
xml:
<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
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#android:id/tabhost"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<FrameLayout
android:id="#+id/realtabcontent"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
</android.support.v4.app.FragmentTabHost>
</LinearLayout>
MAIN Fragment:
public class NewFragment _Frag extends Fragment{
private FragmentTabHost mTabHost;
Intent intent;
boolean created = false;
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// TODO Auto-generated method stub
//return super.onCreateView(inflater, container, savedInstanceState);
if(container==null)
{
return null;
}
View v = inflater.inflate(R.layout.mylayout, container, false);
mTabHost = (FragmentTabHost)v.findViewById(android.R.id.tabhost);
mTabHost.setup(getActivity(), getChildFragmentManager(), R.id.realtabcontent);
mTabHost.addTab(mTabHost.newTabSpec("fragmentb").setIndicator("Tab1"),
myclass1.class, null);
mTabHost.addTab(mTabHost.newTabSpec("fragmentc").setIndicator("Tab2"),
myclass2.class, null);
mTabHost.addTab(mTabHost.newTabSpec("fragmentd").setIndicator("Tab3"),
myclass3.class, null);
return v;
}
First, lets assume your XML name is my_xml.xml.
So make following changes in the my_xml.xml first(Change the ID)
<android.support.v4.app.FragmentTabHost
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/my_tabhost"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
and then following changes in the java file.
mTabHost = (FragmentTabHost)v.findViewById(R.id.my_tabhost);
mTabHost.setup(getActivity(), getChildFragmentManager(), R.layout.my_xml);
you missed these two :
<TabWidget
android:id="#android:id/tabs"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0"/>
<FrameLayout
android:id="#android:id/tabcontent"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_weight="0"/>
so add them in your Linearlayout above framelayout
actually you do not need any changes because your code is exactly like demo see below:
https://chromium.googlesource.com/android_tools/+/18728e9dd5dd66d4f5edf1b792e77e2b544a1cb0/sdk/extras/android/support/samples/Support4Demos/src/com/example/android/supportv4/app/FragmentTabs.java
https://chromium.googlesource.com/android_tools/+/18728e9dd5dd66d4f5edf1b792e77e2b544a1cb0/sdk/extras/android/support/samples/Support4Demos/res/layout/fragment_tabs.xml

How to Create Tab in android using TabActivity or FragmentActivity

I would like to create tab in android but really I don't know how to create and
just downloaded some video but really this isn't helpful
I used TabActivity unfortunately it's deprecated :(
so that I need you to help me out thanks for any suggestion
You must setup a FragmentActivity main class to run the Fragments.
You need to use the FragmentTabHost class available in the support library android.support.v4.app
The class for using FragmentTabHost :
public class SampleTabFragment extends Fragment {
private FragmentTabHost mTabHost;
public static View view;
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// fragment not when container null
if (container == null) {
return null;
}
// inflate view from layout
view = (LinearLayout) inflater.inflate(R.layout.offer_tabs, container, false);
// Setting Up the TabHost
mTabHost = (FragmentTabHost) view.findViewById(android.R.id.tabhost);
mTabHost.setup(getActivity(), getChildFragmentManager(), R.id.offer_realtabcontent);
// For adding a tab divider image
mTabHost.getTabWidget().setDividerDrawable(R.drawable.tab_divider);
// For Setting up the Tabs with their respective labels
mTabHost.addTab(mTabHost.newTabSpec("info").setIndicator(createTabView
(mTabHost.getContext(), "INFO")), DetailedOfferFragment.class, null);
mTabHost.addTab(mTabHost.newTabSpec("location").setIndicator(createTabView
(mTabHost.getContext(), "LOCATION")), LocationFragment.class, null);
setRetainInstance(true);
return view;
}
/***** Method for Custom TextView for Tabs *****/
private static View createTabView(final Context context, final String text) {
View view = LayoutInflater.from(context).inflate(R.layout.tabs_text_bg, null);
TextView tv = (TextView) view.findViewById(R.id.tabsText);
tv.setText(text);
return view;
}
}
The layout for using the tabs offer_tabs.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#6D6C6C"
android:orientation="vertical" >
<android.support.v4.app.FragmentTabHost
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#android:id/tabhost"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<TabWidget
android:id="#android:id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0"
android:orientation="horizontal" />
<View
android:layout_width="fill_parent"
android:layout_height="2dp"
android:background="#696969" />
<FrameLayout
android:id="#android:id/tabcontent"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_weight="0" />
<FrameLayout
android:id="#+id/offer_realtabcontent"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
</LinearLayout>
</android.support.v4.app.FragmentTabHost>
</LinearLayout>

Categories

Resources