To achieve the effect you want, we will do the following. First we are going to use an element known as toolbar to give better support to this element. We will follow the following logic
1) We change the style of the application to one that does not use an action bar by default.
styles.xml
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
</style>
<style name="AppTheme.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />
<style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />
</resources>
2) We implement the toolbar element within our layout (note that it changes position where you place the toolbar element)
main_acitivity_layout.xml
<?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"
android:orientation="vertical"
tools:context="com.SoCu.CirDocu.MainActivity">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="@style/ThemeOverlay.AppCompat.Dark"
android:background="@color/colorPrimary"
app:titleTextColor="@android:color/white"
/>
<com.SoCu.Docu_Adif.custom_views.HorizontalScrollMenuView
android:id="@+id/horizontal_menu"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:backgroundMenuColor="#0099cc"
app:backgroundNotifications="@color/colorAccent"
app:icon_height="30dp"
app:icon_width="30dp"
app:item_backgroundColor="@color/colorPrimary"
app:item_colorSelected="#ffffff"
app:item_textColor="#ffffff" />
<android.support.v4.view.ViewPager
android:id="@+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
3) We tell you that we will use this toolbar as actionBar and proceed to configure it with the desired elements (I pass the class with the imports and the onCreate method, the rest you leave the same)
MainActivity.java
package com.SoCu.CirDocu;
import android.graphics.Color;
import android.graphics.Typeface;
import android.os.Bundle;
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.support.v7.widget.Toolbar;
import android.view.Gravity;
import android.view.Menu;
import android.webkit.WebView;
import android.widget.TextView;
import android.widget.Toast;
import com.SoCu.Docu_Adif.custom_views.HorizontalScrollMenuView;
import com.SoCu.Docu_Adif.extras.MenuItem;
public class MainActivity extends AppCompatActivity {
private ViewPager viewPager;
HorizontalScrollMenuView horizontal_menu;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
getSupportActionBar().setTitle("Titulo Aqui");
getSupportActionBar().setIcon(R.mipmap.ic_launcher);
horizontal_menu = (HorizontalScrollMenuView) findViewById(R.id.horizontal_menu);
viewPager = (ViewPager) findViewById(R.id.pager);
horizontal_menu.addItem("Telefonos", R.drawable.menu1_icon,true);
horizontal_menu.addItem("Navegador GPS", R.drawable.menu2_icon );
horizontal_menu.addItem("Menu 2", R.drawable.menu3_icon );
horizontal_menu.addItem("Menu 3", R.drawable.menu4_icon );
horizontal_menu.addItem("Menu 4", R.drawable.menu5_icon );
horizontal_menu.addItem("Menu 5", R.drawable.menu6_icon );
horizontal_menu.addItem("Menu 6", R.drawable.menu7_icon );
horizontal_menu.addItem("Menu 7", R.drawable.gps3_icon);
horizontal_menu.showItems();
PagerAdapter pagerAdapter = new PagerAdapter(getSupportFragmentManager());
viewPager.setAdapter(pagerAdapter);
viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public void onPageSelected(int position) {
horizontal_menu.setItemSelected(position);
}
@Override
public void onPageScrollStateChanged(int state) {
}
});
horizontal_menu.setOnHSMenuClickListener(new HorizontalScrollMenuView.OnHSMenuClickListener() {
@Override
public void onHSMClick(MenuItem menuItem, int position) {
viewPager.setCurrentItem(position);
}
});
}
I hope this answer is helpful.