Contoh Aplikasi Android dengan Taphost dan Web View

Kali ini saya akan mencoba untuk membuat aplikasi android menggunakan TapHost dan Web View. Penasaran? Yuk simak postingan kali ini!

Pertama tama, untuk tampilan MainActivity nya, kita pasangkan Tap Host seperti berikut!



Berikut isi di File XML nya :

<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"
    tools:context=".MainActivity" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:text="@string/hello_world" />

    <TabHost
        android:id="@android:id/tabhost"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true" >

        <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" >

                <LinearLayout
                    android:id="@+id/tab1"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent" >
                </LinearLayout>

                <LinearLayout
                    android:id="@+id/tab2"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent" >
                </LinearLayout>

                <LinearLayout
                    android:id="@+id/tab3"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent" >
                </LinearLayout>
            </FrameLayout>
        </LinearLayout>
    </TabHost>


</RelativeLayout>

Dan Berikut Java nya:

package com.example.tugasuts;

import android.os.Bundle;
import android.app.Activity;
import android.content.Intent;
import android.view.Menu;
import android.widget.TabHost;

public class MainActivity extends TabActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        Intent intent;
        TabHost tabHost = getTabHost();
        TabHost.TabSpec spec;
        
        intent = new Intent().setClass(this, HomeActivity.class);
        spec = getTabHost().newTabSpec("Home").setIndicator("Home").setContent(intent);
        tabHost.addTab(spec);
        
        intent = new Intent().setClass(this, YoutubeActivity.class);
        spec = getTabHost().newTabSpec("YouTube").setIndicator("YouTube").setContent(intent);
        tabHost.addTab(spec);
        
        intent = new Intent().setClass(this, SpotifyActivity.class);
        spec = getTabHost().newTabSpec("Spotify").setIndicator("Spotify").setContent(intent);
        tabHost.addTab(spec);
        
       }

    private TabHost getTabHost() {
// TODO Auto-generated method stub
return null;
}

@Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.activity_main, menu);
        return true;
    }
    

}

Nah, Untuk Tampilan utamanya, saya buat simple sekali, seperti ini:

Dah berikut XML nya:

<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"

    tools:context=".HomeActivity" >

    <TextView

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_centerHorizontal="true"

        android:layout_centerVertical="true"

        android:text="Aplikasi Tab Host dan Web View" />

</RelativeLayout>

Java nya:

package com.example.tugasuts;

import android.os.Bundle;

import android.app.Activity;

import android.view.Menu;

public class HomeActivity extends Activity {

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_home);

}

@Override

public boolean onCreateOptionsMenu(Menu menu) {

// Inflate the menu; this adds items to the action bar if it is present.

getMenuInflater().inflate(R.menu.activity_home, menu);

return true;

}

}

Naaah untuk tampilan Youtube, desaign nya juga sederhana! kaya gini nih:

XML nya

<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"

    tools:context=".YoutubeActivity" >

    <TextView

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_centerHorizontal="true"

        android:layout_centerVertical="true"

        android:text="@string/hello_world" />

    <WebView

        android:id="@+id/webView1"

        android:layout_width="match_parent"

        android:layout_height="match_parent"

        android:layout_alignParentLeft="true"

        android:layout_alignParentTop="true" />

</RelativeLayout>

Java:

package com.example.tugasuts;

import android.os.Bundle;

import android.annotation.SuppressLint;

import android.app.Activity;

import android.webkit.WebView;

import android.webkit.WebViewClient;

import android.view.Menu;

public class YoutubeActivity extends Activity {

@SuppressLint("SetJavaScriptEnabled") private void tampilweb(String url){

WebView webviewku = (WebView) findViewById(R.id.webView1);

webviewku.loadUrl(url);

webviewku.getSettings().setJavaScriptEnabled(true);

webviewku.setWebViewClient(new WebViewClient());

}

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_youtube);

tampilweb("https://youtube.com");

}

@Override

public boolean onCreateOptionsMenu(Menu menu) {

// Inflate the menu; this adds items to the action bar if it is present.

getMenuInflater().inflate(R.menu.activity_youtube, menu);

return true;

}

}

Terakhir, untuk tampilan yang Sporify! Nih:

Jangan lupa, XML nya:

<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"

    tools:context=".SpotifyActivity" >

  

    <WebView

        android:id="@+id/webView1"

        android:layout_width="match_parent"

        android:layout_height="match_parent"

        android:layout_alignParentLeft="true"

        android:layout_alignParentTop="true" />

</RelativeLayout>

Dan Java pastinya!

package com.example.tugasuts;

import android.os.Bundle;

import android.annotation.SuppressLint;

import android.app.Activity;

import android.webkit.WebView;

import android.webkit.WebViewClient;

import android.view.Menu;

@SuppressLint("SetJavaScriptEnabled") public class SpotifyActivity extends Activity {

private void tampilweb(String url){

WebView webviewku = (WebView) findViewById(R.id.webView1);

webviewku.loadUrl(url);

webviewku.getSettings().setJavaScriptEnabled(true);

webviewku.setWebViewClient(new WebViewClient());

}

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_spotify);

tampilweb("https://spotify.com");

}

@Override

public boolean onCreateOptionsMenu(Menu menu) {

// Inflate the menu; this adds items to the action bar if it is present.

getMenuInflater().inflate(R.menu.activity_spotify, menu);

return true;

}

}

Oh iya, satu lagi jangan ketinggalan! tambahkan ini di file AndroidManifest,XML nya yaaa untuk menghubungkan aplikasinya ke Internet!:

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

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

Penasaran jadinya kaya apa? nih videonya!

Naaaaah, kalau sudah tinggal di running aja! Selamat Mencoba yaaaa