Android material design - Creating Tool Bar - android

I am trying to follow this tutorial to create material design tool bar. I am at step 7 where my activity should have a color tool bar but my app looks like
for reference, here are my style.xml, color.xml, tool_bar.xml files
style.xml
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:colorPrimary">#color/ColorPrimary</item>
<item name="android:colorPrimaryDark">#color/ColorPrimaryDark</item>
<!-- Customize your theme here. -->
</style>
</resources>
There was another style.xml in the same folder which has (21) next to it. I didn't make any changes to it though.
color.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="ColorPrimary">#FF5722</color>
<color name="ColorPrimaryDark">#E64A19</color>
</resources>
tool_bar.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/ColorPrimary"
android:elevation="4dp">
</android.support.v7.widget.Toolbar>
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:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context=".MainActivity">
<include
android:id="#+id/tool_bar"
layout="#layout/tool_bar"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/hello_world" />
</RelativeLayout>
UPDATE
If i make changes in stylev21.xml file, I can see my app looks like whats in the tutorial. But if leave style-v21.xml unchanged and make changes in style.xml I don't see those changes. What style*.xml file shall i edit ?

Purpose of having different styles.xml is that you can add changes specific to the Android version. But then you need to maintain same changes in both the files.
If you are testing your application on device having Android version 5.0 lollipop then style defined in v21/styles.xml will reflect in your application. Otherwise common styles.xml
If you want the same output as displayed in tutorial then I would suggest few changes.
Edit your 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"
tools:context=".MainActivity">
<include
android:id="#+id/tool_bar"
layout="#layout/tool_bar"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/hello_world" />
</RelativeLayout>
P.S. I have just removed margin from RelativeLayout.
Edit both styles.xml and define style which contain no Action bar. E.g. "Theme.AppCompat.Light.NoActionBar"
After doing these changes your app will work perfectly on all devices.
I hope it help.

Change your theme to Theme.AppCompat.Light.DarkActionBar instead of NoActionBar.
Then you don't need to add add it in your layout XML file
Also change android:colorPrimary to colorPrimary (take off android:) and android:colorPrimaryDark to colorPrimaryDark.

Your image has the three dots for the context menu , its still showing the action bar . You must have the following line for tool bar to take effect
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
toolbar = (Toolbar) findViewById(R.id.tool_bar); // Attaching the layout to the toolbar object
setSupportActionBar(toolbar); // Setting toolbar as the ActionBar with setSupportActionBar() call
}

Make your style.xml like this-
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">#color/ColorPrimary</item>
<item name="colorPrimaryDark">#color/ColorPrimaryDark</item>
<!-- Customize your theme here. -->
</style>
</resources>
Reason - AppCompat search for text without "android:"

Related

Android.Views.InflateException: Binary XML file line #17: Error inflating class android.support.design.internal.NavigationMenuItemView

I am using a material navigation drawer in my android project using Xamarin.
I have been trying to add two Framelayouts into the drawerlayout so that I can switch the content from different fragments see below xml:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<!-- This LinearLayout represents the contents of the screen -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<!-- The ActionBar displayed at the top -->
<include
layout="#layout/toolbar"
android:id="#+id/toolbar" />
<!-- The main content view where fragments are loaded -->
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true"
android:id="#+id/scrollview">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<FrameLayout
android:id="#+id/search_frame"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<FrameLayout
android:id="#+id/blah"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
</ScrollView>
</LinearLayout>
<!-- The navigation drawer that comes from the left -->
<!-- Note that `android:layout_gravity` needs to be set to 'start' -->
<android.support.design.widget.NavigationView
android:id="#+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:menu="#menu/drawer_view"
app:itemTextColor="#FFFFFF"
app:itemIconTint="#FFFFFF"
android:background="#464646"/>
</android.support.v4.widget.DrawerLayout>
The main activity :
protected override void OnCreate(Android_OS.Bundle bundle)
{
base.OnCreate(bundle);
SetContentView(Resource.Layout.activity_main);
drawerLayout = FindViewById<DrawerLayout>(Resource.Id.drawer_layout);
// Setting up the toolbar
var toolbar = FindViewById<Toolbar>(Resource.Id.toolbar);
SetSupportActionBar(toolbar);
SupportActionBar.SetTitle(Resource.String.ApplicationName);
SupportActionBar.SetDisplayHomeAsUpEnabled(true);
SupportActionBar.SetDisplayShowHomeEnabled(true);
// Attach item selected handler to navigation view
var navigationView = FindViewById<NavigationView>(Resource.Id.nav_view);
navigationView.NavigationItemSelected += NavigationView_NavigationItemSelected;
// Create ActionBarDrawerToggle button and add it to the toolbar
var drawerToggle = new Android_Support.V7.App.ActionBarDrawerToggle(this, drawerLayout, toolbar, Resource.String.open_drawer, Resource.String.close_drawer);
drawerLayout.SetDrawerListener(drawerToggle);
drawerToggle.SyncState();
}
I get the following error: Android.Views.InflateException: Binary XML file line #17: Error inflating class android.support.design.internal.NavigationMenuItemView
I have tried moving the elements in the Drawerlayout but the error is persistent. I have looked at the Android documentation everything seems correct. I have also checked that I have the most recent version of both the Design and AppCompact library
I was facing the same problem some time back, I don't know exactly what caused it, but I can tell you what I did, maybe it can help you.
My phone memory was almost full, so I deleted some apps
I uninstalled the app which was giving the error
I cleaned and rebuilt the project
Ran it again.
Voila! It worked.
I may be late, but i just got the same error. So on AndroidStudio, i just cleaned my project ("Clean Projet"). After that i was able to run my project once again without that error.
The error is because you might be extending your MainActivity by Activity instead of AppComptActivity
If you are using any of the Design Library components, you should ensure your activity extends AppCompatActivity and uses an appropriate Theme.AppCompat theme. Note that the FloatingActionButton relies on the colorAccent set on your theme - ensure your theme has that defined.
I try my solution and it did running success:
1. Clear temp on disk C(disk setup opera system)
2. Rebuild project
3. Insert in to head activity
[Activity(Theme = "#style/MyTheme")]
public class viewDetailsActivity : BaseActivity
{.....}
4. Running Project
Note: insert file style.xml this code
<style name="MyTheme" parent="MyTheme.Base">
<item name="android:textColor">#color/black</item>
</style>
<!-- Base theme applied no matter what API -->
<style name="MyTheme.Base" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="windowNoTitle">true</item>
<!--We will be using the toolbar so no need to show ActionBar-->
<item name="windowActionBar">false</item>
<!-- Set theme colors from -->
<!-- colorPrimary is used for the default action bar background -->
<item name="colorPrimary">#color/primary</item>
<!-- colorPrimaryDark is used for the status bar -->
<item name="colorPrimaryDark">#color/primaryDark</item>
<!-- colorAccent is used as the default value for colorControlActivated
which is used to tint widgets -->
<item name="colorAccent">#color/accent</item>
<!-- You can also set colorControlNormal, colorControlActivated-
colorControlHighlight and colorSwitchThumbNormal. -->
<!-- Option to hide the drop shadow here
<item name="actionBarStyle">#style/MyTheme.ActionBar</item>
<item name="android:windowContentOverlay">#null</item>
-->
</style>
<style name="MyTheme.NoActionBar">
<!-- Both of these are needed -->
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
<style name="MyTheme.ActionBar" parent="style/Widget.AppCompat.Light.ActionBar.Solid">
<!-- remove shadow below action bar -->
<!-- <item name="android:elevation">0dp</item> -->
<!-- Support library compatibility -->
<item name="elevation">0dp</item>
<item name="android:background">#color/pictonBlue</item>
</style>
I think i talk English not good, but problem solve success
A quick remark regarding the exception: The exception occurs also if no content layout has been added to the DrawerLayout, so be sure to add one.
An example:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/activity_main_drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<!-- Start of content -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<include
layout="#layout/toolbar"
android:id="#+id/toolbar" />
</LinearLayout>
<!-- End of content -->
<android.support.design.widget.NavigationView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:id="#+id/activity_main_navigation_view"
app:menu="#menu/menu_activity_main_navigation" />
</android.support.v4.widget.DrawerLayout>
Delete everything in your project's bin folder.
Delete everything in your project's obj folder.
Run Build->Clean Solution
Then try to build and run your solution again.
Just cleaning the solution wasn't enough for me; I had to manually remove everything in the bin and obj folders to get up and running again.
I just had this issue. All I needed to do was Right click on my Android solution → Properties → Android Options → set Linking to None.
I fixed it by right clicking android project -> Properties -> Android Options and selecting nothing at the Code shrinker.

Activity-based action bar/status bar visibility

I am trying to set up the action bars and the status bar within my app, however I have run into an issue. I did have it working, but it wasn't a clean way of doing things, so I decided to start over.
On the launch activity I want the status bar to be visible, with the pink background that I'm using throughout the app (no action bar). On the next view I want both the action bar and the status bar.
This is what I have within my launch activity:
<?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:paddingBottom="8dp"
android:paddingLeft="8dp"
android:paddingRight="8dp"
android:paddingTop="8dp"
tools:context="com.andrewnwalker.mousetimes_california.ParkSelectActivity">
<LinearLayout
...>
<TextView
.../>
<TextView
.../>
<Button
.../>
<Button
.../>
</LinearLayout>
</android.support.design.widget.CoordinatorLayout>
And this is what I have in the second activity:
<?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:fitsSystemWindows="true"
tools:context="com.andrewnwalker.mousetimes_california.MainActivity">
<android.support.v7.widget.ActionBarContainer
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary" />
<include layout="#layout/content_main"/>
</android.support.design.widget.CoordinatorLayout>
And in content main:
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.andrewnwalker.mousetimes_california.MainActivity"
tools:showIn="#layout/activity_main">
<android.support.v4.widget.SwipeRefreshLayout
...>
<android.support.v7.widget.RecyclerView
..../>
</android.support.v4.widget.SwipeRefreshLayout>
</RelativeLayout>
And finally in styles:
<resources>
<!-- 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>
<item name="android:typeface">serif</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" />
It's probably a bit of a mess, but I'm pretty confused by the settings for styles and action bars. Can anyone suggest the changes I can make to do what I'm looking for?
At the moment the first activity has shows the status bar text, but no background colour, and the second activity shows the status bar and action bar, but it also contains a menu item, which I don't want.
Thanks!
The status bar color conforming to material design is driven by the app's theme. You can read the official docs about this, as there's not enough information here to know for sure what's going on. You might be overriding the app theme on the first activity in the manifest or changing it somehow in the activity. The first activity does have a peculiar layout. There's no need to use CoordinatorLayout here if you don't have an action bar. If you just need to scroll the inner LinearLayout, just use a ScrollView instead.
To remove the action bar menu, make sure that you're not returning a menu in onCreateOptionsMenu or modifying anything in onPrepareOptionsMenu. Remove those methods if they're not needed.

Changing color of ListView

First of all, this is the code I use for ListView
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:contentDescription="#string/top_layer"
android:id="#+id/top_layer_Q1"
android:layout_width="fill_parent"
android:src="#drawable/top_bar"
android:layout_alignParentTop="true"
android:layout_height="wrap_content" />
<ListView
android:id="#+id/Quotelist1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
/>
In order to test the code, I created a temporary project in Studio, and the Output I got was Black text in white background. And when I added the same code to the project I am working, I get the output with a Black Background and white text.
Though I did not change any code, what might be causing this? What is the best fix for this?
Thanks,
EDIT1
Here is the styles.xml
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
</style>
Try this:
Add this to your style.xml
<style name="ListStyle" parent="#android:style/Widget.ListView">
<item name="android:textColor">#FF000000</item>
<item name="android:background">#FFFFFFFF</item>
</style>
Then set it as the style for your listView
style="#style/ListStyle"

Unable to set the Primary color to the Toolbar in Android Material Design

I just started working with Material Design.I am facing issue in setting primary color to Toolbar and fitting the width of tool bar to screensize. Here is my Code
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:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context=".MainActivity">
<include
android:id="#+id/app_bar"
layout="#layout/app_bar" />
<TextView
android:layout_below="#id/app_bar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/hello_world" />
app_bar.xml
<?xml version="1.0" encoding="utf-8"?><android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary">
styles.xml
<resources>
<!-- Base application theme -->
<style name="AppTheme.Base" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
</style>
<!-- Application theme for < v22-->
<style name="AppTheme" parent="AppTheme.Base">
<item name="colorPrimary">#color/primary_color</item>
<item name="colorPrimaryDark">#color/primary_colordark</item>
</style>
styles-v22.xml
<resources>
<!-- Application theme For v22 -->
<style name="AppTheme" parent="AppTheme.Base">
<item name="android:colorPrimary">#color/primary_color</item>
<item name="android:colorPrimaryDark">#color/primary_colordark</item>
</style>
colors.xml
<?xml version="1.0" encoding="utf-8"?><resources>
<color name="primary_color">#FFC107</color>
<color name="primary_colordark">#FFA000</color>
MainActivity
public class MainActivity extends AppCompatActivity {
Toolbar toolbar;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
toolbar = (Toolbar)findViewById(R.id.app_bar);
setSupportActionBar(toolbar);
}
output:
The emulator is 5.1 version. The min sdk is 4.0 for the project.
When i tried setting some color to the toolbar background , i see the Toolbar not fitting to screenwidth and primary color didn't got applied. Tried keeping Toolbar in LinearLayout but invain.
Kindly help me in resolving this.
I am hardly seeing any examples with material design. If anyone is familiar with some links kindly provide it.(Seen Androidhive and in youtube slidenr).
Thank you.
Try app_bar.xml:
<?xml version="1.0" encoding="utf-8"?
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/primary_color">

Android NavigationView (material support lib) doesn't interact with the status bar properly

I'm following the example from here to integrate the new Material Design Support library's NavigationView into my app.
My general layout looks like this:
activity.xml
<android.support.v4.widget.DrawerLayout
android:fitsSystemWindows="true">
<!-- main content -->
<android.support.design.widget.NavigationView
.. />
</android.support.v4.widget.DrawerLayout>
themes.xml
<style name="MyTheme" extends "Theme.AppCompat.Light.NoActionBar">
<item name="android:statusBarColor">#android:color/transparent</item>
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
</style>
MyActivity.java
onCreate(..) {
..
// This color can be different depending on some conditions.
DrawerLayout.setStatusBarBackground(color);
}
However, I keep getting a grey status bar, and the NavigationView does not draw under the status bar. I think the grey status bar is because I didn't define a custom colorPrimaryDark attr in the theme. However, I would assume DrawerLayout.setStatusBarBackground would override and set the status bar color. I can't find much documentation on the new NavigationView. Does anyone have any ideas?
Add your styles for API 21+ in values-v21/themes.xml:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="MyTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:statusBarColor">#android:color/transparent</item>
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
</style>
</resources>
In activity.xml, try setting android:fitsSystemWindows="true" on your NavigationView (in addition to the DrawerLayout).
For every one struggling with this, your layout file should be something like this:
<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/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
...
<android.support.design.widget.NavigationView
android:id="#+id/nav_view"
android:layout_height="match_parent"
android:layout_width="wrap_content"
android:layout_gravity="start"
android:fitsSystemWindows="true"
app:headerLayout="#layout/drawer_header"
app:menu="#menu/menu_drawer"/>
</android.support.v4.widget.DrawerLayout>
You have to include
android:fitsSystemWindows="true"
in the DrawerLayout and in the NavigationView.
Sigh, I figured out my problem. There was some weird abstraction that we use to add a debug drawer on the right-hand side. As a result, the overall view hierarchy actually looks like this
<DrawerLayout id="debug">
<LinearLayout id="debug_drawer" />
<DrawerLayout id="nav_drawer" fitsSystemWindows="true">
<NavigationView .... />
</DrawerLayout>
</DrawerLayout>
So I was calling DrawerLayout.setStatusBarColor on the wrong drawer and setting fitsSystemWindows on the wrong drawer. As a result, the window never interacts with the status bar :(

Categories

Resources