如何在Android的TabLayout选项卡中将图标与文本对齐

Question

我正在一个包含两个tabs的屏幕上工作。我在这里使用AppCompatActivity。我在选项卡中设置了带文本的图标，但我希望图像右对齐，它们之间应该有一些空格。代码如下：

1. activity_professional timeline.Java

 public class Activity_ProfessionalTimeline extends AppCompatActivity implements OnClickListener {

    private Toolbar toolbatTop;
    private TabLayout tabLayout;
    private ViewPager viewPager;
    private TabsPagerAdapter mAdapter;
    private ActionBar actionBar;

    private int[] tabIcons = {
            R.drawable.social,
            R.drawable.professional
    };


    private ImageView _img_Profile;

    private TextView _txt_UserName;
    private TextView _txt_UserDestination;

    ArrayList<Model_LoginDetails> arr_LogInUserDetails = new ArrayList<Model_LoginDetails>();

    private ImageView _imt_userImage;
    private ListView _listView_SelectOpition;

    private boolean profilebtnstatus = false;
    private RelativeLayout _relativelayour_status;
    private ListView _listviewmoroption;
    private DrawerLayout drawer;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_professionalttimeline);

        // Top Toolbar
        Toolbar toolbarTop = (Toolbar) findViewById(R.id.toolbar_top);
        toolbarTop.setTitle("Recent Professional Activities");

        LayoutInflater inflator = (LayoutInflater) this
                .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        setSupportActionBar(toolbarTop);
        getSupportActionBar().setDisplayShowHomeEnabled(true);
        getSupportActionBar().setHomeButtonEnabled(true);
        getSupportActionBar().setStackedBackgroundDrawable(new ColorDrawable(Color
                .parseColor("#fbae38")));
        getSupportActionBar().setBackgroundDrawable(new ColorDrawable(Color
                .parseColor("#2b4d72")));
        //getSupportActionBar().setIcon(R.drawable.appicon);


        View actionBarView = inflator.inflate(R.layout.actionbar_custom_layout,
                null);
        ImageView _mProfileImage = (ImageView) actionBarView
                .findViewById(R.id.img_Profile);
        /*Picasso.with(Activity_ProfessionalTimeline.this)
                .load(arr_LogInUserDetails.get(0).getThumbnail_url())
                .into(_mProfileImage);*/
        LayoutParams layoutParams = new LayoutParams(LayoutParams.MATCH_PARENT,
                LayoutParams.MATCH_PARENT);

        getSupportActionBar().setCustomView(actionBarView);


        drawer = (DrawerLayout) findViewById(R.id.drawer_layout);

        Bundle bundle = getIntent().getExtras();
        arr_LogInUserDetails = bundle.getParcelableArrayList("mylist");

        _imt_userImage = (ImageView) findViewById(R.id.imt_userImage);
        _txt_UserName = (TextView) findViewById(R.id.txt_UserName);
        _txt_UserDestination = (TextView) findViewById(R.id.txt_Userdestination);

        _img_Profile = (ImageView) findViewById(R.id.img_Profile);
        _listviewmoroption = (ListView) findViewById(R.id.listviewmoroption);
        _listviewmoroption.setAdapter(new Adapter_MenuOpition(
                Activity_ProfessionalTimeline.this));
        _listviewmoroption.setOnItemClickListener(new OnItemClickListener() {

            @Override
            public void onItemClick(AdapterView<?> arg0, View arg1, int arg2,
                                    long arg3) {
                switch (arg2) {
                    case 0:
                        fun_hidemenu();
                        Bundle bundle = new Bundle();
                        Intent int_ProfessionalTimeline = new Intent(
                                Activity_ProfessionalTimeline.this,
                                Acitivty_AccountSetting.class);
                        bundle.putParcelableArrayList("mylist",
                                arr_LogInUserDetails);
                        int_ProfessionalTimeline.putExtras(bundle);
                        startActivity(int_ProfessionalTimeline);
                        break;
                    case 1:

                        break;
                    case 2:
                        finish();
                        break;

                    default:
                        break;
                }
            }
        });

        _relativelayour_status = (RelativeLayout) findViewById(R.id.reltv_Menu);

        _listView_SelectOpition = (ListView) findViewById(R.id.list_allSelection);
        _listView_SelectOpition.setAdapter(new Adapter_SelectionOpition(
                Activity_ProfessionalTimeline.this));
        _listView_SelectOpition
                .setOnItemClickListener(new OnItemClickListener() {

                    @Override
                    public void onItemClick(AdapterView<?> arg0, View arg1,
                                            int arg2, long arg3) {
                        drawer.closeDrawers();
                        switch (arg2) {
                            case 0:

                                break;
                            case 1:
                                Intent int_Intership = new Intent(Activity_ProfessionalTimeline.this, Tab_InterShip.class);
                                int_Intership.putExtra("image", arr_LogInUserDetails.get(0).getThumbnail_url());
                                startActivity(int_Intership);
                                break;

                            case 2:
                                Intent int_AddJob = new Intent(Activity_ProfessionalTimeline.this, Tab_AddJob.class);
                                int_AddJob.putExtra("image", arr_LogInUserDetails.get(0).getThumbnail_url());
                                int_AddJob.putExtra("addjob", "addJob");
                                startActivity(int_AddJob);
                                break;

                            case 3:
                                Intent int_SearchJob = new Intent(Activity_ProfessionalTimeline.this, Tab_SearchJob.class);
                                int_SearchJob.putExtra("image", arr_LogInUserDetails.get(0).getThumbnail_url());
                                startActivity(int_SearchJob);
                                break;

                            case 4:
                                Intent int_PostedJob = new Intent(Activity_ProfessionalTimeline.this, Tab_PostedJob.class);
                                int_PostedJob.putExtra("image", arr_LogInUserDetails.get(0).getThumbnail_url());
                                startActivity(int_PostedJob);
                                break;

                            case 5:
                                Intent int_AppliedJob = new Intent(Activity_ProfessionalTimeline.this, TabFragment_AppliedJob.class);
                                int_AppliedJob.putExtra("image", arr_LogInUserDetails.get(0).getThumbnail_url());
                                startActivity(int_AppliedJob);
                                break;

                            case 6:
                                Intent int_JobMENTOR = new Intent(Activity_ProfessionalTimeline.this, Tab_JobMentor.class);
                                int_JobMENTOR.putExtra("image", arr_LogInUserDetails.get(0).getThumbnail_url());
                                startActivity(int_JobMENTOR);

                                break;

                            case 7:
                                Intent int_JobMEtees = new Intent(Activity_ProfessionalTimeline.this, Tab_mentees.class);
                                int_JobMEtees.putExtra("image", arr_LogInUserDetails.get(0).getThumbnail_url());
                                startActivity(int_JobMEtees);
                                break;

                            case 8:

                                break;

                            case 9:

                                break;

                            case 10:

                                break;

                            default:
                                break;
                        }
                    }
                });

        _img_Profile.setOnClickListener(this);


        Picasso.with(Activity_ProfessionalTimeline.this)
                .load(arr_LogInUserDetails.get(0).getThumbnail_url())
                .into(_imt_userImage);
        _txt_UserName.setText(arr_LogInUserDetails.get(0).getUser_Name());
        _txt_UserDestination.setText(arr_LogInUserDetails.get(0)
                .getUser_Skills());


        viewPager = (ViewPager) findViewById(R.id.pager);
        setupViewPager(viewPager);

        tabLayout = (TabLayout) findViewById(R.id.tab_layout);
        tabLayout.setupWithViewPager(viewPager);

        //----Call this function for displaying image in tab
        setupTabIcons();
    }

    private void setupTabIcons() {
        tabLayout.getTabAt(0).setIcon(tabIcons[0]);
        tabLayout.getTabAt(1).setIcon(tabIcons[1]);

    }

    private void setupViewPager(ViewPager viewPager) {
        ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager());
        adapter.addFrag(new TabFragment_Social(Activity_ProfessionalTimeline.this, arr_LogInUserDetails), "Social");
        adapter.addFrag(new TabFragment_Professional(), "Professional");

        viewPager.setAdapter(adapter);
    }

    class ViewPagerAdapter extends FragmentPagerAdapter {
        private final List<Fragment> mFragmentList = new ArrayList<>();
        private final List<String> mFragmentTitleList = new ArrayList<>();

        public ViewPagerAdapter(FragmentManager manager) {
            super(manager);
        }

        @Override
        public Fragment getItem(int position) {
            return mFragmentList.get(position);
        }

        @Override
        public int getCount() {
            return mFragmentList.size();
        }

        public void addFrag(Fragment fragment, String title) {
            mFragmentList.add(fragment);
            mFragmentTitleList.add(title);
        }

        @Override
        public CharSequence getPageTitle(int position) {
            return mFragmentTitleList.get(position);
        }
    }


    @Override
    public void onClick(View arg0) {
        switch (arg0.getId()) {
            case R.id.img_Profile:
                if (profilebtnstatus == false) {
                    _relativelayour_status.setVisibility(View.VISIBLE);
                    _img_Profile.setBackgroundColor(Color.parseColor("#faad38"));
                    profilebtnstatus = true;
                } else {
                    fun_hidemenu();
                }
                break;

            default:
                break;
        }
    }

    private void fun_hidemenu() {
        if (profilebtnstatus == true) {
            _relativelayour_status.setVisibility(View.GONE);
            _img_Profile.setBackgroundColor(Color.parseColor("#2b4d72"));
            profilebtnstatus = false;
        }

    }

}

2.activity_professionaltimeline.xml

<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!--Top Toolbar-->
    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar_top"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:background="#3f5e7e"
        android:elevation="6dp"
        android:minHeight="?attr/actionBarSize"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

    <android.support.design.widget.TabLayout
        android:id="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/toolbar_top"
        android:background="#fbae38"
        android:elevation="6dp"
        android:minHeight="?attr/actionBarSize"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:tabGravity="fill"
        app:tabMode="fixed"/>


    <android.support.v4.view.ViewPager
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@+id/reltv_footer"></android.support.v4.view.ViewPager>

    <RelativeLayout
        android:id="@+id/reltv_footer"
        android:layout_width="match_parent"
        android:layout_height="50sp"
        android:layout_alignParentBottom="true"
        android:background="#2b4d72">

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"
            android:padding="20sp" />

        <ImageView
            android:id="@+id/img_Profile"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"
            android:background="#2b4d72"
            android:padding="15sp"
            android:src="@drawable/more_option" />

        <View
            android:id="@+id/img_view"
            android:layout_width="3sp"
            android:layout_height="fill_parent"
            android:layout_toLeftOf="@+id/img_Profile"
            android:background="#335980" />

        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_toLeftOf="@+id/img_view"
            android:background="#2b4d72"
            android:gravity="left"
            android:orientation="horizontal">

            <ImageView
                android:id="@+id/home"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentRight="true"
                android:layout_centerVertical="true"
                android:background="#203b58"
                android:padding="15sp"
                android:src="@drawable/home" />

            <View
                android:layout_width="2sp"
                android:layout_height="fill_parent"
                android:layout_toLeftOf="@+id/img_Profile"
                android:background="#203b58" />

            <ImageView
                android:id="@+id/friendrequest"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentRight="true"
                android:layout_centerVertical="true"
                android:padding="15sp"
                android:src="@drawable/friend_req" />

            <View
                android:layout_width="2sp"
                android:layout_height="fill_parent"
                android:layout_toLeftOf="@+id/img_Profile"
                android:background="#203b58" />

            <ImageView
                android:id="@+id/message"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentRight="true"
                android:layout_centerVertical="true"
                android:padding="15sp"
                android:src="@drawable/meg" />

            <View
                android:layout_width="2sp"
                android:layout_height="fill_parent"
                android:layout_toLeftOf="@+id/img_Profile"
                android:background="#203b58" />

            <ImageView
                android:id="@+id/notification"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentRight="true"
                android:layout_centerVertical="true"
                android:padding="15sp"
                android:src="@drawable/footer_notification" />
        </LinearLayout>
    </RelativeLayout>

    <RelativeLayout
        android:id="@+id/reltv_Menu"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@+id/reltv_footer"
        android:layout_alignParentRight="true"
        android:background="#ffffff"
        android:visibility="gone">

        <ListView
            android:id="@+id/listviewmoroption"
            android:layout_width="200sp"
            android:layout_height="wrap_content"
            android:divider="#6d6d6d"
            android:dividerHeight="1sp"></ListView>
    </RelativeLayout>
</RelativeLayout>

<FrameLayout
    android:id="@+id/content_frame"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

<LinearLayout
    android:id="@+id/left_drawer"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_gravity="right"
    android:background="@android:color/white"
    android:choiceMode="singleChoice"
    android:orientation="vertical">

    <include layout="@layout/cust_rightnavigationdrawer" />
</LinearLayout>

3. ScreenShot

请告诉我如何在图标和文字之间留出空间。

Answer 1

您可以使用图像和文本进行简单的布局，然后可以将该布局设置为选项卡，就像我所做的那样。

tabLayout = (TabLayout) findViewById(R.id.main_fragment_tab);
tabLayout.addTab(tabLayout.newTab());
tabLayout.addTab(tabLayout.newTab());
tabLayout.getTabAt(0).setCustomView(R.layout.custom_tab_title);
tabLayout.getTabAt(1).setCustomView(R.layout.custom_tab_title);
View tab1_view = tabLayout.getTabAt(0).getCustomView();
View tab2_view = tabLayout.getTabAt(1).getCustomView();
TextView tab1_title = (TextView) tab1_view.findViewById(R.id.tv_tab_title);
ImageView img1 = (ImageView) tab1_view.findViewById(R.id.img);
TextView tab2_title = (TextView) tab2_view.findViewById(R.id.tv_tab_title);
ImageView img2 = (ImageView) tab2_view.findViewById(R.id.img);
tab1_title.setText("Tab1");
img1.setImageResource(R.drawable.sample_image);
tab2_title.setText("Tab2");
img2.setImageResource(R.drawable.sample_image);

Answer 2

我有你想要的确切解决方案。

<android.support.design.widget.TabLayout
    android:id="@+id/tabLayout"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:tabInlineLabel="true"
    app:tabPaddingStart="@dimen/default_10dp">

使用以下属性可以获得所需的结果。

应用：tabInlineLabel = “真”

链接：https://stackoverflow.com/a/55060824/5305651