[Xamarin Blog] Android Tips: Hello Material Design v7 AppCompat

JamesMontemagnoJamesMontemagno USForum Administrator, Xamarin Team, Developer Group Leader Xamurai

I just posted Android Tips: Hello Material Design v7 AppCompat on the Xamarin Blog. Where I cover the new Material Themes and Toolbars using Support v7 AppCompat

Please use this thread for discussion.

«1

Posts

  • PetrCecilPetrCecil CZMember

    Hi do you know how to use it in Xamarin.Forms? I tried to make a FormsApplicationActionBarActivity (something like FormsApplicationActivity but inherits from ActionBarActivity)
    but Platform, Android.Views, AlertArguments, etc is internal so I am stuck

    thanks for help

  • JamesMontemagnoJamesMontemagno USForum Administrator, Xamarin Team, Developer Group Leader Xamurai

    As far as I know right now it is not possible to mix this with forms. You can apply a Holo theme standard and the material theme in your v21 folder such as what I do here: http://blog.xamarin.com/introduction-to-android-material-design/

    This means on Lollipop devices your app will be themed to material, but on older it will be Holo.

  • PetrCecilPetrCecil CZMember
    edited January 2015

    It looks like something that just needs to be easily added to Xamarin.Forms or as a stand alone nuget package (my implementation can't access internals from FormsApplicationActivity :) ) Can I somehow suggest it to Xamarin.Forms team?

    Native Android developers are beating me in this :) they can use AppCompat without any limitation.

  • JamesMontemagnoJamesMontemagno USForum Administrator, Xamarin Team, Developer Group Leader Xamurai
  • PeterDedenePeterDedene BEMember ✭✭

    Using the new v22.1 of AppCompat (http://android-developers.blogspot.be/2015/04/android-support-library-221.html), which was released in beta last Friday (https://www.nuget.org/packages/Xamarin.Android.Support.v7.AppCompat/22.1.0-beta1) it should become a lot easier to allow Forms to use the new Material Design theme, using an AppCompatDelegate - no longer the need to subclass ActionBarActivity, so we can keep using the FormsApplicationActivity.

    However it currently fails at initializing with a NullReferenceException at setting the ActionBar background:

    [MonoDroid] System.NullReferenceException: Object reference not set to an instance of an object
    [MonoDroid] at Xamarin.Forms.Platform.Android.Platform.UpdateActionBarBackgroundColor () <IL 0x00010, 0x00094>
    

    Does anyone have an idea how to get around this?

    @JamesMontemagno @TheRealJasonSmith Any official idea from Xamarin on how we could get this to work?

    Many thanks!

  • Martijn00Martijn00 NLInsider, University ✭✭✭

    Google has released a v22.1.1 build which fixes some critical issue's. Maybe yours is one of them. I had this problem: https://code.google.com/p/android/issues/detail?id=169760

    When inflating fragments the app crashed. This is fixed in the new release, but Xamarin hasn't updated their library yet.

  • HalukmyHalukmy TRMember ✭✭

    @JamesMontemagno Expandable Dashboard?

  • JamesMontemagnoJamesMontemagno USForum Administrator, Xamarin Team, Developer Group Leader Xamurai

    @Martijn00 yes currently v22.1.0.0 is in beta and v22.1.1.0 will be updated shortly it takes some time to clean them up and bind them correctly. However, I am currently testing v22.1.0.0 in my apps and haven't had too many issues just yet form what I have seen. v22.1 is a large change from the previous version, and I will have a blog soon about it.

  • JamesMontemagnoJamesMontemagno USForum Administrator, Xamarin Team, Developer Group Leader Xamurai
    edited April 2015

    One change to be aware of is that in v22.1 you will need to change:

    <item name="android:windowNoTitle">true</item>
    
    to
    
    <item name="windowNoTitle">true</item>
    

    In your themes.

  • sheamersheamer USMember

    Hello there,
    I'm new to Xamarin android development and I'm trying to create an app that has material theme and run it on devices with android version lower to lollipop. I saw your guide online and i'm trying to follow it but whenever I add the Support Library v7 AppCompat package in my project i'm getting a lot of error about unzipping failure and etc. (see attached screenshot)

    Please help. I'm stuck and I have no idea what to do.
    Thank you in advance.

  • sheamersheamer USMember
    edited April 2015

    Hello,

    I'd like to add that I tried to open the android_m2repository_r14.zip file manually but it seems that the file is corrupt or broken and also the package that I tried to install is named Xamarin Support Library v7 AppCompat and the version is 22.1.1

    I hope this helps. Thank you.

  • Hi,

    i've got the same error, have you tried to download the library from google and move it to the folder replacing the corrupted .zip file? With this solution my project seem to work.

  • sheamersheamer USMember

    Hello there mat,

    Thank you! It's working now.

    I'm wondering if anyone could help me with my problem. Is it required to always have the toolbar/actionbar when using AppCompat? because after inheriting my activity to AppCompatActivity (I used AppCompatActivity because ActionBarActivity is deprecated according to this http://goo.gl/cGvoLM) I can't seem to find a way to hide or disable the ActionBar/Toolbar.

    What I want to do is the following:
    -I want the Material Design in my whole app (including dialogs)
    -I don't need the actionbar/toolbar in splash screen (ofcourse)
    -I don't need the actionbar/toolbar in login
    -I need the actionbar/toolbar in every view after logging in.

    How can I do this?

    I want my login UI to look like lollipop so in my login activity I did this:

    public class LoginActivity : AppCompatActivity 

    and in order to hide the actionbar I added this code after the SetContentView():

    ActionBar.Hide();

    ActionBar.Hide works when i'm not inheriting my Activity from AppCompatActivity but it produces exception when i'm inheriting from it.

    I also tried to hide the ActionBar by editing the xml:

    <item name="windowActionBar">false</item>

    but this produces a run time exception. See Image 1 below.

    Please Help :neutral:
    Thanks in advance

  • matteocappello94matteocappello94 ITMember

    With the new version of AppCompat 22, the parameter windowNoTitle is more important than the older version. To use it, you have to add:
    <item name="windowNoTitle">false</item>
    in your theme options if you don't want to show ActionBar/Toolbar, or you have to use:
    parent="Theme.AppCompat.Light.NoActionBar"

    I've the same error when I update libraries, with "windowNoTitle" it is fixed.

    PS. sorry for my bad english.

  • sheamersheamer USMember

    Thanks again mat! It's working now. Don't worry bro I understand you pretty well.
    I have another question, I have searched for this but nothing's working.
    I'm trying to add a shadow to my toolbar, How can I accomplish this?
    I have tried adding elevation attribute in my XML:

    <?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"
    android:layout_height="wrap_content"
    android:layout_width="match_parent"
    android:minHeight="?attr/actionBarSize"
    android:background="?attr/colorPrimary"
    android:elevation="4dp"
    app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:popupTheme="@style/ThemeOverlay.AppCompat" />

    And I also tried adding shadow through C# with the following code:
    MyToolbar = FindViewById (Resource.Id.toolbar);
    SetSupportActionBar (MyToolbar);
    SupportActionBar.Elevation = 4;

    but it's not working too.

    Thanks again in advance!

  • MattPearceMattPearce NZMember

    Whoops, didn't realise there was an existing thread about this post, I created a new one about an issue I'm having - not sure how to kill that other thread so I'll chuck a link in here: https://forums.xamarin.com/discussion/40189/getting-the-error-please-install-package-xamarin-android-support-v7-appcompat#latest

  • matteocappello94matteocappello94 ITMember

    I’don’t know if with elevation attribute, can be added shadow under toolbar, i’ve never try it.
    But a workaround can be adding, with a FrameLayout, a little view under toolbar, with a gradient from transparent to black as background, to simulate the shadow. It is not a good solution, but this workaround certainly work!

  • aimee.holmanaimee.holman USMember
    edited June 2015

    Anyone know why the appcompat android.support.design.widget.AppBarLayout toolbar shadow isn't working on pre-lollipop devices?
    Could this be an issue with Xamarin?
    This post explains, but the answer doesn't work. I am experiencing the same issues as this person who is also using Xamarin.
    https://stackoverflow.com/questions/31115531/add-elevation-shadow-on-toolbar-for-pre-lollipop-devices

  • KenYeeKenYee USMember ✭✭

    On a different note, are you supposed to add the AppCompat via NuGet or Components?
    They should all be in one package manager IMHO....

  • KenYeeKenYee USMember ✭✭

    And how do you enable the home button for the toolbar?
    GetSupportActionBar/GetActionBar doesn't exist in AppCompatActivity so there's nothing I can call setHomeButtonEnabled(true) on....

  • JamesMontemagnoJamesMontemagno USForum Administrator, Xamarin Team, Developer Group Leader Xamurai
    edited June 2015

    @KenYee You simply call SupportActionBar.SetHomeButtonEnabled(true);

    Also, I usually use the NuGet just because I am testing out alpha's often. The Component is always the stable release and is also great for exposure to the package, however they reference the same assemblies.

  • KenYeeKenYee USMember ✭✭

    @JamesMontemagno : yes, that's why I started w/ NuGet packages initially...they seemed to have been more updated than the Components but then they're missing other libraries like the Android Support Design Library. So now it seems like you really should be using Components instead. I guess a better question is why aren't all the same libraries in NuGet??

  • JamesMontemagnoJamesMontemagno USForum Administrator, Xamarin Team, Developer Group Leader Xamurai

    @KenYess all of the are on both the Components store and on NuGet:

    https://www.nuget.org/packages/Xamarin.Android.Support.Design/
    https://components.xamarin.com/view/xamandroidsupportdesign

    In fact components can just wrap around a NuGet which is what the support design library does, however Components are extremely beneficial as they have not only the library, but samples, and documentation with them. NuGet does not have this capabilities.

  • CheesebaronCheesebaron DKInsider, University mod

    @JamesMontemagno

    NuGets not having ability to have samples is not entirely true. You can create a nuspec and chuck in arbitrary files in a samples folder if you wanted to. Although, you are right about it is a lot easier to find the samples and docs with Xamarin Components.

    One thing you could do is just like Newtonsoft.json does is to have a PowerShell script which opens a web page in Visual Studio after successful installation with documentation etc.

    You could also have the nuget install a Help folder in the solution, with relevant information about where to find documentation and samples.

  • JamesMontemagnoJamesMontemagno USForum Administrator, Xamarin Team, Developer Group Leader Xamurai

    Yeah that is true... I mean that isn't ideal and both add work. We would need a PowerShell implementation for Xamarin Studio as well. I think the component store is actually really good for discoverability, which I have mentioned before just to see what is new and coming out.

  • KenYeeKenYee USMember ✭✭

    One annoying thing w/ Components is you have to check them into source control...otherwise, when Visual Studio opens the solution, it can't find the Components even if you do a rebuild all (which does fix Nuget)...

  • DougMckDougMck USMember ✭✭

    A the start of the Integrate Toolbar section you say "Perviously, we saw how to integrate the new Toolbar into your application." and then show some XML.

    WHERE previously? as I have absolutely no idea where to put the XML you say to use and cannot compile the app because it says that toolbar does not exist.

    Where does this go?

    <android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:local="http://schemas.android.com/apk/res-auto"
        android:id="@+id/toolbar" etc
    

    Thanks.

  • JamesMontemagnoJamesMontemagno USForum Administrator, Xamarin Team, Developer Group Leader Xamurai

    Unlike to the toolbar article here https://blog.xamarin.com/android-tips-hello-toolbar-goodbye-action-bar/

    Create a new layout in Resources/layout/toolbar.axml

  • WilliamRaifordWilliamRaiford USMember ✭✭

    @JamesMontemagno Thanks for the article. I followed it about a week ago and only today I've found that my app's CheckBox check marks are now invisible. The text is visible, but the check mark itself is invisible. It also seems to be disabled, as it does not toggle silently if I press/click on the text itself (which would toggle it previously). Any clue on how to get this going with the material theme? Or am I the only one with this problem?

  • WilliamRaifordWilliamRaiford USMember ✭✭

    Well, for anyone else with this problem, I ended up creating a custom image for my invisible CheckBox controls.

    More customization is a good thing!

  • FernandoRibeiroFernandoRibeiro BRMember, Developer Group Leader
    edited July 2015

    Hello @JamesMontemagno,
    I have a problem I do not know what else to do. I watched several tutorials and when I'll do on my computer happens these packages errors. I've done several things I saw on the internet. Could you help me, please. I'm about borrowing money from xamarin.android license back. hahaha

  • JamesMontemagnoJamesMontemagno USForum Administrator, Xamarin Team, Developer Group Leader Xamurai

    Did you change the base of activity to AppCompatActivity? I would need the source to diagnos more.

  • I'm using appcompat 22.2.1 and I've followed this example but Title in my Toolbar and the overflow icon remains dark on Samsung S3 using Android 4.3. On Android 5.1.1 everything looks fine. (min sdk for my application is API 15) .

    In the article under "Integrate toolbar" you are using android.support.v7.widget.Toolbar but calling android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" shouldn't there be app:theme="..." ??

  • VedranDordevicVedranDordevic HRMember
    edited September 2015

    s tyle name="MyTheme.Base" parent="Theme.AppCompat.NoActionBar" seems to do the trick

  • EricHyugaEricHyuga USMember

    Anyway to use custom font for the title in this toolbar ?

  • JamesMontemagnoJamesMontemagno USForum Administrator, Xamarin Team, Developer Group Leader Xamurai

    You can put anything in the toolbar and easily customize: http://stackoverflow.com/questions/26533510/android-toolbar-center-title-and-custom-font

  • GeorgiosKroupisGeorgiosKroupis USMember, University

    Hello all,

    Does anyone know if it's possible to use this with Xamarin.Forms and how?

        <android.support.design.widget.AppBarLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
            android:layout_height="192dp"
            android:layout_width="match_parent">
    
            <android.support.design.widget.CollapsingToolbarLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                app:layout_scrollFlags="scroll|exitUntilCollapsed">
    
                <android.support.v7.widget.Toolbar
                    android:layout_height="?attr/actionBarSize"
                    android:layout_width="match_parent"
                    app:layout_collapseMode="pin"/>
    
        </android.support.design.widget.CollapsingToolbarLayout>
    
    </android.support.design.widget.AppBarLayout>
    

    I am guessing there isn't a way to instantiate it like so:

    FormsAppCompatActivity.ToolbarResource = Resource.Layout.toolbar;

    Thanks in advance.

Sign In or Register to comment.