I have used this library and its title text shows in upper case I have referred
this
this
but not getting the correct output.
<style name="AppTheme" parent="#style/Theme.AppCompat.Light">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/primary</item>
<item name="colorPrimaryDark">#color/primary_dark</item>
<item name="colorAccent">#color/accent</item>
<item name="android:textColorPrimary">#color/text_color</item>
<item name="drawerArrowStyle">#style/DrawerArrowStyle</item>
<item name="android:actionBarTabTextStyle">#style/tab</item>
<item name="actionBarTabTextStyle">#style/tab</item>
<item name="android:windowBackground">#color/window_background</item>
<item name="colorControlNormal">#color/accent</item>
<item name="colorControlActivated">#color/secondary_text</item>
<item name="colorControlHighlight">#color/secondary_text</item>
<item name="android:homeAsUpIndicator">#drawable/ic_menu</item>
</style>
and
<style name="tab" parent="#style/Widget.AppCompat.Light.ActionBar.TabText">
<item name="android:textAllCaps">false</item>
</style>
fragment.java:
tabHost = (MaterialTabHost) v.findViewById(R.id.tabHost);
adapter = new TabsPagerAdapter(getChildFragmentManager(), entity);
pager = (ViewPager) v.findViewById(R.id.pager_entitiy_detail);
pager.setOffscreenPageLimit(adapter.getCount());
pager.setAdapter(adapter);
adapter.notifyDataSetChanged();
pager.setOnPageChangeListener(new ViewPager.SimpleOnPageChangeListener() {
#Override
public void onPageSelected(int position) {
tabHost.setSelectedNavigationItem(position);
Log.e("DashDetail", "");
}
});
// insert all tabs from pagerAdapter data
for (int i = 0; i < adapter.getCount(); i++) {
tabHost.addTab(
tabHost.newTab()
.setText(adapter.getPageTitle(i))
.setTabListener(this)
);
}
used above code for tab host and in adapter setting text but not getting lower case text.
Try this in your for loop of adding tabs
try this
TextView tv = (TextView) tabHost.getTabWidget().getChildAt(i).findViewById(android.R.id.title);
tv.setAllCaps(false);
like this:--
for (int i = 0; i < adapter.getCount(); i++) {
tabHost.addTab(
tabHost.newTab()
.setText(adapter.getPageTitle(i))
.setTabListener(this)
TextView tv = (TextView) tabHost.getTabWidget().getChildAt(i).findViewById(android.R.id.title);
tv.setAllCaps(false);
);
or You can do it like below in your PagerAdapter
#Override
public CharSequence getPageTitle(int position) {
Locale l = Locale.getDefault();
switch (position) {
case 0:
return "ONE".toLowerCase();
}
return null;
}
I hope it may help.
thank you ,i have done what suggest in answer as shown above but still not worked so i have made changes in library by go through it code and analyse it. and i found that there is mentioned .toUpperCase() and i remove from there and it works.
Related
I make app with tabbed page.
If i use AppCompat, I can't customize tab, but I can use
moving tab with swipe action.
If i use Holo, I can customize tab, but I can't use
moving tab with swipe action.
My Holo Theme
<resources>
<!--my custom theme-->
<style name="MyTheme"
parent="#android:style/Theme.Holo">
<item name="android:actionBarTabTextStyle">#style/MyActionBarTabText</item>
<item name="android:actionBarTabStyle">#style/MyActionBarTabStyle</item>
<item name="android:background">#FFFFFF</item>
</style>
<!--tab text style-->
<style name="MyActionBarTabText"
parent="#android:style/Widget.Holo.ActionBar.TabText">
<item name="android:textColor">#000000</item>
<item name="android:background">#drawable/tab_selector</item>
</style>
<!--tab style-->
<style name="MyActionBarTabStyle" parent="#android:style/Widget.Holo.ActionBar.TabView">
<!--<item name="android:background">#DCEBF0</item>-->
<item name="android:background">#drawable/tab_selector</item>
<item name="android:layout_width">1dp</item>
</style>
</resources>
my AppCompat Theme
<resources>
<style name="MyTheme" parent="MyTheme.Base">
</style>
<!-- Base theme applied no matter what API -->
<style name="MyTheme.Base" parent="Theme.AppCompat.Light.DarkActionBar">
<!--If you are using revision 22.1 please use just windowNoTitle. Without android:-->
<item name="windowNoTitle">true</item>
<!--We will be using the toolbar so no need to show ActionBar-->
<item name="windowActionBar">false</item>
<!-- Set theme colors from http://www.google.com/design/spec/style/color.html#color-color-palette-->
<!-- You can also set colorControlNormal, colorControlActivated
colorControlHighlight and colorSwitchThumbNormal. -->
<item name="windowActionModeOverlay">true</item>
</style>
</resources>
how can i customize tab and using swipe action?
or can I change only tab theme to Holo in AppCompat?
Using Appcompat, you can still do it programmatically:
Use this code in your OnCreate overwrite method (activity you want to show the tabs):
//Setting TabLayout
TabLayout tabLayout = (TabLayout) findViewById(R.id.tab_layout);
tabLayout.addTab(tabLayout.newTab());
tabLayout.addTab(tabLayout.newTab());
tabLayout.addTab(tabLayout.newTab());
tabLayout.setTabGravity(TabLayout.GRAVITY_FILL);
//Setting viewPager
final ViewPager viewPager = (ViewPager) findViewById(R.id.pager);
final PagerAdapter adapter = new
PagerAdapter(getSupportFragmentManager(),
tabLayout.getTabCount());
viewPager.setAdapter(adapter);
viewPager.addOnPageChangeListener(new
TabLayout.TabLayoutOnPageChangeListener(tabLayout));
tabLayout.setupWithViewPager(viewPager);
and create a class to you page adapter like this:
public class PagerAdapter extends FragmentStatePagerAdapter {
int mNumOfTabs;
private String[] tabTitles = new String[]{"TAB1", "TAB2", "TAB3"};
public PagerAdapter(FragmentManager fm, int NumOfTabs) {
super(fm);
this.mNumOfTabs = NumOfTabs;
}
#Override
public CharSequence getPageTitle(int position) {
return tabTitles[position];
}
#Override
public Fragment getItem(int position) {
switch (position) {
case 0:
Tab1 tab1 = new Tab1();
return tab1;
case 1:
Tab2 tab2 = new Tab2();
return tab2;
case 2:
Tab3 tab3 = new Tab3();
return tab3;
default:
return null;
}
}
#Override
public int getCount() {
return mNumOfTabs;
}
}
This is how you define a ViewPager in your xml layout file:
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:layout_below="#id/tab_layout"
android:background="#drawable/gradient_grey">
Let me know if it works for you!
I looking for TabLayout with following custom behaviour
Custom font
Text color change on select & un select of Tab
Bold & normal font on select & un select of Tab
By default 1st tab should be selected with Bold text
I am attaching following code snippet which all I tried for it.
1) I've created custom view Called FundayTabLayout
<com.knackv.custom.view.FundayTabLayout
android:id="#id/dashboard_tab_layout"
style="#style/AppTabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabTextAppearance="#style/AppTabTextAppearance"></com.knackv.custom.view.FundayTabLayout>
2) Styles which I've used
<style name="AppTabLayout" parent="Widget.Design.TabLayout">
<item name="tabMaxWidth">#dimen/size_in_150_dp</item>
<item name="tabIndicatorColor">#color/app_background</item>
<item name="tabBackground">#drawable/tab_background_color_selector</item>
<item name="tabTextAppearance">#style/AppTabTextAppearance</item>
<item name="tabSelectedTextColor">#color/app_blue</item>
</style>
<style name="AppTabTextAppearance" parent="TextAppearance.Design.Tab">
<item name="android:textColor">#color/white</item>
<item name="android:textSize">#dimen/size_in_15_dp</item>
<item name="textAllCaps">false</item>
</style>
3) setting up my custom font:
#Override
public void setupWithViewPager(#Nullable ViewPager viewPager) {
super.setupWithViewPager(viewPager);
this.removeAllTabs();
ViewGroup slidingTabStrip = (ViewGroup) getChildAt(0);
for (int i = 0, count = viewPager.getAdapter().getCount(); i < count; i++) {
Tab tab = this.newTab();
this.addTab(tab.setText(viewPager.getAdapter().getPageTitle(i)));
AppCompatTextView view = (AppCompatTextView) ((ViewGroup) slidingTabStrip.getChildAt(i)).getChildAt(1);
view.setAllCaps(false);
view.setTypeface(Utility.getNormalTypeFace());
}
}
Please provide me optimum solution for this issue.
Typeface fontTypeFace = Typeface.createFromAsset(getAssets(), "OpenSans-Semibold.ttf");
for (int i = 0; i < tabLayout.getChildCount(); ++i) {
View nextChild = tabLayout.getChildAt(i);
if (nextChild instanceof TextView) {
TextView textViewToConvert = (TextView) nextChild;
textViewToConvert.setTypeface(fontTypeFace);
}
}
try this
https://stackoverflow.com/a/31067431/5726971
check this.. it's mainly for android design support TabLayout.
https://stackoverflow.com/a/33284990/5726971
this one added to the first answer in case of using custom TabLayout like your case.
hi，guys，i use TabPageIndicator in my app，everything is ok.eh,but the PageTitle can not be in center like this:
as u see,it is on left.
i try to use a custom style：
<style name="LightTabPageIndicator" parent="Material.Widget.TabPageIndicator">
<item name="tpi_tabPadding">12dp</item>
<item name="android:gravity">center</item>
<item name="tpi_tabRipple">#style/LightTabRippleStyle</item>
<item name="tpi_indicatorHeight">3dp</item>
<item name="tpi_indicatorColor">#color/md_blue_400</item>
<item name="android:textAppearance">#style/LightTabTextAppearance</item>
<item name="android:background">#color/md_grey_200</item>
<item name="tpi_mode">fixed</item>
</style>
<style name="LightTabRippleStyle" parent="Material.Drawable.Ripple.Wave">
<item name="android:background">#null</item>
<item name="rd_rippleColor">#color/md_grey_500</item>
<item name="rd_rippleAnimDuration">300</item>
<item name="rd_maskType">rectangle</item>
<item name="rd_cornerRadius">0dp</item>
<item name="rd_padding">0dp</item>
</style>
<style name="LightTabTextAppearance" parent="#style/Base.TextAppearance.AppCompat.Subhead">
<item name="android:textColor">#drawable/color_tpi_dark</item>
<item name="android:layout_gravity">center</item>
<item name="android:gravity">center</item>
</style>
but it does not work.
so how to make it work? thanks for u view and help.
Try this:
Use android.widget.TabHost.TabSpec#setIndicator(CharSequence label) for each added tab
int tabCount = tabHost.getTabWidget().getTabCount();
for (int i = 0; i < tabCount; i++) {
final View view = tabHost.getTabWidget().getChildTabViewAt(i);
if ( view != null ) {
// reduce height of the tab
view.getLayoutParams().height *= 0.66;
// get title text view
final View textView = view.findViewById(android.R.id.title);
if ( textView instanceof TextView ) {
// just in case check the type
// center text
((TextView) textView).setGravity(Gravity.CENTER);
// wrap text
((TextView) textView).setSingleLine(false);
// explicitly set layout parameters
textView.getLayoutParams().height = ViewGroup.LayoutParams.FILL_PARENT;
textView.getLayoutParams().width = ViewGroup.LayoutParams.WRAP_CONTENT;
}
}
}
I want to customize the sherlock actionbar and its tab.
As I have to show an app icon image in approximate 100-150dp size and bottom the app icon i have to display tab.
Just like this way
So I tried this code in styles
<style name="Theme.Style.Login" parent="#style/Theme.Sherlock.Light">
<!-- For API level <11--->
<item name="actionBarStyle">#style/Theme.white_style</item>
<item name="actionBarTabStyle">#style/customLoginActionBarTabStyle</item>
<item name="actionBarTabBarStyle">#style/customLoginActionBarTabDividerStyle</item>
<!-- For API level <11--->
<!-- For API level >=11--->
<item name="android:actionBarTabBarStyle">#style/customLoginActionBarTabStyle</item>
<item name="android:actionBarStyle">#style/Theme.white_style</item>
<item name="android:actionBarTabBarStyle">#style/customLoginActionBarTabDividerStyle</item>
<!-- For API level >=11--->
</style>
<!-- Signup Login Tab Style theme -->
<style name="customLoginActionBarTabStyle" parent="#style/Widget.Sherlock.Light.ActionBar.TabView">
<item name="android:background">#drawable/actionbar_tabs_selector_loginsignup</item>
</style>
<style name="customLoginActionBarTabDividerStyle" parent="#style/Widget.Sherlock.ActionBar.TabBar">
<item name="divider">#null</item>
<item name="android:divider">#null</item>
</style>
<style name="Theme.white_style" parent="#style/Theme.Sherlock.Light">
<item name="actionBarSize">#dimen/loginactionbar</item>
<item name="android:actionBarSize">#dimen/loginactionbar</item>
</style>
and so on.
And here is my activity code
public class SignupLoginActivity extends SherlockActivity implements ActionBar.TabListener {
public static int THEME = R.style.Theme_Style_Login;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setTheme(THEME);
setContentView(R.layout.main);
ActionBar actionBar = getSupportActionBar();
actionBar.setCustomView(R.layout.login_actionbar_customeview);
actionBar.setDisplayShowTitleEnabled(false);
actionBar.setDisplayShowCustomEnabled(true);
actionBar.setLogo(null);
View homeIcon = findViewById(
Build.VERSION.SDK_INT >= Build.VERSION_CODES.HONEYCOMB ?
android.R.id.home : R.id.abs__home);
((View) homeIcon.getParent()).setVisibility(View.GONE);
((View) homeIcon).setVisibility(View.GONE);
/*
* For adding tab
*/
actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
for (int i = 1; i <= 2; i++) {
ActionBar.Tab tab = actionBar.newTab();
tab.setText("Tab " + i);
tab.setTabListener(this);
actionBar.addTab(tab);
}
}
#Override
public void onTabSelected(Tab tab, FragmentTransaction ft) {
// TODO Auto-generated method stub
}
#Override
public void onTabUnselected(Tab tab, FragmentTransaction ft) {
// TODO Auto-generated method stub
}
#Override
public void onTabReselected(Tab tab, FragmentTransaction ft) {
// TODO Auto-generated method stub
}
}
So in this case I am able to increase Actionbar height but ActionBar Tab are not showing so how to achieve the result which i want.
Finally I achived the desire solution by this way
<!-- For API Level <11 -->
<style name="Theme.Style.Login" parent="#style/Theme.Sherlock.Light">
<item name="actionBarTabStyle">#style/customLoginActionBarTabStyle</item>
<item name="actionBarDivider">#null</item> // This will remove divider between tabs
<item name="actionBarTabTextStyle">#style/customeLoginTabTextStyle</item> // This will increase tab text size
<item name="actionBarSize">#dimen/loginactionbar</item> // This will increase actionbar size
</style>
<!-- For API Level <11 -->
<!-- For API Level >=11 -->
<style name="Theme.Style.Login" parent="#style/Theme.Sherlock.Light">
<item name="android:actionBarTabStyle">#style/customLoginActionBarTabStyle</item>
<item name="actionBarDivider">#null</item> // This will remove divider between tabs
<item name="android:actionBarTabTextStyle">#style/customeLoginTabTextStyle</item> // This will increase tab text size
<item name="android:actionBarSize">#dimen/loginactionbar</item> // This will increase actionbar size
</style>
<!-- For API Level >=11 -->
<!-- For API Level >=14 -->
<style name="Theme.Style.Login" parent="#style/Theme.Sherlock.Light">
<item name="android:actionBarTabStyle">#style/customLoginActionBarTabStyle</item>
<item name="android:actionBarDivider">#null</item> // This will remove divider between tabs
<item name="android:actionBarTabTextStyle">#style/customeLoginTabTextStyle</item> // This will increase tab text size
<item name="android:actionBarSize">#dimen/loginactionbar</item> // This will increase actionbar size
</style>
<!-- For API Level >=14 -->
<!-- Signup Login Tab Style theme -->
<style name="customLoginActionBarTabStyle" parent="#style/Widget.Sherlock.Light.ActionBar.TabView">
<item name="android:background">#drawable/actionbar_tabs_selector_loginsignup</item>
<item name="android:paddingTop">20dp</item>
</style>
<style name="customeLoginTabTextStyle" parent="Widget.Sherlock.ActionBar.TabText">
<item name="android:textColor">#color/countryname</item>
<item name="android:textSize">#dimen/logintabtxtsize</item>
</style>
I m looking for way to text Bold, basically Tab Host make Text Bold.
Sample image is as below
Below is my code.
tabHost.setOnTabChangedListener(new OnTabChangeListener()
{
#Override
public void onTabChanged(String tabId)
{
if (tabId.equals("READING"))
{
for(int i=0;i< tabHost.getTabWidget().getChildCount();i++)
{
//unselected
tabHost.getTabWidget().getChildAt(i).setBackgroundColor(Color.parseColor("#E6A9EC"));
}
// selected
tabHost.getTabWidget().getChildAt(tabHost.getCurrentTab()).setBackgroundColor(Color.WHITE);
}
else
{
for(int i=0;i< tabHost.getTabWidget().getChildCount();i++)
{
//unselected
tabHost.getTabWidget().getChildAt(i).setBackgroundColor(Color.parseColor("#E6A9EC"));
}
// selected
tabHost.getTabWidget().getChildAt(tabHost.getCurrentTab()).setBackgroundColor(Color.WHITE);
}
}
});
You can style it in your custom theme change
<item name="android:tabWidgetStyle">#android:style/Widget.TabWidget</item>
and
<style name="Widget.TabWidget">
<item name="android:textAppearance">#style/TextAppearance.Widget.TabWidget</item>
<item name="android:ellipsize">marquee</item>
<item name="android:singleLine">true</item>
</style>
<style name="TextAppearance.Widget.TabWidget">
<item name="android:textSize">14sp</item>
<item name="android:textStyle">bold</item>
<item name="android:textColor">#android:color/tab_indicator_text</item>
</style>
I found this to be the easiest way:
After you add the tab to your TabHost do the following:
TextView textView = (TextView) tabHost.getTabWidget().getChildAt(i)
.findViewById(android.R.id.title);
'i' is just an index to the new tab. In my case I was using a for loop.
After that it's very simple, just do this:
textView .setTypeface(null, Typeface.BOLD);
Hope this helps.