Develop Reference

Android Material Design colours not applied consistently

My activity_main.xml has the theme I am looking for. Some activities such as activity_disaster.xml has a partial application, and one activity_disaster_overview.xml has nothing, and is missing the action bar.
AndroidManifest:
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="org.sherman.magic.idlehands">
<application
android:allowBackup="true"
android:icon="#mipmap/ic_launcher"
android:label="#string/app_name"
android:roundIcon="#mipmap/ic_launcher_round"
android:supportsRtl="true"
android:theme="#style/AppTheme">
<activity android:name=".MainActivity"
android:theme="#style/IdleHands">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
<activity android:name=".DisasterActivity"
android:theme="#style/IdleHands"/>
<activity android:name=".LoggedInDisasterActivity"
android:theme="#style/IdleHands"/>
<activity android:name=".CreateDisasterActivity"
android:theme="#style/IdleHands"/>
<activity android:name=".DisasterOverviewActivity"
android:theme="#style/IdleHands"></activity>
</application>
</manifest>
styles.xml
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- 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="IdleHands" parent="AppTheme" >
<item name="android:colorForeground">#color/foreground_material_light</item>
<item name="android:navigationBarColor">#color/colorPrimaryDark</item>
</style>
</resources>
Working activity_main.xml:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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"
tools:context="org.sherman.magic.idlehands.MainActivity">
</android.support.constraint.ConstraintLayout>
Not working activity_disaster_overview.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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"
tools:context="org.sherman.magic.idlehands.DisasterOverviewActivity">
</android.support.constraint.ConstraintLayout>
MainActivity Code:
package org.sherman.magic.idlehands
import android.support.v7.app.AppCompatActivity
import android.os.Bundle
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
}
}
How can I make them consistent to match activity_main.xml. Rather than a mixed bag of results.

It turned out to be a version of Android studio. I upgraded to 3.0.1 an the issues disappeared.

Android application label name appears everywhere

I am using this theme in my Android app, Theme.AppCompat.Light.NoActionBar in every activity my project name i.e the label name from the Application tag appears in every Android activity, before it was not happening but recently it is happening. If I remove the label then the package name appears instead of the title.
What exactly is happening ?
I know that there are several ways to fix it but show me where I am wrong and what is happening ? Is it a bug ?
I referred a previous answer Android Application Name Appears as Activity Name and tried but still did not work, So here is a copy of my manifest.xml
<application
android:allowBackup="true"
android:icon="#mipmap/ic_launcher"
android:label="#string/app_name"
android:roundIcon="#mipmap/ic_launcher_round"
android:supportsRtl="true"
android:theme="#style/AppTheme">
<activity android:name=".MainActivity">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
<activity android:name=".Activity2"></activity>
</application>
Below is a sample screenshot, the label name can be seen although that activity(Activity2) consists of a toolbar , the white area is a edittext in the toolbar and nothing else is present inside the toolbar.
EDIT 1
<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>
<item name="android:textColor">#color/white</item>
<item name="android:textColorPrimary">#color/white</item>
<item name="android:textColorSecondary">#color/white</item>
</style>
EDIT 2
public class Activity2 extends AppCompatActivity {
LinedEditText editText;
Toolbar toolbar;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity2);
toolbar = (Toolbar) findViewById(R.id.toolbar);
editText = (LinedEditText) findViewById(R.id.editText);
setSupportActionBar(toolbar);
}
}
activity2.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical"
>
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/green"
android:id="#+id/toolbar"
>
<EditText
android:layout_width="250dp"
android:layout_height="40dp"
android:id="#+id/title"
android:background="#color/white"
android:layout_margin="10dp"
/>
</android.support.v7.widget.Toolbar>
<com.test.testproject.LinedEditText
android:layout_height="match_parent"
android:layout_width="match_parent"
android:id="#+id/editText"
android:gravity="top"
/>
</LinearLayout>

Check this out.
getSupportActionBar().setDisplayShowTitleEnabled(false);

Check with setting theme for specific activity..which solves your problem..try this
<style name = "NoActionBar" parent = "#android:style/Theme.Holo.Light">
<item name = "android:windowActionBar">false</item>
<item name = "android:windowNoTitle">true</item>
</style>

Just put in onCreate() method after setSupportActionBar(toolbar).
setContentView(R.layout.activity_main);
ActionBar actionBar = getActionBar();
actionBar.setTitle("");

UPDATE:
This is your problem. Avoid using Toolbar.
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/green"
android:id="#+id/toolbar"
>
<EditText
android:layout_width="250dp"
android:layout_height="40dp"
android:id="#+id/title"
android:background="#color/white"
android:layout_margin="10dp"
/>
</android.support.v7.widget.Toolbar>
If you are using NoActionBar in your theme. Avoid using Toolbar in your Activity's layout. That is the reason you are getting the Activity name.
If you are using Toolbar make sure you disable the TITLE on it.

Activity UI elements not showing

Adding UI elements to my activity changes nothing when app runs - I get an empty activity.
I've attached my activity layout, manifest and styles file.
Activity Layout:
<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:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:paddingBottom="#dimen/activity_vertical_margin" tools:context=".MainActivity"
android:id="#+id/activity_main"
android:clickable="false">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="text"
android:id="#+id/textView"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="75dp"
android:visibility="visible"
android:editable="false" />
Manifest looks like:
<?xml version="1.0" encoding="utf-8"?>
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<application
android:allowBackup="true"
android:icon="#mipmap/my_icon"
android:label="#string/app_name">
<activity
android:name=".MainActivity"
android:theme="#style/myTheme"
android:label=""
>
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
Styles looks like:
<resources>
<style name="myTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:windowNoTitle">false</item>
<item name="windowActionBar">false</item>
<item name="android:windowFullscreen">true</item>
</style>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
</style>

make sure to use the right oncreate() method as we have two methods:
public void onCreate(Bundle savedInstanceState, PersistableBundle persistentState)
and
protected void onCreate(#Nullable Bundle savedInstanceState)

What does your MainActivity look like? Have you used
setContentView(R.layout.main_activity)
in onCreate() ?

I have found the problem. Apparently a webView was declared
setContentView(webView);
In my main activity.

I came across the same issue when I started developing on android recently.
The problem was I had an infinite loop running in the onCreate(Bundle savedInstanceState) method of the activity.
Though all the elements were present in the layout, since the activity was entering an infinite loop after its created, no UI elements were rendered
Hope this helps

Material Drawer In Eclipse Isse

i want to add material drawer in android app ...so we need we have to include a toolbar ..
but when we include toolbar i got error
my Code for activitymain_xml is
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/main_parent_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:fitsSystemWindows="true">
<include layout="#layout/toolbar"/>
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout
android:id="#+id/content_frame"
android:layout_width="match_parent"
android:layout_height="match_parent" >
</FrameLayout>
<!-- The navigation drawer -->
<ListView android:id="#+id/left_drawer"
android:layout_width="240dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:choiceMode="singleChoice"
android:divider="#004869"
android:textSize="20sp"
android:dividerHeight="1dp"
android:background="#fff"
android:textColor="#f9f5f5"
android:paddingLeft="15sp"
android:paddingRight="15sp"
android:paddingTop="10dp"
/>
</android.support.v4.widget.DrawerLayout>
</LinearLayout>
code for toolbar is
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/toolbar"
app:theme="#style/ThemeOverlay.AppCompat.ActionBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
android:background="#drawable/toolbar_background"/>
code for include toolbar is
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
}
My Style.xml is
<resources>
<!--
Base application theme, dependent on API level. This theme is replaced
by AppBaseTheme from res/values-vXX/styles.xml on newer devices.
-->
<style name="AppBaseTheme" parent="Theme.AppCompat.Light">
<item name="windowActionBar">false</item>
</style>
<!-- Application theme. -->
<style name="AppTheme" parent="AppBaseTheme">
</style>
</resources>
My Mainifiest file is
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.lifegoal.eshop"
android:versionCode="1"
android:versionName="1.0" >
<uses-sdk
android:minSdkVersion="13"
android:targetSdkVersion="21" />
<application
android:allowBackup="true"
android:icon="#drawable/ic_launcher"
android:label="#string/app_name"
android:theme="#style/AppTheme" >
<activity
android:name="com.lifegoal.eshop.Splash_Screen_Activity"
android:label="#string/app_name" >
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</manifest>
But I got error like
04-28 12:53:05.632: E/AndroidRuntime(3181): java.lang.RuntimeException: Unable to start activity ComponentInfo{com.lifegoal.eshop/com.lifegoal.eshop.Home_Screen_Activity}: java.lang.IllegalStateException: This Activity already has an action bar supplied by the window decor. Do not request Window.FEATURE_ACTION_BAR and set windowActionBar to false in your theme to use a Toolbar instead.
04-28 12:53:05.632: E/AndroidRuntime(3181): at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2325)
04-28 12:53:05.632: E/AndroidRuntime(3181): at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:2390)
Guys I Need ur help ..thx in advance

Try changing your style.xml like below It works for me:
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
</style>
</resources>
According to developers guide we have to use NoActionBar theme to use toolbar as a action bar.
Also extends your activity with ActionBarActivity.
Edit
Use AppCompatActivity instead of ActionBarActivity, It is deprecated.

Try to do following :-
Remove this line from your toolbar.xml:-
android:id="#+id/toolbar"
And add this line in your activitymain_xml file:-
android:id="#+id/toolbar"
And extend parent theme Theme.AppCompat.Light.NoActionBar

AppCompat does not support the current theme features
Seems like, your style of Theme is wrong.
Your style.xml should contain these lines:
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
P.S. : Your Theme should extend Theme.AppCompat.Light.NoActionBar instead of Theme.AppCompat.Light

Strange divider with the v7 support actionbar

The used theme for the actionbar is Theme.AppCompat.Light when using Theme.Holo the issue does not exists.
I am using a custom view for the support v7 actionbar:
<?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:background="#android:color/white" >
</LinearLayout>
And I get the following result :
How do I remove the black line/divider between the layout and the actionbar.
I have tried changing the actionbar style but with not much of a success.
<resources>
<style name="Theme.Styled" parent="#style/Theme.AppCompat.Light">
<!-- Setting values in the android namespace affects API levels 14+ -->
<item name="android:actionBarStyle">#style/Widget.Styled.ActionBar</item>
</style>
<style name="Widget.Styled.ActionBar" parent="#style/Widget.AppCompat.Light.ActionBar">
<item name="dividerVertical">#null</item>
<item name="android:background">#null</item>
<item name="android:paddingTop">0dp</item>
<item name="android:paddingBottom">0dp</item>
<item name="android:showDividers">none</item>
<item name="android:background">#null</item>
<item name="android:divider">#null</item>
<item name="android:dividerHeight">0dp</item>
<item name="android:dividerPadding">0dp</item>
</style>
</resources>
Here is my Activity Source:
public class MainActivity extends ActionBarActivity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ActionBar actionBar = getSupportActionBar();
actionBar.setDisplayShowTitleEnabled(false);
actionBar.setDisplayShowHomeEnabled(false);
actionBar.setDisplayShowCustomEnabled(true);
actionBar.setCustomView(R.layout.actionbar);
actionBar.setDisplayOptions(ActionBar.DISPLAY_SHOW_CUSTOM);
}
}
This is the manifest:
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.example.actionbartest"
android:versionCode="1"
android:versionName="1.0" >
<uses-sdk
android:minSdkVersion="8"
android:targetSdkVersion="17" />
<application
android:allowBackup="true"
android:icon="#drawable/ic_launcher"
android:label="#string/app_name"
android:theme="#style/Theme.Styled" >
<activity
android:name="com.example.actionbartest.MainActivity"
android:label="#string/app_name"
>
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
</manifest>

You're probably looking for the android:windowContentOverlay attribute.
To remove that drop shadow, simply set the value to #null in your theme, like so:
<style name="Theme.Styled" parent="#style/Theme.AppCompat.Light">
<!-- Setting values in the android namespace affects API levels 14+ -->
<item name="android:actionBarStyle">#style/Widget.Styled.ActionBar</item>
<item name="android:windowContentOverlay">#null</item>
</style>

How do I remove the black line/divider between the layout and the actionbar.
I think you are mistaken. There really isn't a divider present. To confirm:
Open the layout file you're using with setContentView(R.layout.activity_main). Whatever the base container is, set its background to the color you use with the ActionBar. For example, let's say that the base container is a LinearLayout:
<?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:background="#android:color/white" > <<<====== Add this
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!" />
</LinearLayout>
You'll see that the ActionBar now blends with the activity's view.
What you are currently seeing is a gradient defined as:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient
android:startColor="#ffe8e8e8"
android:endColor="#ffffffff"
android:angle="270" />
</shape>
Here's where the background comes from:
(taken from platforms/android-17/data/res/values/themes.xml)
<style name="Theme.Light">
<item name="windowBackground">#android:drawable/screen_background_selector_light</item>
....
To get rid of it, you can either give your base container a background color, or override this attribute's value in your project's res/values/themes.xml:
<style name="AppBaseTheme" parent="android:Theme.Holo.Light">
</style>
<!-- Application theme. -->
<style name="AppTheme" parent="AppBaseTheme">
<item name="android:windowBackground">#android:color/white</item>
</style>
Edit:
This is the project setup:
res/layout/activity_main.xml:
<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="#android:color/white"
tools:context=".MainActivityCompat" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/hello_world" />
</RelativeLayout>
res/values/styles.xml
<resources>
<style name="AppBaseTheme" parent="#style/Theme.AppCompat.Light">
</style>
<!-- Application theme. -->
<style name="AppTheme" parent="AppBaseTheme">
</style>
</resources>
AndroidManifest.xml:
<uses-sdk
android:minSdkVersion="7"
android:targetSdkVersion="14" />
<application
android:allowBackup="true"
android:icon="#drawable/ic_launcher"
android:label="#string/app_name"
android:theme="#style/AppTheme" >
<activity
android:name="com.example.trialcompat.MainActivityCompat"
android:label="#string/app_name" >
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
MainActivityCompat.java:
import android.os.Bundle;
import android.support.v7.app.ActionBar;
import android.support.v7.app.ActionBarActivity;
public class MainActivityCompat extends ActionBarActivity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ActionBar actionBar = getSupportActionBar();
actionBar.setDisplayShowTitleEnabled(false);
actionBar.setDisplayShowHomeEnabled(false);
actionBar.setDisplayShowCustomEnabled(true);
actionBar.setCustomView(R.layout.actionbar);
actionBar.setDisplayOptions(ActionBar.DISPLAY_SHOW_CUSTOM);
}
}
R.layout.actionbar is the same as the one you have posted in the question. And this is the result:
As you can see, I cannot reproduce the divider issue. Am I missing something here?

Beside #Vikram answer, add this to the theme:
<item name="android:windowContentOverlay">#android:color/white</item>
Recommendation: Use the same color you use on your layouts. For the default one, use #null
Hope this helps.

I had the same issue. After lots of trials and fails I found that the bug was because of the 9patch background of the action bar.
I switched the 9patch with a regular image and the black line was gone.

For api version >= 21
AppBarLayout appBarLayout = findViewById(R.id.app_bar_layout);
appBarLayout.setOutlineProvider(null);