how to get the following design of a tabbar
When a tab is been selected the the curve button must visible in the particular tab and the other to be in common.
i thought of adding a fixed background color to be red and i am to place the buttons of an image with curve and without curve. But i want to know whether it gets fixed for all android device, because wat to be the button height and width ? how to set a tabbar of fixed height and width....
I found by a simple way as follows
To get the redline at the bottom of the tabbar i have added a view under the tab as follows
<TabHost
android:id="#android:id/tabhost"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
xmlns:android="http://schemas.android.com/apk/res/android">
<LinearLayout
android:layout_width="fill_parent"
android:id="#+id/linearLayout1"
android:layout_height="fill_parent"
android:orientation="vertical">
<TabWidget
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#android:id/tabs"
android:layout_alignParentBottom="true"
android:layout_weight="0">
</TabWidget>
<View android:layout_width="fill_parent" android:layout_height="4dip" android:background="#ff0000" />
<FrameLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#android:id/tabcontent"
android:layout_weight="1">
</FrameLayout>
</LinearLayout>
</TabHost>
Then my tabbar class is as follows
public class CustomTabActivity extends TabActivity
{
#Override
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.tabbar);
addTab1(FirstTab.class);
addTab2(SecondTab.class);
addTab3(FirstTab.class);
addTab4(SecondTab.class);
}
private void addTab1( Class<?> c)
{
TabHost tabHost = getTabHost();
Intent intent = new Intent(this, c);
TabHost.TabSpec spec = tabHost.newTabSpec("tab");
View tabIndicator = LayoutInflater.from(this).inflate(R.layout.tab_indicator1, getTabWidget(), false);
ImageView icon = (ImageView) tabIndicator.findViewById(R.id.icon1);
spec.setIndicator(tabIndicator);
spec.setContent(intent);
tabHost.addTab(spec);
}
}
My tab_indicator layout is as follows
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="0dip"
android:layout_height="55dip"
android:layout_weight="1"
android:orientation="vertical"
android:padding="5dp">
<ImageView android:id="#+id/icon1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:background="#drawable/tab1">
</ImageView>
</RelativeLayout>
the tab1 in the drawable is an Selector xml file as follows
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:state_focused="false" android:state_selected="false"
android:state_pressed="false" android:drawable="#drawable/home" />
<item android:state_focused="false" android:state_selected="true"
android:state_pressed="false" android:drawable="#drawable/home_select_btn" />
</selector>
Here i have added the selected image with a bend and unselected image without bend, that i want to show.
This way seems to be a very long but i feel it to be the same design which i needed.
Maybe this example will be useful to you. It is the same kind of navigation that Google+ application has.
Related
currently I'm trying to implement the FragmentTabHost for my project. I'm still new on this fragments but I found it very great in terms of reusing the layouts, etc which is why I wanted to push myself further on to it. Now I read the tutorials on how to create a Tabs with fragment and I came on this tutorial:
http://maxalley.wordpress.com/2013/05/18/android-creating-a-tab-layout-with-fragmenttabhost-and-fragments/
Now this works just fine, except that the tabWidget is on top of my layout where I wanted it to be on bottom. I find that I need to setup the tabWidget after all the tabs has been initialized so I tried to add these codes:
mTabWidget = (TabWidget) findViewById(android.R.id.tabs);
mTabWidget.setBackgroundColor(Color.WHITE);
mTabWidget.setShowDividers(LinearLayout.SHOW_DIVIDER_NONE);
mTabWidget.setGravity(Gravity.BOTTOM);
Now this one already eliminated the divider and changes the color but obviously won't put my Widget on the bottom part of my layout. Now how would I do that?
I also tried to edit the Tabhost xml and just put the TabWidget after the FrameLayout but nothing happens. here's the 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:orientation="vertical" >
<FrameLayout
android:id="#+id/tabFrameLayout"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
<TabWidget
android:id="#android:id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0"
android:orientation="horizontal"
/>
</LinearLayout>
</android.support.v4.app.FragmentTabHost>
I have refer this link github example
This will be your layout:
<?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" >
<FrameLayout
android:id="#+id/realtabcontent"
android:layout_width="match_parent"
android:layout_height="0dip"
android:layout_weight="1" />
<android.support.v4.app.FragmentTabHost
android:id="#android:id/tabhost"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<FrameLayout
android:id="#android:id/tabcontent"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_weight="0" />
</android.support.v4.app.FragmentTabHost>
</LinearLayout>
For your custom Tabs :
mTabHost.addTab(setIndicator(mTabHost.newTabSpec("Tab1"),
R.drawable.image1),
public TabSpec setIndicator(Context ctx,TabSpec spec, int resid) {
// TODO Auto-generated method stub
View v = LayoutInflater.from(ctx).inflate(R.layout.tabs_text, null);
v.setBackgroundResource(resid);
TextView text = (TextView) v.findViewById(R.id.tab_title);
text.setText(spec.getTag());
return spec.setIndicator(v);
}
Edit
//To set drawable to your perticular TAB
mTabHost.getTabWidget().getChildAt(0).setBackgroundResource(R.drawable.tab_login);
end Edit
If you want to add drawable (selector):
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/tab_compose_h" android:state_selected="true"/>
<item android:drawable="#drawable/tab_compose_h" android:state_pressed="true"/>
<item android:drawable="#drawable/tab_compose"/>
</selector>
i'm making an android application, and i have a tabhost and two tabs in my xml. I have called them and they work just fine. But i want to get rid of the ugly grey/orange color on tabs. I have tried setting the bg using an image. I used this code:
th.getTabWidget().setBackgroundResource(R.drawable.tab_normal);
But it shows up like this:
How can i get it to replace the gray and orange color?
Thanks
Steps to fully customize tabwidget:
Create custom layout for tabwidget: this layout similar to default one which consist of one Icon and one TextView. You can choose whatever layout you want. Notice that the parent layout has stateful background tabwidget_selector. This drawable is the key to replace default orange focus color. You can choose your own focus color.
<?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="40dp"
android:background="#drawable/tabwidget_selector"
android:gravity="center"
android:orientation="vertical" >
<ImageView
android:id="#+id/tabIndicatorIcon"
android:layout_width="28dp"
android:layout_height="28dp"
android:layout_marginTop="2dp" />
<TextView
android:id="#+id/tabIndicatorText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="2dp"
android:textColor="#color/white" />
Write function which return a view for tabwidget. Set text, icon drawable for your tabwidget
private View getTabIndicatorView(Context context, String tag, int drawable) {
View view = LayoutInflater.from(context).inflate(
R.layout.tab_widget_custom, null);
TextView tv = (TextView) view.findViewById(R.id.tabIndicatorText);
tv.setText(tag);
ImageView tabIndicatorIcon = (ImageView) view
.findViewById(R.id.tabIndicatorIcon);
tabIndicatorIcon.setBackgroundResource(drawable);
return view;
}
Use this function in your activity:
TabHost.TabSpec setIndicator(View view) Specify a view as the tab
indicator.
Intent intent;
TabHost.TabSpec spec;
spec = tabHost.newTabSpec("Inbox").setIndicator(
getTabIndicatorView(MainTabActivity.this, "Hộp thư",
R.drawable.tin_nhan_tab_selector));
intent = new Intent(this, xxxx.InboxActivity.class);
spec.setContent(intent);
tabHost.addTab(spec);
You can have background for tabwidget:
<TabHost
android:id="#android:id/tabhost"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<RelativeLayout
android:layout_height="fill_parent"
android:layout_width="fill_parent">
<TabWidget
android:id="#android:id/tabs"
android:layout_alignParentBottom="true"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#drawable/tabbackground"
android:layout_margin="7dp"
/>
<FrameLayout
android:id="#android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_above="#android:id/tabs"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_margin="5dp"
android:background="#drawable/list_shape">
</FrameLayout>
</RelativeLayout>
Hello I am beginner to the android development. I want to create a tab structure.Where i want every tab to have icon. When i am specifying icon through xml it does reflect in tab.But icon is not occupying full space.
Please help me with this.
here is my tab xml
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#android:id/tabhost"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#000000">
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
>
<TabWidget
android:id="#android:id/tabs"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom= "true"
/>
<FrameLayout
android:id="#android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_above= "#android:id/tabs"
android:padding="5dp" />
</RelativeLayout>
</TabHost>
Following is my xml which i am using for tab to have icon.
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/home" android:state_selected="true"/>
<item android:drawable="#drawable/homefade"/>
</selector>
and this is the java code which i am using to apply icon.
TabHost tabHost = (TabHost)findViewById(android.R.id.tabhost);
tabHost.addTab(tabHost.newTabSpec(HOME_TAB).setIndicator("", getResources().getDrawable(R.drawable.tab_home_config)).setContent(
new Intent(this, HomeActivity.class)));
I figured it out..
Need to set padding to zero that's it.
for (int i = 0; i < tabHost.getTabWidget().getChildCount(); i++)
{
tabHost.getTabWidget().getChildAt(i).setPadding(0,0,0,0);
}
can anybody tell how to reduce the height of tab bar and display tab bar in bottom
Thanks
use the following line of code to change the height, this is the last line in my onCreate method
tabHost.getTabWidget().getChildAt(0).getLayoutParams().height =35;
Add the following method to your class that extends TabActivity
public void addNewTab(Context context, String title, int height){
TabHost tabHost = getTabHost(); // The activity TabHost
Intent intent = new Intent().setClass(context, HelloTabsActivity.class);
TabHost.TabSpec spec = tabHost.newTabSpec(title.toLowerCase()).setIndicator(title).setContent(intent);
tabHost.addTab(spec);
int totalTabs = tabHost.getTabWidget().getChildCount();
((RelativeLayout)tabHost.getTabWidget().getChildTabViewAt(totalTabs-1)).removeViewAt(0);
((TextView)((RelativeLayout)tabHost.getTabWidget().getChildTabViewAt(totalTabs-1)).getChildAt(0)).setHeight(30);
tabHost.getTabWidget().getChildAt(totalTabs-1).getLayoutParams().height = height;
}
then call it like this addNewTab(this, "tab title", 30);
Note that you have to change the height of each tab. For two tabs:
#Override
public void onCreate(Bundle savedInstanceState) {
... // other code
final int height = 45;
mTabHost.getTabWidget().getChildAt(0).getLayoutParams().height = height;
mTabHost.getTabWidget().getChildAt(1).getLayoutParams().height = height;
}
You could either
Build your own tab using a TableLayout at the bottom of the screen - which gives you quite a lot of flexibility
or
Modify use the existing TabHost/TabWidget - works in principle but I don't know how to reduce the tab bar height. Works like that:
Layout file main.xml:
<?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">
<TabHost android:id="#+id/tab_host"
android:layout_width="fill_parent" android:layout_height="fill_parent">
<TabWidget android:layout_width="fill_parent"
android:layout_height="wrap_content" android:id="#android:id/tabs"
android:layout_gravity="bottom" />
<FrameLayout android:id="#android:id/tabcontent"
android:layout_width="fill_parent" android:layout_height="fill_parent" >
<LinearLayout android:id="#+id/first_tab"
android:orientation="vertical" android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<TextView android:layout_width="fill_parent"
android:layout_height="fill_parent" android:text="First Tab" />
<!-- Replace TextView with your layout content for this tab -->
</LinearLayout>
<LinearLayout android:id="#+id/second_tab"
android:orientation="vertical" android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<TextView android:layout_width="fill_parent"
android:layout_height="fill_parent" android:text="Second Tab" />
<!-- Replace TextView with your layout content for this tab -->
</LinearLayout>
<LinearLayout android:id="#+id/third_tab"
android:orientation="vertical" android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<TextView android:layout_width="fill_parent"
android:layout_height="fill_parent" android:text="One More Tab" />
<!-- Replace TextView with your layout content for this tab -->
</LinearLayout>
<LinearLayout android:id="#+id/edit_item_text_tab"
android:orientation="vertical" android:layout_width="fill_parent"
android:layout_height="fill_parent" />
</FrameLayout>
</TabHost>
</LinearLayout>
Source code of your activity, in this case StartActivity.java
import android.app.Activity;
import android.os.Bundle;
import android.widget.TabHost;
import android.widget.TabHost.TabSpec;
public class StartActivity extends Activity {
/** Called when the activity is first created. */
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
TabHost tab_host = (TabHost) findViewById(R.id.tab_host);
tab_host.setup();
TabSpec tabspec1 = tab_host.newTabSpec("TAB_1");
tabspec1.setIndicator("Tab 1");
tabspec1.setContent(R.id.first_tab);
tab_host.addTab(tabspec1);
TabSpec tabspec2 = tab_host.newTabSpec("TAB_2");
tabspec2.setIndicator("Tab 2");
tabspec2.setContent(R.id.second_tab);
tab_host.addTab(tabspec2);
TabSpec tabspec3 = tab_host.newTabSpec("TAB_3");
tabspec3.setIndicator("Tab 3");
tabspec3.setContent(R.id.third_tab);
tab_host.addTab(tabspec3);
tab_host.setCurrentTab(0);
}
}
Turns out to look like:
<?xml version="1.0" encoding="utf-8"?>
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/tabhost" android:layout_width="fill_parent"
android:layout_height="wrap_content" android:padding="1dp">
<RelativeLayout android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TabWidget android:id="#android:id/tabs"
android:layout_width="fill_parent" android:layout_height="60dp"
android:layout_alignParentBottom="true" />
<FrameLayout android:id="#android:id/tabcontent"
android:layout_width="fill_parent" android:layout_height="fill_parent"
android:padding="1dp">
</FrameLayout>
</RelativeLayout>
Most likely you'll have to implement tabs by your own. As far as I know that's impossible with regular android tabs.
<TabWidget android:id="#android:id/tabs"
android:tabStripEnabled="false"
android:padding="0dip"
android:layout_width="wrap_content"
android:layout_height="fill_parent"/>
Working with tabs in the Eclipse "graphical layout" mode is not quite intuitive.
NOTE - Currently I am not able to attach pictures to this answer as my reputation is
below 10. Maybe in the future I will edit it and add them.
1) To change tab bar height:- Select "tabs (TabWidget)" in the Outline view. A selection/resize box should appear around the tab bar and its height can now be modified. I have made it thinner in picture1.
2) To move the tab bar to bottom:- Select "tabs (TabWidget)" in the Outline view and drop it into the LinearLayout above it (as marked in the picture 1). This will send the "tabs (TabWidget)" to the bottom of the list (see picture2). Tabs Bar might disappear at this stage. So adjust the weights of "tabcontent" & "tabs (TabWidget)" till it looks ok. I have used 10 & 1 respectively.
3) To bring tab2 to the top:- After design/layout of tab1 is complete, we want to work on the next tab. But Eclipse does not allow selecting it. To bring tab2 to the top select tab1 and drop it into tabcontent. This will send tab1 to the bottom of the list and tab2 to the top.
Later when work on tab2 is complete, tab3 can be brought up.
This pretty roundabout way of working in graphical layout mode but maybe better than typing xml code.
Cheers
I have 2 questions regarding tabHost:
I've created tabHost with 2 tabs
and for the tab titles I use setIndicator(TextView)
(I work with api level 4)
my title background is white. I use selector for the title to choose between diff images for the title.
I want to make the title text bold only when selected/pressed. I didn't succeed to do it using the selector I have. can I do it at all? the idea is that on cases I use drawable a I want the text bold. other cases not bold. same question regarding textColor.
it looks like a bug - when the tab first opens, the text on the selected tab (the one I used in tabHost.setCurrentTab(tabId)) is not seen at all. after first press/focus/focus any other item it looks well. any idea why or how to solve this?
thanks in advance
on tabActivity -
TextView title1 = new TextView(MainActivity.getInstnace(), null, android.graphics.Typeface.NORMAL);
TextView title2 = new TextView(MainActivity.getInstnace(), null, android.graphics.Typeface.NORMAL);
title1.setText("teb11 title");
title1.setBackgroundResource(R.drawable.tabtitle);
title1.setCompoundDrawablesWithIntrinsicBounds(getResources().getDrawable(R.drawable.tab1), null, null, null);
title2.setText("tab22 title");
title2.setBackgroundResource(R.drawable.tabtitle);
title2.setCompoundDrawablesWithIntrinsicBounds(getResources().getDrawable(R.drawable.tab2), null, null, null);
TabSpec tab1 = mTabHost.newTabSpec("tab1").setIndicator(title1).setContent(R.id.list1);
TabSpec tab2 = mTabHost.newTabSpec("tab2").setIndicator(title2).setContent(R.id.list2);
mTabHost.addTab(tab1);
mTabHost.addTab(tab2);
mTabHost.setCurrentTab(0);
the selector tab1.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_selected="true"
android:drawable="#drawable/iconselect"/>
<item android:state_pressed="true"
android:drawable="#drawable/iconselect"/>
<item android:drawable="#drawable/icon"/>
</selector>
the selector for tabTitle
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true"
android:drawable="#drawable/tabselected"/>
<item android:state_selected="true"
android:drawable="#drawable/tab" />
<item android:state_focused="true"
android:drawable="#drawable/tab" />
</selector>
For your question #1:
On your TabsAdapter use onPageSelected(int position) like this:
public void onPageSelected(int position) {
//your logic here
fixTitleText();
}
and:
private void fixTitleText() {
for (int i = 0; i < mTabHost.getTabWidget().getChildCount(); i++) {
View view = mTabHost.getTabWidget().getChildAt(i);
TextView tv = (TextView) view.findViewById(android.R.id.title);
tv.setTextColor(getResources().getColor(R.drawable.text_selector));
tv.setTextSize(TypedValue.COMPLEX_UNIT_SP, 14);
tv.setTypeface(null, Typeface.BOLD);
}
}
just notice that this code is for HONEYCOMB and up, before this the tab host view hierarchy is a bit different
this is my xml
<?xml version="1.0" encoding="utf-8"?>
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#android:id/tabhost"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TabWidget android:id="#android:id/tabs"
android:layout_width="fill_parent"
android:layout_height="60px"
android:background="#drawable/headerbk"
android:paddingTop="12px"
android:orientation="vertical"
android:gravity="center_horizontal">
</TabWidget>
<FrameLayout android:id="#android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ListView android:id="#+id/list1"
android:background="#drawable/bk"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:scrollbars="vertical"
android:divider="#drawable/separationline"
android:cacheColorHint="#00000000"
android:footerDividersEnabled="false"
android:listSelector="#drawable/selected" />
<ListView android:id="#+id/list2"
android:background="#drawable/bk"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:scrollbars="vertical"
android:divider="#drawable/separationline"
android:cacheColorHint="#00000000"
android:footerDividersEnabled="false"
android:listSelector="#drawable/selected" />
</FrameLayout>
</LinearLayout>
</TabHost>
Can I see your layout XML or are you doing this only through Java commands. Either way, I'd like to see more than just some pseudocode to actually work on this.
That would be either your main.xml file or your OnCreate() function. IF you are setting your layout through XML, main.xml should have contents similar to :
<?xml version="1.0" encoding="utf-8"?>
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#android:id/tabhost"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TabWidget
android:id="#android:id/tabs"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
<FrameLayout
android:id="#android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<RelativeLayout android:id="#+id/RelativeLayout01"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#ffffffff">
</RelativeLayout>
<RelativeLayout android:id="#+id/RelativeLayout02"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#ffffffff">
</RelativeLayout>
</FrameLayout>
</LinearLayout>
</TabHost>
It is possible to do it entirely through Java commands, but especially when fixing #2, we will likely need to see more of your code. As part of the OnCreate() function, I would recommend initializing all the stuff you would like to be shown. Otherwise, if it is not in your main.xml, and it is not initialized, it will not be shown.
If want the bold text on selection,
There may a different ways but what I did is...
to make custom TextView, and then Handle the touch event Like bold on action down and set to normal on action up.