Таблицы стиля Android SlidingTabs с круглыми углами

Question

Я использую SlidingTabs для создания двух вкладок. Интерфейс вкладки должны выглядеть следующим образом -

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

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

(Пожалуйста, обратите внимание, прямые углы синий прямоугольник)

Я использую следующий селектор для создания пользовательского интерфейса, показанного выше.

<selector xmlns:android="http://schemas.android.com/apk/res/android"> 
    <!-- Active tab --> 
    <item android:state_selected="true" android:state_focused="false" 
     android:state_pressed="false" android:drawable="@drawable/round_corner_rectangle" /> 
    <!-- Inactive tab --> 
    <item android:state_selected="false" android:state_focused="false" 
     android:state_pressed="false" android:drawable="@android:color/transparent" /> 
    <!-- Pressed tab --> 
    <item android:state_pressed="true" android:state_selected="true" android:drawable="@drawable/round_corner_rectangle" /> 

    <item android:state_pressed="true" android:state_selected="false" android:drawable="@color/transparent" /> 
    <!-- Selected tab (using d-pad) --> 
    <item android:state_focused="true" android:state_selected="true" 
     android:state_pressed="false" android:drawable="@android:color/transparent" /> 
</selector> 

round_corner_rectangle «s код следующим образом-

<shape xmlns:android="http://schemas.android.com/apk/res/android" 
    android:shape="rectangle"> 
    <corners android:radius="5dp"/> 
    <solid android:color="@color/login_background" /> 
</shape> 

login_background является темно-синий цвет. Используя приведенный выше код, я получаю following-

в

Я могу конечно удалить corner элемент из round_corner_rectangle, чтобы получить темно-синий фон прямо вместо круглых. Если я сделаю правую сторону синего прямоугольника прямо, когда выбрана другая вкладка, прямоугольник округляется с другой стороны.

Что мне делать, чтобы получить пользовательский интерфейс, как показано на первом изображении?

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

Answer 1

Ok первой очереди просто создайте этот простой прямоугольник drawable xml. и Не беспокойтесь о углах, которые мы собираемся создать динамически.

tabbackground.xml

<?xml version="1.0" encoding="utf-8"?> 
<shape xmlns:android="http://schemas.android.com/apk/res/android" 
    android:shape="rectangle"> 
    <solid android:color="your_color" /> 
    <size android:height="40dp" /> 
</shape> 

Теперь, когда вы меняете вкладку. Вы должны извлечь позицию выбранной вкладки с помощью прослушивателей в выбранной переменной TabPosition. Я не пишу fullycode просто даю вам скелет

if (selectedTabPosition == 0) { // that means first tab 

    GradientDrawable drawable = (GradientDrawable) getResources().getDrawable(R.drawable.tabbackground); 
    drawable.setCornerRadii(new float[]{30,30,0,0,0,0,30,30}); // this will create the corner radious to left side 

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

    GradientDrawable drawable = (GradientDrawable) getResources().getDrawable(R.drawable.tabbackground); 
    drawable.setCornerRadii(new float[]{0,0,30,30,30,30,0,0}); // this will create the corner radious to right side 

} else { // you don't have to worry about it. it is only used if you have more then 2 tab. means for all middle tabs 

    GradientDrawable drawable = (GradientDrawable) getResources().getDrawable(R.drawable.tabbackground); 
    drawable.setCornerRadii(new float[]{0,0,0,0,0,0,0,0}); // this will remove all corner radious 

} 
// and at last don't forget to set this drawable. 

это то, что я попробовал на кнопке мыши

Answer 2

Этот код отлично работает на Android 4.0 и выше и даст вам результат, о котором вы указали, и не судите код с предварительным просмотром в Android Studio.

<?xml version="1.0" encoding="utf-8"?> 

<item> 
    <shape> 
     <solid 
      android:angle="270.0" 
      android:color="#5C83AF" /> 

     <corners android:topLeftRadius="8dp" 
      android:bottomLeftRadius="8dp"/> 
    </shape> 
</item> 

Edit 1: Другое решение вашей проблемы может быть решено с помощью 9-патча изображения.

Edit 2: https://github.com/hoang8f/android-segmented-control

Answer 3

Используйте этот XML и А/с для вас изменить радиус .Это использовать для набора угла, как округлой формы

<?xml version="1.0" encoding="utf-8"?> 
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" > 
<corners 
android:topLeftRadius="5dp" 
android:topRightRadius="5dp" 
android:bottomLeftRadius="5dp" 
android:bottomRightRadius="5dp" 
/> 
<solid 
android:color="#134F4D" 
/> 
<size 
android:width="270dp" 
android:height="60dp" 
/> 
</shape> 

Answer 4

Вашей левой вкладки (кнопка) в XML:

<?xml version="1.0" encoding="utf-8"?> 
<shape xmlns:android="http://schemas.android.com/apk/res/android"> 
<stroke 
    android:width="0dp" 
    android:color="@color/transparent" /> 
<!-- you can add multiple colors --> 
<gradient 
    android:startColor="@color/your_start_color" 
    android:endColor="@color/your_end_color" 
    /> 
<corners 
    android:topLeftRadius="10dp" 
    android:topRightRadius="0.1dp" 
    android:bottomLeftRadius="10dp" 
    android:bottomRightRadius="0.1dp" 
    /> 
</shape> 

для правой вкладки () измените его следующим образом:

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

и использовать его в своем селекторе xml.

Answer 5

Вы пытались сделать свой синий прямоугольник со всеми прямыми углами и просто сделать ваши бежевые углы для перекрытия прямоугольника, чтобы его прямые углы не были видны? Это должно заставить работать, как вы хотите.

Другим возможным решением является использование какой-то библиотеки третьей стороны, как

https://github.com/hoang8f/android-segmented-control

Вы также могли бы хотеть проверить этот сайт, чтобы найти библиотеки:

https://android-arsenal.com/

Answer 6

Вы должны попробовать эту библиотеку https://github.com/hoang8f/android-segmented-control.

Легко настроить и легко установить выбранные и не выбранные состояния.

Answer 7

использовать следующий код в rounded_corner.xml файл в папке вытяжке

<shape xmlns:android="http://schemas.android.com/apk/res/android" 
    android:shape="rectangle"> 
    <corners android:radius="50dp" /> 
    <stroke android:width="5px" android:color="#1a1a1a" /> 
</shape> 

и использования следующих в activity_main.xml файле

<Button 
     android:id="@+id/btnCodeInput" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:layout_marginTop="10dp" 
     android:background="@drawable/rounded_corner" 
     android:text="CodeInput" /> 

вот это