Develop Reference

How do I change the text size and color within tabs when using SlidingTabLayout in Android?

So the effect will be each individual tab will be a little larger in addition to the text color change. I've tried using the setCustomTabView() but it only applies to the first tab and the rest of my tabs are unrendered.

So here is an example using setCustomTabView():
In your layout you have the ViewPager and the SlidingTabLayout :
<com.yourProject.SlidingTabLayout <--- IMPORT latest from Google[*see link]
android:id="#+id/sliding_tabs"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<android.support.v4.view.ViewPager android:id="#+id/viewPager"
android:layout_marginTop="#dimen/text_size_medium"
android:layout_width="match_parent"
android:layout_height="match_parent">
</android.support.v4.view.ViewPager>
https://github.com/google/iosched/blob/master/android/src/main/java/com/google/samples/apps/iosched/ui/widget/SlidingTabLayout.java and also here you will find SlidingTabStrip, which is also needed.
Then in your fragment or activity, set the custom view for the the sliding tab like this:
viewPager = (ViewPager) rootView.findViewById(R.id.viewPager);
mSlidingTabLayout = (SlidingTabLayout) rootView.findViewById(R.id.sliding_tabs);
mSlidingTabLayout.setSelectedIndicatorColors(getResources().getColor(R.color.accent));
mSlidingTabLayout.setCustomTabView(R.layout.sliding_tab_layout_custom, R.id.item);
mSlidingTabLayout.setDistributeEvenly(false);
mSlidingTabLayout.setViewPager(viewPager);
With your custom layout for the tab being:
../layout/sliding_tab_layout.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<TextView
android:id="#+id/item"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="#dimen/text_size_small"
android:textColor="#color/primary"
android:textSize="#dimen/text_size_medium"/>
</LinearLayout>
The example was tested, so it should work. Hope it helps :)

How to overlay Android ViewPagerIndicator on Page viewer?

I have implemented the JakeWharton Android-ViewPagerIndicator. I have shared my screens.
This is a two part question: -
1) I want to put the Page Indicator over the Page Viewer. That is the page viewer should be full screen and the Circular Page indicator must fall on this. I making a tutorial for an app and want to use this. It is similar to the Vine app tutorial. I have tried using FrameLayout and RelativeLayout but not able to achieve this.
This is my code and screen shot:
ViewPager_main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1" />
<com.viewpagerindicator.UnderlinePageIndicator
android:id="#+id/indicator"
android:layout_width="fill_parent"
android:layout_height="5dp" />
</LinearLayout>
MainActivity.java
viewPager = (ViewPager) findViewById(R.id.pager);
adapter = new ViewPagerAdapter(MainActivity.this, rank, country,
population, flag);
viewPager.setAdapter(adapter);
mIndicator = (UnderlinePageIndicator) findViewById(R.id.indicator);
mIndicator.setFades(false);
mIndicator.setViewPager(viewPager);
2) I want to disable Swipe Left that is I want to move forward only not backward. How do I do this. I tried modifying the circularpageindicator class by checking the previous page number and the current page number. If the previous page number is > that current then i don't do anything. This worked for the Indicator but the page viewer still moves.

Try this to put Indicator overlay on ViewPager
<?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">
<android.support.v4.view.ViewPager
android:layout_width="match_parent"
android:layout_height="240dp"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:id="#+id/pager"/>
<com.viewpagerindicator.UnderlinePageIndicator
android:id="#+id/indicator"
android:padding="5dip"
android:layout_alignParentBottom="true"
android:layout_marginBottom="4dp"
android:layout_height="wrap_content"
android:layout_width="fill_parent"/>
</RelativeLayout>
If you want to put Indicator on top instead bottom, change
android:layout_alignParentBottom="true"
android:layout_marginBottom="4dp"
to
android:layout_alignParentTop="true"
android:layout_marginTop="4dp"
Hope this help.

Display a listView on mapView

I want to display a listView on mapView as in below image of Google maps app.
Initially only map is visible. When user clicks on a tab I want this listView to appear on mapView.
But the problem is that using below layout does not display maps(gray screen is visible). However, listView is displayed.
Layout :
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/pickMatchesLayout"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<TabHost
android:id="#+id/tabHost"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<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" >
</TabWidget>
<FrameLayout
android:id="#android:id/tabcontent"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<RelativeLayout
android:id="#+id/map_layout"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<fragment
android:id="#+id/map"
android:name="com.google.android.gms.maps.MapFragment"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<include layout="#layout/listView" >
</include>
</RelativeLayout>
</FrameLayout>
</LinearLayout>
</TabHost>
</RelativeLayout>
Method to set up tabs :
// Set up tabs
private void setUpTabs() {
// Get TabHost
tabHost = (TabHost) findViewById(R.id.tabHost);
tabHost.setup();
// Create tabs
TabSpec sourceOnlyState = tabHost.newTabSpec(SOURCE_ONLY_STATE);
sourceOnlyState.setContent(R.id.map);
sourceOnlyState.setIndicator("Source Only");
TabSpec allState = tabHost.newTabSpec(ALL_STATE);
allState.setContent(R.id.map);
allState.setIndicator("All");
TabSpec mapTypes = tabHost.newTabSpec(MAP_FEATURES);
mapTypes.setContent(R.id.map_layout);
mapTypes.setIndicator("Map Types");
// Add tabs in TabHost
tabHost.addTab(sourceOnlyState);
tabHost.addTab(allState);
tabHost.addTab(mapTypes);
// Set tab change listener
tabHost.setOnTabChangedListener(this);
}

OnClick of tab start new activity and do all the code related to listview in that activity and set theme for activity is
android:theme="#android:style/Theme.Holo.Dialog.NoActionBar"

Android ViewPager with LinearLayout at the button

I have an Activity, that uses a ViewPager to page through two ListFragments -- this works great.
I am attemtpting to add some type of layout at the bottom that has an EditText, a Button, and a TextView. I want this to be fixed at the bottom of the screen, not scroll with the ListFragment.
My view looks like this:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:background="#color/white">
<android.support.v4.view.ViewPager
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
But because I use this in my onCreate
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
mViewPager = new ViewPager(this);
mViewPager.setId(R.id.pager);
setContentView(mViewPager);
}
This view isn't even being read. The problem is I'm not sure how to use a ViewPager AND specify a layout, allowing me to add such a layout at the bottom.. can anyone help me out?

Looks like you setting your content view to mViewPager, which isn't using the layout.
Rather than create new ViewPager object, use the layout xml you've crated. If it's called activity_main.xml set it via setContentView(R.layout.activity_main);
Maybe something like this?
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:background="#color/white">
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true" />
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_below="#+id/pager"
android:orientation="horizontal"
>
<Button... your button here />
<TextView ... your text here />
</LinearLayout>
</RelativeLayout >

Figured it out, just use the setConentView as normal, and reference the ViewPager by id.. not sure why I had a problem with this..?
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.application);
mViewPager = (ViewPager) findViewById(R.id.pager);
mTabsAdapter = new OURSVPTabsAdapter(this, mViewPager);
...
}

Does someone know how to use PagerTitleStrip in Android

I decided to use a ViewPager in my application and everything is working fine.
I Know that I want to use a PagerTitleStrip in my ViewPager, but I've failed to find any info on how to do it...
The one and only page (sic!!) I found on this class is http://developer.android.com/reference/android/support/v4/view/PagerTitleStrip.html
So it seems I just need to add the PagerTitleStrip within my ViewPager layout, but I don't see anything new on my activity...
<android.support.v4.view.ViewPager
android:id="#+id/viewPager"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<android.support.v4.view.PagerTitleStrip
android:id="#+id/pagerTitleStrip"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom" />
</android.support.v4.view.ViewPager>
Does anyone know how to use it?
Edited:
Sorry it works when implementing the getPageTitle method in the ViewPagerAdapter... but I don't want any text displayed, just a small cursor to show the position of the current View compared to the previous and next ones...

I'm not sure what causing error in your case but this is how I use it, in your layout you should insert following code in your layout:
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center" >
<android.support.v4.view.PagerTitleStrip
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top" />
</android.support.v4.view.ViewPager>
Then you should add the following code in your PageAdapter:
#Override
public CharSequence getPageTitle (int position) {
return "Your static title";
}
That's pretty it.

I had this issue too where the PagerTitleStrip was not visible. The answers above did not help. The problem was that I followed the example on http://developer.android.com/reference/android/support/v4/view/ViewPager.html.
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
mViewPager = new ViewPager(this);
mViewPager.setId(R.id.pager);
setContentView(mViewPager);
The code above shows the view pager but not the PagerTitleStrip.
I changed the code to
protected void onCreate(Bundle savedInstanceData) {
super.onCreate(savedInstanceData);
setTitle(R.string.my_title);
setContentView(R.layout.my_pager);
viewPager = (ViewPager)findViewById(R.id.pager);
res/layout/my_pager.xml:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.view.ViewPager
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v4.view.PagerTitleStrip
android:id="#+id/pager_title_strip"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:background="#33b5e5"
android:textColor="#fff"
android:paddingTop="4dp"
android:paddingBottom="4dp" />
</android.support.v4.view.ViewPager>
I was also able to be backward compatible to API 8 by removing all the code in the ViewPager (javadoc page) example to manipulate the ActionBar and ActionBar.Tab.

PagerTitleStrip is a non-interactive signal of the current, next, and former pages of a ViewPager. It really is designed to be used as a child view of a ViewPager widget
Step 1. Create layout activity_main.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:orientation="vertical"
tools:context="com.example.androidviewpagerapp.MainActivity" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:autoLink="web"
android:text="http://android-er.blogspot.com/"
android:textStyle="bold" />
<android.support.v4.view.ViewPager
android:id="#+id/myviewpager"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v4.view.PagerTitleStrip
android:id="#+id/titlestrip"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</android.support.v4.view.ViewPager>
</LinearLayout>
Step 2. Create Activity contains ViewPager this (MainActvity.java)
public class MainActivity extends Activity {
ViewPager viewPager;
MyPagerAdapter myPagerAdapter;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
viewPager = (ViewPager)findViewById(R.id.myviewpager);
myPagerAdapter = new MyPagerAdapter();
viewPager.setAdapter(myPagerAdapter);
PagerTitleStrip pagerTitleStrip = (PagerTitleStrip)findViewById(R.id.titlestrip);
}
}
Demo : http://photo-wonder.blogspot.com/2016/09/pagertitlestrip-on-viewpager-android.html