Закругленные углы для вкладок в Android

Question

Я хочу получить закругленные углы для вкладки, которую я построил в своем приложении. До сих пор я смог придумать это

Я бы хотел, чтобы мои закругленные углы выглядели так же. (Я закодировал это так, что появляются только правый и левый углы, но когда состояния меняются, это выглядит как на картинке выше)

Ниже приведен код, который я написал до сих пор. Как я могу добиться правильных закругленных углов с помощью кода?

ВЫБРАННЫЙ TAB.XML

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

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

</shape>

НЕ ВЫБРАННЫЙ TAB.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:topLeftRadius="10dp"
    android:bottomRightRadius="10dp"/>

</shape>

Спасибо за ваш ответ !! :)

Answer 1

В java-файл поместите это

 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>

Answer 2

Я думаю, вы должны использовать 4 фигуры:

• для левой кнопки не выбрано

• для выбранной левой кнопки

• для правой кнопки не выбрано

• для выбранной правой кнопки

А затем напишите селектор, который будет использоваться для button фона, см. Пример для левой кнопки (для правой точно такой же):

<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>

Answer 3

Созданы альтернативные формы для решения проблемы

Примечание. Эти xml-файлы являются дополнением к двум упомянутым.

ВЫБРАННАЯ вкладка 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>

НЕ ВЫБРАННАЯ вкладка 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>

Затем добавьте это в ваш слушатель выбора вкладок.

    @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));


            }
        }

Answer 4

Я думаю, что это может быть сделано с одним drawable для одного представления.Для 2 вкладок нужно всего 2 раскладных.Это также работает для вкладок с цветом границы.

1. Для левой вкладки:

   <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>
   

Фоновый просмотр левой вкладки:

Для правой вкладки:

<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>

Предварительный просмотр фона правой вкладки:

Если имеется более 2 вкладок, то это для средней вкладки:

<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>

Просмотр фона средней вкладки:

Отбираемые документы имеют как выбранное, так и невыбранное состояние

Answer 5

Этот код для 2 вкладок в tablayout:

Один выбран, а два - невыбранный режим

Drawable XML:

При выборе левой вкладки:

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>

При выборе правой вкладки:

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>

В основной вкладке раскладки выписка

<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"
    />

Вызов этого Drawable должен происходить программно, как показано ниже:

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));


        }

Answer 6

Другой, совершенно другой подход, может заключаться в использовании такой библиотеки, как Appcelerator Titanium или PhoneGap .

Обе библиотеки позволяют "программировать" ваш Android в HTML5/ CSS / Javascript.Там, где «закругленные язычки» предостаточно.

Просто мысль ...