どのように私はそれをカスタマイズしようとしたこの画像のようにタブレイアウトを作るためにどのようにアンドロイド

Question

でtablayoutをカスタマイズするが、それは私が

Answer 1

が

<FrameLayout 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" 
      tools:context="com.reflectionsinfos.arn.home.BottomControllerFragment"> 

    <include 
     layout="@layout/bottom_controller" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content"/> 

</FrameLayout> 

bottom_controller_layoutレイアウトファイルを作成してやりたいとせず、 bottom_controller

<?xml version="1.0" encoding="utf-8"?> 
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" 
      xmlns:app="http://schemas.android.com/apk/res-auto" 
      android:layout_width="match_parent" 
      android:layout_height="@dimen/footer_view_height"> 

    <LinearLayout 
     android:id="@+id/BottomLinearLayout" 
     android:layout_width="match_parent" 
     android:layout_height="@dimen/footer_view_button_layout_height" 
     android:layout_gravity="bottom" 
     android:background="@color/colorAccent" 
     android:orientation="horizontal" 
     android:weightSum="1"> 

     <LinearLayout 
      android:layout_width="0dp" 
      android:layout_height="match_parent" 
      android:layout_weight=".5" 
      android:gravity="left" 
      android:orientation="horizontal" 
      android:paddingBottom="@dimen/smallest_margins" 
      android:paddingTop="@dimen/smallest_margins" 
      android:weightSum="1"> 

      <com.reflectionsinfos.arn.ui.CustomRadioButton 
       android:id="@+id/tab_info" 
       style="@style/footerTheme" 
       android:button="@null" 
       android:minLines="2" 
       android:gravity="center" 
       android:drawableTop="@drawable/footer_info_drawable" 
       android:text="@string/info"/> 

      <com.reflectionsinfos.arn.ui.CustomRadioButton 
       android:id="@+id/tab_second_screen" 
       style="@style/footerTheme" 
       android:button="@null" 
       android:minLines="2" 
       android:gravity="center" 
       android:drawableTop="@drawable/footer_second_screen_drawable" 
       android:text="@string/second_screen"/> 

     </LinearLayout> 

     <View 
      android:layout_width="@dimen/footer_view_height" 
      android:layout_height="@dimen/footer_view_height"/> 

     <LinearLayout 
      android:layout_width="0dp" 
      android:layout_height="match_parent" 
      android:layout_gravity="right" 
      android:layout_weight=".5" 
      android:orientation="horizontal" 
      android:paddingBottom="@dimen/smallest_margins" 
      android:paddingTop="@dimen/smallest_margins" 
      android:weightSum="1"> 

      <com.reflectionsinfos.arn.ui.CustomRadioButton 
       android:id="@+id/tab_top_songs" 
       style="@style/footerTheme" 
       android:button="@null" 
       android:minLines="2" 
       android:gravity="center" 
       android:drawableTop="@drawable/footer_top_songs_drawable" 
       android:text="@string/songs"/> 

      <com.reflectionsinfos.arn.ui.CustomRadioButton 
       android:id="@+id/tab_poems" 
       style="@style/footerTheme" 
       android:button="@null" 
       android:minLines="2" 
       android:gravity="center" 
       android:drawableTop="@drawable/footer_poems_drawable" 
       android:text="@string/poems"/> 

     </LinearLayout> 

    </LinearLayout> 

    <FrameLayout 
     android:layout_width="@dimen/footer_view_height" 
     android:layout_height="@dimen/footer_view_height" 
     android:layout_gravity="center"> 

     <com.reflectionsinfos.arn.ui.TintableImageButton 
      android:id="@+id/button_play_pause_radio" 
      android:layout_width="@dimen/footer_view_height" 
      android:layout_height="@dimen/footer_view_height" 
      android:layout_gravity="center" 
      android:background="@null" 
      android:src="@drawable/ic_radio_play"/> 

     <ImageView 
      android:id="@+id/shake_image" 
      android:layout_width="24dp" 
      android:layout_height="24dp" 
      android:layout_gravity="right|center_vertical" 
      android:src="@drawable/ic_music" 
      android:visibility="gone"/> 
     <com.reflectionsinfos.arn.ui.EqualizerView 
      xmlns:custom="http://schemas.android.com/apk/res-auto" 
      android:id="@+id/equalizer_view" 
      android:layout_width="@dimen/equalizer_view_dimen" 
      android:layout_height="@dimen/equalizer_view_dimen" 
      android:layout_gravity="center" 
      android:layout_margin="@dimen/medium_margins" 
      android:background="@drawable/equalizer_bg" 
      android:clickable="true" 
      android:paddingBottom="@dimen/equalizer_margin" 
      android:paddingLeft="@dimen/equalizer_margin" 
      android:paddingRight="@dimen/equalizer_margin" 
      android:visibility="gone" 
      custom:animDuration="4500" 
      custom:foregroundColor="@android:color/black"/> 

     <ProgressBar 
      android:id="@+id/progressbar_radio" 
      android:layout_width="@dimen/small_progressbar_dimen" 
      android:layout_height="@dimen/small_progressbar_dimen" 
      android:layout_gravity="center" 
      android:visibility="gone"/> 
    </FrameLayout> 
</FrameLayout> 

Answer 2

1. デザインのカスタムLを作成しますどのようにタブがあるべきか。

最終表示customTab = getLayoutInflater（）（R.layout.test、null）を膨張させます。

tablayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() { 
     @Override 
     public void onTabSelected(TabLayout.Tab tab) { 
      tablayout.getTabAt(tab.getPosition()).setCustomView(customTab); 
     } 

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

     } 

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

     } 
    });