Ticker

6/recent/ticker-posts

How To Change The Background Color of Selected Tab In Android Studio


  • First, open Android Studio and create a new project. Call your new application TabActivity.

  • Check Phone and Tablet checkbox and select Minimum SDK from the dropdown, then click on Next.

  • On the Add an activity to Mobile screen select Blank Activity and click Next.

  • In the next screen, leave the default activity name of MainActivity and click Finish.

  • Now open activity_main.xml file and paste the following code :
<?xml version="1.0" encoding="utf-8"?> <LinearLayout 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:layout_width="match_parent" android:layout_height="match_parent" tools:context="systemheartbeat.tabactivity.MainActivity"> <TabHost android:id="@+id/tabHost" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_alignParentTop="true" android:background="#444444" android:layout_centerHorizontal="true"> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <TabWidget android:id="@android:id/tabs" android:layout_width="match_parent" android:layout_height="wrap_content" /> <FrameLayout android:id="@android:id/tabcontent" android:layout_width="match_parent" android:layout_height="match_parent"> <LinearLayout android:id="@+id/tab1" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#fff" android:orientation="vertical"> <TextView android:layout_width="match_parent" android:layout_height="match_parent" android:textColor="#444" android:paddingTop="50dp" android:textAlignment="center" android:textSize="25dp" android:text="This is tab 1" /> </LinearLayout> <LinearLayout android:id="@+id/tab2" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#fff" android:orientation="vertical"> <TextView android:layout_width="match_parent" android:layout_height="match_parent" android:textColor="#444" android:paddingTop="50dp" android:textAlignment="center" android:textSize="25dp" android:text="This is tab 2" /> </LinearLayout> <LinearLayout android:id="@+id/tab3" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#fff" android:orientation="vertical"> <TextView android:layout_width="match_parent" android:layout_height="match_parent" android:textColor="#444" android:paddingTop="50dp" android:textAlignment="center" android:textSize="25dp" android:text="This is tab 3" /> </LinearLayout> <LinearLayout android:id="@+id/tab4" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#fff" android:orientation="vertical"> <TextView android:layout_width="match_parent" android:layout_height="match_parent" android:textColor="#444" android:paddingTop="50dp" android:textAlignment="center" android:textSize="25dp" android:text="This is tab 4" /> </LinearLayout> </FrameLayout> </LinearLayout> </TabHost> </LinearLayout>

  • Next, open MainActivity.java file and paste the following code :
package systemheartbeat.tabactivity;
import android.content.Intent;
import android.content.res.Resources;
import android.graphics.Color;
import android.support.design.widget.TabLayout;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.util.Log;
import android.view.Menu;
import android.view.MenuItem;
import android.view.MotionEvent;
import android.view.View;
import android.widget.TabHost;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

    TabHost tHost;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        final TabHost host = (TabHost) findViewById(R.id.tabHost);
        host.setup();

        //Tab 1
        TabHost.TabSpec spec = host.newTabSpec("Tab 1");
        spec.setContent(R.id.tab1);
        spec.setIndicator("Tab 1");
        host.addTab(spec);
        host.getTabWidget().getChildAt(host.getCurrentTab()).setBackgroundColor(Color.parseColor("#FDD030"));
 TextView tv = (TextView) host.getTabWidget().getChildAt(host.getCurrentTab()).findViewById(android.R.id.title);
 tv.setTextColor(Color.WHITE);

        //Tab 2
        spec = host.newTabSpec("Tab 2");
        spec.setContent(R.id.tab2);
        spec.setIndicator("Tab 2");
        host.addTab(spec);

        //Tab 3
        spec = host.newTabSpec("Tab 3");
        spec.setContent(R.id.tab3);
        spec.setIndicator("Tab 3");
        host.addTab(spec);

        //Tab 4
        spec = host.newTabSpec("Tab 4");
        spec.setContent(R.id.tab4);
        spec.setIndicator("Tab 4");
        host.addTab(spec);

        host.setOnTabChangedListener(new TabHost.OnTabChangeListener(){
            @Override
            public void onTabChanged(String tabId) {
  int tab = host.getCurrentTab();
  for (int i = 0; i < host.getTabWidget().getChildCount(); i++) {
      // When tab is not selected
      host.getTabWidget().getChildAt(i).setBackgroundColor(Color.parseColor("#444444"));
      TextView tv = (TextView) host.getTabWidget().getChildAt(i).findViewById(android.R.id.title);
      tv.setTextColor(Color.WHITE);
  }
  // When tab is selected
  host.getTabWidget().getChildAt(host.getCurrentTab()).setBackgroundColor(Color.parseColor("#FDD030"));
  TextView tv = (TextView) host.getTabWidget().getChildAt(tab).findViewById(android.R.id.title);
  tv.setTextColor(Color.BLACK); 
            }
        });
    }

}

  • Finally run your app and check the output : 
 



Post a Comment

0 Comments