Android: how to create tabs similar to those displayed on the Android user interface page

Question

So, android is doing everything possible to create this good interface for every user. But I see nowhere where it shows code examples how to create these elements.

Tab UI recommendations can be found here. http://developer.android.com/design/building-blocks/tabs.html

Does anyone know how to create tabs, like this one?

Any help would be appreciated, thanks.

DECISION OPEN
So, here is what I ended up doing, probably spending about 10 hours trying to make some good tabs.

At first I gave up the whole idea of ​​using tabs in Android. For some reason, the host tab widget is supposedly outdated for the action bar, but the action bar only works with android 3 on.

Finally, I realized that if linear layout is used and as the background for the linear layout, I put the image that I wanted to use (using 9 patch images). Then create another linearlayout and textview file to place the text on top of the linearlayout vertex. Then make your linear layout clickable. Then, when you move to a more advanced level, you can make the linear layout as an xml selector in the background, and you're good to go. If you do not get everything here, this is my code.

Linearlayout

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="50dp" android:background="@color/main_screen_bg_color" android:orientation="horizontal" android:padding="2dp" > <LinearLayout android:layout_width="fill_parent" android:layout_height="fill_parent" android:layout_weight="1" android:background="@drawable/selector_not_current" android:clickable="true" android:onClick="onClickSub" android:orientation="horizontal" > <LinearLayout android:layout_width="fill_parent" android:layout_height="fill_parent" android:layout_weight="1" android:gravity="center" android:orientation="vertical" > <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:singleLine="true" android:text="Example 1" android:textColor="@color/black" android:textSize="18sp" android:textStyle="bold" /> </LinearLayout> </LinearLayout> <LinearLayout android:layout_width="fill_parent" android:layout_height="fill_parent" android:layout_weight="1" android:background="@drawable/selector_current" android:clickable="true" android:onClick="onClickFoodDetails" android:orientation="horizontal" > <LinearLayout android:layout_width="fill_parent" android:layout_height="fill_parent" android:layout_weight="1" android:gravity="center" android:orientation="vertical" > <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:singleLine="true" android:text="Example 2" android:textColor="@color/black" android:textSize="18sp" android:textStyle="bold" /> </LinearLayout> </LinearLayout> </LinearLayout> 

Parameter selector

 <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_pressed="true" android:drawable="@drawable/selected_pressed_tab" /> <!-- pressed --> <item android:state_focused="true" android:drawable="@drawable/selected_pressed_tab" /> <!-- focused --> <item android:drawable="@drawable/selected_tab" /> <!-- default --> 

Hope this helps everyone. Android bookmarks were too complicated, and it was unpleasant to work with the fact that it was easier to just make your own from scratch. Good luck

Answer 1

do something like that.

This is the full working code. enjoy

somewhere in oncreate an activity method extending tabactivity

  tabHost = getTabHost(); Intent intent; intent = new Intent().setClass(this, FirstActvity.class); setupTab("NearBy", intent, R.drawable.firsttabdrawable); intent = new Intent().setClass(this, SecondActivity.class); setupTab("History", intent, R.drawable.secondtabdrawable); intent = new Intent().setClass(this, ThirdActivity.class); setupTab("Setting", intent, R.drawable.thirdtabdrawable); 

define setupTab methods as

  private void setupTab(String tag, Intent intent, int selectorId) { View tabView = LayoutInflater.from(tabHost.getContext()).inflate(R.layout.view, null); tabView.setBackgroundResource(selectorId); TabSpec setContent = tabHost.newTabSpec(tag).setIndicator(tabView).setContent(intent); tabHost.addTab(setContent); } 

view.xml how

 <?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" > </LinearLayout> 

and firsttabdrawable.xml in a folder with the ability to transfer as

 <?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/selectedfirsttabimage" android:state_selected="true" /> <!-- When not selected, use white--> <item android:drawable="@drawable/notselectedfirsttabimage" /> </selector> 

define secondtabdrawable.xml and thirddrawable.xml in the same way

Answer 2

The tabs you need are part of the ActionBar. In particular, they are displayed when the ActionBar is in Tab Tab mode.

http://developer.android.com/guide/topics/ui/actionbar.html (see "Adding navigation tabs")

You might want to use www.ActionbarSherlock.com, which is a library that will give you an ActionBar for almost all versions of Android. It works the same as the official one and includes tabs.

Don't use TabActivity anymore, it's old and outdated. ActionBar is the future.