问题
This type of Question has already been asked before but not got any proper,working solution so I am again posting this question.Sorry for asking again and wasting your time. Please give some working solution. Or let me know if I am doing anything wrong. Thanks in advance.
Expected Tabs:
But coming Like:
Coming Tabs
On page Load tabs are coming like "Expected Tabs" image but after selection coming like "Coming Tabs" image. MainXML code:
<android.support.design.widget.TabLayout
android:id="@+id/tabs"
style="@style/MyCustomTabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/background_img_jpeg"
android:minHeight="10dp"
android:padding="10dp"
app:tabGravity="fill"
app:tabIndicatorColor="@color/TRANSPARENT"
app:tabMode="fixed"
app:tabTextColor="@color/blue" />
@style/MyCustomTabLayout
<style name="MyCustomTabLayout" parent="Widget.Design.TabLayout">
<item name="tabBackground">@drawable/tab_bg</item>
</style>
@drawable/tab_bg
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_selected="true"
android:drawable="@drawable/tab_bgselected" />
<item android:drawable="@drawable/tab_bgnotselected" />
</selector>
@drawable/tab_bgselected
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:bottom="0dp" android:top="0dp"
android:left="0dp" android:right="0dp" >
<shape android:shape="rectangle">
<solid android:color="@color/blue" />
<corners
android:topLeftRadius="10dp"
android:bottomLeftRadius="10dp">
</corners>
</shape>
</item>
</layer-list>
Like that @drawable/tab_bgnotselected
And in code behind i have written:
tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
@Override
public void onTabSelected(TabLayout.Tab tab) {
try {
mViewPager.setCurrentItem(tab.getPosition());
TabPosition = tab.getPosition();
TabCount = tabLayout.getTabCount();
try {
if (TabPosition == 0) {
GradientDrawable drawable = (GradientDrawable) getResources().getDrawable(R.drawable.policy_tab_blue);
drawable.setCornerRadii(new float[]{10,10,0,0,0,0,10,10}); // this will create the corner radious to left side
} else {
GradientDrawable drawable = (GradientDrawable) getResources().getDrawable(R.drawable.policy_tab_white);
drawable.setCornerRadii(new float[]{0,0,10,10,10,10,0,0}); // this will create the corner radious to right side
}
} catch (Exception e) {
e.printStackTrace();
}
Log.i("TabPosition:--->", TabPosition + "");
Log.i("TabCount:--->", TabCount + "");
} catch (Exception e) {
e.printStackTrace();
}
}
@Override
public void onTabUnselected(TabLayout.Tab tab) {
try {
} catch (Exception e) {
e.printStackTrace();
}
}
@Override
public void onTabReselected(TabLayout.Tab tab) {
}
});
回答1:
Result of below code:
Use 4 shapes (No need of selector) like:
tab_left_select.xml
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <item > <shape android:shape="rectangle"> <solid android:color="@color/blue" /> <corners android:topLeftRadius="8dp" android:bottomLeftRadius="8dp"> </corners> </shape> </item> </layer-list>tab_left_unselect.xml
- Same as above just change the color.
tab_right_select.xml
- Same as above just change the radius direction to right.
tab_right_unselect.xml
- Same as above just change the color and radius direction to right.
In Your layout:
<android.support.design.widget.TabLayout
android:layout_margin="@dimen/activity_vertical_margin"
android:id="@+id/tabs"
app:tabTextColor="@color/white"
app:tabSelectedTextColor="@color/white"
app:tabIndicatorColor="#00000000"
android:layout_width="match_parent"
android:layout_height="40dp" />
In your Activity/Fragment:
tabLayout = (TabLayout)view.findViewById(R.id.tabs);
tabLayout.addTab(tabLayout.newTab().setText("Tab1"));
tabLayout.addTab(tabLayout.newTab().setText("Tab2"));
setTabBG(R.drawable.tab_left_select,R.drawable.tab_right_unselect);
tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
@Override
public void onTabSelected(TabLayout.Tab tab) {
if(tabLayout.getSelectedTabPosition()==0) {
setTabBG(R.drawable.tab_left_select,R.drawable.tab_right_unselect);
}
else {
setTabBG(R.drawable.tab_left_unselect,R.drawable.tab_right_select);
}
}
....
});
private void setTabBG(int tab1, int tab2){
if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.JELLY_BEAN_MR1) {
ViewGroup tabStrip = (ViewGroup) tabLayout.getChildAt(0);
View tabView1 = tabStrip.getChildAt(0);
View tabView2 = tabStrip.getChildAt(1);
if (tabView1 != null) {
int paddingStart = tabView1.getPaddingStart();
int paddingTop = tabView1.getPaddingTop();
int paddingEnd = tabView1.getPaddingEnd();
int paddingBottom = tabView1.getPaddingBottom();
ViewCompat.setBackground(tabView1, AppCompatResources.getDrawable(tabView1.getContext(), tab1));
ViewCompat.setPaddingRelative(tabView1, paddingStart, paddingTop, paddingEnd, paddingBottom);
}
if (tabView2 != null) {
int paddingStart = tabView2.getPaddingStart();
int paddingTop = tabView2.getPaddingTop();
int paddingEnd = tabView2.getPaddingEnd();
int paddingBottom = tabView2.getPaddingBottom();
ViewCompat.setBackground(tabView2, AppCompatResources.getDrawable(tabView2.getContext(), tab2));
ViewCompat.setPaddingRelative(tabView2, paddingStart, paddingTop, paddingEnd, paddingBottom);
}
}
}
回答2:
I think you should use 4 shapes: 1) for left button not selected 2) for left button selected 3) for right button not selected 4) 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:topRightRadius="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:topRightRadius="10dp"
android:bottomLeftRadius="10dp"/>
</shape>
</item>
for more detail visit here. Rounded corners for TABS in android
回答3:
You can use MaterialCardView with appropriate cardCornerRadius as a parent layout of lab layout to achieve this one side rounded corner background. Then you can use tabIndicatorColor to colorize the tab selected layout. Hope this will help you. Thanks
Code Spinet:
<com.google.android.material.card.MaterialCardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
app:strokeWidth="2dp"
app:strokeColor="?attr/colorAccent"
app:cardCornerRadius="20dp">
<com.google.android.material.tabs.TabLayout
app:tabTextAppearance="@android:style/TextAppearance.Widget.TabWidget"
android:id="@+id/tab_layout"
app:tabIndicatorGravity="stretch"
app:tabMaxWidth="0dp"
app:tabGravity="fill"
app:tabMode="fixed"
app:tabIndicatorColor="?attr/colorAccent"
app:tabSelectedTextColor="@android:color/white"
app:tabTextColor="?attr/colorPrimary"
android:layout_width="match_parent"
android:layout_height="35dp"/>
</com.google.android.material.card.MaterialCardView>
Output:
回答4:
Form a previous answer here on StackOverflow for a creative developer that I didn't remember where it is, that can be done easily by having a card view as a parent view for the TabLayout
<com.google.android.material.tabs.TabLayout
android:id="@+id/tableLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/include2"
app:tabBackground="@drawable/tab_color_selector"
app:tabIndicatorHeight="0dp"
app:tabSelectedTextColor="@color/white"
app:tabTextAppearance="@style/AppTheme.CustomTabText"
app:tabTextColor="@color/green">
<com.google.android.material.tabs.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Today’s menu" />
<com.google.android.material.tabs.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Full Menu" />
<com.google.android.material.tabs.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Reviews" />
</com.google.android.material.tabs.TabLayout>
</androidx.cardview.widget.CardView>
回答5:
I think you should use for all corners
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
android:startColor="#SomeGradientBeginColor"
android:endColor="#SomeGradientEndColor"
android:angle="270"/>
<corners
android:bottomRightRadius="7dp"
android:bottomLeftRadius="7dp"
android:topLeftRadius="7dp"
android:topRightRadius="7dp"/>
</shape>
check how to use this in button or layout
http://www.techamongus.com/2017/02/android-layouts-with-round-corners.html
来源：https://stackoverflow.com/questions/35337754/android-tab-layout-tabs-with-round-corners