Search code examples
javaandroidandroid-actionbarandroid-viewpagerandroid-actionbar-tabs

Custom position of Actionbar Tabs


Is there way how to set custom position of Actionbar Tabs? Or set the layout like in the picture?

enter image description here


Solution

  • I would not use ActionBar Tabs. They are deprecated in Lollipop and on.

    This class was deprecated in API level 21.

    You should be using TabLayout inside of the design support library.

    compile "com.android.support:design:'24.0.0'"
    

    TabLayout gives you the freedom to put it anywhere inside of the layout.

    This is a pic of the example below:

    enter image description here

    Here is an example

    Layout

    <?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout 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">
    
        <!--Header Layout-->
        <LinearLayout
            android:id="@+id/headerLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="#7DC476"
            android:elevation="8dp"
            android:orientation="vertical">
    
            <RelativeLayout
                android:id="@+id/someView1"
                android:layout_width="match_parent"
                android:layout_height="88dp">
    
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerInParent="true"
                    android:text="Some View 1" />
            </RelativeLayout>
    
            <android.support.design.widget.TabLayout
                android:id="@+id/tabLayout"
                android:layout_width="match_parent"
                android:layout_height="48dp"
                app:tabIndicatorColor="@android:color/white"
                app:tabSelectedTextColor="@android:color/white"
                app:tabTextColor="#CCFFFFFF" />
        </LinearLayout>
    
    
        <!-- For a single list -->
        <android.support.v7.widget.RecyclerView
            android:id="@+id/recyclerVIew"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_below="@+id/headerLayout"
            android:clipToPadding="false"
            android:paddingBottom="8dp"
            android:paddingTop="12dp"
            app:layoutManager="android.support.v7.widget.LinearLayoutManager" />
    
        <!-- For a pager list -->
        <!--<android.support.v4.view.ViewPager-->
        <!--android:id="@+id/pager"-->
        <!--android:layout_width="match_parent"-->
        <!--android:layout_height="match_parent"-->
        <!--app:layout_behavior="@string/appbar_scrolling_view_behavior" />-->
    
    
        <RelativeLayout
            android:id="@+id/someView2"
            android:layout_width="match_parent"
            android:layout_height="180dp"
            android:layout_alignParentBottom="true"
            android:background="#7DC476"
            android:elevation="8dp">
    
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerInParent="true"
                android:text="Some View 2" />
        </RelativeLayout>
    
    </RelativeLayout>
    

    Activity

    import android.os.Bundle;
    import android.support.design.widget.TabLayout;
    import android.support.v7.app.AppCompatActivity;
    import android.support.v7.widget.RecyclerView;
    import android.view.LayoutInflater;
    import android.view.View;
    import android.view.ViewGroup;
    import android.widget.TextView;
    import android.widget.Toast;
    
    import java.util.ArrayList;
    import java.util.List;
    
    public class TabLayoutExample extends AppCompatActivity {
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.tab_layout_example);
            hideSystemUI();
            initTabs();
            initRecycler();
        }
    
        private void initTabs() {
            TabLayout mTabLayout = (TabLayout) findViewById(R.id.tabLayout);
            mTabLayout.addTab(mTabLayout.newTab().setText("Tab 1"));
            mTabLayout.addTab(mTabLayout.newTab().setText("Tab 2"));
            mTabLayout.addTab(mTabLayout.newTab().setText("Tab 3"));
            mTabLayout.addTab(mTabLayout.newTab().setText("Tab 4"));
            mTabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
                @Override
                public void onTabSelected(TabLayout.Tab tab) {
                    Toast.makeText(TabLayoutExample.this, "Tab " + tab.getPosition() + " Selected", Toast.LENGTH_SHORT).show();
                }
    
                @Override
                public void onTabUnselected(TabLayout.Tab tab) {
    
                }
    
                @Override
                public void onTabReselected(TabLayout.Tab tab) {
    
                }
            });
        }
    
        private void initRecycler() {
            List<String> listData = new ArrayList<>();
            ExampleAdapter exampleAdapter = new ExampleAdapter(listData);
            RecyclerView mRecyclerVIew = (RecyclerView) findViewById(R.id.recyclerVIew);
            mRecyclerVIew.setAdapter(exampleAdapter);
            for (int i = 0; i < 30; i++) {
                listData.add("Android " + i);
            }
            exampleAdapter.notifyDataSetChanged();
        }
    
        class ExampleAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder> {
            private List<String> list;
    
            public ExampleAdapter(List<String> list) {
                this.list = list;
            }
    
            @Override
            public int getItemCount() {
                return list.size();
            }
    
            @Override
            public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
                return new ExampleViewHolder(LayoutInflater.from(parent.getContext()).inflate(android.R.layout.simple_list_item_1, parent, false));
            }
    
            @Override
            public void onBindViewHolder(RecyclerView.ViewHolder viewHolder, int position) {
                ExampleViewHolder exampleViewHolder = (ExampleViewHolder) viewHolder;
                exampleViewHolder.bindData();
            }
    
            public class ExampleViewHolder extends RecyclerView.ViewHolder {
    
                protected TextView mText;
    
                public ExampleViewHolder(View view) {
                    super(view);
                    this.mText = (TextView) view.findViewById(android.R.id.text1);
                }
    
                public void bindData() {
                    String dataItem = list.get(getAdapterPosition());
                    mText.setText(dataItem);
                }
            }
        }
    
        // Ignore, just for removing systemUI bars(Full Screen)
        private void hideSystemUI() {
            getWindow().getDecorView().setSystemUiVisibility(
                    View.SYSTEM_UI_FLAG_LAYOUT_STABLE
                            | View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION
                            | View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
                            | View.SYSTEM_UI_FLAG_HIDE_NAVIGATION // hide nav bar
                            | View.SYSTEM_UI_FLAG_FULLSCREEN // hide status bar
                            | View.SYSTEM_UI_FLAG_IMMERSIVE);
        }
    }