Rounded corners for TABS in android

后端未结

关注

 7  2102

I want to achieve rounded corners for the tab that I\'ve constructed in my application. So far I was able to come up with this

相关标签:

7条回答

没有蜡笔的小新

2020-12-21 05:52

This code are for 2 tabs in tablayout:

One is selected and two is unselected mode

Drawable xml:

When selecting Left tab:

tabselectionleft:

<?xml version="1.0" encoding="utf-8"?>
<shape android:shape="rectangle"
    xmlns:android="http://schemas.android.com/apk/res/android">
            <corners android:bottomLeftRadius="5dp"
                android:topLeftRadius="5dp"/>

    <solid android:color="@android:color/white"/>

</shape>

notabselectionleft:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item >

        <shape android:shape="rectangle"
            xmlns:android="http://schemas.android.com/apk/res/android">
            <gradient android:startColor="@color/colorAccent1" android:endColor="@color/colorAccent3"/>

            <corners android:topRightRadius="5dp"
                android:bottomRightRadius="5dp" />
        </shape>
    </item>


</layer-list>

When selecting right tab:

tabselectionright:

<?xml version="1.0" encoding="utf-8"?>
<shape android:shape="rectangle"
    xmlns:android="http://schemas.android.com/apk/res/android">
    <corners android:bottomRightRadius="5dp"
        android:topRightRadius="5dp"/>
    <solid android:color="@android:color/white"/>

</shape>

notabselectionright:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>

        <shape xmlns:android="http://schemas.android.com/apk/res/android"
            android:shape="rectangle"
            android:useLevel="true">


            <corners
                android:bottomLeftRadius="5dp"
                android:topLeftRadius="5dp" />
            <gradient
                android:endColor="@color/colorAccent3"
                android:startColor="@color/colorAccent1" />


        </shape>


    </item>

In main layout tablayout decelartion

<android.support.design.widget.TabLayout
    android:id="@+id/tabs"
    android:layout_width="match_parent"
    android:layout_height="60dp"
    app:tabMode="fixed"
    app:tabGravity="fill"
    android:fitsSystemWindows="true"
    android:clickable="true"
    app:tabIndicatorColor="@color/colorAccent2"
    app:tabIndicatorHeight="3dp"
    android:layout_marginTop="20dp"
    android:layout_marginLeft="20dp"
    android:layout_marginRight="20dp"
    app:tabPaddingStart="10dp"
    app:tabPaddingEnd="10dp"
    android:clipToPadding="true"
    android:clipChildren="true"
    />

Calling this drawable should happen programmatically as shown below:

protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_simple_tabs);
 viewPager = (ViewPager) findViewById(R.id.viewpager);
        setupViewPager(viewPager);

        tabLayout = (TabLayout) findViewById(R.id.tabs);
        tabLayout.setupWithViewPager(viewPager);
        firstTab = ((ViewGroup)    tabLayout.getChildAt(0)).getChildAt(0);
        secondTab = ((ViewGroup) tabLayout.getChildAt(0)).getChildAt(1);
        tabLayout.setOnTabSelectedListener(this);

        firstTab.setBackground(getDrawable(R.drawable.tabselectionleft));

        secondTab.setBackground(getDrawable(R.drawable.notabselectionleft));



    }
public void onTabSelected(TabLayout.Tab tab) {

        viewPager.setCurrentItem(tab.getPosition());

        int selectedTabPosition = tab.getPosition();

        if (selectedTabPosition == 0)
        { // that means first tab
            firstTab.setBackground(getDrawable(R.drawable.tabselectionleft));
                  secondTab.setBackground(getDrawable(R.drawable.notabselectionleft));


        } else if (selectedTabPosition == 1)
        { // that means it's a last tab

            firstTab.setBackground(getDrawable(R.drawable.notabselectionright));
            secondTab.setBackground(getDrawable(R.drawable.tabselectionright));


        }

0 讨论(0)

春和景丽

2020-12-21 05:55

Created alternate shapes to solve the problem

Note: These xml files are in addition to the two mentioned.

SELECTED TAB ALTERNATE.XML

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
   android:shape="rectangle"
>
<corners
 android:topLeftRadius="10dp"
 android:bottomRightRadius="10dp"/>

<gradient
  android:startColor="#000" 
  android:endColor="#000"
  android:gradientRadius="400"
  android:angle="-270"/>

</shape>

UNSELECTED TAB ALTERNATE.XML

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle"
>
<gradient 
 android:angle="90" 
 android:startColor="#880f0f10" 
 android:centerColor="#8858585a" 
 android:endColor="#88a9a9a9"/>

 <corners
    android:topRightRadius="10dp"
    android:bottomLeftRadius="10dp"/>

</shape>

Afterwards, add this in your tab selection listener.

    @Override
    public void onTabSelected(TabLayout.Tab tab) {

            viewPager.setCurrentItem(tab.getPosition());

            int selectedTabPosition = tab.getPosition();


            View firstTab = ((ViewGroup)    tabLayout.getChildAt(0)).getChildAt(0);
            View secondTab = ((ViewGroup) tabLayout.getChildAt(0)).getChildAt(1);


            if (selectedTabPosition == 0)
            { // that means first tab
                firstTab.setBackground(getDrawable(R.drawable.selected_tab));
                secondTab.setBackground(getDrawable(R.drawable.unselected_tab));


            } else if (selectedTabPosition == 1)
            { // that means it's a last tab

                firstTab.setBackground(getDrawable(R.drawable.selected_tab_alternate));
                secondTab.setBackground(getDrawable(R.drawable.unselected_tab_alternate));


            }
        }

0 讨论(0)

既然无缘

2020-12-21 06:00

Another, completely different approach, might be to use a library like Appcelerator Titanium or PhoneGap.

Both libraries let you "program" your android in HTML5/CSS/Javascript. Where "rounded tabs" abound.

Just a thought ...

0 讨论(0)
发布评论:

提交评论
- 加载中...

迷失自我

2020-12-21 06:01

In java file, put this

 tabs.getTabWidget().getChildAt(0).setBackgroundResource(R.drawable.roundedcorners);

roundedcorners.xml:

 <?xml version="1.0" encoding="utf-8"?>
 <shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="rectangle">
    <corners android:bottomLeftRadius="0dp"
       android:bottomRightRadius="0dp" 
       android:topLeftRadius="5dp"
       android:topRightRadius="5dp" />
 </shape>

0 讨论(0)

眼角桃花

2020-12-21 06:09

I think this can be done with one drawable for one view. For 2 tab need only 2 drawable. This will also worked for tabs with border color.

For Left Tab:

<selector xmlns:android="http://schemas.android.com/apk/res/android">

  <item android:state_selected="false">
    <layer-list >

      <item>
        <shape android:shape="rectangle" >
            <solid android:color="@android:color/holo_red_dark" />

            <corners android:radius="10dp"/>
        </shape>

      </item>

      <item  android:right="-10dp">
        <shape>
            <solid android:color="@android:color/holo_red_dark" />
            <stroke
                android:width="2dp"
                android:color="@android:color/black" />

            <corners android:radius="10dp"/>
        </shape>
      </item>

    </layer-list>
  </item>

  <item android:state_selected="true">
    <layer-list >

      <item >
        <shape android:shape="rectangle" >
            <solid android:color="@android:color/holo_green_dark" />

            <corners android:radius="10dp"/>
        </shape>

      </item>

      <item  android:right="-10dp">
        <shape>
            <solid android:color="@android:color/holo_green_dark" />
            <stroke
                android:width="2dp"
                android:color="@android:color/black" />
            <corners android:radius="10dp"/>
        </shape>
      </item>

    </layer-list>

  </item>

</selector>

Left Tab Background Preview:

For Right Tab:

<selector xmlns:android="http://schemas.android.com/apk/res/android">

<item android:state_selected="false">
    <layer-list >
        <item>
         <shape android:shape="rectangle" >
            <solid android:color="@android:color/holo_red_dark" />

            <corners android:radius="10dp"/>
         </shape>

        </item>

        <item  android:left="-10dp">
         <shape>
            <solid android:color="@android:color/holo_red_dark" />
            <stroke
                android:width="2dp"
                android:color="@android:color/black" />

            <corners android:radius="10dp"/>
         </shape>
        </item>

    </layer-list>

</item>
<item android:state_selected="true">
    <layer-list >
      <item >
        <shape android:shape="rectangle" >
            <solid android:color="@android:color/holo_green_dark" />

            <corners android:radius="10dp"/>
        </shape>

      </item>

      <item  android:left="-10dp">
        <shape>
            <solid android:color="@android:color/holo_green_dark" />
            <stroke
                android:width="2dp"
                android:color="@android:color/black" />
            <corners android:radius="10dp"/>
        </shape>
      </item>

    </layer-list>

</item>


</selector>

Right Tab Background Preview:

If there is more than 2 tabs Then this if for Middle Tab:

<selector xmlns:android="http://schemas.android.com/apk/res/android">

 <item android:state_selected="false">

  <layer-list >

    <item>
        <shape android:shape="rectangle" >
            <solid android:color="@android:color/holo_red_dark" />

            <corners android:radius="10dp"/>
        </shape>

    </item>

    <item  android:left="-10dp" android:right="-10dp">
        <shape>
            <solid android:color="@android:color/holo_red_dark" />
            <stroke
                android:width="2dp"
                android:color="@android:color/black" />

            <corners android:radius="10dp"/>
        </shape>
    </item>

  </layer-list>

 </item>
 <item android:state_selected="true">

   <layer-list >

    <item >
        <shape android:shape="rectangle" >
            <solid android:color="@android:color/holo_green_dark" />

            <corners android:radius="10dp"/>
        </shape>

    </item>

    <item  android:left="-10dp" android:right="-10dp">
        <shape>
            <solid android:color="@android:color/holo_green_dark" />
            <stroke
                android:width="2dp"
                android:color="@android:color/black" />
            <corners android:radius="10dp"/>
        </shape>
    </item>

   </layer-list>

 </item>

</selector>

Middle Tab Background Preview:

Drawables have both selected and unselected state

0 讨论(0)

陌清茗

2020-12-21 06:13

I think you should use 4 shapes:

for left button not selected
for left button selected
for right button not selected
for right button selected

And then write selector to use for button background, see example for the left button (for the right just the similar):

<selector
    xmlns:android="http://schemas.android.com/apk/res/android">

<item android:state_selected="true">
<shape android:shape="rectangle">
  <corners
    android:topLeftRadius="10dp"
    android:bottomLeftRadius="10dp"/>
  <gradient
    android:startColor="#000"
    android:endColor="#000"
    android:gradientRadius="400"
    android:angle="-270"/>
</shape>
</item>

<item>
    <shape android:shape="rectangle">
      <gradient
        android:angle="90"
        android:startColor="#880f0f10"
        android:centerColor="#8858585a"
        android:endColor="#88a9a9a9"/>
   <corners
      android:topLeftRadius="10dp"
      android:bottomLeftRadius="10dp"/>
</shape>
</item></selector>

0 讨论(0)

1 2 下一页