parent layout corners not visible because selector overlaps

Question

Im tryng to build tabs using rounded linearlayout which has 2 textviews.

I want the following output

enter image description here

What happens instead is the following

enter image description here

The selector applied to textview gets drawn on top of parent layouts drawable, because of which the corners are not visible. I cannot add corners to textview selector because it will round all 4 corners in each textview.

I also thought of using specific corners i.e shaping each textview, but tht will increase number of drawables for each textview, which is not a flexible solution, in future I may choose to use more tabs.

Please can anyone suggest a generic xml solution so that I can change the background of textviews without affecting parent layout corners?

My Code Layout

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="5dp"
    android:background="@drawable/layout_background"
    android:orientation="horizontal" >

    <TextView
        android:id="@+id/issue_tab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:background="@drawable/tab_selector"
        android:fontFamily="@raw/roboto_medium"
        android:gravity="center_horizontal"
        android:padding="5dp"
        android:text="TAB 1" />

    <View
        android:layout_width="1dp"
        android:layout_height="match_parent"
        android:background="#4c8bff" />

    <TextView
        android:id="@+id/activity_tab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:background="@drawable/tab_selector"
        android:fontFamily="@raw/roboto_medium"
        android:gravity="center_horizontal"
        android:padding="5dp"
        android:text="TAB 2" />
</LinearLayout>

layout_background.xml

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

    <stroke android:width="1dp" android:color="#4c8bff"/>
    <corners android:radius="5dp" />
    <solid android:color="#FFFFFFFF" />

</shape>

tab_selector.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_selected="true" android:drawable="@drawable/tab_selected"/>
 <!-- selected -->
    <item android:state_pressed="true" android:drawable="@drawable/tab_pressed"/>
 <!-- pressed -->
    <item android:state_focused="true" android:drawable="@drawable/tab_pressed"/>
 <!-- focused -->
    <item android:drawable="@drawable/tab_normal"/>
 <!-- default -->    
</selector>

tab_selected.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android" >
    <solid android:color="#4c8bff" />
</shape>

Can you post the image of output you're getting? – Aniruddha May 28 '14 at 06:07 — Aniruddha, May 28 '14 at 06:07

Sulabh Gajjar · Accepted Answer · 2014-05-30T05:55:58.783

Updated Code

Create tab_selected_left_corner.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android" >
    <solid android:color="#4c8bff" />
    <corners
       android:bottomLeftRadius="5dp"
       android:bottomRightRadius="0dp"
       android:topLeftRadius="5dp"
       android:topRightRadius="0dp" />
</shape>

Create tab_selected_right_corner.xml

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

Create layout_background.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:dither="true"
android:shape="rectangle" >

<stroke
    android:width="1dp"
    android:color="#4c8bff" />

<corners android:radius="5dp" />

<solid android:color="#FFFFFFFF" />

</shape>

Your main xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="5dp"
    android:background="@drawable/layout_background"
    android:orientation="horizontal" >

<TextView
    android:id="@+id/issue_tab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    android:gravity="center_horizontal"
    android:padding="5dp"
    android:text="TAB 1" />

<View
    android:layout_width="1dp"
    android:layout_height="match_parent"
    android:background="#4c8bff" />

<TextView
    android:id="@+id/activity_tab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    android:gravity="center_horizontal"
    android:padding="5dp"
    android:text="TAB 2" />

</LinearLayout>

Put this in your activity

issueTab.setOnClickListener(new OnClickListener() {

        @Override
        public void onClick(View v) {
            issueTab.setBackgroundResource(R.drawable.tab_selected_left_corner);
              activity_tab.setBackgroundResource(android.R.color.transparent);
        }
    });
    activity_tab.setOnClickListener(new OnClickListener() {

        @Override
        public void onClick(View v) {
              issueTab.setBackgroundResource(android.R.color.transparent);
            activity_tab.setBackgroundResource(R.drawable.tab_selected_right_corner);
        }
    });

This works for me.. Hope for you also.

it does same thing, except that, it does rounding on all 4 corners of textview which looks bad near divider line at center of layout, plus the unselected tab does not get its border because of the overlap — Timmy Simons, May 28 '14 at 07:47

score 0 · Answer 2 · edited Jun 04 '20 at 04:29

@Sulabh Gajjar - Thanks a ton for such a detailed answer. I had this approach in mind but I was wondering if there could be a better way, so kept this as my last option. Like you suggested, created 2 selectors for left and right tabs, instead of creating new drawables, I wrote shapes inside selector itself and created 2 separate files to store different corner radius as suggested by https://stackoverflow.com/a/12952591/1020809. Currently its working for me, but I'll wait few more days incase someone comes up with a more generic way, if nobody shows up, I'll mark your answer as accepted. Thanks again... :)

Using your approach, here's what I did to get it running

Layout

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginBottom="7dp"
    android:layout_marginLeft="10dp"
    android:layout_marginRight="10dp"
    android:layout_marginTop="7dp"
    android:background="@drawable/custom_tab_background"
    android:orientation="horizontal" >

    <TextView
        android:id="@+id/issue_tab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:background="@drawable/custom_tab_selector_left"
        android:fontFamily="@raw/roboto_bold"
        android:gravity="center_horizontal"
        android:padding="5dp"
        android:text="Issues"
        android:textAllCaps="true"
        android:textColor="@color/custom_tab_text_color_selector"
        android:textSize="14sp" />

    <!--
         <View
        android:layout_width="1dp"
        android:layout_height="match_parent"
        android:background="@color/custom_tab_selected" />
    -->

    <TextView
        android:id="@+id/activity_tab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:background="@drawable/custom_tab_selector_right"
        android:fontFamily="@raw/roboto_bold"
        android:gravity="center_horizontal"
        android:padding="5dp"
        android:text="Activities"
        android:textAllCaps="true"
        android:textColor="@color/custom_tab_text_color_selector"
        android:textSize="14sp" />
</LinearLayout>

custom_tab_background.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:dither="true"
    android:shape="rectangle" >

    <stroke
        android:width="2dp"
        android:color="@color/custom_tab_selected" />

    <corners android:radius="5dp" />

    <solid android:color="#FFFFFFFF" />

    <padding
        android:bottom="2dp"
        android:left="2dp"
        android:right="2dp"
        android:top="2dp" />

</shape>

dimens.xml

  <dimen name="custom_tab_layout_radius">4dp</dimen>

custom_tab_selector_left.xml

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

    <item android:state_selected="true">
        <shape xmlns:android="http://schemas.android.com/apk/res/android">
            <solid android:color="@color/custom_tab_selected" />
            <corners android:bottomLeftRadius="@dimen/custom_left_tab_bottomLeftRadius" 
                android:bottomRightRadius="@dimen/custom_left_tab_bottomRightRadius" 
                android:topLeftRadius="@dimen/custom_left_tab_topLeftRadius" 
                android:topRightRadius="@dimen/custom_left_tab_topRightRadius" />
        </shape>
    </item>
    <!-- selected -->

    <item android:state_pressed="true">
        <shape xmlns:android="http://schemas.android.com/apk/res/android">
            <solid android:color="@color/custom_tab_pressed" />
            <corners android:bottomLeftRadius="@dimen/custom_left_tab_bottomLeftRadius" 
                android:bottomRightRadius="@dimen/custom_left_tab_bottomRightRadius" 
                android:topLeftRadius="@dimen/custom_left_tab_topLeftRadius" 
                android:topRightRadius="@dimen/custom_left_tab_topRightRadius" />
        </shape>
    </item>
    <!-- pressed -->

    <item android:state_focused="true">
        <shape xmlns:android="http://schemas.android.com/apk/res/android">
            <solid android:color="@color/custom_tab_pressed" />
            <corners android:bottomLeftRadius="@dimen/custom_left_tab_bottomLeftRadius" 
                android:bottomRightRadius="@dimen/custom_left_tab_bottomRightRadius" 
                android:topLeftRadius="@dimen/custom_left_tab_topLeftRadius" 
                android:topRightRadius="@dimen/custom_left_tab_topRightRadius" />
        </shape>       
    </item>
    <!-- focused -->

    <item>
        <shape xmlns:android="http://schemas.android.com/apk/res/android">
            <solid android:color="@color/custom_tab_normal" />
            <corners android:bottomLeftRadius="@dimen/custom_left_tab_bottomLeftRadius" 
                android:bottomRightRadius="@dimen/custom_left_tab_bottomRightRadius" 
                android:topLeftRadius="@dimen/custom_left_tab_topLeftRadius" 
                android:topRightRadius="@dimen/custom_left_tab_topRightRadius" />
        </shape>
    </item>
    <!-- default -->

</selector>

/res/values/custom_tab_corners.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!-- LEFTMOST TAB -->
    <dimen name="custom_left_tab_topLeftRadius">@dimen/custom_tab_layout_radius</dimen>
    <dimen name="custom_left_tab_bottomLeftRadius">0dp</dimen>
    <dimen name="custom_left_tab_topRightRadius">0dp</dimen>
    <dimen name="custom_left_tab_bottomRightRadius">@dimen/custom_tab_layout_radius</dimen>

    <!-- RIGHTMOST TAB -->
    <dimen name="custom_right_tab_topLeftRadius">0dp</dimen>
    <dimen name="custom_right_tab_bottomLeftRadius">@dimen/custom_tab_layout_radius</dimen>
    <dimen name="custom_right_tab_topRightRadius">@dimen/custom_tab_layout_radius</dimen>
    <dimen name="custom_right_tab_bottomRightRadius">0dp</dimen>    
</resources>

/res/values-v12/custom_tab_corners.xml

<resources>
    <!-- LEFTMOST TAB -->
    <dimen name="custom_left_tab_topLeftRadius">@dimen/custom_tab_layout_radius</dimen>
    <dimen name="custom_left_tab_bottomLeftRadius">@dimen/custom_tab_layout_radius</dimen>
    <dimen name="custom_left_tab_topRightRadius">0dp</dimen>
    <dimen name="custom_left_tab_bottomRightRadius">0dp</dimen>

    <!-- RIGHTMOST TAB -->
    <dimen name="custom_right_tab_topLeftRadius">0dp</dimen>
    <dimen name="custom_right_tab_bottomLeftRadius">0dp</dimen>
    <dimen name="custom_right_tab_topRightRadius">@dimen/custom_tab_layout_radius</dimen>
    <dimen name="custom_right_tab_bottomRightRadius">@dimen/custom_tab_layout_radius</dimen>    
</resources>

parent layout corners not visible because selector overlaps

2 Answers2

Your main xml