(Android practice) customize the tab style of android-reprint

In the android project, you need to replace the default tabHost style:

(Implementation principle: reconstruct the Indicator of the Tab)

In order to achieve this effect, it took some time to take a note and give it to friends in need.

Step 1: Create an xml layout file named main. xml

<? Xml version = "1.0" encoding = "UTF-8"?>
<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 = "@ color/white">
<LinearLayout android: orientation = "vertical"
Android: layout_width = "fill_parent" android: layout_height = "fill_parent">
<TabWidget android: id = "@ android: id/tabs"
Android: layout_width = "fill_parent" android: layout_height = "wrap_content"
Android: gravity = "center_horizontal | center_vertical"/>
<FrameLayout android: id = "@ android: id/tabcontent"
Android: layout_width = "fill_parent" android: layout_height = "fill_parent">
</FrameLayout>
</LinearLayout>
</TabHost>

Step 2: add our tab in Activity

The Code is as follows:

@ Override
Public void onCreate (Bundle savedInstanceState ){
Super. onCreate (savedInstanceState );
SetContentView (R. layout. main );
MTabHost = getTabHost ();

Intent intent1 = new Intent (this, OfficialActivity. class );
CreateTab ("public chat room", intent1 );

Intent intent2 = new Intent (this, NearByActivity. class );
CreateTab ("peripheral", intent2 );

Intent intent3 = new Intent (this, HistoryActivity. class );
CreateTab ("History", intent3 );

MTabHost. setCurrentTab (1 );
}

Private
Void createTab (String text, Intent intent ){
MTabHost. addTab (mTabHost. newTabSpec (text). setIndicator (createTabView (text). setContent (intent ));
}

Private View createTabView (String text ){
View view = LayoutInflater. from (this). inflate (R. layout. tab_indicator, null );
TextView TV = (TextView) view. findViewById (R. id. TV _tab );
TV. setText (text );
Return view;
}

Step 3: In the createTabView method, we load the layout file tab_indicator.xml. It is very easy to change the layout, that is, place a layout with a background, and place a textView in the layout to display the tab title, the content of the layout file is as follows:

<? Xml version = "1.0" encoding = "UTF-8"?>
<LinearLayout xmlns: android = "http://schemas.android.com/apk/res/android"
Android: layout_height = "fill_parent" android: layout_width = "fill_parent"
Android: orientation = "vertical" android: gravity = "center"
Android: theme = "@ android: style/Theme. NoTitleBar" android: background = "@ drawable/chat_tab_selector">
<TextView android: id = "@ + id/TV _tab" android: layout_width = "wrap_content" android: layout_height = "wrap_content"
Android: text = "tab1" android: textColor = "@ color/white"/>
</LinearLayout>

Step 4: In the preceding layout file, we define the layout background as chat_tab_selector. Here we also need to create chat_tab_selector.xml in the drawable folder. The content is very simple, that is, to perform background switching when the layout is pressed, the content is as follows:

<? Xml version = "1.0" encoding = "UTF-8"?>
<Selector xmlns: android = "http://schemas.android.com/apk/res/android">
<Item
Android: state_focused = "true"
Android: drawable = "@ drawable/topbar_bg_down"
/>
<Item
Android: state_selected = "true"
Android: drawable = "@ drawable/topbar_bg_down"
/>
<Item
Android: state_pressed = "true"
Android: drawable = "@ drawable/topbar_bg_down"
/>
<Item android: drawable = "@ drawable/topbar_background"/>
</Selector>

The two graphs are used to switch the status. The two graphs can be placed under drawable.

Now, the step for customizing the tab is complete. If you want to make a more complex style, you can expand it on this basis.