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.
Related
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
}
}
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.
I override the BackGround Color of the ActionBar from the style.xml
This is the code:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="AppTheme" parent="android:Theme.Material.Light.DarkActionBar">
<item name="android:statusBarColor">#color/ColorPrimaryDark</item>
<item name="android:actionBarStyle">#style/MyActionBar</item>
</style>
<!-- Action bar -->
<style name="MyActionBar" parent="android:Theme.Material.Light.DarkActionBar">
<item name="android:background">#color/ColorPrimary</item>
</style>
</resources>
The code from main activity is here :
public class MainActivity extends Activity {
private ActionBar mActionBar;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mTitles = firstItem.getTitle(); //setting the title of the first item
/**
* Action Bar customization
*/
mActionBar = getActionBar();
//Latest
mActionBar.setTitle(" Latest"); // set the first title
mActionBar.setDisplayHomeAsUpEnabled(true); // Enabling action bar app icon and behaving it as toggle button
mActionBar.setDisplayShowHomeEnabled(false); // hide tha app icon from the action bar
mActionBar.setHomeButtonEnabled(true);
}
The problem is that I can't see the text of the action bar if i set the color from style.xml . Futhermore i can't use things like :
<item name="android:textColorPrimary">#color/row_child_menu_title</item>
or
<item name="android:colorAccent">#color/row_child_menu_title</item>
the result is the same. The text is being disappeared and only the menu icons and the toggle icon are visible
Thanks in advance
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#ff9501"
app:popupTheme="#style/AppTheme.PopupOverlay" >
Activity:
Toolbar toolbar = findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
getSupportActionBar().setTitle("title");
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
I am new to android, while customizing action bar i noticed that first it shows old(default) action bar first then it shows customized action bar. Also I want to set text color for action bar title.
My code snippet is
public class MainActivity extends ActionBarActivity {
MenuItem searchItem;
SearchView searchView;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
ActionBar ab = getSupportActionBar();
ab.setTitle("Modification"); ab.setIcon(R.drawable.ap);
ab.setBackgroundDrawable(new
ColorDrawable(Color.parseColor("#00AA00")));
ab.setSubtitle("Modification");
setContentView(R.layout.activity_main);
I think there must be some silly mistake.
Please help.
Try this one..
create a theme.xml as follows
<resources>
<!-- the theme applied to the application or activity -->
<style name="CustomActivityTheme" parent="#android:style/Theme.Holo">
<item name="android:actionBarStyle">#style/MyActionBar</item>
<!-- other activity and action bar styles here -->
</style>
<!-- style for the action bar backgrounds -->
<style name="MyActionBar" parent="#android:style/Widget.Holo.ActionBar">
<item name="android:background">#5477B1</item>
</style>
Then in your Androidmanifest.xml
mention this in application tag
<application
..
android:theme="#style/CustomActionBarTheme"
Good luck
try like this,
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ActionBar mActionBar = getActionBar();
mActionBar.setDisplayShowHomeEnabled(false);
mActionBar.setDisplayShowTitleEnabled(false);
LayoutInflater mInflater = LayoutInflater.from(this);
View mCustomView = mInflater.inflate(R.layout.custom_actionbar, null);
TextView mTitleTextView = (TextView) mCustomView.findViewById(R.id.title_text);
mTitleTextView.setText("My Own Title");
mActionBar.setCustomView(mCustomView);
mActionBar.setDisplayShowCustomEnabled(true);
}
or
Create a style for the action bar and use a custom background:
<resources>
<!-- the theme applied to the application or activity -->
<style name="CustomActivityTheme" parent="#android:style/Theme.Holo">
<item name="android:actionBarStyle">#style/MyActionBar</item>
<!-- other activity and action bar styles here -->
</style>
<!-- style for the action bar backgrounds -->
<style name="MyActionBar" parent="#android:style/Widget.Holo.ActionBar">
<item name="android:background">#drawable/background</item>
<item name="android:backgroundStacked">#drawable/background</item>
<item name="android:backgroundSplit">#drawable/split_background</item>
</style>
</resources>
Can anyone please guide, how to achieve this sort of tab style in the attached image , I have worked on many tab styles, but not getting this one .
Update:
How I did it #PRAVIN :
theme.xml in res/values folder
<style name="CustomActionBarTheme2" parent="#android:style/Theme.Holo">
<item name="android:actionBarItemBackground">#drawable/selectable_background_example</item>
<item name="android:actionBarTabStyle">#style/MyActionBarTab</item>
<item name="android:actionBarStyle">#style/ActionBar.Solid.Example</item>
</style>
<!-- ActionBar tabs styles -->
<style name="MyActionBarTab" parent="#android:style/Widget.Holo.Light.ActionBar.TabView">
<item name="android:background">#drawable/actionbar_tab_indicator</item> <!-- actionbar_tab_indicator -->
<item name="android:showDividers">none</item>
<item name="android:paddingLeft">20dp</item>
<item name="android:paddingRight">20dp</item>
In my Main activity:
private String[] tabs = { "Tab1", "Tab2", "tab3","Tab4" };
getActionBar().setDisplayShowTitleEnabled(false);
actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
// Adding Tabs
for (String tab_name : tabs) {
if(tab_name.equals("Tab1")){
actionBar.addTab(actionBar.newTab().setIcon(R.drawable.tab_home)
.setTabListener(this));
} else if(tab_name.equals("Tab2")){
actionBar.addTab(actionBar.newTab().setIcon(R.drawable.tab_search)
.setTabListener(this));
}else if(tab_name.equals("Tab3")){
actionBar.addTab(actionBar.newTab().setIcon(R.drawable.tab_home)
.setTabListener(this));
}else if(tab_name.equals("Tab4")){
actionBar.addTab(actionBar.newTab().setIcon(R.drawable.tab_search)
.setTabListener(this));
}
}
and finally i add that custom theme to my activity
<activity
android:name="aimviz.omi.shoppingcartapp.MainActivity"
android:theme="#style/CustomActionBarTheme2" />
any ways i am unable to remove divider line, but code works. Thanks #PRAVIN.
the below url helped me a lot:Iphone like tabbar in android
the modifications are in only change in drawable xml files as per your needs.
With custom Action Bar Tabs :
custom_tab_layout.xml xml layout file for each tab
<?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" >
<ImageView
android:id="#+id/tab_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/tab_to_opine"
android:background="#android:color/transparent" />
<TextView
android:id="#+id/tab_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
Code in activity :
In onCreate()
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
......
getActionBar().setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
createNewTab(R.layout.custom_tab_layout, "My Tab");
......//TODO add more tabs
}
public void createNewTab(int view, int titleView, String title) {
ActionBar.Tab tab = getActionBar().newTab();
tab.setTabListener(this);
tab.setCustomView(view);
getSupportActionBar().addTab(tab);
TextView Title=(TextView)view.findViewById(R.id.tab_title)
Title.setText(title);
}
So using this line of codes you can achieve custom action bar tabs