I'm using PagerTabStrip in ViewPager to show the title of each page. Here is my XML code:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/bg">
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<android.support.v4.view.PagerTabStrip
android:id="#+id/pager_title_strip"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:background="#33b5e5"
android:textColor="#a4c639"
android:paddingTop="4dp"
android:paddingBottom="4dp" />
</android.support.v4.view.ViewPager>
</RelativeLayout>
I want to set the textStyle to bold in PagerTabStrip like this:
android:textStyle="bold". But this is not possible in PagerTabStrip. Seems like it has only textcolor property for text. What is the way by which I can set the style to bold?
What you need to do is create a style for the text, and then use the android:textAppearance attribute...
Perhaps something like this:
<style name="PagerTabStripText">
<item name="android:textSize">14sp</item>
<item name="android:textStyle">bold</item>
<item name="android:textColor">#a4c639</item>
</style>
And then in your PagerTabStrip XML do this:
<android.support.v4.view.PagerTabStrip
android:id="#+id/pager_title_strip"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:background="#33b5e5"
android:paddingTop="4dp"
android:paddingBottom="4dp"
android:textAppearance="#style/PagerTabStripText"/>
PagerTabStrip doesn't aceppts textAppearance.
Like #Justin said above, but on xml put:
style="#style/PagerTabStripText"
not:
android:textAppearance="#style/PagerTabStripText"
If you'd like to style the center tab title differently from the others, then you'll need to use reflection:
try {
final Class pagerTitleStripClass = PagerTitleStrip.class;
final Field mCurrTextField = pagerTitleStripClass.getDeclaredField("mCurrText");
mCurrTextField.setAccessible(true);
// mTitle is my class's PagerTabStrip member variable
final TextView mCurrText = (TextView) mCurrTextField.get(mTitle);
mCurrText.setTypeface(Typeface.DEFAULT_BOLD);
} catch (final Exception e) {
Log.w(TAG, "Exception when styling currently selected title!", e);
}
Unfortunately, this solution is subject to potentially not working anymore when updates for the Android Support Library are released (as that's where the PagerTitleStrip class is from). In particular, this code sample is working with revision 20.
Related
I've would like set to grey color(icons and text) but now is showing as white color.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:gravity="end">
<TextView
android:id="#+id/tv_toolbar_title"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:text="Titulo_ventana"/>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="end"
android:orientation="horizontal"
android:padding="10dp">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:elevation="#dimen/cardview_default_elevation">
<android.support.v7.widget.SearchView
android:id="#+id/mySearchview"
android:label="#string/app_name"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:theme="#style/Base.Widget.AppCompat.SearchView">
</android.support.v7.widget.SearchView>
</android.support.v7.widget.CardView>
</LinearLayout>
</LinearLayout>
I'd would like to reach something like this searchview within the toolbar and gray textcolor:
The left and right menu icons are optional.
The searchview is foldable by default, I don't mind if this feature should be changed.
The search view, that you want to achieve in fact is not a SearchView. It's a custom component. Here's the view tree that can be obtained using Hierarchy Viewer tool:
Here's the OverlaySearchPlateContainer:
As you can see from package name, it is shipped with Play Services, thus source code is not available.
Nevertheless, we can compare that tree with the tree of SearchView. Here's tree that can be obtained when ordinary SearchView is used:
Thus, you can see, that OverlaySearchPlateContainer is not a descendant of a SearchView, hence the UI you want to achieve cannot be accomplished using solely styles/themes.
I would recommend to not reinvent a wheel and to utilize 3rd party libraries, for example SearchBar-SearchView, where SearchView widget looks like this:
I have one solution its working fine in my application. You may try this.
EditText txtSearch = (EditText) searchView.findViewById(android.support.v7.appcompat.R.id.search_src_text);
txtSearch.setHint(getResources().getString(R.string.search));
txtSearch.setHintTextColor(Color.GRAY);
txtSearch.setTextColor(Color.GRAY);
You can set the background of search view
<android.support.v7.widget.SearchView
android:id="#+id/searchViewContact"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
app:searchIcon="#mipmap/icon_search"
app:closeIcon="#mipmap/icon_close"
android:background="#drawable/search_view_background"
android:layout_margin="5dp">
</android.support.v7.widget.SearchView>
search_view_background.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#dcdee1"/>
<stroke
android:color="#d7d3d3"
android:width="1dp"/>
<corners
android:radius="5dp"/>
</shape>
To change the text color, put this in your styles.xml:
<style name="MySearchView" parent="Base.Widget.AppCompat.SearchView">
<item name="android:editTextColor">#color/text_color</item>
<item name="android:textColorHint">#color/hint_color</item>
</style>
Replace #color/text_color and #color/hint_color to suit your needs.
And then change the SearchView theme attribute in your XML layout:
<android.support.v7.widget.SearchView
android:id="#+id/mySearchview"
android:label="#string/app_name"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:theme="#style/MySearchView">
</android.support.v7.widget.SearchView>
I have this custom layout because I want a ListView with TextView below it and I want to handle click on list items so dialog doesn't close. (AlertDialog will show its own message view above its ListView.)
<LinearLayout 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:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingStart="14dp"
android:paddingEnd="10dp"
>
<ListView
android:id="#+id/optionList"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:overScrollMode="never"
android:choiceMode="singleChoice"
android:divider="#null"
/>
<TextView
android:id="#+id/messageView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:padding="5dp"
/>
</LinearLayout>
I made a fake setup where I put text in both the dialog's TextView and my layout's. Screenshot of the result.
I even tried putting style="?android:attr/textAppearanceMedium" in #id/messageView in my layout since alert_dialog.xml has it. It made the text larger than the dialog's message. And the color doesn't match, too light (as if it's the Activity's default color).
I even tried using the builder's LayoutInflater, which is what the documentation says to do.
val infl = builder.context.getSystemService(Context.LAYOUT_INFLATER_SERVICE) as LayoutInflater
val view = infl.inflate(R.layout.dialog_report_profile, null)
builder.setView(view)
You can always put both style="?android:attr/textAppearanceMedium" AND android:color="#000" at your TextView.
Or, you can just add this to your res/styles.xml:
<style name="DialogMessageText" parent="#android:style/TextAppearance.Medium">
<item name="android:textColor">#android:color/black</item>
</style>
and put this line to your TextView: style="#style/DialogMessageText"
Here is my tab layout XML
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="#dimen/custom_tab_layout_height"
android:background="#color/tab_background_primary"
app:tabGravity="fill"
app:tabIndicatorColor="#color/primary_white"
app:tabIndicatorHeight="3dp"
app:tabMinWidth="120dp"
app:tabMode="scrollable"
app:tabPaddingStart="-1dp"
app:tabPaddingEnd="-1dp"
app:tabPaddingTop="1dp"
app:tabPaddingBottom="1dp"
/>
It is removing the horizontal padding in between tabs but not the tabPaddingTop and tabPaddingBottom.
How do I remove the top and bottom padding to make each tab match the tabLayout height?
Custom view for each tab
<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/tab"
android:textColor="#color/primary_white"
android:textSize="14sp"
android:textStyle="bold"
android:gravity="fill"
android:fontFamily="#string/font_fontFamily_medium"/>
I also tried using a Linear Layout with Imagview and Textview as custom view
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal" android:layout_width="match_parent"
android:gravity="fill"
android:layout_height="match_parent">
<ImageView
android:id="#+id/tab_logo"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:src="#mipmap/ic_settings_light"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:id="#+id/tab_title"
android:textColor="#color/primary_white"
android:textSize="14sp"
android:textStyle="bold"
android:gravity="center"
android:text="test"
android:fontFamily="#string/font_fontFamily_medium"/>
</LinearLayout>
And here is how I inflated the custom tab view (for custom view with textView)
TextView tabTwo = (TextView) LayoutInflater.from(this).inflate(R.layout.custom_tab, null);
tabTwo.setText("CASH IN");
tabTwo.setBackgroundColor(Color.parseColor("#EC5A0B"));
tabTwo.setCompoundDrawablesWithIntrinsicBounds(R.mipmap.ic_action_cash_light, 0, 0, 0);
tabLayout.getTabAt(1).setCustomView(tabTwo);
As you can see, I am trying to give different background color to each tab. But the padding at top and bottom is still there.
I think Android design library's TabLayout have default padding like what you can see here
The other recommendation that I can recommend to you is using Google IO's SlidingTabLayout (Don't forget to copy SlidingTabStrip too!)
The usage is simple, just include in your layout :
<com.myapp.ui.widget.SlidingTabLayout
android:id="#+id/main_view_pager_tab"
android:layout_width="match_parent"
android:layout_height="#dimen/tabs_height"
android:background="#color/white" />
and then in your activity set the viewpager and listener (if you want)
mainViewPagerTab.setViewPager(mainViewPager);
mainViewPagerTab.setOnPageChangeListener(onPageChangeListener);
This was the only solution
https://stackoverflow.com/a/37942842/5689605
Try the code, after adding your tabs to your tablayout.
final ViewGroup test = (ViewGroup)(tabs.getChildAt(0));//tabs is your Tablayout
int tabLen = test.getChildCount();
for (int i = 0; i < tabLen; i++) {
View v = test.getChildAt(i);
v.setPadding(0, 0, 0, 0);
}
I got the best solution for this issue, check the below code and this will helpful.
My tablayout XML is like this:
<RelativeLayout
android:layout_height="30dp"
android:background="#333333"
android:layout_width="match_parent">
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabTextAppearance="#style/MineCustomTabText"
style="#style/tab_bassr"
app:tabMode="scrollable"/>
</RelativeLayout>
the relative layout upon this will reduce the top and bottom margin
<style name="tab_bassr" parent="TextAppearance.Design.Tab">
<item name="android:layout_width">match_parent</item>
<item name="android:tabStripEnabled">false</item>
<item name="tabPaddingStart">5dp</item>
<item name="tabPaddingEnd">5dp</item>
</style>
<style name="MineCustomTabText" parent="TextAppearance.Design.Tab">
<item name="android:textSize">14sp</item>
</style>
The style file is for left and right padding and the text size.
I have an activity that shows extra space at the bottom even though I have no bottom padding applied. Style code, xml code, java code and a screenshot are below and the relevant json data is here:
http://lara.rufflecol.es/strollcharlton/strollcharlton_data_1_2.json
It isn't a huge issue it is just annoying! Have already tried to using android:fillViewport set as true or false but it doesn't seem to make any difference. Is the problem related to my json?
UsefulLinks.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?actionBarSize"
android:background="#color/dark_green"
android:minHeight="?attr/actionBarSize" />
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/toolbar"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="#+id/useful_links"
style="#style/UsefulLinksTextStyling"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="left" />
</LinearLayout>
</ScrollView>
</LinearLayout>
styles.xml
<style name="UsefulLinksTextStyling" parent="#android:style/TextAppearance.Medium">
<item name="android:textColor">#color/white</item>
<item name="android:textSize">#dimen/fifteen_size</item>
<item name="android:paddingTop">15dp</item>
<item name="android:paddingLeft">15dp</item>
<item name="android:paddingRight">15dp</item>
</style>
UsefulLinks.java
TextView usefulLinksIntroTextView = (TextView) findViewById(R.id.useful_links);
usefulLinksIntroTextView.setText(Html.fromHtml(data.getUsefulLinks()));
usefulLinksIntroTextView.setMovementMethod(LinkMovementMethod.getInstance());
Screenshot
ensure the html that you are setting to the textview does not having blank space inside of it
change your base LinearLayout to wrap_content so that if the html takes up less than the screen height you don't have "extra padding"
You can also turn on "show layout bounds" for your application, that way you will understand which View is giving you the "extra padding" http://tysmith.me/post/27035355999/layoutbounds combine it with the Hierarchy Viewer http://developer.android.com/tools/performance/hierarchy-viewer/index.html to work out which View is at fault
In the following layout
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark">
<TextView
android:id="#+id/name"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
TextView is not using themed text colors on pre-L devices. If I move this theme declaration to TextView it works on all devices. Chris Banes in his article wrote:
In 22.1.0 we now have expanded that functionality so that you can set
a theme on any view in your layouts.
https://chris.banes.me/2015/04/22/support-libraries-v22-1-0/
So I'm confused, bug?
EDIT:
I looked into Toolbar and Toolbar also seems to have this issue—the following layout doesn't work as intended too:
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
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"
android:background="?attr/colorPrimary"
android:minHeight="?attr/actionBarSize"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<TextView
android:layout_width="wrap_content"
android:text="####SDAG"
android:layout_height="wrap_content" />
</android.support.v7.widget.Toolbar>
I've found source of the problem. I was directly adding items to R.id.content. Like LayoutInflater.from(this).inflate(R.layout.my_activity, findViewById(R.id.content); instead of using setContentView method that does all the magic stuff. Unfortunately in documentation there is no word that you must use setContentXXX method.
With new version (v22.1) of support lib your activity should extend AppCompatActivity instead of ActionBarActivity you used to extend so far.
Here's Google devs' post: http://android-developers.blogspot.com/2015/04/android-support-library-221.html