Need help creating a custom TabHost

Question

I want to create an Activity with tabs (probably using TabHost) that looks something like this:

This layout also has some buttons, checkboxes and a gridview, but I'm mostly interested to find out how I would have my tabs look like this, because by default they look something like this:

My problem is that I have no clue how to do it, I have made drawables for some UI components before, but this is something different, I think.

Answer 1

After quite some time I have figured how to get what I wanted, by trying out a lot of different ways to make tabs an I finally ended up using a TabLayout with a ViewPager.

I have made a Proof of Concept and it looks like this:

If anyone is interested in the code, this is the layout of the main activity

<?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"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:weightSum="10">

    <View
        android:layout_width="0dp"
        android:layout_height="1dp"
        android:layout_weight="0.2"/>

    <android.support.design.widget.TabLayout
        android:id="@+id/tab_layout"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="4"
        app:tabMode="fixed"
        app:tabGravity="fill"
        app:tabPaddingStart="2dp"
        app:tabPaddingEnd="2dp"
        app:tabPaddingTop="2dp"/>

    <Button
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="5.8"/>

</LinearLayout>

<android.support.v4.view.ViewPager
    android:id="@+id/pager"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>
</LinearLayout>

The MainActivity.java:

import android.graphics.Color;
import android.net.Uri;
import android.os.Bundle;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.view.LayoutInflater;
import android.widget.RelativeLayout;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity implements FirstTabFragment.OnFragmentInteractionListener, SecondTabFragment.OnFragmentInteractionListener {

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

    TabLayout tabLayout = (TabLayout) findViewById(R.id.tab_layout);
    ViewPager viewPager = (ViewPager) findViewById(R.id.pager);

    tabLayout.setSelectedTabIndicatorColor(Color.TRANSPARENT);

    viewPager.setAdapter(new SectionPagerAdapter(getSupportFragmentManager()));
    tabLayout.setupWithViewPager(viewPager);

    TabLayout.Tab tab = tabLayout.getTabAt(0);
    RelativeLayout relativeLayout = (RelativeLayout) LayoutInflater.from(this).inflate(R.layout.tab_layout_file1, tabLayout, false);
    TextView tabTextView = (TextView) relativeLayout.findViewById(R.id.tab_title);
    tabTextView.setText(tab.getText());
    tab.setCustomView(relativeLayout);

    TabLayout.Tab tab2 = tabLayout.getTabAt(1);
    RelativeLayout relativeLayout2 = (RelativeLayout) LayoutInflater.from(this).inflate(R.layout.tab_layout_file2, tabLayout, false);
    TextView tabTextView2 = (TextView) relativeLayout2.findViewById(R.id.tab_title);
    tabTextView2.setText(tab2.getText());
    tab2.setCustomView(relativeLayout2);

    tab.select();

}

@Override
public void onFragmentInteraction(Uri uri) {

}

public class SectionPagerAdapter extends FragmentPagerAdapter {

    public SectionPagerAdapter(FragmentManager fm) {
        super(fm);
    }

    @Override
    public Fragment getItem(int position) {
        switch (position) {
            case 0:
                return new FirstTabFragment();
            case 1:
            default:
                return new SecondTabFragment();
        }
    }

    @Override
    public int getCount() {
        return 2;
    }

    @Override
    public CharSequence getPageTitle(int position) {
        switch (position) {
            case 0:
                return "First Tab";
            case 1:
            default:
                return "Second Tab";
        }
    }
}
}

TabLayout1 (TabLayout2 is the same but uses shape2)

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

<TextView
    android:id="@+id/tab_title"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:background="@drawable/shape1"
    android:textColor="@android:color/white"/>

</RelativeLayout>

The shapes are just a red and a blue rectangle and and the Fragments are default empty Fragments with the same color background as the shapes.