布局操作栏appcompat

Question

I am using an appcompat v7 actionbar with sliding tabs and navigational drawer . Reference taken from here . As you can see in the image, the tabs are not evenly spaced in the tabViewBar . I want to modify the layout of the actionbar, such that it spans out evenly to use the space.

This is how the tabBarView initializes and add the tabViews :

public class TabBarView extends LinearLayout {
public TabBarView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);

        setLayoutParams(new LayoutParams(LayoutParams.WRAP_CONTENT,
                LayoutParams.MATCH_PARENT));

        setWillNotDraw(false);

        mPaint = new Paint();
        mPaint.setColor(Color.WHITE);
        mPaint.setAntiAlias(true);

        mStripHeight = (int) (STRIP_HEIGHT * getResources().getDisplayMetrics().density + .5f);
    }

private void addTabViewP(final int i, final String string, int pageIconResId) {
        // TODO Auto-generated method stub

        if (i == 0) {
            tabView1 = new TabView(getContext());
            tabView1.setIcon(pageIconResId);
            tabView1.setOnClickListener(new OnClickListener() {
                @Override
                public void onClick(View v) {
                    pager.setCurrentItem(i);
                }
            });
            CheatSheet.setup(tabView1, string);
            this.addView(tabView1);
        } else if (i == 1) {
            tabView2 = new TabView(getContext());
            tabView2.setIcon(pageIconResId);
            tabView2.setOnClickListener(new OnClickListener() {
                @Override
                public void onClick(View v) {
                    pager.setCurrentItem(i);
                }
            });
            CheatSheet.setup(tabView2, string);
            this.addView(tabView2);
        } else if (i == 2) {
            tabView3 = new TabView(getContext());
            tabView3.setIcon(pageIconResId);
            tabView3.setOnClickListener(new OnClickListener() {
                @Override
                public void onClick(View v) {
                    pager.setCurrentItem(i);
                }
            });
            CheatSheet.setup(tabView3, string);
            this.addView(tabView3);
        }
    }
}

Following is the tabBarView custom layout:

<?xml version="1.0" encoding="utf-8"?>
<com.sanat.tinderactionbar.tabbarview.TabBarView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/customTabBar"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal" >
</com.sanat.tinderactionbar.tabbarview.TabBarView>

Here is the styles.xml file:

<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <item name="colorPrimary">@color/blue_grey_700</item>
</style>

I tried to add <item name="weightSum">4<item> in my parent theme, but no change takes place.

Even when I modify the setLayoutParams in TabBarView to:

LinearLayout.LayoutParams params = new LayoutParams(0,
                    LayoutParams.MATCH_PARENT);
params.weight = 0;
setLayoutParams(params);

This doesnt work either. Where and how should I change the layout/code to make it work?

Answer 1

So: horizontal linear layout, full screen on width, right?

Don't set weightSum on the parent. For the (4?) children views: set width=0 and weight=1 . This gives them equal importance without having to divide by their number (they are still going to be equally divided if you add a fifth one). In xml you'd have something like this (please excuse my random image choice from Android's resources and my choice of control (ImageView) - you might have to play with the gravity and layout_gravity if you include some other layouts):

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    <ImageView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:src="@android:drawable/btn_dialog"/>
    <ImageView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:src="@android:drawable/btn_dialog"/>
    <ImageView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:src="@android:drawable/btn_dialog"/>
    <ImageView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:src="@android:drawable/btn_dialog"/>
</LinearLayout>