Develop Reference

Android black and white theme

i am trying to achieve theme like this but i can't find any help about it i am trying to get white action bar with black icons and text and status bar with black icons and white background I am changing color pragmatically but I think there is some proper theme to get something like this i have also tried material.theme.light

Here is your Solution
Try this
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout 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:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/white">
<android.support.v7.widget.Toolbar
android:id="#+id/ar_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="exitUntilCollapsed"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light">
<TextView
android:id="#+id/toolbar_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Nilesh Rathod"
android:textStyle="bold" />
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>
Theme
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">#android:color/white</item>
<item name="colorPrimaryDark">#android:color/white</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="colorControlNormal">#FFFFFF</item>
<item name="android:windowLightStatusBar">true</item>
<item name="android:statusBarColor">#android:color/white</item>
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
<item name="android:windowTranslucentNavigation">false</item>
<item name="android:navigationBarColor">#000</item>
</style>
OUTPUT

How to delete actionbar's bottom line

I want to let the action bar bottom line disappear , i try to use toolbar.setScrollBarStyle(View.SCROLLBARS_INSIDE_OVERLAY);
Obviously it's not working.
Is it possible to let the bottom line disappear ? any help would be grateful ,thanks.
my MainActivity xml:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/drawerLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.user.taiwandigestionsociety_v11.MainActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#FFFFFF">
<include layout="#layout/toolbar"/>
<FrameLayout
android:id="#+id/mainFrame"
android:layout_gravity="end"
android:layout_width="match_parent"
android:layout_height="match_parent">
</FrameLayout>
</android.support.design.widget.AppBarLayout>
<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:background="#android:color/transparent"
android:fitsSystemWindows="true"
app:headerLayout="#layout/nav_header">
</android.support.design.widget.NavigationView>
</android.support.v4.widget.DrawerLayout>
my toolbar xml:
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.AppBarLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:id="#+id/toolBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:theme="#style/ToolBarStyle"
app:titleTextAppearance="#style/ToolBarStyle"
android:background="#29395e">
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
According some responding i set the MainActivity about action bar like this:
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initViews();
setSupportActionBar(toolbar);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
getSupportActionBar().setHomeButtonEnabled(true);
getSupportActionBar().setTitle("");
getSupportActionBar().setElevation(0);//it dosen't work, i use the app theme too.
my style:
<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">#29395e</item>
<item name="android:scrollbarThumbVertical">#android:color/transparent</item>
<item name="android:windowContentOverlay">#null</item>
</style>
<!-- ToolBar-->
<style name="ToolBarStyle" parent="Theme.AppCompat">
<item name="android:textColorPrimary">#android:color/white</item>
<item name="android:textColorSecondary">#android:color/white</item>
<item name="actionMenuTextColor">#android:color/white</item>
<item name="android:textSize">18sp</item>
<item name="android:textStyle">bold</item>
<item name="android:windowContentOverlay">#null</item>

<style name="Theme.MyApplication" parent="Theme.AppCompat.Light">
<item name="actionBarStyle">#style/Theme.MyApplication.ActionBar</item>
</style>
<style name="Theme.MyApplication.ActionBar" parent="style/Widget.AppCompat.Light.ActionBar.Solid.Inverse">
<!-- <item name="android:elevation">0dp</item> -->
<!-- if you are using support library thn elevation should be without android namespace like below else the above one uncomment-->
<item name="elevation">0dp</item>
</style>
To handle below 5.0
<item name="android:windowContentOverlay">#null</item>
Or
below things not applicable for the pre lollipop
If support action bar
getSupportActionBar().setElevation(0);
If not support actionbar
getActionBar().setElevation(0);
Please let me know if anything.

From Android 5.0 onward you can use setElevation() to adjust the elevation,ie what you mentioned as bottom_line .
To do so :
getWindow().requestFeature(Window.FEATURE_ACTION_BAR);
if(getSupportActionBar()!=null)
getSupportActionBar().setElevation(0);
setContentView(R.layout.activity_main);

For pre-lollipop devices - Add this line into your App theme:
<item name="android:windowContentOverlay">#null</item>
However this doesn't work on version 5.0 and higher. So you have to call setElevation(0) on your action bar. Note that if you're using the support library you must call it to that like so:
getSupportActionBar().setElevation(0);

Android Transparent Actionbar with AppCompat-v7 21 theme

I tried this . But the problem I am facing is with <item name="android:windowActionBarOverlay">true</item>
the sliding tab goes behind the Actionbar.
(see the logo and title above tabs)
When i set
android:layout_marginTop="?attr/actionBarSize"
then sliding tab doesn't remain transparent.
What is the correct way to make actionbar transparent without sliding tabs going behind the actionbar?
EDIT:
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#drawable/newbg">
<!-- The sliding tab -->
<com.github.amitt001.musicapp.stab.SlidingTabLayout
android:id="#+id/sliding_tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<!-- The pager that allows us to swipe between fragments -->
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="0px"
android:layout_weight="1"
android:background="#android:color/transparent"/><!--#A6000000" -->
</LinearLayout>
Styles.xml
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light">
<!-- Customize your theme here. -->
<item name="android:actionOverflowButtonStyle">#style/ActionButtonOverflow</item>
<!-- Support library compatibility -->
<item name="actionOverflowButtonStyle">#style/ActionButtonOverflow</item>
<item name="android:actionBarStyle">#style/MyActionBar</item>
<item name="android:windowActionBarOverlay">true</item>
<!-- Support library compatibility -->
<item name="actionBarStyle">#style/MyActionBar</item>
<item name="windowActionBarOverlay">true</item>
</style>
<style name="MyActionBar" parent="#style/Widget.AppCompat.ActionBar">
<item name="android:background">#android:color/transparent</item>
<item name="background">#android:color/transparent</item>
</style>
<style name="ActionButtonOverflow" parent="#style/Widget.AppCompat.ActionButton.Overflow">
<item name="android:src">#drawable/ic_drawer</item>
</style>
</resources>

Make an xml with a Toolbar and tabs
tool_bar_tabs.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:minHeight="?attr/actionBarSize"
android:background="#color/ColorPrimary"
android:elevation="4dp"
app:theme="#style/ToolbarColors">
</android.support.v7.widget.Toolbar>
<com.github.amitt001.musicapp.stab.SlidingTabLayout
android:id="#+id/sliding_tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</RelativeLayout>
styles.xml
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">#color/ColorPrimary</item>
<item name="colorPrimaryDark">#color/ColorPrimaryDark</item>
</style>
your activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#drawable/newbg">
<include
android:id="#+id/tb_tabs"
layout="#layout/tool_bar_tabs"></include>
<!-- The pager that allows us to swipe between fragments -->
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="0px"
android:layout_weight="1"
android:background="#android:color/transparent"/><!--#A6000000" -->
</LinearLayout>
Init. toolbar and make it an actionbar in
MainActivity
public class Main extends AppCompatActivity{
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar tb = (Toolbar) findViewById(R.id.tool_bar);
setSupportActionBar(tb);
}

Android customizing Toolbar for Material Design

I'm trying to implement a Material style ActionBar using toolbar. So far I made a working Material style ActionBar but can't change its icon and text color. I've already set a
Theme.AppCompat.Light.NoActionBar
in style.xml and
android:theme="#style/ThemeOverlay.AppCompat.Dark"
as the toolbar theme.
Is there any way to change the text color and the black icons into the white ones?
Sources are given below,
Toolbar:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:minHeight="?attr/actionBarSize"
android:theme="#style/ThemeOverlay.AppCompat.Dark" >
</android.support.v7.widget.Toolbar>
AppTheme:
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">#color/ColorPrimary</item>
<item name="colorPrimaryDark">#color/ColorPrimaryDark</item>
</style>
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<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="com.example.materialactionabar.MainActivity" >
<include layout="#layout/toolbar" />
<android.support.v4.widget.DrawerLayout
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<FrameLayout
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<fragment
android:id="#+id/navigation_drawer"
android:name="com.example.materialactionabar.NavigationDrawerFragment"
android:layout_width="240dp"
android:layout_height="match_parent"
android:layout_gravity="start" />
</android.support.v4.widget.DrawerLayout>

In your styles just add as below:
<item name="spinBars">true</item>
<item name="color">#color/white</item>
Complete code as below:
<resources>
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">#color/ColorPrimary</item>
<item name="colorPrimaryDark">#color/ColorPrimaryDark</item>
<item name="windowActionBar">false</item>
<item name="drawerArrowStyle">#style/DrawerArrowStyle</item>
</style>
<style name="DrawerArrowStyle" parent="Widget.AppCompat.DrawerArrowToggle">
<item name="spinBars">true</item>
<item name="color">#color/white</item>
</style>

transparent Actionbar with AppCompat-v7 21

Is there a way to make the ActionBar transparent in Material Design via Appcompat-v7 21? This is not working unfortunately.
<item name="colorPrimary">#android:color/transparent</item>
Also not the old:
<style name="Widget.Styled.ActionBar" parent="Widget.AppCompat.Light.ActionBar">
<item name="android:background">#android:color/transparent</item>
</style>

<!-- Application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light">
<item name="android:actionBarStyle">#style/MyActionBar</item>
<!-- Support library compatibility -->
<item name="actionBarStyle">#style/MyActionBar</item>
</style>
<!-- ACTION BAR STYLES -->
<style name="MyActionBar" parent="#style/Widget.AppCompat.ActionBar">
<item name="android:background">#drawable/actionbar_background</item>
<item name="android:windowActionBarOverlay">true</item>
<!-- Support library compatibility -->
<item name="background">#drawable/actionbar_background</item>
<item name="windowActionBarOverlay">true</item>
</style>

Actually, it's quite easy and simple.
Just ensure that you use RelativeLayout to lay Toolbar and the body.
Put the Toolbar in the last.
Put transparent color for android:background attribute of the Toolbar
This is an example of a working code:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:baselineAligned="false"
android:orientation="vertical">
<fragment
android:id="#+id/fragment_editor"
android:name="ichsan.myapp.HelloFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:layout="#layout/fragment_editor" />
<android.support.v7.widget.Toolbar
android:id="#+id/my_toolbar"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:minHeight="?attr/actionBarSize"
android:background="#10000000"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"/>
</RelativeLayout>
Hope it answers the question.

Step:
1. put below style into v21\styles.xml
<style name="TransperantToolbar" parent="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<item name="android:windowActionBarOverlay">true</item>
<item name="windowActionBarOverlay">true</item>
</style>
2. Your toolbar xml code
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:theme="#style/TransperantToolbar"/>

None of the above did the trick for me (or at least not by themselves)
using appcompat v7 23 and a CoordinatorLayout, which is most likely the culprit. If you are going that route, then you probably have a main activity layout that looks like
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout 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/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.farmdog.farmdog.MainActivity">
<android.support.v4.view.ViewPager
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_anchor="#+id/appbar"
app:layout_anchorGravity="top"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<!--android:theme="#style/AppTheme.AppBarOverlay">-->
...
Notice the two layout anchor lines above - those did it for me.