Chrome Custom Tabs Android Example

Chrome Custom Tabs Android Example
آموزش ایجاد کاستوم تب اندروید
Define custom color for chrome tabs(toolbar) and transition for chrome to meet your UI guideline when launching chrome browser from your app.
You may have situation where you need to launch webpage(ex: help page) from your app but launching browser having different aesthetic may degrade your UI(look and feel). So the better approach is to customize your browser according to your guideline. In this case Chrome Custom Tabs comes into picture.
Chrome tabs customization using CustomTabsIntent will let you do many thing like Defining overflow menu, action button, animation etc. In this example you likely to find, how to apply custom animation and change toolbar/actionbar color of chrome
Chrome Custom Tabs Android Example
دانلود سورس آموزش ایجاد کاستوم تب اندروید
Chrome Custom Tabs Implementation
Let’s see the files and methods require to build our Chrome Custom Tabs.
Chrome Custom Tabs Android Example
Adding Dependencies
Open your gradle.build(Module:app)
file and add below highlighted code under dependencies.
dependencies {
compile fileTree(dir: 'libs', include: ['*.jar'])
testCompile 'junit:junit:4.12'
compile 'com.android.support:appcompat-v7:23.4.0'
compile 'com.android.support:customtabs:23.4.0'
}
Note: You may need to replace the version of customtabs dependency as your appcompat version, in my case version is 23.4.0.
Defining Custom Transition for chrome
The below files should be placed under res→anim resource directory. If you don’t find any anim folder inside res directory, then add it by Right clicking on res directory(Right click on res→New→Android Resource Directory).
Entry Transition
The below two file defines entry transition for Activity and chrome browser(Activity slides from on-screen to off-screen and at the same time chrome browser slides from off-screen to on-screen).
left_to_right_start.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate android:fromXDelta="100%"
android:fromYDelta="0%"
android:toXDelta="0%"
android:toYDelta="0%"
android:duration="500"/>
</set>
right_to_left_start.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate
android:duration="500"
android:fromXDelta="0%"
android:fromYDelta="0%"
android:toXDelta="-100%"
android:toYDelta="0%" />
</set>
Exit Transition
The below two file defines exit transition for Activity and chrome browser(Activity slides from off-screen to on-screen and at the same time browser slides from on-screen to off-screen).
left_to_right_end.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate android:fromXDelta="0%"
android:fromYDelta="0%"
android:toXDelta="100%"
android:toYDelta="0%"
android:duration="500"/>
</set>
right_to_left_end.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate
android:duration="500"
android:fromXDelta="-100%"
android:fromYDelta="0%"
android:toXDelta="0%"
android:toYDelta="0%" />
</set>
Creating Activity and it’s layout file
Let’s create activity MainActivity.java
and i’ts layout file activity_main.xml
.
MainActivity.java
Code on onCreate()
method will do following jobs.
- Create CustomTabsIntent and set start and exit animation from above xml files using
CustomTabsIntent.builder()
. - Define chrome Toolbar color same as your App’s toolbar color.
Finally, on button click launch chrome with applied configuration.
File Location: App→java→Your package
package com.androidcss.chromecustomtabs;
import android.net.Uri;
import android.support.customtabs.CustomTabsIntent;
import android.support.v4.content.ContextCompat;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
public class MainActivity extends AppCompatActivity {
// website to be visited
static final String SITE_URL = "http://androidcss.com/";
// Define variables for custom tabs and its builder
CustomTabsIntent customTabsIntent;
CustomTabsIntent.Builder intentBuilder;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// Initialize intentBuilder
intentBuilder = new CustomTabsIntent.Builder();
// Set toolbar(tab) color of your chrome browser
intentBuilder.setToolbarColor(ContextCompat.getColor(this, R.color.colorPrimary));
// Define entry and exit animation
intentBuilder.setExitAnimations(this, R.anim.right_to_left_end, R.anim.left_to_right_end);
intentBuilder.setStartAnimations(this, R.anim.left_to_right_start, R.anim.right_to_left_start);
intentBuilder.setSecondaryToolbarColor(ContextCompat.getColor(this, R.color.colorPrimary));
// build it by setting up all
customTabsIntent = intentBuilder.build();
}
// triggers when button clicked
public void ButtonClicked(View arg0) {
// go to website defined above
customTabsIntent.launchUrl(this, Uri.parse(SITE_URL));
}
}
activity_main.xml
Layout file for MainActivity.java
.
File Location: App→res→values
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Go To androidcss.com"
android:id="@+id/button"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="41dp"
android:onClick="ButtonClicked"/>
</RelativeLayout>