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
Related
im having an issue with layout. I am trying to get the constraint layout to be placed underneath the toolbar. However, it decides it wants to overlap the toolbar. I have tried using app:layout_behavior="#string/appbar_scrolling_view_behavior" with no luck.
The toolbar is creating in another xml file and called in using include.
Activity below
<android.support.v4.widget.DrawerLayout
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:id="#+id/drawer_layout"
android:fitsSystemWindows="true"
tools:context="XXXXXX"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<include
android:id="#+id/test1234"
layout="#layout/app_bar_home"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<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:fitsSystemWindows="true"
app:headerLayout="#layout/nav_header"
app:menu="#menu/drawer_menu" />
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_constraintTop_toBottomOf="#id/test1234">
**Bunch of constraints here etc**
**Bunch of buttons here**
</android.support.constraint.ConstraintLayout>
</android.support.v4.widget.DrawerLayout>
Here is an image of what it looks like
What it should look like
Edit
It is fine when shown in the design view of the android studio. However when opened on a phone or emulator it is still broken.
App still looks like the second image when emulated.
With the fixes below
I faced the same issue then i cracked it with this.
in your constraint layout, write this
android:layout_marginTop="?attr/actionBarSize"
app:layout_behavior="#string/appbar_scrolling_view_behavior
You're implying this attribute to the parent tag. You must add this to the ConstraintLayout or the main content of the drawer layout.
Assuming you did not modify any properties in style.xml, the Layout Editor in Android Studio displays the Action Bar as:
By adjusting the style of the action bar, I can do things like adjust the background color of it.
However, the ActionBar I use is a Toolbar that uses a custom layout that can not be expressed simply by adjusting the properties of the action bar, as shown below.
It is not difficult to apply the above layout to the Action Bar during runtime. (change custom view, or apply AppTheme to NoActionBar, then set SupportActionBar)
What I really want is that the AppBar with these custom layouts will print out all of the xml inside the project I'm working on, but I have not found the right answer for it so far.
Is this an operation not supported by the Android studio?
You can achieve this via ToolBar & FrameLayouts,
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/coordinator_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="?actionBarSize">
<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_width="match_parent"
android:layout_height="match_parent"
android:background="?attr/colorPrimary"
app:contentInsetStart="0dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
//TextView
//ImageView
// etc
</LinearLayout>
</android.support.v7.widget.Toolbar>
</FrameLayout>
<FrameLayout
android:id="#+id/main_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="?actionBarSize">
</FrameLayout>
Organize your host activity layout as above and load fragments inside the main_container
I'm trying to obtain this effect where if the user scroll a RecyclerView a certain layout scroll up together with the recycler and disappear behind a Toolbar.
A similar behavior could be obtained using the CoordinatorLayout, this would be possible by setting
app:layout_behavior="#string/appbar_scrolling_view_behavior"
on the said Recycler, and doing
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_scrollFlags="scroll|enterAlways"/>
</android.support.design.widget.AppBarLayout>
Also, If I put a second child inside the AppBarLayout, and set app:layout_scrollFlags to it, the effect obtained is the same, with both layout scrolling together with the Recycler.
What I'm trying to achieve is to keep the first child (The toolbar) fixed in position, and let the second child (a LinearLayout) to scroll and hide behind the toolbar. Unfortunately I couldn't get to this behavior.
Is it possible without using 3rd part library?
Thanks in advance and sorry for my english.
Finally I figured out a way to achieve this behavior, by including the CoordinatorLayout in an LinearLayout and making the second child(LinearLayout) become the first, by moving the Toolbar to the extrnal(root) level
Hierarchy before:
<CoordinatorLayout>
<AppBarLayout>
<ToolBar>
<LinerarLayout>
Hierarchy after:
<LinearLayout>
<ToolBar>
<CoordinatorLayout>
<AppBarLayout>
<LinearLayout>
An exmaple:
<?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">
<androidx.appcompat.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="48dp" />
<androidx.coordinatorlayout.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:elevation="16dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorSecondaryLight"
android:orientation="vertical"
app:layout_scrollFlags="scroll"/>
</com.google.android.material.appbar.AppBarLayout>
.
.
.
.
</androidx.coordinatorlayout.widget.CoordinatorLayout>
</LinearLayout>
Hope that helps!
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.
Got a weird problem. Contents of the fragment getting hidden under the action bar. Its a pretty basic drawer layout and a fragment.
New to android and don't know if this is how it is.
I used margin just to pull this down, as you can see below. But this doesn't sound correct to me... please throw some light where am I going wrong. Thanks in Advance.
It is the normal and expected behaviour if you set FEATURE_ACTION_BAR_OVERLAY (android:windowActionBarOverlay) . Here the documentation
Add an attribute
app:layout_behavior="#string/appbar_scrolling_view_behavior"
to your parent view of your fragment.
Another possible solution for many who see this question is to change the parent layout of the toolbar to LinearLayout (likely with a vertical orientation), as this type of layout does not allow its children to overlap.
For example, this layout in activity_main.xml will result in the fragment being below the toolbar, rather than behind it:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"/>
</com.google.android.material.appbar.AppBarLayout>
<FrameLayout
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<androidx.fragment.app.FragmentContainerView
android:id="#+id/nav_host_fragment"
android:name="androidx.navigation.fragment.NavHostFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:defaultNavHost="true"
app:navGraph="#navigation/nav_graph"/>
</FrameLayout>
</LinearLayout>
Setting top margin of the fragment's layout to height of AcionBar worked, at last!!
android:layout_marginTop="?attr/actionBarSize"
Don't know if this is a better solution but for me this is the only working solution.