So I was able to successfully modify what my text tabs look like by using the following code, and it looks as expected on most devices including my Nexus
Styles:
<style name="AppTabLayout" parent="Widget.Design.TabLayout">
<item name="tabIndicatorColor">#color/white</item>
<item name="android:background">#color/colorPrimary</item>
<item name="tabSelectedTextColor">#color/white</item>
<item name="tabTextColor">#color/whiteTransparent</item>
</style>
<style name="TabTextStyle" parent="TextAppearance.AppCompat.Widget.ActionMode.Title.Inverse">
<item name="android:textSize">14sp</item>
<item name="android:textAllCaps">true</item>
</style>
Layout:
<android.support.design.widget.TabLayout
android:id="#+id/toolbar_tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="top"
app:tabTextAppearance="#style/TabTextStyle"
style="#style/AppTabLayout">
</android.support.design.widget.TabLayout>
The problem is that on Samsung devices (S5 and S7 have been tested) the sizes appear to be overwritten so that they expand or shrink based on the length of text in the tab - i.e. short strings are made larger to filler the space.
I've seen no mention of this anywhere and can't seem to make the device respect my choice to set the text to the same size no matter the length of the tab title.
Any advice on how to stop Samsungs doing this?
In Samsung phones there is an option called font size change in settings.
Always use dp instead of sp so that text size is set based on density pixel.
ur value in dp
u can check the same by playing around font size change in settings of ur samsumg phone
Related
Please see below images from same phone. Whenever I click anywhere in app it change tab title in app.
Why this strange thing happnes. It only in one device (Samsung J2 2018)
Edit1:
Real issue is, it is not displaying different. In same device when I change tab it displays like image2 and Again if I tap somewhere It displays like Image1.
If I touch anything on screen It changes from Image1 to Image2 and vice versa.
Edit2
If I does not define textsize or If define it 14sp then and only fluctuation occurs.
You have to set small Text Size for small devices,
styles.xml
<style name="customTabLayout" parent="Widget.Design.TabLayout">
<item name="tabTextAppearance">#style/AppTabTextAppearance</item>
</style>
<style name="AppTabTextAppearance" parent="TextAppearance.Design.Tab">
<item name="android:textSize">12sp</item>
</style>
TabLayout
<android.support.design.widget.TabLayout
style="#style/customTabLayout"
app:tabTextAppearance="#style/AppTabTextAppearance"
android:layout_width="match_parent"
.... />
I cannot send comment so I had to answer
if it will change from image1 to image2 by touching anything on screen I think by changing focus to another view it will be fixed
just use "focusable"="true" in layout and in code call view.requestFocus()
you had to call view.requestFocus() every time tab is changing
I'm using android support library BottomNavigationView , it looks very bad in some versions of android .
this is my code :
<android.support.design.widget.BottomNavigationView
android:id="#+id/navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="#fff"
app:theme="#style/mydrawer"
app:itemIconTint="#drawable/selector"
app:itemTextColor="#drawable/selector"
app:menu="#menu/bottom_navigation_items" />
in styles :
<style name="mydrawer">
<item name="android:textSize">14sp</item>
</style>
it looks good in my phone with android 6 but it look very bad on most of the phones , like this:
as you can see, the text size in enormous
how can I fix this ?
You specify one text size value for all devices:
<style name="mydrawer">
<item name="android:textSize">14sp</item>
</style>
Instead of 14sp , you should specify value from dimens
<style name="mydrawer">
<item name="android:textSize">#dimen/bottom_bar_item_text_size</item>
</style>
Create dimens.xml files for different screen sizes. You should create dimens.xml file for each screen size :
normal
large
xlarge
there are more of those, but those 3 are most common.
<dimen name="bottom_bar_item_text_size">14sp</dimen>
Your dimens.xml files will look like that :
Hope that helps
You can use Bottom Navigation ViewEx for more customization and better appearence , usage is similar to that of normal view
check out the github
I have an android app where I have set the text and background colours as follows in the theme in styles.xml:
<style name="MyAppTheme" parent="Theme.AppCompat.Light">
<item name="colorPrimary">#28abe3</item>
<item name="colorPrimaryDark">#0f92ca</item>
<item name="colorAccent">#0f92ca</item>
<item name="android:textColor">#8a000000</item>
<item name="android:textColorPrimary">#de000000</item>
<item name="android:colorBackground">#fffafafa</item>
<item name="android:textColorSecondary">#8a000000</item>
<item name="android:textColorTertiary">#8a000000</item>
</style>
This works great on every device I can find to test it on. However, I have some users running the app on a Samsung Galaxy Tab 4, who are reporting that some of the text views are showing text in a very light shade of grey, almost indistinguishable from the background, instead of the very dark grey specified through the theme. This doesn't affect every TextView in the app, but an example one is shown below:
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Text Here"
android:id="#+id/problematicTextView"
android:layout_weight="1"
android:minHeight="25dp"
style="#android:style/TextAppearance.DeviceDefault.Medium" />
I've tried everything I can think of short of buying a Galaxy Tab 4 to debug this by trial and error, but to no avail. The only distinguishing feature between TextView that appear with the correct dark grey text as opposed to those which appear in the very light grey color is the line:
style="#android:style/TextAppearance.DeviceDefault.Medium"
The ones which work correctly have:
style="#android:style/TextAppearance.DeviceDefault.Small"
but as I understand it, this is only meant to affect the text size rather than color.
What am I missing to style the TextView text colors correctly in a way that works on all devices (targeting API level 16+)?
If you want a consistent theme across all devices, you should avoid using any DeviceDefault styles as those are the ones customized by individual manufacturers.
I'd instead suggest using one of the AppCompat TextAppearance styles such as Theme.AppCompat.Medium.
I'm developing an application that needs to be compatible with Android 2.2+ it's using ActionBarSherlock to customize the ActionBar on pre-ICS devices.
I'm facing a problem only on 2.2 and 2.3 devices that makes the content of the ActionBar overflow even though the content fits the device screen. Something like this:
I've already tested (on the emulator) the device screen size (mdpi on 320x480) runnning Android 4.0 and it works fine, so I believe that problem is something related to the ActionBarSherlock.
I'm also tried drastically reducing my icon files, but it even though the images were smaller, the content was still overflowing.
Here is my styles.xml file:
<style name="AppBaseTheme" parent="Theme.Sherlock.Light.DarkActionBar">
</style>
<style name="AppTheme" parent="AppBaseTheme">
<item name="actionBarStyle">#style/AppBaseTheme.ActionBarStyle</item>
<item name="actionBarTabStyle">#style/AppBaseTheme.ActionBarTabStyle</item>
<item name="actionBarTabBarStyle">#style/AppBaseTheme.ActionBarTabBarStyle</item>
</style>
<style name="AppBaseTheme.ActionBarStyle" parent="Widget.Sherlock.Light.ActionBar.Solid.Inverse">
<item name="background">#drawable/action_bar_background</item>
<item name="android:background">#drawable/action_bar_background</item>
</style>
<style name="AppBaseTheme.ActionBarTabStyle" parent="Widget.Sherlock.Light.ActionBar.TabView.Inverse">
<item name="background">#android:color/transparent</item>
<item name="android:background">#android:color/transparent</item>
<item name="android:paddingLeft">0dip</item>
<item name="android:paddingRight">0dip</item>
</style>
<style name="AppBaseTheme.ActionBarTabBarStyle" parent="Widget.Sherlock.Light.ActionBar.TabBar.Inverse">
<item name="background">#drawable/action_bar_tab_divider</item>
<item name="android:background">#drawable/action_bar_tab_divider</item>
<item name="divider">#drawable/sp</item>
<item name="android:divider">#drawable/sp</item>
</style>
The file #drawable/action_bar_background is 320px wide and both #drawable/action_bar_tab_divider and #drawable/sp are 1px wide.
And here is the code for creating the tabs on my main activity:
ActionBar actionBar = super.getSupportActionBar();
actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
this.createTab(actionBar, R.drawable.action_bar_tab_home_off);
this.createTab(actionBar, R.drawable.action_bar_tab_news_off);
this.createTab(actionBar, R.drawable.action_bar_tab_videos_off);
this.createTab(actionBar, R.drawable.action_bar_tab_guide_off);
private void createTab(ActionBar actionBar, int resource) {
Tab t = actionBar.newTab();
t.setTabListener(this);
t.setIcon(resource);
actionBar.addTab(t);
}
Any ideas?
One of the problems is that the Action View "Tab Bar" automatically scales images to a predetermined size, so even if you make the icon super large or super small it should fill roughly the same space in the action bar.
The TabBar/TabView was also designed to overflow, which you have already found ^.^ It's for apps that open up 10 to 20 different tabs at a time, the user can scroll through the list of them. Not only that but the tab view is difficult to work with for using a fixed, non scrolling list of icons, simply because Android devices come in all shapes and sizes.
Two options that might suite what you are looking for. Create your own RelativeLayout or LinearLayout with the icons inside of the layout. This way you get to choose the size of the action bar every time =) You can have the bar dock either on the top or bottom of any Activity.
If this isn't an option you may be able to add the icons onto the top ActionBar menu itself which doesn't do scrolling. However your icons might not all fit on the main ActionBar which would cause any overflowing icons to get placed into the overflow menu dropdown. =(
To remove the divider spacing between tabs save the following code as a new xml file in your drawable folder such as dividerdrawable.xml:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="line" >
<size
android:width="0px"
android:color="#android:color/black"
android:dashWidth="0px"
android:dashGap="0px" />
</shape>
and then use that drawable for your tab divider.
<item name="divider">#drawable/dividerdrawable</item>
I have a simple EditText field that shows a user's phone number on a login page. After initial login the phone number field is disabled.
This looks great on almost all of my devices (this screenshot is from a Samsung Galaxy S):
However, on my LG Nitro the text in the disabled EditText field is unreadable (I can just about see the white text if I zoom in on a high res screenshot):
I removed all my custom style rules from the EditText and the same problem occurs, so I think this is just a bad choice of system default colors for the phone.
Question 1: Can anybody confirm if my diagnosis is correct?
The only way I could make the text readable was to set the text to dark grey in code:
if (fieldDisabled)
{
// Some devices use their own default style for a disabled text field,
// which makes it impossible to read its text, e.g. the LG Nitro.
//
// The workaround is to override the text color here.
mPhoneNumber.setTextColor(Color.DKGRAY);
}
Afterwards the text was easy to read on all devices (including the LG Nitro):
I to set my custom style to use #color/black instead of the existing color, but the text was still shown as white.
Question 2: Is there a better workaround I can use?
My LG Nitro is model LG-P930 running OS 2.3.5.
My XML
Below are snippets of the XML I am using.
res/layout/myscreen.xml:
<EditText
...
android:textAppearance="#style/MyStyle">
</EditText>
res/values/styles.xml:
<style name="MyStyle">
<item name="android:textSize">14dp</item>
<item name="android:textColor">#color/blue</item>
</style>
res/values/colors.xml:
<color name="white">#ffffffff</color>
<color name="blue">#ff0000ff</color>
<color name="black">#ff000000</color>
I figured out how to change the color of the EditText text.
Using android:textAppearance does not appear to allow you to change the color of the text in an EditText (it does let you change the text size).
One alternative is to use the style attribute instead of android:textAppearance, as that will apply the text color changes, e.g.
style="#style/MyStyle"
However, I think the best solution is to use a ColorStateList. Below is my solution.
res/layout/myscreen.xml (still need textAppearance to control the text size):
<EditText
...
android:textColor="#color/edittext"
android:textAppearance="#style/MyStyle">
</EditText>
res/color/edittext.xml:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_enabled="true" android:color="#color/black" />
<item android:state_enabled="false" android:color="#color/grey" />
</selector>
res/values/styles.xml (i.e. make MyStyle only define text size, not color):
<style name="MyStyle">
<item name="android:textSize">14dp</item>
</style>