I've followed a tutorial on how to create tabs that you can swipe between using fragments, but now as I'm done with the tutorial I need to implement a custom design on the tabs. Can I do that because that is not explained in the tutorial.
*This is the tutorial I followed
Create custom tab’s layout
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/tabsLayout" android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:padding="10dip" android:gravity="center" android:orientation="vertical">
<TextView android:id="#+id/tabsText" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:text="Title"
android:textSize="15dip" />
</LinearLayout>
Customize the look and feel of the view
tabs_bg.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/tabsLayout" android:layout_width="fill_parent"
android:layout_height="fill_parent" android:background="#drawable/tab_bg_selector"
android:padding="10dip" android:gravity="center" android:orientation="vertical">
<TextView android:id="#+id/tabsText" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:text="Title"
android:textSize="15dip" android:textColor="#drawable/tab_text_selector" />
</LinearLayout>
similarly set text and background selector.use it as your new layout
you can reference this for more details.
create xml(tab1) in drawble folder
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- When selected, use grey -->
<item android:drawable="#drawable/videos_gray"
android:state_selected="true" />
<!-- When not selected, use white-->
<item android:drawable="#drawable/videos_white" />
and use that in java file
// Create an actionbar
ActionBar actionBar = getActionBar();
// Hide Actionbar Icon
actionBar.setDisplayShowHomeEnabled(false);
// Hide Actionbar Title
actionBar.setDisplayShowTitleEnabled(false);
// Create Actionbar Tabs
actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
// Create first Tab
tab = actionBar.newTab().setTabListener(new FragmentTab1());
// Create your own custom icon
tab.setIcon(R.drawable.tab1);
actionBar.addTab(tab);
// Create Second Tab
tab = actionBar.newTab().setTabListener(new FragmentTab2());
// Set Tab Title
tab.setText("Tab2");
actionBar.addTab(tab);
// Create Third Tab
tab = actionBar.newTab().setTabListener(new FragmentTab3());
// Set Tab Title
tab.setText("Tab3");
actionBar.addTab(tab);
Related
I am trying to have a Simple actionbar with a custom view, but I get the following result:
For demonstration I created a simple xml with a yellow background color which is supposed to take the whole width.
Here is the xml:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/yellow"
android:orientation="vertical" >
<TextView
android:visibility="gone"
android:id="#+id/action_save"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/action_save"
android:gravity="center"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:textStyle="bold"
android:layout_marginLeft="10dp"
android:textColor="#android:color/white"
android:text="#string/save" />
<ImageView
android:visibility="gone"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:background="#drawable/ic_actionbar_logo" />
</RelativeLayout>
And I use the following theme for my Application:
<style name="AppBaseTheme" parent="#style/Theme.AppCompat.Light"></style>
This is the actionbar initialization code:
actionBar = getSupportActionBar();
actionBar.setDisplayShowHomeEnabled(false);
actionBar.setDisplayShowCustomEnabled(true);
actionBar.setCustomView(R.layout.actionbar);
The solution is adding :
actionBar.setDisplayShowTitleEnabled(false);
The code should look something like:
actionBar = getSupportActionBar();
actionBar.setDisplayShowHomeEnabled(false);
actionBar.setDisplayShowCustomEnabled(true);
actionBar.setDisplayShowTitleEnabled(false);
actionBar.setCustomView(R.layout.actionbar);//set the custom view
#NemesisDoom: Please make sure that you use ActionBar from the support.v7 library rather that one from the Android API (this second one will not work certainly). If still doesn't work, add the further changes:
styles.xml (your action bar style section):
<item name="android:homeAsUpIndicator">#drawable/_pixel</item>
<item name="homeAsUpIndicator">#drawable/_pixel</item>
_pixel is 1x1.png image, transparent.
your activity:
actionBar.setDisplayHomeAsUpEnabled(true);
I'm trying to change the layout of the actionBar in my app. I managed to display the layout, but there's a problem - the layout doesn't stretch to entire width of the bar and I don't see the title and the icon. Here's how I see it right now:
This is the XML of my custom layout:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#drawable/app_bg"
android:layout_gravity="fill_horizontal" >
<Button
android:id="#+id/button1"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:text="Button" />
</RelativeLayout>
And this is how I tried to display it in my main FragmentActivity, along with the title:
final ActionBar actionBar = getActionBar();
actionBar.setCustomView(R.layout.action_bar);
actionBar.setDisplayShowTitleEnabled(true);
actionBar.setDisplayUseLogoEnabled(true);
actionBar.setSubtitle("welcome to my app");
actionBar.setTitle("My App");
actionBar.setDisplayShowCustomEnabled(true);
actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
I want the layout to stretch to entire width of the bar. Also, I'd like to have the options button on the right of the menu later (to the left of the button).
What am I doing wrong and how do I fix it?
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 am trying to create a popup on the actionbar item (like the one in G+ app).
To do this, I need to have the actionbar item view but this is available only setting a custom view with setActionView().
The problem is that I cannot reach the same menu item style of actionbar items.
I am using this:
<Button xmlns:android="http://schemas.android.com/apk/res/android"
style="?android:attr/actionButtonStyle"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:paddingLeft="12dp"
android:paddingRight="12dp"
android:background="#drawable/ic_refresh">
but the result is not good.
Where could I find a layout/style to mimic the action bar item one?
The solution is to use this layout:
<?xml version="1.0" encoding="utf-8"?>
<ImageButton xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="#android:style/Widget.Holo.ActionButton"
android:src="#drawable/ic_refresh">
</ImageButton>
with the style #android:style/Widget.Holo.ActionButton
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);
}