Tuesday, 17 December 2013

How to use Tabs in Android (Updated with androidx package)

Tabs are some of those widgets which are not used often in an application. Tabs help in forming nice and separate departments for each view in the app.

The below image shows an example of Tabs with ImageView, TextView and  EditText.


-----------------tabs_activity.xml-------------------------
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#4CAF50">

<TabHost
android:id="@+id/ta_tab_hostTH"
android:layout_width="fill_parent"
android:layout_height="fill_parent">

<TabWidget android:id="@android:id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#43A047"/>

<FrameLayout android:id="@android:id/tabcontent"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingTop="100dp">

<ImageView
android:id="@+id/ta_tabIV"
android:src="@drawable/i1"
android:layout_width="match_parent"
android:layout_height="match_parent"/>

<TextView android:id="@+id/ta_tabTV"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:textSize="25sp"
android:textColor="#ffffff"
android:text="Love or hatred both comes back when given!"/>

<EditText android:id="@+id/ta_tabET"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:textSize="35sp"
android:textColor="#ffffff"/>

</FrameLayout>

</TabHost>
</LinearLayout>
--------------------------------------------------------------

------------------------The Java file--------------------------
package com.app.yourappname;

import android.os.Bundle;
import android.widget.TabHost;

import androidx.appcompat.app.AppCompatActivity;

public class TabsActivity extends AppCompatActivity {

@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.tabs_activity);

TabHost tabs = findViewById(R.id.ta_tab_hostTH);
tabs.setup();

TabHost.TabSpec spec = tabs.newTabSpec("1st tab");
spec.setContent(R.id.ta_tabIV);
spec.setIndicator("image view");
tabs.addTab(spec);

spec = tabs.newTabSpec("2nd tab");
spec.setIndicator("text view");
spec.setContent(R.id.ta_tabTV);
tabs.addTab(spec);

spec = tabs.newTabSpec("3rd tab");
spec.setIndicator("edit text");
spec.setContent(R.id.ta_tabET);
tabs.addTab(spec);

tabs.setCurrentTab(2);
}
}
---------------------------------------------------------------

------------------------- Declare the name of the Activity in Manifest file ---------------

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.app.yourappname">

<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:roundIcon="@mipmap/ic_launcher_round"
android:supportsRtl="true"
android:theme="@style/AppTheme">
<activity android:name=".TabsActivity">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>

</manifest>

-----------------------------------------------------------------



No comments:

Post a Comment