Android tab images are not fitting in tabs

Question

I am working on android app having tabs.I have done with the implementation but I am facing a problem.Images are not being fit on tabs.

Here is my java code:

import android.app.TabActivity;
import android.content.Intent;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.ImageView;
import android.widget.TabHost;
import android.widget.TabHost.TabSpec;
import android.widget.TextView;

import com.tv.allies.FriendsScreen;
import com.tv.servercommunication.IServerResponse;
import com.tv.setting.SettingActivity;
import com.tv.socialgoal.R;
import com.tv.socialgoal.profile.ProfileScreen;
import com.tv.task.TaskListActivity;

@SuppressWarnings("deprecation")
public class TabViewActivity extends TabActivity implements IServerResponse{
    private static final String INBOX_SPEC = "Inbox";

    private static final String OUTBOX_SPEC = "Outbox";
    private static final String PROFILE_SPEC = "Profile";
    private static final String SETTING_SPEC = "Setting";

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

        TabHost tabHost = getTabHost();
        tabHost.addTab(tabHost
                .newTabSpec("one")
                .setIndicator("",
                        getResources().getDrawable(R.drawable.missions_btn_up))
                        .setContent(
                                new Intent(this, TaskListActivity.class)
                                .addFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP)));
        TabSpec outboxSpec = tabHost.newTabSpec(OUTBOX_SPEC);

        tabHost.addTab(tabHost
                .newTabSpec("two")
                .setIndicator("",
                        getResources().getDrawable(R.drawable.allies_btn_up))
                        .setContent(new Intent(this, FriendsScreen.class)));

        TabSpec setting = tabHost.newTabSpec(OUTBOX_SPEC);
        outboxSpec.setIndicator("",getResources().getDrawable(R.drawable.profile_btn_up));
        Intent outboxIntent = new Intent(this, ProfileScreen.class);
        outboxSpec.setContent(outboxIntent);

        // Profile Tab
        TabSpec profileSpec = tabHost.newTabSpec(PROFILE_SPEC);
        profileSpec.setIndicator("",getResources().getDrawable(R.drawable.settings_btn_up));
        Intent profileIntent = new Intent(this, SettingActivity.class);
        profileSpec.setContent(profileIntent);

        tabHost.addTab(outboxSpec); // Adding Outbox tab
        tabHost.addTab(profileSpec);
    }

    @Override
    public void serverResponse(String response, int processid) {
        // TODO Auto-generated method stub

    }

}

Here is tab xml:

<?xml version="1.0" encoding="utf-8"?>
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@android:id/tabhost"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

    <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" 
            android:background="#3399FF"/>

        <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent" />
    </LinearLayout>

</TabHost>

Here is screen short:

How all tab images could fit in each tab?

Answer 1

use proper images in tabs as per resolution

use the following link to generate tab images .[check this]:

Answer 2

Answer to your question is a tricky thing. For setting tabs background and images as according to your requirement you have to use custom xml of images which you have to set on your tabs

1) For tab background :-

a) Create an xml in your drawable folder and copy paste following

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">    
    <item android:state_selected="true" android:drawable="@drawable/tab_bg_green" />
    <item android:drawable="@drawable/tab_bg_blue" />
</selector>

This xml will work same as xml we use for buttons. on pressed state and for normal state. Name this xml as tab_bg.xml

b) In your java file use following in code for tabhost use following method and pass your tabhost instance in this method

public void setTabColor(TabHost tabhost) {
        for(int i=0;i<tabhost.getTabWidget().getChildCount();i++)
        {
            tabhost.getTabWidget().getChildAt(i).setBackgroundResource(R.drawable.tab_bg); //unselected
        }
    }

2) Secondly for the tab icon :- use the xml like

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- When selected, use grey -->
    <item android:drawable="@drawable/settings_btn_down"
          android:state_selected="true" />
    <!-- When not selected, use white-->
    <item android:drawable="@drawable/settings_btn_up" />
</selector>

Name this xml as settings_tab_xml.xml . and in your code

tabHost.addTab(tabHost
                .newTabSpec("two")
                .setIndicator("",
                        getResources().getDrawable(R.xml.settings_tab_xml))
                        .setContent(new Intent(this, FriendsScreen.class)));

Let me know if this helps you.