TextInputLayout box stroke not showing when TextInputEditText is empty
![TextInputLayout when TextInputEditText is empty][1]
After typing some text is works
![TextInputLayout when TextInputEditText is not empty][2]
My XML code
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/til_login_email"
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:background="#color/transparent"
android:hint="#string/email"
app:boxCornerRadiusBottomStart="16dp"
app:boxCornerRadiusTopEnd="16dp"
app:boxStrokeColor="#color/kPrimaryDarkColor"
app:boxStrokeErrorColor="#color/red_primary"
app:boxStrokeWidthFocused="2dp"
app:errorEnabled="true"
app:helperText="example#example.com"
app:helperTextEnabled="true"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/image_login_app_logo">
<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:layout_height="match_parent"
android:inputType="textEmailAddress"
android:text="#={userModel.email}" />
</com.google.android.material.textfield.TextInputLayout>
theme.xml
<resources xmlns:tools="http://schemas.android.com/tools">
<!-- Base application theme. -->
<style name="Theme.JayaMaaManakamanaDental" parent="Theme.MaterialComponents.DayNight.NoActionBar">
<!-- Primary brand color. -->
<item name="colorPrimary">#color/kPrimaryColor</item>
<item name="colorPrimaryVariant">#color/kPrimaryDarkColor</item>
<item name="colorOnPrimary">#color/kPrimaryLightColor</item>
<!-- Secondary brand color. -->
<item name="colorSecondary">#color/teal_200</item>
<item name="colorSecondaryVariant">#color/teal_700</item>
<item name="colorOnSecondary">#color/black</item>
<!-- Status bar color. -->
<item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimary</item>
<!-- Customize your theme here. -->
<item name="android:textColor">#color/black</item>
<item name="android:background">?attr/colorOnPrimary</item>
</style>
</resources>
Color.xml
<color name="kPrimaryColor">#147EDB</color>
<color name="kPrimaryDarkColor">#134185</color>
<color name="kPrimaryLightColor">#DEEEF8</color>
<color name="kButtonColor">#D66D67</color>
Related
I have some very short text input (like only 2 numeric characters) yet using the endIcon will hog half of my textview and will cut off and display ellipses. I cannot make the TextInputLayout wider so I how can I display the full 2 characters (or more) while using endIconDrawable?
<com.google.android.material.textfield.TextInputLayout
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense.ExposedDropdownMenu"
android:layout_width="80dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_height="40dp"
android:background="#drawable/text_input_assessment"
app:boxStrokeWidth="0dp"
app:boxStrokeWidthFocused="0dp"
app:endIconDrawable="#drawable/ptx_down_arrow_android"
app:endIconTint="#color/colorPtxDarkBlue">
<com.google.android.material.textfield.MaterialAutoCompleteTextView
android:id="#+id/dropdownDay"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#null"
android:fontFamily="#font/truenorg"
android:textSize="15sp"
app:autoSizeTextType="uniform"
app:autoSizeMinTextSize="10sp"
app:autoSizeMaxTextSize="15sp"
app:autoSizeStepGranularity="1sp"
android:inputType="none"
android:maxLines="1"
android:paddingTop="10dp"
android:paddingBottom="10dp"
android:singleLine="true"
android:text="12"
android:textAlignment="viewStart"
android:textColor="#color/colorPtxDarkBlue"
tools:ignore="LabelFor" />
</com.google.android.material.textfield.TextInputLayout>
It is a workaround, not a final solution.
You can reduce the padding between the text and endIcon by adding a negative value in android:drawablePadding.
Something like:
<com.google.android.material.textfield.MaterialAutoCompleteTextView
android:id="#+id/dropdownDay"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="8dp"
android:paddingBottom="8dp"
android:drawablePadding="-12dp"
../>
A final note. You don't need to use android:background="#drawable/text_input_assessment" to have rounded corners. Just add app:shapeAppearanceOverlay="#style/ShapeAppearanceOverlay.Rounded" in the TextInputLayout with:
<style name="ShapeAppearanceOverlay.Rounded" parent="">
<item name="cornerSize">50%</item>
</style
You've defined a style for it already
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense.ExposedDropdownMenu"
So, the above line will add the dropdown icon automatically. I think you'll need to remove this line
app:endIconDrawable="#drawable/ptx_down_arrow_android"
Maybe the above line is overlapping the default icon
Then if you want to set tint to the drawable, just create a custom style
<style name="CustomAutoCompleteLayout" parent="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense.ExposedDropdownMenu">
<item name="endIconTint">#color/colorPtxDarkBlue</item>
</style>
And you add this two lines if you like
style="#style/CustomAutoCompleteLayout"
android:theme="#style/CustomAutoCompleteLayout"
Also i suggest that you remove this line and add it to the com.google.android.material.textfield.TextInputLayout instead.
android:paddingTop="10dp"
android:paddingBottom="10dp
Okay, i created this just now after 2hours and it worked very fine for me..
styles.xml
<style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
<item name="colorPrimary">#color/colorPrimary</item>
<item name="backgroundTint">#android:color/white</item>
<item name="colorPrimaryVariant">#color/colorPrimaryDark</item>
<item name="colorOnPrimary">#color/white</item>
<!-- Secondary brand color. -->
<item name="colorSecondary">#color/colorSecondary</item>
<item name="colorSecondaryVariant">#color/colorSecondaryVariant</item>
<item name="colorOnSecondary">#color/white</item>
<item name="android:textColor">#android:color/black</item>
<item name="button_textcolor">#android:color/black</item>
<item name="android:textColorPrimary">#android:color/black</item>
<!-- Status bar color. -->
<item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
<!-- Customize your theme here. -->
</style>
Don't worry about the constans e.g #color/colorPrimary. What matters is the parent theme.
Remember to use this below as your parent theme for AppTheme in android_manifest.xml since you've added style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense.ExposedDropdownMenu to <com.google.android.material.textfield.TextInputLayout else app crashes
parent="Theme.MaterialComponents.Light.NoActionBar">
Then add this to styles.xml also
<style name="AppTheme.MaterialTextInputExposed" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense.ExposedDropdownMenu">
<item name="hintTextColor">#color/colorSecondary</item>
<item name="boxStrokeColor">#color/colorSecondary</item>
<item name="boxStrokeErrorColor">#android:color/holo_red_dark</item>
<item name="errorTextColor">#android:color/holo_red_dark</item>
<item name="boxStrokeWidth">#dimen/_2dp</item>
<item name="boxCornerRadiusBottomEnd">#dimen/_6dp</item>
<item name="boxCornerRadiusBottomStart">#dimen/_6dp</item>
<item name="boxCornerRadiusTopStart">#dimen/_6dp</item>
<item name="boxCornerRadiusTopEnd">#dimen/_6dp</item>
<item name="colorControlActivated">#color/colorSecondary</item>
<item name="android:textColor">#android:color/black</item>
<item name="button_textcolor">#android:color/black</item>
<item name="endIconTint">#color/spinner</item>
</style>
You can now modify your activity_main.xml
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/choose_admission_mode"
style="#style/AppTheme.MaterialTextInputExposed"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/_10dp"
android:theme="#style/AppTheme.MaterialTextInputExposed"
app:hintEnabled="true"
app:layout_constraintBottom_toTopOf="#id/choose_faculty"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/choose_program">
<AutoCompleteTextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="start"
android:imeOptions="actionNext"
android:inputType="text"
android:textSize="#dimen/_18sp"
</com.google.android.material.textfield.TextInputLayout>
I Changed the below line but it's not necessary. You just need to be careful with the padding and remember #dimen/_6dp has value of 6dp and #dimen/_2dp has value of 2dp
<com.google.android.material.textfield.MaterialAutoCompleteTextView
to
<AutoCompleteTextView
When I assign a button to android:background="#color/white", the button disappears behind the round corners, I know, it's related to android:background="#color/white", how do I solve this problem? how to change color and make rounded corners?
Theme
<resources xmlns:tools="schemas.android.com/tools"
xmlns:app="schemas.android.com/apk/res-auto">
<!-- Base application theme. -->
<style name="Theme.SnapChat"
parent="Theme.MaterialComponents.DayNight.DarkActionBar">
<item name="android:background">#color/white</item>
<item name="android:text">#string/button1</item>
<item name="android:textSize">14sp</item>
<item name="android:gravity">center|center_vertical</item>
<item name="strokeColor">#color/yellow</item>
</style>
</resources>
Code
<com.google.android.material.button.MaterialButton
android:id="#+id/button1"
android:layout_width="128dp"
android:layout_height="36dp"
android:layout_alignParentStart="true"
android:layout_alignParentBottom="true"
android:layout_marginStart="66dp"
android:layout_marginBottom="45dp"
android:style="#style/Theme.SnapChat"
app:cornerRadius="100dp"
/>
You should use
app:backgroundTint="#color/white"
I have put an edit text which has a tint color as white. But it looks black in android above 4.0 devices till lollipop.
I searched for this and got solutions as apply background color as white.
But I have another layout from which the edit text belongs which has dark blue color, so if I apply background color as white whole edit text looks white on that dark blue layout.
What can I do for this now?
Layout :
<RelativeLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#drawable/purple_bg"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="false"
android:layout_alignParentStart="true"
android:id="#+id/linearLayout"
android:weightSum="1">
<EditText
android:layout_width="match_parent"
android:layout_height="42dp"
android:id="#+id/editTextOrderItem"
android:layout_gravity="center_vertical"
android:backgroundTint="#ffffff"
android:drawableTint="#ffffff"
android:hint="Type here..."
android:textColorHint="#ffffff"
android:paddingLeft="15dp"
android:imeOptions="actionDone"
android:textSize="12sp"
android:layout_marginLeft="#dimen/activity_horizontal_margin"
android:layout_centerVertical="true"
android:textColor="#ffffff"
android:layout_toLeftOf="#+id/imageViewSearch"
android:layout_toStartOf="#+id/imageViewSearch"
android:singleLine="true" />
<ImageView
android:layout_width="40dp"
android:layout_height="40dp"
android:id="#+id/imageViewSearch"
android:backgroundTint="#android:color/white"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:layout_gravity="center"
android:src="#drawable/btn_search"
android:layout_centerVertical="true"
android:padding="10dp"
android:layout_marginRight="06dp" />
</RelativeLayout>
color.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="colorPrimary">#ffffff</color>
<color name="colorPrimaryDark">#eeeeee</color>
<color name="colorAccent">#3e3e3e</color>
<color name="black">#747474</color>
<color name="drawerBacground">#e6f7fd</color>
<color name="themetextcolor">#009688</color>
<color name="darktextcolor">#000000</color>
<color name="lighttextcolor">#ACABAC</color>
<color name="activity_bg_color">#D9E7E4</color>
<color name="activity_footer_color">#37b0a0</color>
<color name="btn_text">#b3ffffff</color>
<color name="seperator">#dedede</color>
<color name="accent">#00B0FF</color>
</resources>
Please help, thank you..
EDIT:
I tried to add new theme and put it in activity in manifest, but did not help.
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/black</item>
<item name="colorAccent">#color/accent</item>
<item name="android:typeface">monospace</item>
<item name="android:textSize">17sp</item>
</style>
<style name="AppTheme2" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="android:typeface">monospace</item>
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorPrimary</item>
</style>
<style name="AppTheme1" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="android:typeface">monospace</item>
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/accent</item>
</style>
<style name="AppTheme.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />
<style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />
Manifest :
<activity android:name=".Activities.MainActivity"
android:theme="#style/AppTheme2"
/>
Create a drawable resource xml file (your requirement is only to have a bottom stroke)
Set givendrawable as the background of the editText then you can add the background color you need + bottom line you need with a color
Explain:
This is a resource drawable
dashGap & dashWidth is for doted/broken lines (remove them if you do not need dashes)
android:top -> you can give minus sizes to the views that you don't need to display.(here your requirement is to show only bottom line so top,right & left lines of the item has given -2dp )
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle" >
<solid android:color="#FFF" /> <-- background color here
</shape>
</item>
<item android:top="-2dp" android:right="-2dp" android:left="-2dp">
<shape>
<solid android:color="#android:color/transparent" />
<stroke
android:dashGap="10px"
android:dashWidth="10px"
android:width="1dp"
android:color="#ababb2" <-- bottom line color here />
</shape>
</item>
</layer-list>
you can set different different color accent at activity in your manifest file.
<color name="colorAccent">#FFFFFF</color>
I'm trying to make an activity where user can choose a color from the buttons, after clicking one of it the entire application's layouts change base on the value of the button. I'm sorry I just started android programming already a week now, noob here.
Here is my code in theme_layout
<?xml version="1.0" encoding="utf-8"?>
`<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="#618685"
android:id="#+id/relative"
tools:Context="com.majimechibireminder2.Themes" >
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="26dp"
android:text="#string/save" />
<ScrollView
android:id="#+id/scrollView1"
android:layout_width="260dp"
android:layout_height="280dp"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:fillViewport="false"
android:orientation="vertical"
android:padding="10dp" >
<TableLayout
android:layout_width="match_parent"
android:layout_height="395dp"
android:background="#618685" >
<Button
android:id="#+id/colorBlue"
android:layout_width="fill_parent"
android:layout_height="50dp"
android:background="#4d4dff" />
<Button
android:id="#+id/colorPurple"
android:layout_width="fill_parent"
android:layout_height="50dp"
android:background="#d11aff" />
<Button
android:id="#+id/colorPink"
android:layout_width="fill_parent"
android:layout_height="50dp"
android:background="#ff4dc4" />
<Button
android:id="#+id/colorRed"
android:layout_width="fill_parent"
android:layout_height="50dp"
android:background="#ff0000" />
<Button
android:id="#+id/colorYellow"
android:layout_width="fill_parent"
android:layout_height="50dp"
android:background="#ffff00" />
<Button
android:id="#+id/colorOrange"
android:layout_width="fill_parent"
android:layout_height="50dp"
android:background="#ffaa00" />
<Button
android:id="#+id/colorGreen"
android:layout_width="fill_parent"
android:layout_height="50dp"
android:background="#5cd65c" />
</TableLayout>
</ScrollView>
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/scrollView1"
android:layout_alignLeft="#+id/scrollView1"
android:layout_marginBottom="24dp"
android:text="#string/theme_color"
android:textAppearance="?android:attr/textAppearanceLarge" />
</RelativeLayout>
Recent code in my java class
// TODO Auto-generated method stub
super.onCreate(savedInstanceState);
relLayout = (View) findViewById(R.id.relative_theme);
SharedPreferences preferences = getSharedPreferences("MY_APP",MODE_PRIVATE);
setTheme(preferences.getInt("MY_CURRENT_THEME",R.style.AppTheme));
setContentView(R.layout.theme_layout);
findViewById(R.id.colorBlue).setOnClickListener(this);
findViewById(R.id.colorGreen).setOnClickListener(this);
findViewById(R.id.colorOrange).setOnClickListener(this);
findViewById(R.id.colorPink).setOnClickListener(this);
findViewById(R.id.colorPurple).setOnClickListener(this);
findViewById(R.id.colorRed).setOnClickListener(this);
findViewById(R.id.colorYellow).setOnClickListener(this);
}
#Override
public void onClick(View v) {
// TODO Auto-generated method stub
switch (v.getId()){
case R.id.colorRed:
preferences.edit().putInt("MY_CURRENT_THEME",R.style.red_theme).commit();
finish(); startActivity(getIntent());
break;
}
}
}
Changing entire application colors or themes requires a configuration changes of the application. Initially We need to create a list of styles depending on your no of colors in your app. So in your styles.xml update the code like below and make changes accordingly for your app needs.
<!-- Base application theme. -->
<style name="red_theme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/redprimary</item>
<item name="colorPrimaryDark">#color/redprimary_dark</item>
<item name="colorAccent">#color/redaccent</item>
<item name="android:textColorPrimary">#color/redprimary_text</item>
<item name="android:textColorSecondary">#color/redsecondary_text</item>
<item name="android:windowBackground">#color/windowBackground</item>
<item name="android:navigationBarColor">#color/navigationColor</item>
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
<item name="themedMenuMailDrawable">#drawable/ic_menu_camera</item>
</style>
<style name="brown_theme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/brownprimary</item>
<item name="colorPrimaryDark">#color/brownprimary_dark</item>
<item name="colorAccent">#color/brownaccent</item>
<item name="android:textColorPrimary">#color/brownprimary_text</item>
<item name="android:textColorSecondary">#color/brownsecondary_text</item>
<item name="android:windowBackground">#color/windowBackground</item>
<item name="android:navigationBarColor">#color/navigationColor</item>
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
<item name="themedMenuMailDrawable">#drawable/ic_menu_manage</item>
</style>
<style name="yellow_theme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/yellowprimary</item>
<item name="colorPrimaryDark">#color/yellowprimary_dark</item>
<item name="colorAccent">#color/yellowaccent</item>
<item name="android:textColorPrimary">#color/yellowprimary_text</item>
<item name="android:textColorSecondary">#color/yellowsecondary_text</item>
<item name="android:windowBackground">#color/windowBackground</item>
<item name="android:navigationBarColor">#color/navigationColor</item>
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
<item name="themedMenuMailDrawable">#drawable/ic_menu_slideshow</item>
</style>
<style name="green_theme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/greenprimary</item>
<item name="colorPrimaryDark">#color/greenprimary_dark</item>
<item name="colorAccent">#color/greenaccent</item>
<item name="android:textColorPrimary">#color/greenprimary_text</item>
<item name="android:textColorSecondary">#color/greensecondary_text</item>
<item name="android:windowBackground">#color/windowBackground</item>
<item name="android:navigationBarColor">#color/navigationColor</item>
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
<item name="themedMenuMailDrawable">#drawable/ic_menu_gallery</item>
</style>
Since your styles require different colors so maintain them in colors.xml file
<?xml version="1.0" encoding="utf-8"?><resources>
<color name="windowBackground">#FFFFFF</color>
<color name="navigationColor">#000000</color>
<color name="colorAccent">#FF4081</color>
<color name="redprimary">#F44336</color>
<color name="redprimary_dark">#D32F2F</color>
<color name="redprimary_light">#FFCDD2</color>
<color name="redaccent">#FF4081</color>
<color name="redprimary_text">#212121</color>
<color name="redsecondary_text">#727272</color>
<color name="redicons">#FFFFFF</color>
<color name="reddivider">#B6B6B6</color>
<color name="brownprimary">#795548</color>
<color name="brownprimary_dark">#5D4037</color>
<color name="brownprimary_light">#D7CCC8</color>
<color name="brownaccent">#9E9E9E</color>
<color name="brownprimary_text">#212121</color>
<color name="brownsecondary_text">#727272</color>
<color name="brownicons">#FFFFFF</color>
<color name="browndivider">#B6B6B6</color>
<color name="greenprimary">#4CAF50</color>
<color name="greenprimary_dark">#388E3C</color>
<color name="greenprimary_light">#C8E6C9</color>
<color name="greenaccent">#FFC107</color>
<color name="greenprimary_text">#212121</color>
<color name="greensecondary_text">#727272</color>
<color name="greenicons">#FFFFFF</color>
<color name="greendivider">#B6B6B6</color>
<color name="yellowprimary">#FFEB3B</color>
<color name="yellowprimary_dark">#FBC02D</color>
<color name="yellowprimary_light">#FFF9C4</color>
<color name="yellowaccent">#448AFF</color>
<color name="yellowprimary_text">#212121</color>
<color name="yellowsecondary_text">#727272</color>
<color name="yellowicons">#212121</color>
<color name="yellowdivider">#B6B6B6</color>
We update all the activities with the below code to set the theme when user opens the activity. add before setting the layout //setContentView()
SharedPreferences preferences = getSharedPreferences("MY_APP",MODE_PRIVATE);setTheme(preferences.getInt("MY_CURRENT_THEME",R.style.default_theme));
So now when ever user clicks on different color button just set the new theme and update the app by calling finish and start activity respectively
preferences.edit().putInt("MY_CURRENT_THEME",R.style.new_theme).commit();
finish();
startActivity(getIntent());
I have created a theme for my application using this action bar style generator.
http://jgilfelt.github.io/android-actionbarstylegenerator/
I have set the tab colors to orange, but it's not affecting the tabs in my layout.
My layout looks the following.
<android.support.v4.app.FragmentTabHost 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:id="#android:id/tabhost" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<TabWidget
android:id="#android:id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0"
android:orientation="horizontal" />
<FrameLayout
android:id="#+id/tabFrameLayout"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
</LinearLayout>
</android.support.v4.app.FragmentTabHost>
Here are the other things I have in my style files and in the manifest file.
The Manifest file
android:theme="#style/Theme.Silence"
styles_silence.xml
<style name="Theme.Silence" parent="android:Theme.Holo.Light">
<item name="android:actionBarTabStyle">#style/ActionBarTabStyle.Silence</item>
...
</style>
...
<style name="ActionBarTabStyle.Silence" parent="#android:style/Widget.Holo.Light.ActionBar.TabView">
<item name="android:background">#drawable/tab_indicator_ab_silence</item>
</style>
tab_indicator_ab_silence.xml (this is generated by the program I linked earlier)
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Non focused states -->
<item android:state_focused="false" android:state_selected="false" android:state_pressed="false" android:drawable="#android:color/transparent" />
<item android:state_focused="false" android:state_selected="true" android:state_pressed="false" android:drawable="#drawable/tab_selected_silence" />
<!-- Focused states -->
<item android:state_focused="true" android:state_selected="false" android:state_pressed="false" android:drawable="#drawable/tab_unselected_focused_silence" />
<item android:state_focused="true" android:state_selected="true" android:state_pressed="false" android:drawable="#drawable/tab_selected_focused_silence" />
<!-- Pressed -->
<!-- Non focused states -->
<item android:state_focused="false" android:state_selected="false" android:state_pressed="true" android:drawable="#drawable/tab_unselected_pressed_silence" />
<item android:state_focused="false" android:state_selected="true" android:state_pressed="true" android:drawable="#drawable/tab_selected_pressed_silence" />
<!-- Focused states -->
<item android:state_focused="true" android:state_selected="false" android:state_pressed="true" android:drawable="#drawable/tab_unselected_pressed_silence" />
<item android:state_focused="true" android:state_selected="true" android:state_pressed="true" android:drawable="#drawable/tab_selected_pressed_silence" />
</selector>
I checked this document, and it seems to me that everything is alright. What could be wrong?
What could be wrong?
That tool generates the styles for the tabs present in the ActionBar, but you're using normal tabs(through the standard TabWidget) which have a different style associated with them. That style is represented in the theme by the tabWidgetStyle attribute which points to the style Widget.(Holo).TabWidget style.
Unfortunately through the Widget.TabWidget style of the theme you can't change the background(and neither the tab layout as the attribute which manages this is hidden) but you can do it manually by assigning a new layout as the tab indicator and placing your selector in there:
fragmentTabHost.addTab(fragmentTabHost.newTabSpec("tabText").setIndicator(buildTabLayout("tabText")), YourFragmentClass.class, null);
where buildTabLayout() is a method like this:
private View buildTabLayout(String tag) {
View tab = getLayoutInflater().inflate(R.layout.new_tab_layout, null);
return tab;
}
The layout is:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:background="#drawable/tab_indicator_ab_silence" // or you could have a style attribute
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center" android:text="simple"/>
Copy paste the following res/values-v14/styles.xml
<resources xmlns:android="http://schemas.android.com/apk/res/android">
<!--
Base application theme for API 14+. This theme completely replaces
AppBaseTheme from BOTH res/values/styles.xml and
res/values-v11/styles.xml on API 14+ devices.
-->
<style name="AppBaseTheme" parent="android:Theme.Holo.Light.DarkActionBar">
<!-- API 14 theme customizations can go here. -->
<item name="android:actionBarStyle">#style/MyActionBar</item><!-- your theme name -->
<item name="android:actionBarDivider">#null</item>
</style>
<!-- style for the action bar backgrounds -->
<style name="MyActionBar" parent="#android:style/Widget.Holo.ActionBar">
<item name="android:backgroundStacked">#drawable/tab_bar_bg</item> <!-- change your image -->
<item name="android:titleTextStyle">#style/MyActionBar.Text</item> <!-- to cusomize the font style on tab bar --.
</style>
<style name="MyActionBar.Text" parent="#android:style/TextAppearance">
<item name="android:textColor">#A3A3A3</item>
<item name="android:textSize">15sp</item>
</style>
</resources>
Change the default theme to your theme In AndroidManifest.xml
<application
android:theme="#style/AppTheme" >
----
----
</application>