I am new in android and have several questions, and decided to ask them here, hope you help me, thank you in advance.
First i have problems with when i make a new project i chose make activity with navigation drawers, in default the android studio make app_bar_main.xml , toolbar_main.xml and content_main.xml and involve content_main.xml in app_bar_main.xml so it makes i have toolbar in each of pages, but i want to put the toolbar (app_bar_main.xml) in content_main.xml but when i do it my app force close and appear lots of errors, any body have he right answer with sample code?
The reason for doing this is to customize my content specially when i use a dialog with out toolbar title, i search and test lots of sample code but none of them works in this case, I select "no title" in app-theme in dialog.xml but the dialog shows with empty place of toolbar title.
Thanks for your negative score instead of helping
.
app_bar_main.xml
<android.support.design.widget.CoordinatorLayout ....>
<include layout="#layout/toolbar_main" />
</android.support.design.widget.CoordinatorLayout>
.
toolbar_main.xml
<LinearLayout .....>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="right"
android:background="#color/colorPrimary">
<TextView
android:id="#+id/toolbarTitle" ... />
<ImageView
android:id="#+id/imageView"... />
</android.support.v7.widget.Toolbar>
//content
<include layout="#layout/content_main" />
</LinearLayout>
.
content_main.xml
<RelativeLayout
......
android:id="#+id/mainContent"
tools:showIn="#layout/app_bar_main">
</RelativeLayout>
You can use include tag <include layout="#layout/app_bar_main"/> in main_content.xml to include toolbar in main_content.xml
Related
I am trying to set the title of Toolbar in Android but the app crashes (null pointer exception). I have tried many stackoverflow same question but none seemed to work for me. I used the code below
toolbar = (Toolbar) findViewById(R.id.toolBarDataProvider);
setSupportActionBar(toolbar);
getSupportActionBar().setTitle("Notice");
Logcat
Caused by: java.lang.NullPointerException: Attempt to invoke virtual method 'void android.support.v7.app.ActionBar.setTitle(java.lang.CharSequence)' on a null object reference at com.akapoor.kiittimetabletest1.Notice.onCreate(Notice.java:31)
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.akapoor.kiittimetabletest1.Notice">
<include
android:id="#+id/include"
layout="#layout/toolbar_data_provider"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<LinearLayout
android:layout_margin="10dp"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:weightSum="10">
<ScrollView
android:id="#+id/scrollView2"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="9">
<TextView
android:id="#+id/tvServerText"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:textSize="25dp"
android:textColor="#000000"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />
</ScrollView>
<Button
android:id="#+id/bServer"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:text="Refresh" />
</LinearLayout>
toolbar_data_provider.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/toolBarDataProvider"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:fitsSystemWindows="true"
android:minHeight="?attr/actionBarSize"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
</android.support.v7.widget.Toolbar>
so you don't have Toolbar... maybe show us your code for style or xml layout for this Activity
edit:
maybe there is some id overwritting, when you using
<include
android:id="#+id/include"
this is your new id for your Toolbar (first view in included in separated files). try to use merge (wrap whole Toolbar) or just do not set new id in include
more HERE
In fact, you did not set your toolbar as a SupportActionctionBar, because you included it. To acces included layout you need to:
1) Get included layout:
View icludedLayout = findViewById(R.id.include);
2) Get Toolbar from it:
View toolbar = findViewById(R.id.toolBarDataProvider);
EDIT
If you haven't mistaken in question, and your tollbar xml file is named as Toolbar.xml you need to change include tag to:
<include
android:id="#+id/include"
layout="#layout/Toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
You must set the xml file name for layout attribute (Which in your case the xml file name is Toolbar)
EDITED
Replace this:
<include
android:id="#+id/include"
layout="#layout/toolbar_data_provider"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
With the following code (In this code, I set the id of include tag to toolBarDataProvider instead of include):
<include
android:id="#+id/toolBarDataProvider"
layout="#layout/Toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
And the Toolbar.XML file should contains the following code (The toolbar id attribute is not needed):
<?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:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:fitsSystemWindows="true"
android:minHeight="?attr/actionBarSize"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
</android.support.v7.widget.Toolbar>
Though setSupportActionBar you pass null parameter. Thus you toolbar is null. In this way we can make a conclusion that findViewById cannot find view with id toolbarDataProvider. I suggest you need to check validity of your id. Or provide information about your xml.
EDITED
So, as I said you don't have id toolbarDataProvider. When you use include tag you import view described in other xml, but you can override attributes to it. In your case you override id attribute from toolbarDataProvider to include. Try to change your code to see if it works correctly:
toolbar = (Toolbar) findViewById(R.id.include);
setSupportActionBar(toolbar);
getSupportActionBar().setTitle("Notice");
This is a very very late answer but for anyone still looking for help on this question... assign your toolbar the id of include. This worked for me, also be sure to set your toolbar in styles to NoActionBar.
toolbar = (Toolbar) findViewById(R.id.include);
I am trying to implement a spinner in the toolbar of my navigation drawer.
My initial toolbar layout included the following xml code:
<?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/languagetoolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:fitsSystemWindows="true"
android:popupTheme="#style/ThemeOverlay.AppCompat.Light" >
<Spinner
android:id="#+id/toolbar_languageSpinner"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:entries="#array/array_languageSelect"
android:gravity="right" />
</android.support.v7.widget.Toolbar>
The thing is that there does not seem to exist to be an example that seem to show the implementation method using Xamarin. I have tried to use the following resources :
https://dabx.io/2015/01/02/material-design-spinner-toolbar-style-fix/ &
http://android-pratap.blogspot.co.za/2015/01/spinner-in-toolbar-example-in-android.html
x
The short comings of the two examples is that using Xamarin I have found that I cannot use .setAdapter as it only exists as an interface
The look that i want in the tool bar is similar to the image in the first link but having the spinner to the extreme right.
The solution that I finally found is explained perfectly by prathap in http://android-pratap.blogspot.co.za/2015/01/spinner-in-toolbar-example-in-android.html. The solution involves adding the spinner to the toolbar layout like below:
<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/languagetoolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light">
<Spinner
android:id="#+id/toolbar_languageSpinner"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:entries="#array/array_languageSelect"
style="#style/MyTheme"
android:gravity="right" />
</android.support.v7.widget.Toolbar>
Then the code that follows will require the user to populate the spinner in the code from their activity.
Good day, I'm having a problem with my xml layout. I create an another xml file share_app_scroll(ScrollView Layout) and included it in my ShareApp.xml .
The Problem is, my toolbar/action bar don't appear. All I can see, is my scrollview layout that I created. Is this possible to include the scrollView layout?. Here's my Code.
<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:fitsSystemWindows="true"
tools:context=".activities.ShareAppActivity">
<!--Include ActionBar/Toolbar-->
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/toolbar"
android:elevation="8dp"
android:minHeight="?attr/actionBarSize"
android:background="#color/colorPrimary">
</android.support.v7.widget.Toolbar>
<include
android:id="#+id/share_scrollview"
layout="#layout/share_extend_scrollview"
android:layout_height="match_parent"
android:layout_width="match_parent"/>
Sorry for the blurred picture.
Thank you in advanced.
You are using relative layout as your parent layout therefore you have to align your include layout below toolbar.Like this
<include
android:id="#+id/share_scrollview"
layout="#layout/share_extend_scrollview"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:layout_below="#+id/toolbar"/>
The problem will be in the manifest file.
Check if the java file for your xml has a android:theme="#style/AppTheme.NoActionBar" in the manifest. remove the no action bar and it will appear. if you are talking about during the design view. next to the api level there is app theme. change that to any except .NoactionBar
I want to achieve something like that. (not the FAB or the Snackbar). How can i create a layout, overlaying the AppBarLayout? Like this! (For Example)
Like Play Store:
My AppBarLayout with CoordinatorLayout and NestedScrollView with RelativeLayout as content looks like this:
<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/rootLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="#dimen/_118sdp"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsingToolbarLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:contentScrim="#color/mpc_pink"
app:expandedTitleMarginStart="#dimen/_40sdp"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<de.mypostcardstore.widgets.ItemImageView
android:id="#+id/header"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:src="#color/mpc_pink"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.7" />
<android.support.v7.widget.Toolbar
android:id="#+id/article_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:minHeight="?attr/actionBarSize"
app:contentScrim="#color/mpc_pink"
app:layout_collapseMode="pin"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="?android:colorBackground"
android:fillViewport="true"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<RelativeLayout
android:layout_width="match_parent".....>
It would be awesome if someone could help me out. I can not find anything on the internet...
Thanks in advance!
Just add something like
app:behavior_overlapTop="64dp"
to your NestedScrollView and it will be placed above the expanded toolbar.
In addition, you should add something like
app:expandedTitleMarginBottom="70dp"
to your CollapsingToolbarLayout so the title does not appear under your overlaid scroll content.
It's quite simple, really. You could achieve that by using a combination of ToolBar, FrameLayout, and your content view (could be a ListView like your first example, or anything).
The idea is to make your FrameLayout possess the same color as your ToolBar, giving the illusion of ToolBar being much larger than it is. Then all that is left to do is to make your content view be the last (or in API 21 and above: possess the highest elevation attribute) so that it would appear as if it floats above the aforementioned FrameLayout.
See my illustration below:
Now that you got the big idea, below is some real live XML snippet for doing such thing. (I actually use this layout in one of my apps) :
<!-- Somewhere in your layout.xml -->
....
<android.support.v7.widget.Toolbar
android:id="#+id/tb_toolbar"
android:layout_width="match_parent"
android:layout_height="#dimen/abc_action_bar_default_height_material"
android:background="?attr/colorPrimary"
android:minHeight="?attr/actionBarSize"
app:contentInsetStart="72dp"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"/>
<!-- This is the 'faux' ToolBar I've been telling you about. This is the part that will be overlaid by the content view below. -->
<FrameLayout
android:id="#+id/v_toolbar_extension"
android:layout_width="match_parent"
android:layout_height="64dp"
android:layout_below="#+id/tb_toolbar"
android:background="?attr/colorPrimary"
android:elevation="2dp"/>
<!-- Normally, I use this FrameLayout as a base for inflating my fragments. You could just use put your content view here. -->
<FrameLayout
android:id="#+id/ly_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/tb_toolbar"
android:elevation="3dp"/>
....
Note that my ly_content has higher elevation value than that of v_toolbar_extension. This is what will give you that desired 'overlaid toolbar' effect.
Last but not least, you would want to add this line somewhere in your activity's onCreate() :
/* Assuming mToolbar exists as a reference to your ToolBar in XML. */
setSupportActionBar(mTbToolbar);
getSupportActionBar().setElevation(0);
What that codes woud do is to set your ToolBar elevation to zero; removing preset shadows that were given as a default to ToolBars. If you don't do this, said shadow will create a "seam" between your ToolBar and your FrameLayout, thus breaking the illusion of those two being the same.
p.s., It is also important to give your content view a padding on each side. Doing so, your content view will not cover the entire width of the screen (which would render this effect useless).
Note: I see some good answers here that mentioned the absence of FrameLayout and instead making the ToolBar taller. While in theory it might work as well as my proposed solution, you might have problems when trying to manipulate scrolling; by doing that, you won't be able to separate ToolBar and its extension. You'll be forced to either make the Toolbar static or scroll all of the ToolBar altogether (makes scrolling a bit weird).
Add to that, the fact that you can't easily assign a custom drawable into a Toolbar. Hence makes it hard to follow the Google Play example you've given above. While if you're using my solution, all you'd need to do is just make your Toolbar transparent and assign the drawable to the FrameLayout instead.
I had a similar requirement and I achieved it as below.
Your activity theme should extend Theme.AppCompat.Light.NoActionBar.
I created a Layout XML File as:
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar_main"
android:layout_width="match_parent"
android:layout_height="#dimen/action_bar_size_x2"
android:background="#color/colorPrimary"
android:minHeight="?attr/actionBarSize" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginLeft="15dp"
android:layout_marginRight="15dp"
android:layout_marginTop="#dimen/action_bar_size"
android:orientation="vertical" >
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="match_parent" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:text="#string/app_name"
android:textSize="24sp" />
</LinearLayout>
</android.support.v7.widget.CardView>
</LinearLayout>
And the Activity should be something like this:
public class MainActivity extends ActionBarActivity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar maintoolbar = (Toolbar) findViewById(R.id.toolbar_main);
setSupportActionBar(maintoolbar);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
}
}
I got a view like this :
I did try to implement effects like you referred which is called Card Toolbar in Android, and it did work as expected. Here is my layout, Take a look at it:
<FrameLayout 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="match_parent"
android:background="#color/background_material_light" >
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="#dimen/toolbar_double_height"
android:background="?attr/colorPrimary" />
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginLeft="#dimen/cardview_toolbar_spacer"
android:layout_marginRight="#dimen/cardview_toolbar_spacer"
android:layout_marginTop="?attr/actionBarSize"
app:cardBackgroundColor="#android:color/white">
<LinearLayout
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="?attr/actionBarSize" />
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:alpha="0.12"
android:background="#android:color/black" />
</LinearLayout>
</android.support.v7.widget.CardView>
</FrameLayout>
Hope you'll be inspired.
I've searched for this question but haven't found a useful answer yet.
I am trying to create a Toolbar with some kind of edittext inside of it.
It should look like this:
How should my XML file look like? Currently it looks like this:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.Toolbar
android:id="#+id/activity_main_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:elevation="8dp"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText
android:id="#+id/activity_main_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/title"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:layout_marginEnd="16dp"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:textSize="22sp"/>
</LinearLayout>
</android.support.v7.widget.Toolbar>
</LinearLayout>
The activity looks like this:
private Toolbar toolbar;
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.acitivty_main);
toolbar = (Toolbar)findViewbyid(R.id.activity_main_toolbar);
setSupportActionbar(toolbar);
}
But the result is some Edittext which is right in the center of the Toolbar, letting no space for the toolbar title (please ignore the "save" menu button)
Now my question is,
How do I correctly add one or more views to the toolbar below the main actionbar height?
Could you recommend me some example or tutorial page?
What kind of EditText is used in the shown image with the floating hint?
Thanks in advance
Well first I think it easy to answer the second and third question first, you can find that information in the "Android Developer Blog" in "Android Design Support Library". Here the link:
http://android-developers.blogspot.co.uk/2015_05_01_archive.html
Just scroll down till you find the section called "Floating labels for editing text" and sorted.
Now for the first question, what I did was I made a "Toolbar" layout (won't be able to elaborate too much here as I'm busy at the moment) and then added it to the layout. The code is below:
Toolbar Layout:
<?xml version="1.0" encoding="utf-8"?>
<!-- NOTE: Use To Maintain Structure Of Actionbar -->
<Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:background="#009688"
android:id="#+id/toolBar"
android:elevation="2dp">
<!-- NOTE: Required For Top Section Structure -->
<LinearLayout
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:orientation="vertical">
<EditText
android:background="#android:color/transparent"
android:hint="#string/note_title"
android:textColorHint="#FFFFFF"
android:id="#+id/actionTitle"
android:paddingRight="16dp"
style="#style/ActionText"/>
<TextView
android:id="#+id/textDate"
style="#style/ActionDate"/>
</LinearLayout>
</Toolbar>
Adding it to the Layout File
<?xml version="1.0" encoding="utf-8"?>
<!-- NOTE: Layout For Edit Note Activity -->
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:fitsSystemWindows="true">
<!-- NOTE: Assigned Custom Toolbar -->
<include
android:id="#+id/toolBar"
layout="#layout/tool"/>
</RelativeLayout>
And that should sort you out (You can then mess about with the actionbar properties to clean it up aka: getActionBar().setElevation(0); and
getActionBar().setTitle("");