I'm trying to create TabLayout and it looks like this.
And i want to make one more under line like this.
Here is my own yellow line and i want to make the black one, and when i change tabs yellow line change itself position. Maybe i need to do some background line, but i dont understand how to
XML:
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
style="#style/AppTabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:visibility="gone"
app:tabGravity="fill"
app:tabMaxWidth="0dp"
app:tabMode="fixed" />
<style name="AppTabLayout" parent="Widget.Design.TabLayout">
<item name="tabIndicatorColor">#color/visit_tabs_indicator</item>
<item name="tabIndicatorHeight">4dp</item>
<item name="tabPaddingStart">6dp</item>
<item name="tabPaddingEnd">6dp</item>
<item name="tabBackground">#android:color/white</item>
<item name="tabTextAppearance">#style/AppTabTextAppearance</item>
<item name="tabSelectedTextColor">#color/visit_tabs_text</item>
</style>
create background drawable which having bottom black line.
i.e tab_ract_border.xml
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle" >
<solid android:color="#ffffff" />
</shape>
</item>
<item android:top="-2dp" android:right="-2dp" android:left="-2dp">
<shape>
<solid android:color="#android:color/transparent" />
<stroke
android:width="2dp"
android:color="#000000" />
</shape>
</item>
</layer-list>
then apply this drawable to background of Tablayout
i.e app:tabBackground="#drawable/tab_ract_border"
<android.support.design.widget.TabLayout
android:id="#+id/content_main_tab_bar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#ffffff"
app:tabIndicatorColor="#F3CD84"
app:tabBackground="#drawable/tab_ract_border"
app:tabMode="scrollable"
app:tabSelectedTextColor="#color/colorAccent"
app:tabTextAppearance="#android:style/TextAppearance.Widget.TabWidget"
app:tabTextColor="#000000" />
njoe it will work for you :)
In you style.xml code:
<style name="AppTabLayout" parent="Widget.Design.TabLayout">
<item name="tabIndicatorColor">#color/visit_tabs_indicator</item>
<item name="tabIndicatorHeight">4dp</item>
<item name="tabPaddingStart">6dp</item>
<item name="tabPaddingEnd">6dp</item>
<item name="tabBackground">#drawable/myTabBackground</item>
<item name="tabTextAppearance">#style/AppTabTextAppearance</item>
<item name="tabSelectedTextColor">#color/visit_tabs_text</item>
</style>
Then create new xml resource file under Drawable folder: myTabBackground.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:drawable="#android:color/white"
android:state_selected="true"/>
<item android:drawable="#android:color/black"/>
</selector>
Hope that helps! :)
Related
Navigation drawer item highlight color exceeds over the radius of the corners when I select (long press/ hold down) the item.
<...NavigationView in activity_main.xml
<com.google.android.material.navigation.NavigationView
android:id="#+id/nav_view"
android:layout_width="330dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:layout_marginTop="0.1dp"
android:layout_marginBottom="0.1dp"
android:background="#drawable/corner_radius_nav_main"
android:clipToPadding="false"
android:fitsSystemWindows="false"
android:paddingStart="8dp"
android:paddingEnd="8dp"
app:headerLayout="#layout/nav_header"
android:theme="#style/NavigationItemHighLightColor"
app:itemIconPadding="17dp"
app:itemTextAppearance="#style/Font.GoogleSans"
app:itemBackground="#drawable/nav_item_bg"
app:itemIconTint="#color/nav_item_color"
app:itemTextColor="#color/nav_item_color"
app:menu="#menu/drawer_menu" />
nav_item_bg.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:left="2dp"
android:right="2dp"
android:top="1dp"
android:bottom="1dp">
<shape>
<solid android:color="#color/nav_item_color_bg"/>
<corners android:radius="7dp"/>
</shape>
</item>
</layer-list>
nav_item_color_bg.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:color="#E1EFEE"
android:state_checked="true" />
<item
android:color="#E1EFEE"
android:state_pressed="true" />
<item
android:color="#android:color/transparent"/>
</selector>
themes.xml
<style name="NavigationItemHighLightColor" parent="Theme.AppCompat.Light">
<item name="colorControlHighlight">#B2DFDB</item>
</style>
I really appreciate your help.
Thank you.
To define the item background remove app:itemBackground and use:
app:itemShapeFillColor: background item color
app:itemShapeAppearanceOverlay: item shape
Something like:
<com.google.android.material.navigation.NavigationView
app:itemShapeFillColor="#color/selector_menu"
app:itemShapeAppearanceOverlay="#style/ShapeAppearanceOverlay.Nav"
android:theme="#style/ThemeOverlay.NavigationView"
../>
where #color/selector_menu is a selector:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:alpha="0.50" android:color="#color/...." android:state_pressed="true"/>
<item android:alpha="0.12" android:color="#color/...." android:state_activated="true"/>
<item android:alpha="0.12" android:color="#color/..." android:state_checked="true"/>
<item android:color="#android:color/transparent"/>
</selector>
and:
<style name="ShapeAppearanceOverlay.Nav" parent="">
<item name="cornerFamily">rounded</item>
<item name="cornerSize">7dp</item>
</style>
<style name="ThemeOverlay.NavigationView" parent="">
<item name="android:colorControlHighlight">#android:color/transparent</item>
</style>
Simple TabLayout. No tab indicator. Arggh!
<com.google.android.material.tabs.TabLayout
android:id="#+id/my_tabs"
style="#style/MyTabLayout"
android:theme="#style/MyThemeOverlay"
android:layout_width="match_parent"
android:layout_height="50dp"/>
<style name="MyTabLayout" parent="Widget.MaterialComponents.TabLayout">
<item name="android:background">#color/red</item>
<item name="tabTextAppearance">#style/MyTextAppearance</item>
<item name="tabMinWidth">100dp</item>
<item name="tabMaxWidth">100dp</item>
<item name="tabIndicator">#drawable/tab_indicator_rounded_top_corners</item>
<item name="tabIndicatorColor">#color/color_white</item>
<item name="tabIndicatorHeight">5dp</item>
<item name="tabIndicatorFullWidth">false</item>
<item name="tabTextColor">#color/color_accent_dark</item>
<item name="tabGravity">center</item>
</style>
<style name="MyThemeOverlay">
<item name="android:background">#color/blue</item>
</style>
tab_indicator_rounded_top_corners.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<corners
android:topLeftRadius="2dp"
android:topRightRadius="2dp" />
</shape>
</item>
</layer-list>
And this is what pops out. There should be a white bar under the selected tab.
I am almost sure that this relates to this line in the theme overlay:
<item name="android:background">#color/blue</item>
Because when I do not override the background color, I can see the tab indicators. Problem is that I need to change that background color in some cases using theme overlays.
This is my toolbar.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.appcompat.widget.Toolbar
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:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="#dimen/_40sdp"
android:background="#android:color/holo_red_dark"
android:gravity="center_vertical"
android:theme="#style/ThemeOverlay.AppCompat.ActionBar"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:popupTheme="#style/PopUpTheme"/>
This is how I customized the popup menu in style.xml
<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/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
</style>
<style name="PopUpTheme" parent="ThemeOverlay.AppCompat.Light">
<item name="android:popupBackground">#drawable/background_popup_menu</item>
</style>
</resources>
background_popup_menu.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#android:color/white" />
<corners android:radius="5dp" />
</shape>
That's what I get in the end.
But I need to do like this
You can change the background of the overflow menu defining in your app theme the actionOverflowMenuStyle attribute.
<style name="AppTheme" parent="Theme.MaterialComponents.DayNight">
<item name="actionOverflowMenuStyle">#style/popupOverflowMenu</item>
</style>
With:
<style name="popupOverflowMenu" parent="#style/Widget.MaterialComponents.PopupMenu.Overflow">
<item name="android:popupBackground">#drawable/my_mtrl_popupmenu_background</item>
</style>
Then define the drawable/my_mtrl_popupmenu_background.xml with something like:
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="?attr/colorSurface"/>
<corners
android:bottomLeftRadius="8dp"
android:bottomRightRadius="8dp"
android:topLeftRadius="8dp"
android:topRightRadius="8dp"/>
</shape>
But you have rounded corners :) Just try to increase a value of radius like <corners android:radius="25dp" />.
I am setting navigation item background using app:itemBackground in layout:
<android.support.design.widget.NavigationView
android:id="#+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true"
app:itemBackground="#drawable/nav_selector_background"
app:headerLayout="#layout/nav_header_main"
app:menu="#menu/activity_main_drawer"/>
Here is nav_selector_background.xml
<ripple xmlns:android="http://schemas.android.com/apk/res/android" android:color="#color/colorNavItemSelected">
<item android:id="#android:id/mask">
<color android:color="#000"/> <!-- any color will do -->
</item>
<item
android:right="8dp">
<selector>
<item android:state_pressed="true" android:drawable="#drawable/nav_item_background_round"/>
<item android:state_focused="true" android:drawable="#drawable/nav_item_background_round"/>
<item android:state_checked="true" android:drawable="#drawable/nav_item_background_round"/>
<item android:state_activated="true" android:drawable="#drawable/nav_item_background_round"/>
<item android:state_active="true" android:drawable="#drawable/nav_item_background_round" />
<item android:state_hovered="true" android:drawable="#drawable/nav_item_background_round" />
<item android:state_drag_hovered="true" android:drawable="#drawable/nav_item_background_round" />
<item android:drawable="#android:color/transparent"/>
</selector>
</item>
And nav_item_background_round:
<?xml version="1.0" encoding="UTF-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape>
<solid android:color="#color/colorNavItemSelected"/>
<corners android:bottomRightRadius="32dp"
android:topRightRadius="32dp"/>
</shape>
</item>
</layer-list>
Problem is when I press on the item the whole background is highlighted as seen in the screenshot. I only want the red part highlighted.
I uploaded the sample on Github if anybody is interested in compiling and running the app.
With the NavigationView in the MaterialComponents libarry you can use:
app:itemShapeAppearanceOverlay attribute to define a custom shape for the each item
app:itemShapeFillColor attribute to define the color used to fill the shape
Something like:
<com.google.android.material.navigation.NavigationView
app:itemShapeFillColor="#color/selector_menu"
app:itemShapeAppearanceOverlay="#style/ShapeAppearanceOverlay.Nav"
android:theme="#style/ThemeOverlay.NavigationView"
../>
where the selector is something like:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:alpha="0.50" android:color="#color/primaryColor" android:state_pressed="true"/>
<item android:alpha="0.12" android:color="#color/primaryColor" android:state_activated="true"/>
<item android:alpha="0.12" android:color="#color/primaryColor" android:state_checked="true"/>
<item android:color="#android:color/transparent"/>
</selector>
and the shape is defined by:
<style name="ShapeAppearanceOverlay.Nav" parent="">
<item name="cornerFamily">rounded</item>
<item name="cornerSizeTopRight">50%</item>
<item name="cornerSizeBottomRight">50%</item>
<item name="cornerSizeBottomLeft">0dp</item>
<item name="cornerSizeTopLeft">0dp</item>
</style>
Also use the android:theme to override the color used by the ripple.
<style name="ThemeOverlay.NavigationView" parent="">
<item name="android:colorControlHighlight">#android:color/transparent</item>
</style>
I'm not sure what you want but I think this will solve your problem.
nav_item_background_round.xml
<?xml version="1.0" encoding="UTF-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:color="#f816a463"
tools:targetApi="lollipop">
<item android:id="#android:id/mask">
<shape android:shape="rectangle">
<solid android:color="#f816a463" />
</shape>
</item>
</ripple>
I also had the same issue. I resolved it by
First - Adding a custom style to my navigationView app:theme="#style/NavigationDrawerStyle"
<com.google.android.material.navigation.NavigationView
android:id="#+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fadingEdge="none"
android:fitsSystemWindows="true"
android:overScrollMode="never"
app:itemIconPadding="12dp"
app:itemBackground="#drawable/drawer_background_selector"
app:headerLayout="#layout/nav_header_main"
app:itemIconTint="#drawable/drawer_item_icon_color"
app:itemTextColor="#drawable/drawer_item_text_color"
app:theme="#style/NavigationDrawerStyle"
app:menu="#menu/activity_main_drawer" >
Second - Then in my styles.xml created a custom drawer style NavigationDrawerStyle then
setting colorControlHighlight to transparent which removed the rectangular shape for me.
<style name="NavigationDrawerStyle" parent="ThemeOverlay.AppCompat.navTheme">
<item name="android:textSize">14sp</item>
<item name="android:fontFamily">#font/robotomedium</item>
<item name="android:colorControlHighlight">#android:color/transparent</item><!--Here Removes Rectangle-->
</style>
I'm trying to change all the TextColor of my buttons in my app to white and also trying to make it bold. But that isn't happening, I'm overwriting the android:Widget.Button
I'm developing for Jelly Bean 4.1.2
What am I doing wrong?
Theme definition in manifest
android:theme="#style/spui" >
The theme where I like to
<style name="spui" parent="android:Theme.Holo.Light.DarkActionBar">
<item name="android:buttonStyle">#style/Buttonspui</item>
</style>
The style for the button itself
<style name="Buttonspui" parent="android:Widget.Button">
<item name="android:background">#drawable/btn_default_holo_light</item>
<item name="android:minHeight">48dip</item>
<item name="android:minWidth">64dip</item>
<item name="android:textColor">#ffffff</item>
<item name="android:textStyle">bold</item>
</style>
The button
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="15dp"
android:text="#string/edit"
android:id="#+id/btnEdit"
style="#style/Buttonspui"/>
For styling your Button you can use this:
Go to the drawable folder and make an XML (e.g. button.xml) file called "style" which contains the following:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape>
<gradient android:startColor="#449def" android:endColor="#2f6699" android:angle="270" />
<stroke android:width="1px" android:color="#000000" />
<corners android:bottomLeftRadius="0dp"
android:bottomRightRadius="0dp"
android:topLeftRadius="8dp"
android:topRightRadius="8dp"/>
<padding android:left="10dp" android:top="10dp" android:right="10dp" android:bottom="10dp" />
</shape>
</item>
</selector>
This is my code, you can make the necessary changes you want
Now call it in your layout XML (mainactivity.xml) like this
android:background="#drawable/button.xml"
Now to change the font color and style you can use the following which comes as part of the styles.xml in the values folder
<style name="buttonStyle" parent="#android:style/Widget.Button.Small">
<item name="android:textColor">#FFFFFF</item>
<item name="android:textSize">12sp</item>
<item name="android:textStyle">bold</item>
</style>
Now call this in the layout XML (mainactivity.xml) like this
style="#style/buttonStyle"
The final code is:
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="15dp"
android:text="#string/edit"
android:id="#+id/btnEdit"
android:background="#drawable/button.xml"
style="#style/buttonStyle"
/>
Hope this helps :)
This will change the default button style for the entire app, include alert dialog button. Adjust the style based on yours.
res/values/styles.xml
<resources>
<!-- Your base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Other styles -->
<item name="buttonStyle">#style/MyCustomButton</item>
</style>
<style name="MyCustomButton" parent="Widget.AppCompat.Button">
<item name="android:background">#drawable/selector_button</item>
<item name="android:textColor">#color/buttonText</item>
<item name="android:textStyle">bold</item>
<item name="android:paddingLeft">16dp</item>
<item name="android:paddingRight">16dp</item>
</style>
</resources>
res/drawable/selector_button.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/button_selected" android:state_pressed="true"/>
<item android:drawable="#drawable/button_selected" android:state_focused="true"/>
<item android:drawable="#drawable/button_unselected"/>
</selector>
res/drawable/button_selected.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<corners android:radius="1000dp"/>
<solid android:color="#color/buttonSelected"/>
</shape>
res/drawable/button_unselected.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<corners android:radius="1000dp"/>
<solid android:color="#color/buttonUnselected"/>
</shape>