Scribd
Upload
57 views12 pages

Tabhost Buatlah 2 Activity Baru Untuk 2 Layout

The document describes steps to create a tabbed interface in an Android app. It involves: 1. Creating two new activities for layouts and renaming their XML files. 2. Adding a TabHost to the main activity layout and including the two layouts. 3. Configuring the TabHost in Java to set the tab indicators and contents. 4. Later extending it to four tabs by adding two more activities and layout includes. 5. Replacing the tab text with drawable icons by setting the indicators to resources.

Uploaded by

Bela Biils
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
57 views12 pages

Tabhost Buatlah 2 Activity Baru Untuk 2 Layout

The document describes steps to create a tabbed interface in an Android app. It involves: 1. Creating two new activities for layouts and renaming their XML files. 2. Adding a TabHost to the main activity layout and including the two layouts. 3. Configuring the TabHost in Java to set the tab indicators and contents. 4. Later extending it to four tabs by adding two more activities and layout includes. 5. Replacing the tab text with drawable icons by setting the indicators to resources.

Uploaded by

Bela Biils
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 12

PAB 13

TabHost
Buatlah 2 activity baru untuk 2 layout

Ubah nama xml jadi layout_satu dan layout_dua

Lalu pada layout satu (XML) (1 textview dan 1 button)

Layout Kedua (XML) (1 textview dan 1 button)

Kemudian pada mainactivity tambahkan tabhost dan ubah XMLnya

Koding :
<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="com.example.master.pab13.MainActivity">
<TabHost

android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="@+id/tabHost"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
<TabWidget
android:id="@android:id/tabs"
android:layout_width="fill_parent"
android:layout_height="wrap_content"></TabWidget>
<FrameLayout
android:id="@android:id/tabcontent"
android:layout_width="match_parent"
android:layout_height="match_parent">
<include
android:id="@+id/layout1"
layout= "@layout/layout_satu"
android:layout_width="match_parent"
android:layout_height="match_parent"></include>
<include
android:id="@+id/layout2"
layout= "@layout/layout_dua"
android:layout_width="match_parent"
android:layout_height="match_parent"></include>
</FrameLayout>
</LinearLayout>
</TabHost>
</RelativeLayout>
Mainactiviry.java
Koding :
package com.example.master.pab13;
import android.support.v7.app.ActionBarActivity;

import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.Button;
import android.widget.TabHost;
public class MainActivity extends ActionBarActivity {
//Deklarasi Variabel
TabHost tab;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
tab = (TabHost) findViewById(R.id.tabHost);
tab.setup();
TabHost.TabSpec spec1 = tab.newTabSpec("TAB 1");
spec1.setIndicator("TAB 1");
spec1.setContent(R.id.layout1);
tab.addTab(spec1);
TabHost.TabSpec spec2 = tab.newTabSpec("TAB 2");
spec1.setIndicator("TAB 2");
spec1.setContent(R.id.layout2);
tab.addTab(spec2);
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.menu_main, menu);
return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
// Handle action bar item clicks here. The action bar will
// automatically handle clicks on the Home/Up button, so long
// as you specify a parent activity in AndroidManifest.xml.
int id = item.getItemId();
//noinspection SimplifiableIfStatement
if (id == R.id.action_settings) {
return true;

}
return super.onOptionsItemSelected(item);
}
}

Tambah 2 activity untuk tabhost yang ketiga dan keempat

Lalu tambahkan koding pada XML mainactiity dan Java mainactivity


MainActivity.XML
Koding :
<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="com.example.master.pab13.MainActivity">
<TabHost
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="@+id/tabHost"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
<TabWidget
android:id="@android:id/tabs"
android:layout_width="fill_parent"
android:layout_height="wrap_content"></TabWidget>
<FrameLayout
android:id="@android:id/tabcontent"

android:layout_width="match_parent"
android:layout_height="match_parent">
<include
android:id="@+id/layout1"
layout= "@layout/layout_satu"
android:layout_width="match_parent"
android:layout_height="match_parent"></include>
<include
android:id="@+id/layout2"
layout= "@layout/layout_dua"
android:layout_width="match_parent"
android:layout_height="match_parent"></include>
<include
android:id="@+id/layout3"
layout= "@layout/activity_layout_tiga"
android:layout_width="match_parent"
android:layout_height="match_parent"></include>
<include
android:id="@+id/layout4"
layout= "@layout/activity_layout_empat"
android:layout_width="match_parent"
android:layout_height="match_parent"></include>
</FrameLayout>
</LinearLayout>
</TabHost>
</RelativeLayout>
MainActivity.Java
Koding :
package com.example.master.pab13;
import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.Button;
import android.widget.TabHost;
public class MainActivity extends ActionBarActivity {
//Deklarasi Variabel
TabHost tab;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
tab = (TabHost) findViewById(R.id.tabHost);
tab.setup();
TabHost.TabSpec spec1 = tab.newTabSpec("TAB 1");
spec1.setIndicator("TAB 1");
spec1.setContent(R.id.layout1);
tab.addTab(spec1);
TabHost.TabSpec spec2 = tab.newTabSpec("TAB 2");
spec2.setIndicator("TAB 2");
spec2.setContent(R.id.layout2);
tab.addTab(spec2);
TabHost.TabSpec spec3 = tab.newTabSpec("TAB 3");
spec3.setIndicator("TAB 3");
spec3.setContent(R.id.layout3);
tab.addTab(spec3);
TabHost.TabSpec spec4 = tab.newTabSpec("TAB 4");
spec4.setIndicator("TAB 4");
spec4.setContent(R.id.layout4);
tab.addTab(spec4);
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.menu_main, menu);
return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
// Handle action bar item clicks here. The action bar will
// automatically handle clicks on the Home/Up button, so long
// as you specify a parent activity in AndroidManifest.xml.
int id = item.getItemId();

//noinspection SimplifiableIfStatement
if (id == R.id.action_settings) {
return true;
}
return super.onOptionsItemSelected(item);
}
}

Mengganti tulisan TAB 1 dengan gambar


Copykan gambar icon ke drawable

Kemudian pada MainActivity.Java ubah koding.


Koding:
package com.example.master.pab13;
import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.Button;
import android.widget.TabHost;

public class MainActivity extends ActionBarActivity {


//Deklarasi Variabel
TabHost tab;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
tab = (TabHost) findViewById(R.id.tabHost);
tab.setup();
TabHost.TabSpec spec1 = tab.newTabSpec("TAB 1");
spec1.setIndicator("", getResources().getDrawable(R.drawable.ic_tab_android));
spec1.setContent(R.id.layout1);
tab.addTab(spec1);
TabHost.TabSpec spec2 = tab.newTabSpec("TAB 2");
spec2.setIndicator("", getResources().getDrawable(R.drawable.ic_tab_apple));
spec2.setContent(R.id.layout2);
tab.addTab(spec2);
TabHost.TabSpec spec3 = tab.newTabSpec("TAB 3");
spec3.setIndicator("", getResources().getDrawable(R.drawable.ic_tab_windows));
spec3.setContent(R.id.layout3);
tab.addTab(spec3);
TabHost.TabSpec spec4 = tab.newTabSpec("TAB 4");
spec4.setIndicator("", getResources().getDrawable(R.drawable.ic_tab_blackberry));
spec4.setContent(R.id.layout4);
tab.addTab(spec4);
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.menu_main, menu);
return true;
}
@Override

public boolean onOptionsItemSelected(MenuItem item) {


// Handle action bar item clicks here. The action bar will
// automatically handle clicks on the Home/Up button, so long
// as you specify a parent activity in AndroidManifest.xml.
int id = item.getItemId();
//noinspection SimplifiableIfStatement
if (id == R.id.action_settings) {
return true;
}
return super.onOptionsItemSelected(item);
}
}
Sebelum :

Sesudah

You might also like