is it possible for actionbar and it's stacked bar(one that contain navigation tabs) to share same background image? one that starts from actionbar and ends at stacked bar?
currently the way am implementing this, am ending up having action bar with it own image and stacked bar with its own.
my styles.xml
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="android:actionBarStyle">#style/MyActionBar</item>
<item name="android:actionMenuTextColor">#color/app_yellow</item>
<item name="android:windowActionBarOverlay">true</item>
<!-- Support library compatibility -->
<item name="actionBarStyle">#style/MyActionBar</item>
<item name="actionMenuTextColor">#color/app_yellow</item>
</style>
<!-- ActionBar styles -->
<style name="MyActionBar" parent="#style/Widget.AppCompat.Light.ActionBar">
<item name="android:titleTextStyle">#style/MyActionBarTitleText</item>
<item name="android:actionBarTabTextStyle">#style/MyActionBarTabText</item>
<item name ="android:actionBarTabStyle">#style/MyTabStyle</item>
<item name="background">#drawable/actionbar</item>
</style>
<!-- individual ActionBar tabs style -->
<style name="MyTabStyle" parent ="Widget.AppCompat.Light.ActionBar.TabView">
<item name ="background">#android:color/transparent</item>
<item name ="android:background">#android:color/transparent</item>
</style>
in my activity
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ActionBar actionBar = getSupportActionBar();
// Specify that tabs should be displayed in the action bar.
actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
actionBar.setLogo(R.mipmap.ic_launcher);
actionBar.setDisplayUseLogoEnabled(true);
actionBar.setDisplayShowHomeEnabled(true);
actionBar.setStackedBackgroundDrawable(getResources().getDrawable(R.drawable.actionbar));
From Michael De Soto guidance(see his comment above), i was able to have actionbar and stacked bar share same background image by using a toolbar that has
actionbar details(e.g icons,titles) in views(textview for titles, imageviews for icons etc)
Stacked bar details(basically tabs) in a tablayout.
Here how i implemented it guys
my activity xml
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
android:id="#+id/mainActivityBar"
android:layout_alignParentTop="true"
android:background="#drawable/actionbar"
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"
app:contentInsetEnd="0dp"
app:contentInsetRight="0dp"
>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="President"
android:id="#+id/appname_1"
android:background="#android:color/transparent"
android:textColor="#ffffff"
android:layout_marginLeft="20dp" />
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
style="#style/myCustomTabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/transparent"
android:layout_below="#+id/appname_1"
android:layout_alignParentEnd="true"
android:layout_alignParentStart="false"
android:layout_alignParentLeft="false"
android:layout_alignParentRight="true"
android:layout_alignParentBottom="false"
android:layout_alignLeft="#+id/appname_1"
app:tabGravity="fill"
app:tabMode="scrollable"/>
</RelativeLayout>
</android.support.v7.widget.Toolbar>
added the following in my styles.xml
<style name="mainActivityTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="windowActionBar">false</item>
<item name="android:windowNoTitle">true</item>
<item name="android:textColorSecondary">#android:color/white</item>
<!--We will be using the toolbar so no need to show ActionBar-->
<item name="android:windowActionBar">false</item>
</style>
<style name="myCustomTabLayout" parent="Widget.Design.TabLayout">
<item name="tabIndicatorColor">?attr/colorAccent</item>
<item name="tabIndicatorHeight">2dp</item>
<item name="tabSelectedTextColor">?android:textColorPrimary</item>
</style>
Finally, my activity
public class MainActivity extends AppCompatActivity {
private SectionsPagerAdapter mSectionsPagerAdapter;
TabLayout tabLayout;
private ViewPager mViewPager;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar toolbar =(Toolbar) findViewById(R.id.mainActivityBar);
setSupportActionBar(toolbar);
tabLayout = (TabLayout) findViewById(R.id.tabs);
// Create the adapter that will return a fragment for each of the three
// primary sections of the activity.
mSectionsPagerAdapter = new SectionsPagerAdapter(getSupportFragmentManager());
// Set up the ViewPager with the sections adapter.
mViewPager = (ViewPager) findViewById(R.id.pager);
mViewPager.setAdapter(mSectionsPagerAdapter);
mViewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout));
tabLayout.setupWithViewPager(mViewPager);
}
public class SectionsPagerAdapter extends FragmentStatePagerAdapter {
public SectionsPagerAdapter(FragmentManager fm) {
super(fm);
}
#Override
public Fragment getItem(int position) {
// getItem is called to instantiate the fragment for the given page.
switch (position) {
case 0:
return Item1fragment.newInstance();
case 1:
return Item2fragment.newInstance();
case 2:
return Item3fragment.newInstance();
}
return null;
}
#Override
public int getCount() {
// Show 3 total pages.
return 3;
}
#Override
public CharSequence getPageTitle(int position) {
Locale l = Locale.getDefault();
switch (position) {
case 0:
return "Item1;
case 1:
return "Item2";
case 2:
return "Item3";
}
return "";
}
}
}
Thanks for your indepth answer OP. For those coming here in future, if you want to display the back button on the toolbar, it will push all the subsequent views in the Toolbar to the side by about 50dp, even when aligned below, even when using app:contentInsetStart="0dp". Because of this, I have just gone for the transparent backgrounds and having a view behind them.
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!
In the log, I have
NullPointerException : Attempt to invoke virtual method 'void
android.app.ActionBar.setDisplayShowTitleEnabled(boolean)' on a null
object reference.
Here is my following code :
public class MatchesActivity extends Activity implements ActionBar.OnNavigationListener {
private ActionBar actionBar;
private ArrayList<SpinnerNavItem> navSpinner;
private TitleNavigationAdapter adapter;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_matches);
actionBar=getActionBar();
actionBar.setDisplayShowTitleEnabled(false);
actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_LIST);
navSpinner = new ArrayList<SpinnerNavItem>();
navSpinner.add(new SpinnerNavItem("Botola Pro",R.drawable.ic_menu_camera));
navSpinner.add(new SpinnerNavItem("Coupe du trone",R.drawable.ic_menu_camera));
adapter = new TitleNavigationAdapter(getApplicationContext(),navSpinner);
actionBar.setListNavigationCallbacks(adapter,this);
}
#Override
public boolean onNavigationItemSelected(int itemPosition, long itemId){
return false;
}
}
here is my styles.xml and my stylesv21.xml :
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
</style>
<style name="AppTheme.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />
<style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />
</resources>
<resources>
<style name="AppTheme.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
<item name="android:statusBarColor">#android:color/transparent</item>
</style>
</resources>
To get you started, here's some pointers. Toolbar is the new ActionBar. You can define any custom Toolbar layout you want from XML.
For a Spinner, for example, save this as toolbar_spinner.xml.
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar 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/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimaryDark"
android:minHeight="?attr/actionBarSize"
app:popupTheme="#style/ThemeOverlay.AppCompat.Dark"
>
<Spinner
android:id="#+id/spinner_nav"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</android.support.v7.widget.Toolbar>
Now, you can simply include that Toolbar layout into your Activity. (Make sure that Activity uses a Theme without a Toolbar like Theme.AppCompat.NoActionBar)
<?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" >
<include
android:id="#+id/toolbar"
layout="#layout/toolbar_spinner" />
<!-- Activity content here -->
</LinearLayout>
Then, you can start off your Activity class like so
public class SpinToolbarActivity extends AppCompatActivity {
private Toolbar mToolbar;
private Spinner mSpinner;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_spintoolbar);
mToolbar = (Toolbar) findViewById(R.id.toolbar);
mSpinner = (Spinner) findViewById(R.id.spinner_nav);
if (mToolbar != null) {
setSupportActionBar(mToolbar);
getSupportActionBar().setDisplayShowTitleEnabled(false);
}
// TODO: add items to mSpinner using an Adapter
}
}
i created an a custom toolbar to replace the default action bar of appcompat in android. but when i run the application i get two title, like in the picture
http://i.stack.imgur.com/wOPVE.png
i want only the title in the middle
here the code:
Main.java
public class MainMenu extends AppCompatActivity{
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main_menu);
Toolbar toolbar = (Toolbar)findViewById(R.id.mytoolbar);
setSupportActionBar(toolbar);
Typeface mistral = Typeface.createFromAsset(getAssets(), "MISTRAL.TTF");
TextView title = (TextView)findViewById(R.id.toolbar_title);
title.setText("Fyllo");
title.setTypeface(mistral);
}
#Override
public boolean onCreateOptionsMenu(Menu menu){
super.onCreateOptionsMenu(menu);
getMenuInflater().inflate(R.menu.my_menu, menu);
return true;
}
#Override
public boolean onOptionsItemSelected(MenuItem item) {
int id =item.getItemId();
if(id == R.id.action_settings){
Toast.makeText(getApplicationContext(),"this is a menu option",Toast.LENGTH_SHORT).show();
return true;
}
return super.onOptionsItemSelected(item);
}
MainMenu.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
tools:context="com.example.adams.fyllo.MainMenu">
<android.support.v7.widget.Toolbar
android:id="#+id/mytoolbar"
android:layout_width="match_parent"
android:layout_height="56dp"
android:background="#00000000"
android:elevation="4dp"
android:title="Services">
<TextView
android:id="#+id/toolbar_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="18sp"
android:textAppearance="?android:attr/textAppearanceMedium"
android:layout_gravity="center"
android:text="Toolbar Title" />
</android.support.v7.widget.Toolbar>
</RelativeLayout>
And for style, i am using AppTheme
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#000000</item>
<item name="colorPrimaryDark">#000000</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="android:titleTextStyle">#style/NoTitleText</item>
</style>
<style name="NoTitleText">
<item name="android:textSize">0sp</item>
<item name="android:textColor">#00000000</item>
</style>
</resources>
What can i do to remove this error
You have given titles two times either you want to remove upper one remove TextView which is inside Toolbar and setTitle of toolbar.
otherwise remove title from the Toolbar
You can remove title with help of
getSupportActionBar().setDisplayShowTitleEnabled(false);
I am trying to learn implementations of Navigation Drawer in Android.
In one activity, i have made the Navigation Drawer come under the Status Bar(transparent) and over the App Bar and everything works fine.(left Screenshot)
In another activity in the same App, i am trying to create Navigation Drawer that pulls up under the App Bar. But here, the status bar turns grey for some reason(whether nav drawer is open or closed)(Right Screenshot). Other than this, everything seems fine.
Below is the screenshot:
The green Nav Drawer is a fragment.
What i want to know is how to make the status normal(darker shade of. Please remember, if i click that twin arrow icon in the App Bar, it will take me to another activity which contains another Nav Drawer which works like the one in Material Design(Full height of the screen and comes under a transparent Status Bar). This is shown in the left side of the screenshot.
Below is the code:
MainActivity.java:
public class MainActivity extends ActionBarActivity {
Toolbar toolbar;
DrawerLayout xDrawerLayout;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_alt);
toolbar = (Toolbar) findViewById(R.id.app_bar);
setSupportActionBar(toolbar);
getSupportActionBar().setDisplayShowHomeEnabled(true);
xDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
xDrawerLayout.setStatusBarBackgroundColor(getResources().getColor(R.color.primary_dark));
NavDrawerFragment mfragment = (NavDrawerFragment) getFragmentManager().findFragmentById(R.id.nav_drawer_fragment);
mfragment.SetUp(xDrawerLayout, toolbar, R.id.nav_drawer_fragment);
}
...
activity_alt.xml:
<LinearLayout 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"
android:fitsSystemWindows="true"
android:orientation="vertical">
<include
android:id="#+id/app_bar"
layout="#layout/app_bar" />
<android.support.v4.widget.DrawerLayout
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/hello_world" />
</RelativeLayout>
<fragment
android:id="#+id/nav_drawer_fragment"
android:name="com.rt.droid.mattest.NavDrawerFragment"
android:layout_width="#dimen/nav_drawer_width"
android:layout_height="match_parent"
android:layout_gravity="start"
tools:layout="#layout/fragment_nav_drawer" />
</android.support.v4.widget.DrawerLayout>
</LinearLayout>
NavDrawerFragment.java:
public class NavDrawerFragment extends Fragment {
private ActionBarDrawerToggle mDrawerToggle;
private DrawerLayout mDrawerLayout;
public DrawerLearner yDrawerLearner;
public NavDrawerFragment() {
// Required empty public constructor
}
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// Inflate the layout for this fragment
View fView = inflater.inflate(R.layout.fragment_nav_drawer, container, false);
//fView.setFitsSystemWindows(true);
fView.setBackgroundColor(getResources().getColor(R.color.accent));
return fView;
}
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
}
public void SetUp(DrawerLayout drawerLayout, Toolbar toolbar, int frag_id) {
this.mDrawerLayout = drawerLayout;
View drawerFrag = getActivity().findViewById(frag_id);
mDrawerToggle = new ActionBarDrawerToggle(getActivity(), mDrawerLayout, toolbar, R.string.drawer_open, R.string.drawer_close) {
#Override
public void onDrawerOpened(View drawerView) {
super.onDrawerOpened(drawerView);
getActivity().invalidateOptionsMenu();
}
#Override
public void onDrawerClosed(View drawerView) {
super.onDrawerClosed(drawerView);
getActivity().invalidateOptionsMenu();
}
};
yDrawerLearner = new DrawerLearner(mDrawerLayout, drawerFrag, getActivity());
yDrawerLearner.execute();
this.mDrawerLayout.setDrawerListener(mDrawerToggle);
mDrawerLayout.setStatusBarBackgroundColor(getResources().getColor(R.color.primary_dark));
mDrawerLayout.post(new Runnable() {
#Override
public void run() {
mDrawerToggle.syncState();
}
});
}
}
fragment_nav_drawer.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="com.rt.droid.mattest.NavDrawerFragment">
<!-- TODO: Update blank fragment layout -->
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="#string/hello_blank_fragment" />
</FrameLayout>
app_bar.xml:
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/primary"
app:popupTheme="#style/AppTheme.PopupMenu"
android:theme="#style/AppTheme.Toolbar">
</android.support.v7.widget.Toolbar>
styles.xml:
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="AppTheme.Base">
<!-- Customize your theme here. -->
</style>
<style name="AppTheme.Base" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">#color/primary</item>
<item name="colorPrimaryDark">#color/primary_dark</item>
<item name="colorAccent">#color/accent</item>
</style>
<style name="AppTheme.Toolbar" parent="ThemeOverlay.AppCompat.Dark">
<item name="android:textColorPrimary">#color/primary_text</item>
<item name="android:textColorSecondary">#color/accent</item>
</style>
<style name="AppTheme.PopupMenu" parent="ThemeOverlay.AppCompat.Dark">
<item name="android:background">#color/accent</item>
</style>
</resources>
styles.xml(v21):
<resources>
<style name="AppTheme" parent="AppTheme.Base">
<!-- Customize your theme here. -->
<item name="android:colorPrimary">#color/primary</item>
<item name="android:colorPrimaryDark">#color/primary_dark</item>
<item name="android:colorAccent">#color/accent</item>
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
<item name="android:statusBarColor">#android:color/transparent</item>
<item name="android:windowTranslucentStatus">true</item>
</style>
</resources>
Colors.xml(screenshot showing color samples):
Note: I do not want to compromise on the styles etc that would render my other navigation drawer not working. In other words, i prefer a solution wherein both types of navigation bar works as expected in the same app.
Please let me know if you need any info and i shall edit if required.
Edit: added app_bar.xml & colors.xml for clarity.
But here, the status bar turns grey for some reason
It's the translucent (25% black) status bar background over the white background of activity underneath it.
What i want to know is how to make the status normal
You need to disable translucent status bar for the second activity. It is activated by this line in your theme definition:
<item name="android:windowTranslucentStatus">true</item>
<item name="android:statusBarColor">#color/primary_dark</item>
So either define a child theme and override the flag with false or clear the flag programmatically by calling this from your activity:
if (Build.VERSION.SDK_INT >= 21) {
getWindow().clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
getWindow().setStatusBarColor(getResources().getColor(R.color.primary_dark);
}
I want to create two tabs with different styles. What I must do to get such result like in example?
Example:
And what I have now:
TabsActivity
public class TabsActivity extends SherlockFragmentActivity {
private TabsAdapter mTabsAdapter;
private ActionBar mActionBar;
private TabHost tabHost;
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.l_maintab);
if (Build.VERSION.SDK_INT < Build.VERSION_CODES.ICE_CREAM_SANDWICH) {
BitmapDrawable bg = (BitmapDrawable)
getResources().getDrawable(R.drawable.bg_striped);
getSupportActionBar().setBackgroundDrawable(bg);
BitmapDrawable bgSplit = (BitmapDrawable)
getResources().getDrawable(R.drawable.bg_striped_split_img);
bgSplit.setTileModeXY(Shader.TileMode.REPEAT, Shader.TileMode.REPEAT);
getSupportActionBar().setSplitBackgroundDrawable(bgSplit);
}
final ActionBar bar = getSupportActionBar();
bar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
bar.setDisplayOptions(0, ActionBar.DISPLAY_USE_LOGO);
bar.setDisplayShowTitleEnabled(true);
bar.setDisplayShowHomeEnabled(true);
mTabsAdapter = new TabsAdapter(this, (ViewPager) findViewById(R.id.pager));
ActionBar.Tab events_tab = bar.newTab().setText("Events");
ActionBar.Tab volo_tab = bar.newTab().setText("Volunteers");
mTabsAdapter.addTab(events_tab, EventFragment.class, null);
mTabsAdapter.addTab(volo_tab, UserFragment.class, null);
bar.selectTab(bar.getTabAt(tabnum));
}
l_maintab.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:orientation="vertical" >
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
</LinearLayout>
This is controlled by the background that you assign to the tab (usually through styles and themes). Create a style for the tab:
<style name="MyTabStyle" parent="Widget.Sherlock.ActionBar.TabView">
<item name="android:background">#drawable/my_tab_indicator</item>
</style>
I've extended the ActionBarSherlock style so that the only relevant override is the background attribute. In your theme definition, add these to your theme:
<item name="actionBarTabStyle">#style/MyTabStyle</item>
<item name="android:actionBarTabStyle">#style/MyTabStyle</item>
Then all you need to do is make a drawable resource for each state and include a state-list drawable resource for your background.
EDIT:
If you have two different tab styles:
<style name="MyTabStyle" parent="Widget.Sherlock.ActionBar.TabView">
<item name="android:background">#drawable/my_tab_indicator</item>
</style>
<style name="MyOtherTabStyle" parent="Widget.Sherlock.ActionBar.TabView">
<item name="android:background">#drawable/my_other_tab_indicator</item>
</style>
Make your app theme, then make a second one extending it:
<style name="MyAppTheme" parent="Theme.Sherlock...">
<!-- other theme attributes -->
<item name="actionBarTabStyle">#style/MyTabStyle</item>
<item name="android:actionBarTabStyle">#style/MyTabStyle</item>
</style>
<style name="MyAppTheme.Alternate">
<!-- Override just the tab style -->
<item name="actionBarTabStyle">#style/MyOtherTabStyle</item>
<item name="android:actionBarTabStyle">#style/MyOtherTabStyle</item>
</style>
In your Manifest, set android:theme="#style/MyAppTheme" in the <application> element. For Activities that need the second tab style, use android:theme="#style/MyAppTheme.Alternate" in the <activity> element.