问题
Hello I have created a tab layout in my activity. This is the main .xml file:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
android:id="@+id/main_layout"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.xxxxxx.eventmanager.EventDetailsActivity">
<android.support.design.widget.AppBarLayout
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:id="@+id/toolbarContainer"
android:theme="@style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:background="?attr/colorPrimary"
android:elevation="6dp"
android:minHeight="?attr/actionBarSize"
app:popupTheme="@style/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
<android.support.design.widget.TabLayout
android:id="@+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/toolbarContainer"
android:background="?attr/colorPrimary"
android:elevation="6dp"
android:minHeight="?attr/actionBarSize"
app:tabTextColor="@color/colorLight"
app:tabSelectedTextColor="@color/colorAccent"
android:textAlignment=""
android:theme="@style/AppTheme"/>
<android.support.v4.view.ViewPager
android:id="@+id/pager"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:layout_below="@id/tab_layout"/>
</RelativeLayout>
And this is my .java class:
package com.xxxxxx.eventmanager;
import android.graphics.drawable.Drawable;
import android.support.design.widget.TabLayout;
import android.support.v13.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuItem;
import com.xxxxxx.eventmanager.adapters.EventPagerAdapter;
public class EventDetailsActivity extends AppCompatActivity {
/**
* The {@link android.support.v4.view.PagerAdapter} that will provide
* fragments for each of the sections. We use a
* {@link FragmentPagerAdapter} derivative, which will keep every
* loaded fragment in memory. If this becomes too memory intensive, it
* may be best to switch to a
* {@link android.support.v13.app.FragmentStatePagerAdapter}.
*
* private SectionsPagerAdapter mSectionsPagerAdapter;
*
*/
private Toolbar toolbar;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_event_details);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
TabLayout tabLayout = (TabLayout) findViewById(R.id.tab_layout);
tabLayout.addTab(tabLayout.newTab().setText("Details").setIcon(R.mipmap.ic_details));
tabLayout.addTab(tabLayout.newTab().setText("Sales").setIcon(R.mipmap.ic_sales));
tabLayout.addTab(tabLayout.newTab().setText("Purchases").setIcon(R.mipmap.ic_purchase));
tabLayout.setTabGravity(TabLayout.GRAVITY_FILL);
final ViewPager viewPager = (ViewPager) findViewById(R.id.pager);
final EventPagerAdapter adapter = new EventPagerAdapter
(getSupportFragmentManager(), tabLayout.getTabCount());
viewPager.setAdapter(adapter);
viewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout));
tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
@Override
public void onTabSelected(TabLayout.Tab tab) {
viewPager.setCurrentItem(tab.getPosition());
}
@Override
public void onTabUnselected(TabLayout.Tab tab) {
}
@Override
public void onTabReselected(TabLayout.Tab tab) {
}
});
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.menu_event_details, menu);
return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
// Handle action bar item clicks here. The action bar will
// automatically handle clicks on the Home/Up button, so long
// as you specify a parent activity in AndroidManifest.xml.
int id = item.getItemId();
//noinspection SimplifiableIfStatement
if (id == R.id.action_settings) {
return true;
}
return super.onOptionsItemSelected(item);
}
}
Now currently the tab displays like this:
However now I would like the icons to display on the left hand side of the text instead of on top of the text.
回答1:
I have exact solution which you guys want.
<android.support.design.widget.TabLayout
android:id="@+id/tabLayout"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:textAlignment="textStart"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:tabInlineLabel="true"
app:tabPaddingStart="@dimen/default_10dp">
Using below property you can achive desire result.
app:tabInlineLabel="true"
回答2:
The answer given by @Tjerkw is ok just that it doesn't loop through the entire tab. I guess the right solution should be this
for (int i = 0; i < tabLayout.getTabCount(); i++ ) {
yourlinearlayout = (LinearLayout) LayoutInflater.from(getContext()).inflate(R.layout.title_text, null);
tab_text = (TextView) yourlinearlayout.findViewById(R.id.tabContent);
tab_text.setText(" " + tab_titles[i]);
tab_text.setCompoundDrawablesWithIntrinsicBounds(tabicons[i], 0, 0, 0);
tabLayout.getTabAt(i).setCustomView(tab_text);}
and the layout resource .xml representing R.layout.title_text will be
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center">
<TextView
android:id="@+id/tabContent"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:textAlignment="center"
android:textColor="@android:color/white"
android:gravity="center"/>
finally, the tabicons[i] and tab tab_titles[i] are just String arrays containing their respective contents.
I know this question's old but i recently faced this and i'm sure someone else might still need this
回答3:
TabLayout also support custom views instead of TabView.
1.Create your tab item layout.The main idea is we should use specify id for ImageView @android:id/icon and for TextView @android:id/text1
R.layout.custom_tab_item
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/color_app_background"
android:gravity="center"
android:orientation="horizontal">
<ImageView
android:id="@android:id/icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:src="@drawable/appoinments_" />
<com.app.barber.views.CustomTextView
android:id="@android:id/text1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center"
android:paddingBottom="@dimen/_8sdp"
android:paddingLeft="@dimen/_5sdp"
android:paddingTop="@dimen/_8sdp"
android:text="@string/title_appointments"
android:textColor="@color/color_white"
android:textSize="@dimen/_12ssp" />
</LinearLayout>
2. And TabLayout xml file
<android.support.design.widget.TabLayout xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/tab_layout" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="?attr/colorPrimary" app:tabMaxWidth="0dp" app:tabGravity="fill" app:tabMode="fixed" android:theme="@style/vocabularyTheme.ActionBar" />
3. Create tabLayout using custom views, and remove bottom margin, which was set up by default 8dp
mTabLayout = (TabLayout) findViewById(R.id.tab_layout);
mTabLayout.addTab(createTab(text1,icon1));
mTabLayout.addTab(createTab(text2,icon2));
private TabLayout.Tab createTab(String text, Drawable icon){
TabLayout.Tab tab = mTabLayout.newTab().setText(text).setIcon(icon).setCustomView(R.layout.custom_tab_item);
// remove imageView bottom margin
if (tab.getCustomView() != null){
ImageView imageView = (ImageView) tab.getCustomView().findViewById(android.R.id.icon);
ViewGroup.MarginLayoutParams lp = ((ViewGroup.MarginLayoutParams) imageView.getLayoutParams());
lp.bottomMargin = 0;
imageView.requestLayout();
}
return tab;
}
Expected result.
回答4:
Just add this line to your TabLayout in XML
app:tabInlineLabel="true"
回答5:
Use a custom view:
TextView newTab = (TextView) LayoutInflater.from(this).inflate(R.layout.custom_tab, null);
newTab.setText("tab1"); //tab label txt
newTab.setCompoundDrawablesWithIntrinsicBounds(your_drawable_icon_here, 0, 0, 0);
tabLayout.getTabAt(tab_index_here_).setCustomView(newTab);
回答6:
You have to introduce ActionMenuView inside Toolbar.
From Google Official docs "ActionMenuView is a presentation of a series of menu options as a View. It provides several top level options as action buttons while spilling remaining options over as items in an overflow menu. This allows applications to present packs of actions inline with specific or repeating content."
Eg,
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/tToolbar"
android:layout_height="?attr/actionBarSize"
android:layout_width="match_parent"
android:background="?attr/colorPrimary"
android:gravity="center_vertical|start"
app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light">
<android.support.v7.widget.ActionMenuView
android:id="@+id/amvMenu"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"/>
</android.support.v7.widget.Toolbar>
And on your Activity,
Toolbar t = (Toolbar) findViewById(R.id.tToolbar);
amvMenu = (ActionMenuView) t.findViewById(R.id.amvMenu);
amvMenu.setOnMenuItemClickListener(new ActionMenuView.OnMenuItemClickListener() {
@Override
public boolean onMenuItemClick(MenuItem menuItem) {
return onOptionsItemSelected(menuItem);
}
});
来源：https://stackoverflow.com/questions/36160978/align-icons-in-tab-layout-to-the-left