I have implemented Action bar Sherlock with theme.sherlock. The action bar has navigation tab. I have used styles for customizing the action bar. The style xml is shown below
<resources>
<style name="MyTheme" parent="Theme.Sherlock">
<item name= "actionBarStyle">#style/ActionStyle</item>
<item name="actionBarTabTextStyle">#style/MyTabTextStyle</item>
</style>
<style name= "ActionStyle" parent="Widget.Sherlock.ActionBar">
<item name="android:background">#drawable/actionstyle</item>
<item name="background">#drawable/actionstyle</item>
</style>
<style name="MyTabTextStyle" parent="Widget.Sherlock.ActionBar.TabText" >
<item name="android:textColor">#0EBFE9</item>
<item name ="android:textStyle">bold</item>
<item name= "android:textSize">14dp</item>
</style>
</resources>
the drawable action style
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Bottom Line -->
<item>
<shape android:shape="rectangle">
<solid android:color="#android:color/darker_gray"/>
</shape>
</item>
<!-- Color of your action bar -->
<item android:bottom="2dip">
<shape android:shape="rectangle">
<solid android:color="#android:color/darker_gray" />
</shape>
</item>
</layer-list>
I need to
remove the divider between action bar and navigation tab
show blue divider below the navigation tab
All you have to do is setting the background property of your xml. You can set the "color" transparent to remove it.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Bottom Line -->
<item>
<shape android:shape="rectangle">
<solid android:color="#android:color/transparent" />
</shape>
</item>
<!-- Color of your action bar -->
<item android:bottom="2dip">
<shape android:shape="rectangle">
<solid android:color="#color/action_bar_color" />
</shape>
</item>
</layer-list>
Afterwards apply it in your theme:
<style name="Widget.MyTheme.ActionBar" parent="Widget.Sherlock.ActionBar">
<item name="android:background">#drawable/action_bar_background</item>
<item name="background">#drawable/action_bar_background</item>
</style>
Related
Hello Learned Friends,
I am using Material Design Theme but I need to overried its statePressed so that when the button is clicked it changes color (highlighted for a moment) as demonstrated below.
For this I have a drawable which I set on the buttons as follows
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="false">
<shape>
<solid android:color="#color/primaryColor" />
<stroke android:color="#color/primaryDarkColor" android:width="#dimen/stroke_width"/>
<corners android:radius="#dimen/corner_radius" />
</shape>
</item>
<item android:state_pressed="true">
<shape>
<solid android:color="#color/secondaryColor" />
<stroke android:color="#color/secondaryLightColor" android:width="#dimen/stroke_width" />
<corners android:radius="#dimen/corner_radius" />
</shape>
</item>
I also got a ThemeOverlay to override the state pressed
<style name="ThemeOverlay.Red.UnitedStates" parent="">
<item name="android:colorPressedHighlight">#color/secondaryColor</item>
</style>
Unfortunately when I click the buttons the highlight doesn't happen.
What could I be missing?
This is Material Theme XML
<style name="AppTheme" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/primaryColor</item>
<item name="colorPrimaryVariant">#color/primaryLightColor</item>
<item name="colorPrimaryDark">#color/primaryDarkColor</item>
You can use just the app:backgroundTint attribute:
<com.google.android.material.button.MaterialButton
app:backgroundTint="#color/custom_button_selector"
../>
with:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="#color/red600" android:state_pressed="true"/>
<item android:color="?attr/colorPrimary" android:state_enabled="true"/>
<item android:alpha="0.12" android:color="?attr/colorOnSurface"/>
</selector>
Normal state:
Pressed state:
I have tried to move my content below the status bar with success. Used the following code:
<resources>
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:windowTranslucentStatus">true</item>
</style>
</resources>
But the issue is that i have no status bar shadow. How do i achieve it?
shadows_bottom.xml design and color the way you like it to be
<item name="android:windowContentOverlay">#drawable/shadows_bottom</item>
Example shadows_bottom.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item >
<shape
android:shape="rectangle">
<solid android:color="#android:color/darker_gray" />
<corners android:radius="5dp"/>
</shape>
</item>
<item android:right="1dp" android:left="1dp" android:bottom="2dp">
<shape
android:shape="rectangle">
<solid android:color="#android:color/white"/>
<corners android:radius="5dp"/>
</shape>
</item>
</layer-list>
And you also need to set colorPrimary and colorPrimaryDark following official guidelines
here: https://www.materialpalette.com
Add this line in your style.xml code theme:
<item name="android:windowContentOverlay">#null</item>
In Api > lollipop you can set statusBar color, and it haven't any shadows.
Just write in your xml with theme:
<item name="colorPrimary">#color/toolbar_color</item>
<item name="colorPrimaryDark">#color/status_bar_color</item>
Iv've been trying to match a button solid color with its border color while also adding a ripple effect. I've have a matching border and solid color (without a ripple) but when I add the ripple it seems to add a border of its own thats slightly darker. Below are the styles and drawable,
drawable-v21/my_btn.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="#ff0000"
tools:ignore="NewApi">
<item>
<shape
android:shape="rectangle">
<corners
android:radius="2dp" />
<stroke
android:width="1dp"
android:color="#ff0000" />
<solid
android:color="#ffffff" />
</shape>
</item>
</ripple>
styles.xml
<style name="Border_Button">
<item name="android:layout_width">fill_parent</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:textColor">#000000</item>
<item name="android:textSize">14sp</item>
<item name="android:textAllCaps">true</item>
<item name="android:layout_marginLeft">16dp</item>
<item name="android:layout_marginRight">16dp</item>
<item name="android:background">#drawable/my_btn</item>
</style>
and layout.xml
<Button
style="#style/Border_Button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColor="#000000"
android:text="Click" />
Does anyone know how this border color can be overridden with the ripple or is there is some other way to achieve this (only XML preferrably)?
I am trying to add colours to tabs of action bar with the help of following link-https://github.com/thecodepath/android_guides/wiki/ActionBar-Tabs-with-Fragments
I added following statements to style.xml-
<style name="MyTheme" parent="#android:style/Theme.Holo.Light">
<item name="android:actionBarStyle">#style/MyActionBar</item>
<item name="android:actionBarTabStyle">#style/MyTheme.ActionBar.TabView</item>
</style>
<style name="MyActionBar" parent="#android:style/Widget.Holo.Light.ActionBar">
<item name="android:windowFullscreen">true</item>
<item name="android:windowContentOverlay">#null</item>
<item name="android:background">#12ABEE</item>
<item name="android:actionMenuTextColor">#ffffff</item>
<item name="android:titleTextStyle">#style/myTheme.ActionBar.Text</item>
</style>
<style name="myTheme.ActionBar.Text" parent="#android:style/TextAppearance">
<item name="android:textColor">#ffffff</item>
<item name="android:textStyle">bold</item>
<item name="android:gravity">center</item>
</style>
<style name="MyTheme.ActionBar.TabView" parent="android:style/Widget.Holo.ActionBar.TabView">
<item name="android:background">#drawable/tab_bar_background</item>
</style>
Also i created tab_bar_background.xml in drawable-
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- UNSELECTED TAB STATE -->
<item android:state_selected="false" android:state_pressed="false">
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Bottom indicator color for the UNSELECTED tab state -->
<item android:top="-5dp" android:left="-5dp" android:right="-5dp">
<shape android:shape="rectangle">
<stroke android:color="#65acee" android:width="2dp"/>
</shape>
</item>
</layer-list>
</item>
<!-- SELECTED TAB STATE -->
<item android:state_selected="true" android:state_pressed="false">
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Tab background color for the SELECTED tab state -->
<item>
<shape>
<solid android:color="#cef9ff"/>
</shape>
</item>
<!-- Bottom indicator color for the SELECTED tab state -->
<item android:top="-5dp" android:left="-5dp" android:right="-5dp">
<shape android:shape="rectangle">
<stroke android:color="#5beea6" android:width="2dp"/>
</shape>
</item>
</layer-list>
</item>
</selector>
With these steps in place it should show tab with light blue backgroung(#cef9ff) and green bottom line(#5beea6) on selected and blue bottom line and normal background on unselected.But unfortunately while running i see that bottom line appears fine but the background colour of tab appears black both for selected and unselected tabs.I am not able to figure out wht went wrong..
Updating tab_bar_background.xml to this solved my problem
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- UNSELECTED TAB STATE -->
<item android:state_selected="false" android:state_pressed="false">
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Bottom indicator color for the UNSELECTED tab state -->
<item >
<shape >
<stroke android:color="#e8e8e8" android:width="25dp" />
</shape>
</item>
</layer-list>
</item>
<!-- SELECTED TAB STATE -->
<item android:state_selected="true" android:state_pressed="false">
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Tab background color for the SELECTED tab state -->
<!-- Bottom indicator color for the SELECTED tab state -->
<item>
<shape >
<stroke android:color="#ffd866" android:width="25dp"/>
</shape>
</item>
</layer-list>
</item>
</selector>
I am trying to style a RelativeLayout from styles.xml because I have different themes and I am trying to change it's background. How do I do that?
I know that styling a ListView goes like this (for example):
<style name="Theme_Day" parent="Theme.Sherlock.Light">
<item name="android:textColor">#color/def_actionbar_submenu_text</item>
<item name="android:listViewStyle">#style/def_ListView</item>
<item name="vpiTabPageIndicatorStyle">#style/CustomTabPageIndicator</item>
</style>
<style name="def_ListView" parent="#android:style/Widget.ListView">
<item name="android:background">#drawable/listview_bg</item>
<item name="android:textColor">#color/def_listview_title_text</item>
<item name="android:divider">#color/def_listview_itemdivider_bg</item>
<item name="android:dividerHeight">#dimen/listview_divider_height</item>
</style>
but when I try to find "android:relativeLayoutStyle" or parent="#android:style/Widget.RelativeLayout" I cant find anything..
How do I do that?
This question has been asked before a long time ago, but you can always try like this:
<style name="RelativeLayoutStyle" parent="#android:style/Widget">
<item name="android:layout_marginLeft">10dp</item>
<item name="android:layout_marginTop">7dp</item>
<item name="android:layout_marginBottom">5dp</item>
<item name="android:background">#android:color/holo_green_dark</item>
</style>
Now you can do:
<RelativeLayout
style="#style/RelativeLayoutStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content">
...
Hope this helps someone.
You don't need any parent just write
<style name="def_RelativeLayout">
<item name="android:background">#drawable/listview_bg</item>
</style>
and set it in your style attribute of every relative layout
Create a drawable file and then set android:background with the #drawable/layout_style property.
For example, this drawable file is used to create a Google Card like design:
background_card.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle"
android:dither="true">
<corners android:radius="2dp"/>
<solid android:color="#ccc" />
</shape>
</item>
<item android:bottom="2dp">
<shape android:shape="rectangle"
android:dither="true">
<corners android:radius="2dp" />
<solid android:color="#android:color/white" />
<padding android:bottom="8dp"
android:left="8dp"
android:right="8dp"
android:top="8dp" />
</shape>
</item>
</layer-list>
And from the layout XML file, you need to set the android:background property:
android:background="#drawable/backgorund_card"
_
<RelativeLayout
android:id="#+id/layout_id"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/backgorund_card" >