I tried to make oval shape tabhost as expected below shape.
I tried the below codes.
public class AndroidTabLayoutActivity extends TabActivity {
TabHost tabHost;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
tabHost = getTabHost();
TabHost.TabSpec spec;
Intent intent;
intent = new Intent().setClass(this, PhotosActivity.class);
View tabView = createTabView(this, "Updates");
spec = tabHost.newTabSpec("tab1").setIndicator(tabView).setContent(intent);
tabHost.addTab(spec);
tabView = createTabView(this, "Events");
intent = new Intent().setClass(this, SongsActivity.class);
spec = tabHost.newTabSpec("tab2").setIndicator(tabView)
.setContent(intent);
tabHost.addTab(spec);
TabWidget tabWidget = (TabWidget) findViewById(android.R.id.tabs);
final int tabChildrenCount = tabWidget.getChildCount();
View currentView;
for (int i = 0; i < tabChildrenCount; i++) {
currentView = tabWidget.getChildAt(0);
LinearLayout.LayoutParams currentLayout =
(LinearLayout.LayoutParams) currentView.getLayoutParams();
currentLayout.setMargins(0, 0, 16, 0);
}
tabWidget.requestLayout();
tabHost.getTabWidget().setDividerDrawable(null);
}
private static View createTabView(Context context, String tabText) {
View view = LayoutInflater.from(context).inflate(R.layout.custom_tab, null, false);
TextView tv = (TextView) view.findViewById(R.id.tabTitleText);
tv.setText(tabText);
return view;
}
}
main.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:background="#2CA0E6">
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_marginBottom="20dp"
android:layout_marginTop="30dp"
android:paddingLeft="20dp"
android:paddingRight="20dp">
<TabHost
android:id="@android:id/tabhost"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_marginTop="2dp">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:paddingTop="5dp">
<TabWidget
android:id="@android:id/tabs"
android:layout_width="fill_parent"
android:layout_height="70dp" />
<FrameLayout
android:id="@android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="fill_parent" />
</LinearLayout>
</TabHost>
</LinearLayout>
custom_tab.xml
<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/tabTitleText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:clickable="true"
android:padding="5dp"
android:textSize="15sp"
android:textStyle="bold"
android:layout_gravity="center"
android:ellipsize="marquee"
android:singleLine="true"
android:textColor="@color/tab_textcolor"
android:background="@drawable/tab_selector"/>
I got the output as below image
Can anyone help, how to make it. Thanks
Well that's an image.All what you need to do is ready the images and set them to the selected tab.That's it!
Well I don't have that image, so I used below images(selected.png,not_selected.png) just to show how it works but they are not well designed ;)
P.s currentLayout.setMargins(0, 0, this_should_be_zero, 0);
and your images should have that margins(whatever the expected gap) otherwise there will be a gap between two images.
Additionally you can use selector(same png with another color) to show the selected one.
Seems you are trying to figure out a programmatic way try workaround with Paint class if you got extra time & effort,if you use shapes will be hard to figure out the exact view since it is complicated, you can see tab A view and B is not same,using an image will be the easiest
And in your custom_tab.xml set
<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/tabTitleText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:clickable="true"
android:padding="5dp"
android:textSize="15sp"
android:textStyle="bold"
android:layout_gravity="center"
android:ellipsize="marquee"
android:MaxLines="1" // you can use this instead of android:singleLine="true"
android:textColor="@color/black"
android:background="@drawable/tab_button_effect"/> // here set selector
tab_button_effect.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/not_selected" android:state_selected="true"></item>
<item android:drawable="@drawable/selected"></item>
</selector>
try this in your xml.and use it as a tab.
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<corners
android:bottomLeftRadius="30dp"
android:bottomRightRadius="30dp"
android:radius="60dp"
android:topLeftRadius="30dp"
android:topRightRadius="30dp" />
<solid android:color="#CFCFCF" />
<padding
android:bottom="0dp"
android:left="0dp"
android:right="0dp"
android:top="0dp" />
<size
android:height="60dp"
android:width="270dp" />
</shape>
you can make oval tabs by using drawables in tabhost. please find the code snippets below
tabHost.newTabSpec("tab1").setIndicator(getCustomLayout()).setContent(intent);
private static View getCustomLayout(Context context, String tabText) { View view = LayoutInflater.from(context).inflate(R.drawable.custom_tab,null, false); return view; }
custom-tab.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<stroke
android:width="1dp"
android:color="#000000"/>
<corners android:radius="2dp"/>
</shape>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With