blocks|key|123855|text|谢谢你，Atu，这是一个好的提示！|type|unstyled|depth|inlineStyleRanges|entityRanges|data|123856|在我的例子中，我必须添加一个线性布局来居中布局标题。我还添加了一些空格字符来获得图标和文本之间的边距。|123857|custom_tab.xml:|offset|length|style|BOLD|123858|<?xml+version="1.0"+encoding="utf-8"?>
<LinearLayout
++++xmlns:android="http://schemas.android.com/apk/res/android"
++++android:layout_width="match_parent"
++++android:layout_height="match_parent"
++++android:orientation="vertical"
++++android:gravity="center">
++++<TextView
++++++++android:id="@%2Bid/tabContent"
++++++++android:layout_width="wrap_content"
++++++++android:layout_height="match_parent"
++++++++android:textAlignment="center"
++++++++android:textColor="@android:color/white"
++++++++android:gravity="center"/>
</LinearLayout>|code-block|syntax|javascript|123859|初始化代码：|123860|LinearLayout+tabLinearLayout+=+(LinearLayout)+LayoutInflater.from(this).inflate(R.layout.custom_tab,+null);
TextView+tabContent+=+(TextView)+tabLinearLayout.findViewById(R.id.tabContent);
tabContent.setText("++"%2BgetApplicationContext().getResources().getString(tabTitles[i]));
tabContent.setCompoundDrawablesWithIntrinsicBounds(tabIcons[i],+0,+0,+0);
mTabLayout.getTabAt(i).setCustomView(tabContent);|123861|entityMap^0|0|0|0|F|0|0|0|6|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|V|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|W|8|@$F|X|G|Y|H|I]]|9|@]|A|$]]|$1|J|3|K|5|L|7|Z|8|@]|9|@]|A|$M|N]]|$1|O|3|P|5|6|7|10|8|@$F|11|G|12|H|I]]|9|@]|A|$]]|$1|Q|3|R|5|L|7|13|8|@]|9|@]|A|$M|N]]|$1|S|3|-4|5|6|7|14|8|@]|9|@]|A|$]]]|T|$]]

Thank you Atu for this good tip!

In my case, I have to add a linear layout to center tablayout title. I have also added some space characters to get margin between the icon and the text.

custom_tab.xml:

<pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt;
&lt;LinearLayout
 xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:orientation="vertical"
 android:gravity="center"&gt;
 &lt;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"/&gt;
&lt;/LinearLayout&gt;
</code></pre>

Initialization code:

<pre><code>LinearLayout tabLinearLayout = (LinearLayout) LayoutInflater.from(this).inflate(R.layout.custom_tab, null);
TextView tabContent = (TextView) tabLinearLayout.findViewById(R.id.tabContent);
tabContent.setText(" "+getApplicationContext().getResources().getString(tabTitles[i]));
tabContent.setCompoundDrawablesWithIntrinsicBounds(tabIcons[i], 0, 0, 0);
mTabLayout.getTabAt(i).setCustomView(tabContent);
</code></pre>

blocks|key|2680880|text|使用@juzamn给出的相同xml代码，只需对整个选项卡添加以下小调整即可|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2680881|for+(int+i+=+0;+i+<+tabLayout.getTabCount();+i%2B%2B+)+{
+yourlinearlayout+=+(LinearLayout)+LayoutInflater.from(getContext()).inflate(R.layout.title_text,+null);
+tab_text+=+(TextView)+yourlinearlayout.findViewById(R.id.tabContent);
++++++++tab_text.setText("++"+%2B+tab_titles[i]);
+tab_text.setCompoundDrawablesWithIntrinsicBounds(tabicons[i],+0,+0,+0);
++++tabLayout.getTabAt(i).setCustomView(tab_text);}|code-block|syntax|javascript|2680882|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Use the same xml code given by @juzamn and just add this little adjustments to loop for the entire tab

<pre><code>for (int i = 0; i &lt; 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);}
</code></pre>

blocks|key|2892766|text|实际上，我已经找到了一种更优雅的方法(IMO)来实现这一点，甚至不使用自定义布局，而只是使用当前的默认布局。每个选项卡布局项目实际上都是一个垂直LinearLayout，第一个项目是ImageView，第二个项目是TextView。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2892767|因此，该方法包括将选项卡的LinearLayout方向更改为水平方向。之后，图标将定位在左侧。现在，如果你想把它放在右边，你可以移除ImageView+(这是第一项)并将它添加到LinearLayout中，它将作为最后一个元素被添加到TextView的末尾，但是为了正确地对齐和调整大小，你必须使用布局参数。|2892768|因此，无需在LinearLayout的末尾重新添加ImageView，只需将可绘制对象作为复合可绘制对象添加到TextView中即可。在其中添加一些填充，然后就可以了。|2892769|LinearLayout+tabItemLayout+=+(LinearLayout)((LinearLayout)tabLayout.getChildAt(0)).getChildAt(tabIndex);
tabItemLayout.setOrientation(LinearLayout.HORIZONTAL);
ImageView+iconView+=+(ImageView)+tabItemLayout.getChildAt(0);
TextView+textView+=+(TextView)+tabItemLayout.getChildAt(1);
//+remove+the+icon+view
tabItemLayout.removeView(iconView);
//+add+the+icon+as+compound+drawable
textView.setCompoundDrawablesWithIntrinsicBounds(null,+null,+iconView.getDrawable(),+null);
//+set+some+padding
float+DP+=+Resources.getSystem().getDisplayMetrics().density;
int+padding+=+(int)(10+*+DP);
textView.setCompoundDrawablePadding(padding);|code-block|syntax|javascript|2892770|使用这种方法，我们不需要自定义布局，也不需要膨胀任何东西，我们只需要重用现有的视图。|2892771|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|Q|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|R|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

Actually, I have found a more elegant way (IMO) to do this without even using custom layouts, and just using the current default layout for tablayouts. Each tab layout item is in fact a Vertical LinearLayout, with the 1st item being an ImageView, and the 2nd item the TextView.

So the method consists of changing the tab's LinearLayout orientation to Horizontal. After that, the icon will be positioned on the left. Now, if you want to position it on the right, you can remove the ImageView (which is the 1st item) and add it to the LinearLayout, it will be added as the last element so positioned at the end of the TextView, but you will have to play around with the layout params in order to display it aligned and sized correctly.

So instead of re-adding the ImageView at the end of the LinearLayout, you can just add the drawable as a compound drawable to the TextView. add a little padding to it, and voila.

<pre><code>LinearLayout tabItemLayout = (LinearLayout)((LinearLayout)tabLayout.getChildAt(0)).getChildAt(tabIndex);
tabItemLayout.setOrientation(LinearLayout.HORIZONTAL);
ImageView iconView = (ImageView) tabItemLayout.getChildAt(0);
TextView textView = (TextView) tabItemLayout.getChildAt(1);
// remove the icon view
tabItemLayout.removeView(iconView);
// add the icon as compound drawable
textView.setCompoundDrawablesWithIntrinsicBounds(null, null, iconView.getDrawable(), null);
// set some padding
float DP = Resources.getSystem().getDisplayMetrics().density;
int padding = (int)(10 * DP);
textView.setCompoundDrawablePadding(padding);
</code></pre>

With this method, we don't need a custom layout and don't need to inflate anything, we just re-use the existing views.

blocks|key|2892806|text|我有你们想要的确切的解决方案。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2892807|<android.support.design.widget.TabLayout
++++android:id="@%2Bid/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">|code-block|syntax|javascript|2892808|​|2892809|使用下面的属性，你可以达到预期的效果。|2892810|app:tabInlineLabel="true“|2892811|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

I have exact solution which you guys want.

<pre><code>&lt;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"&gt;
</code></pre>



Using below property you can achive desire result.

app:tabInlineLabel="true"

I'm pretty new to android development. So bear with me.

I've been trying to align the icon and text in same line in com.android.support:design:23.1.0 for a day.

Apparently in com.android.support:design:23.1.0 they've changed the default icon position to top and text on the bottom.

Previously in com.android.support:design:23.0.1 the default was the icon on left and text in same line as the icon

So here's an easy way to solve it (though it might have drawbacks, idk tbh):

<pre><code>change the version in your app's build.gradle. ex: 23.1.0 to 23.0.1 and build.
</code></pre>

And there's a better way to do it (this way you can also align icons on left,right,top,bottom):

<ol>
<li>create a custom_tab.xml in res/layout</li>
</ol>

<pre class="lang-xml prettyprint-override"><code>&lt;TextView xmlns:android="http://schemas.android.com/apk/res/android"
 android:id="@+id/tab"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:textAlignment="center"/&gt;
</code></pre>

2. in your activity java

<pre class="lang-java prettyprint-override"><code>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);
</code></pre>

So far I've achieved to make icons appear on any side like this:

<a href="https://i.stack.imgur.com/NcWf6.png"><img src="https://i.stack.imgur.com/NcWf6.png" alt="TabLayout icons"></a>

PS: setCompoundDrawablesWithIntrinsicBounds function arguments are 4 side icons like this:


<pre><code>setCompoundDrawablesWithIntrinsicBounds(leftDrawable, topDrawable, rightDrawable, bottomDrawable)
</code></pre>

Changing TabLayout icons on left, top, right or bottom in com.android.support:design:23.1.0

我是android开发的新手。所以请耐心听我说。我已经尝试在com.android.support:design:23.1.0中将图标和文本在同一行中对齐一天了。显然，在com.android.support:design:23.1.0中，他们已经将默认的图标位置改为顶部和底部的文本。在以前的com.android.s...

问在com.android.support中更改左上右下的设计图标。支持: TabLayout :23.1.0
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在com.android.support中更改左上右下的设计图标。支持: TabLayout :23.1.0EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在com.android.support中更改左上右下的设计图标。支持: TabLayout :23.1.0
EN