Unable to arrange android tabs in a proper sequence

Question

Hello all I simply want to achieve this.But I am not being able to achieve this

I did this to achieve this

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="#42474b"
            app:layout_scrollFlags="scroll|enterAlways"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light">
            <ImageView
                android:id="@+id/toolbarlogo"
                android:src="@mipmap/toolbarlogo"
                android:layout_width="wrap_content"
                android:layout_marginRight="200dp"
                android:layout_height="46dp"
                 />
        </android.support.v7.widget.Toolbar>

        <TextView
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:background="#494e51"
            android:gravity="center_vertical"
            android:paddingLeft="40dp"
            android:textSize="10dp"
            android:textColor="#fff"
            android:text="The Ongoing survey closes on Dec 31,2016 at 2:00pm GMT"
            />
        <View
            android:layout_width="match_parent"
            android:layout_height="5dp"
            android:background="#fff"/>
        <android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabGravity="fill"
            app:tabTextAppearance="@style/MineCustomTabText"
            app:tabMode="fixed" />
    </android.support.design.widget.AppBarLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:background="@drawable/innerpg_bg"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>

and this is my class file

public class MainActivity extends AppCompatActivity {

    private Toolbar toolbar;
    private TabLayout tabLayout;
    private ViewPager viewPager;
    private int[] tabIcons = {
            R.drawable.ongoing,
            R.drawable.upcoming,
            R.drawable.results
    };

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

        toolbar.setPadding(0, getStatusBarHeight(), 0, 0);

        viewPager = (ViewPager) findViewById(R.id.viewpager);
        setupViewPager(viewPager);

        tabLayout = (TabLayout) findViewById(R.id.tabs);
        tabLayout.setupWithViewPager(viewPager);
        setupTabIcons();

        for(int i=0; i < tabLayout.getTabCount(); i++) {
            View tab = ((ViewGroup) tabLayout.getChildAt(0)).getChildAt(i);
            ViewGroup.MarginLayoutParams p = (ViewGroup.MarginLayoutParams) tab.getLayoutParams();
            p.setMargins(10, 10, 50, 30);
            tab.requestLayout();
        }

    }

    private void setupTabIcons() {
        tabLayout.getTabAt(0).setIcon(tabIcons[0]);
        tabLayout.getTabAt(1).setIcon(tabIcons[1]);
        tabLayout.getTabAt(2).setIcon(tabIcons[2]);
    }


    private void setupViewPager(ViewPager viewPager) {
        ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager());
        adapter.addFrag(new Ongoing(), "Ongoing");
        adapter.addFrag(new Upcomming(), "Upcomming");
        adapter.addFrag(new Result(), "Result");
        viewPager.setAdapter(adapter);
    }



    public int getStatusBarHeight() {
        int result = 0;
        int resourceId = getResources().getIdentifier("status_bar_height", "dimen", "android");
        if (resourceId > 0) {
            result = getResources().getDimensionPixelSize(resourceId);
        }
        return result;
    }


    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        MenuInflater inflater = getMenuInflater();
        inflater.inflate(R.menu.main, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {

        switch (item.getItemId()) {
            case R.id.settings:
                return true;
        }
        return super.onOptionsItemSelected(item);
    }

    class ViewPagerAdapter extends FragmentPagerAdapter {
        private final List<Fragment> mFragmentList = new ArrayList<>();
        private final List<String> mFragmentTitleList = new ArrayList<>();

        public ViewPagerAdapter(FragmentManager manager) {
            super(manager);
        }

        @Override
        public Fragment getItem(int position) {
            return mFragmentList.get(position);
        }

        @Override
        public int getCount() {
            return mFragmentList.size();
        }

        public void addFrag(Fragment fragment, String title) {
            mFragmentList.add(fragment);
            mFragmentTitleList.add(title);
        }

        @Override
        public CharSequence getPageTitle(int position) {
            return mFragmentTitleList.get(position);
        }
    }
}

Using above code I am getting tab text below the icon(i mean in two different line).THe next issue is I have set the margin but I dont know how to set the color of margin.The final issue is I want to change the background color of active tab to yellow as shown in image.Please help me fix this issue

Answer 1

try this

private void setupTabIcons() {
    LayoutInflater inflater = LayoutInflater.from(this);

    View view1 = inflater.inflate(R.layout.custom_view, null, false);
    ((TextView) view1.findViewById(R.id.text)).setText("Tab1");
    ((ImageView) view1.findViewById(R.id.image)).setImageResource(tabIcon[0]);

    View view2 = inflater.inflate(R.layout.custom_view, null, false);
    ((TextView) view2.findViewById(R.id.text)).setText("Tab2");
    ((ImageView) view2.findViewById(R.id.image)).setImageResource(tabIcon[0]);

    View view3 = inflater.inflate(R.layout.custom_view, null, false);
    ((TextView) view3.findViewById(R.id.text)).setText("Tab3");
    ((ImageView) view3.findViewById(R.id.image)).setImageResource(tabIcon[0]);


    tabLayout.getTabAt(0).setCustomView(view1);
    tabLayout.getTabAt(1).setCustomView(view2);
    tabLayout.getTabAt(2).setCustomView(view3);

your custom view will look like

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal" 
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <TextView
        android:id="@+id/text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

</LinearLayout>

Answer 2

1. You can Use android:drawableLeft to display drawable on left of textview properly.
2. For Different backgroundColor for Different state You can use android:background for different color state like this