1

The goal:

I want to have a tabbed interface where all tabs are visible at all times.

The problem:

I cannot split the screen-width between the created tabs so that they don't overflow (see second screen-shot). Based on this (Change tab width in ActionBar.Tab) SO-question and discussion, I used the solution proposed there as a basis. The function "setMaxWidth()" can be used to limit a Views width. By limiting each tab to a portion of the screenWidth they should all fit.

setMaxWidth(screenWidth*tabTextSize[i]/tabTextSizeSum);

But to accomplish this I need to get to the Views of all the tabs. I tried to do this by using the setCustomview(layoutResId) for each tab and then reaching them through getCustomView(). But the result (as can be seen in Screenshot 1) leads to the tabs text being literary "false".

So, is there a way to scale the tabs to fit on the screen without overflowing?

Screenshots:

Screenshot1

It's hard to see, but there are 6 tabs, taking up about 2/3 of the actionbar-area, each with the text "false" in it.

Screenshot2

If the rows where the tabs have a customView set and the last for-loop are removed, the tabs looks good except from not fitting the screen.

The code:

MainActivity.java

package com.example;

import android.app.ActionBar;
import android.app.Fragment;
import android.os.Bundle;
import android.app.Activity;
import android.util.DisplayMetrics;
import android.view.View;
import android.view.WindowManager;
import android.widget.TextView;

public class MainActivity extends Activity {
    // Declare Tab Variable
    ActionBar.Tab TabTool, TabSchedule, TabMessage, TabTNT, TabAlarm, TabOverview;
    Fragment fragmentTool =     new FragmentTabToolChange();
    Fragment fragmentSchedule = new FragmentTabSchedule();
    Fragment fragmentMessage =  new FragmentTabMessage();
    Fragment fragmentTNT=       new FragmentTabTNT();
    Fragment fragmentAlarm =    new FragmentTabAlarm();
    Fragment fragmentOverview = new FragmentTabOverview();

    DisplayMetrics displaymetrics = new DisplayMetrics();
    int screenWidth;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        getWindowManager().getDefaultDisplay().getMetrics(displaymetrics);
        screenWidth = displaymetrics.widthPixels;

        getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,
            WindowManager.LayoutParams.FLAG_FULLSCREEN);
        setContentView(R.layout.activity_main);

        ActionBar actionBar = getActionBar();

        // Hide Actionbar Icon
        actionBar.setDisplayShowHomeEnabled(false);

        // Hide Actionbar Title
        actionBar.setDisplayShowTitleEnabled(false);


        // Set Tab Icon and Titles
        TabTool = actionBar.newTab().setText(R.string.toolText);
        TabSchedule = actionBar.newTab().setText(R.string.scheduleText);
        TabMessage = actionBar.newTab().setText(R.string.messageText);
        TabTNT = actionBar.newTab().setText(R.string.tntText);
        TabAlarm = actionBar.newTab().setText(R.string.alarmText);
        TabOverview = actionBar.newTab().setText(R.string.overviewText);

        // Set Tab Listeners
        TabTool.setTabListener(new TabListener(fragmentTool));
        TabSchedule.setTabListener(new TabListener(fragmentSchedule));
        TabMessage.setTabListener(new TabListener(fragmentMessage));
        TabTNT.setTabListener(new TabListener(fragmentTNT));
        TabAlarm.setTabListener(new TabListener(fragmentAlarm));
        TabOverview.setTabListener(new TabListener(fragmentOverview));

        View toolView = findViewById(R.id.toolTextView);

        TabTool.setCustomView(toolView);
        TabSchedule.setCustomView(findViewById(R.id.scheduleTextView));
        TabMessage.setCustomView(findViewById(R.id.messageTextView));
        TabTNT.setCustomView(findViewById(R.id.tntTextView));
        TabAlarm.setCustomView(findViewById(R.id.alarmTextView));
        TabOverview.setCustomView(findViewById(R.id.overViewTextView));

        // Add tabs to actionbar
        actionBar.addTab(TabTool);
        actionBar.addTab(TabSchedule);
        actionBar.addTab(TabMessage);
        actionBar.addTab(TabTNT);
        actionBar.addTab(TabAlarm);
        actionBar.addTab(TabOverview);

        // Scale tab widths to fit window
        View tabView = actionBar.getTabAt(0).getCustomView();


        final int tabSize = actionBar.getTabCount();
        final int[] tabTextSize = new int[tabSize];

        int tabTextSizeSum = 0;
        for (int i = 0; i < tabSize; i++)
        {
            tabTextSize[i] = actionBar.getTabAt(i).getText().length();
            tabTextSizeSum += tabTextSize[i];
        }
        for (int i = 0; i < tabSize; i++)
        {
            TextView tab = (TextView) actionBar.getTabAt(i).getCustomView();

            tab.setMaxWidth(screenWidth*tabTextSize[i]/tabTextSizeSum);
        }

        // Create Actionbar Tabs
        actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
    }
}

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/fragment_container"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/toolTextView"
        android:layout_width="wrap_content"
        android:layout_height="71dp"
        android:text="@+id/string.toolText" />
    <TextView
        android:id="@+id/scheduleTextView"
        android:layout_width="wrap_content"
        android:layout_height="71dp"
        android:text="@+id/string.scheduleText" />
    <TextView
        android:id="@+id/messageTextView"
        android:layout_width="wrap_content"
        android:layout_height="71dp"
        android:text="@+id/string.messageText"/>
    <TextView
        android:id="@+id/tntTextView"
        android:layout_width="wrap_content"
        android:layout_height="71dp"
        android:text="@+id/string.tntText" />
    <TextView
        android:id="@+id/alarmTextView"
        android:layout_width="wrap_content"
        android:layout_height="71dp"
        android:text="@+id/string.alarmText" />
    <TextView
        android:id="@+id/overViewTextView"
        android:layout_width="wrap_content"
        android:layout_height="71dp"
        android:text="@+id/string.overviewText" />

</FrameLayout>

Version-data:

AndroidStudio version: 1.5.1

Android SDK-version: 19

buildToolsVersion 23.0.1

Community
  • 1
  • 1

0 Answers0