Month: June 2013

1 Comment Posted on Android

Creating a simple Vertical ViewPager in Android

Android ViewPager is a Layout Manger that allows the user to flip left and right through pages of data. But sometimes we may need to scroll vertically instead of horizontally. Here’s how I created a simple Vertical ViewPager using a ScrollView.

In the layout xml I added four TextViews into the ScrollView. Notice that the android:layout_height is set to 150dip for all childs. So only one child can be visible at once.

<ScrollView
android:id="@+id/scrollView1"
android:layout_width="175dip"
android:layout_height="150dip"
android:layout_gravity="center_vertical"
android:scrollbars="none" >

<LinearLayout
android:layout_width="match_parent"
android:layout_height="150dip"
android:layout_gravity="center_horizontal"
android:orientation="vertical" >

<TextView
android:layout_width="match_parent"
android:layout_height="150dip"
android:layout_gravity="center_horizontal"
android:background="@drawable/ic_launcher"
android:text="Item 1" />

<TextView
android:layout_width="match_parent"
android:layout_height="150dip"
android:layout_gravity="center_horizontal"
android:background="@drawable/ic_launcher"
android:text="Item 2" />

<TextView
android:layout_width="match_parent"
android:layout_height="150dip"
android:layout_gravity="center_horizontal"
android:background="@drawable/ic_launcher"
android:text="Item 3" />

<TextView
android:layout_width="match_parent"
android:layout_height="150dip"
android:layout_gravity="center_horizontal"
android:background="@drawable/ic_launcher"
android:text="Item 4" />
</LinearLayout>
</ScrollView>

In the Activity, I listen for the onFling event and scroll the ScrollView to the correct place using the smoothScrollTo method.

		final int density = (int)getResources().getDisplayMetrics().density;

		mGestureDetector = new GestureDetector(getApplicationContext(),new GestureDetector.SimpleOnGestureListener() {
			int selectedPage=0;
			@Override
			public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) {
				if(velocityY<0){
					selectedPage = Math.min(3, selectedPage+1);
				}else{
					selectedPage = Math.max(0, selectedPage-1);
				}
				mScrollView.smoothScrollTo(0, 150 * density * selectedPage);
				return super.onFling(e1, e2, velocityX, velocityY);
			}

		});

		mScrollView = (ScrollView) findViewById(R.id.scrollView1);
		mScrollView.setOnTouchListener(new OnTouchListener() {
			@Override
			public boolean onTouch(View v, MotionEvent event) {
				mGestureDetector.onTouchEvent(event);
				return true;
			}

		});

The output should look like this,
device-2013-06-26-113321

 

Full Android project can be found here http://www.sendspace.com/file/hz5jyn

17 Comments Posted on Android

Play HTML5 fullscreen Video on Android WebView

HTML5 introduced the video element for the purpose of playing videos or movies.  HTML5 video is intended to become the new standard way to show video on the web without plugins.  Almost all desktop and mobile browsers support the video element. Visit http://caniuse.com/video to check the HTML5 video support on different browsers.

In this post I’m going to explain how to play a HTML5 video in a Android WebView.

This is the test HTML page which has a video element.

<!DOCTYPE html>
<html>
<body>
<video id="video" width="320" height="240" controls>
 <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
</video>
</body>
</html>

Save this file in the assets folder. In the Android activity load the url into the WebView.

WebView mWebView = (WebView) findViewById(R.id.webView1);
mWebView.setWebChromeClient(new WebChromeClient());
mWebView.loadUrl("file:///android_asset/test.html");

You should get the Internet permission in the manifest file.

<uses-permission android:name="android.permission.INTERNET"/>

Run the application and you can view the HTML5 video in the WebView.

html5 video

 

The video plays correctly. But the if we click the full screen button it won’t work. We should handle it manually. First change the layout like this.

<FrameLayout
 android:id="@+id/main_content"
 android:layout_width="match_parent"
 android:layout_height="300dip" >

<WebView
 android:id="@+id/webView1"
 android:layout_width="fill_parent"
 android:layout_height="fill_parent" />
 </FrameLayout>

 <FrameLayout
 android:id="@+id/target_view"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:visibility="gone">
 </FrameLayout>

Then extend the WebChromeClient class and we should override the onShowCustomView and onHideCustomView methods.

	class MyChromeClient extends WebChromeClient {

		@Override
		public void onShowCustomView(View view, CustomViewCallback callback) {
		    mCustomViewCallback = callback;
			mTargetView.addView(view);
			mCustomView = view;
			mContentView.setVisibility(View.GONE);
			mTargetView.setVisibility(View.VISIBLE);
			mTargetView.bringToFront();
		}

		@Override
		public void onHideCustomView() {
			if (mCustomView == null)
				return;

			mCustomView.setVisibility(View.GONE);
			mTargetView.removeView(mCustomView);
			mCustomView = null;
			mTargetView.setVisibility(View.GONE);
			mCustomViewCallback.onCustomViewHidden();
			mContentView.setVisibility(View.VISIBLE);
		}
	}

In the onCreate method, set the custom WebChromeClient to the WebView.

	private FrameLayout mTargetView;
	private FrameLayout mContentView;
	private CustomViewCallback mCustomViewCallback;
	private View mCustomView;
	private MyChromeClient mClient;

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

		WebView mWebView = (WebView) findViewById(R.id.webView1);
		mClient = new MyChromeClient();
		mWebView.setWebChromeClient(mClient);
		mWebView.loadUrl("file:///android_asset/test.html");

		mContentView = (FrameLayout) findViewById(R.id.main_content);
		mTargetView = (FrameLayout)findViewById(R.id.target_view);
	}

Finally override the onBackPressed method of the Activity and exit full screen when back is pressed.

	@Override
	public void onBackPressed(){
		if (mCustomView != null){
			mClient.onHideCustomView();
		}else{
			finish();
		}
	}

Now when we run the application, we can go full screen using the button.

Complete Android project can be found here http://www.sendspace.com/file/u1ty03