Good Day, I have a HomeActivity with Toolbar and ViewPager. In ViewPager there is Fragment with RecyclerView. I would like to hide ToolBar onScrolling RecyclerView in Fragment. I make this using CoordinatorLayout, but it not working. Any ideas ?
activity_home.xml:
<?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"
tools:context=".activities.HomeActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
>
<android.support.design.widget.AppBarLayout
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways"/>
</android.support.design.widget.AppBarLayout>
<com.astuetz.PagerSlidingTabStrip
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
app:pstsIndicatorColor="#color/mantis"/>
<android.support.v4.view.ViewPager
android:id="#+id/vpPager"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/white"/>
</LinearLayout>
</android.support.design.widget.CoordinatorLayout>
fragment_home.xml:
<FrameLayout 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"
xmlns:app="http://schemas.android.com/apk/res-auto"
tools:context=".fragments.BusFragment">
<!-- TODO: Update blank fragment layout -->
<android.support.v7.widget.RecyclerView
android:id="#+id/busRecyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbars="vertical"/>
</FrameLayout>
I think I should make behavior to RecyclerView, like it is in ViewPager
app:layout_behavior="#string/appbar_scrolling_view_behavior"
maybe there is option to make it programatically ? Or my idea isn`t good at all?
Anyway, thank you!
Remove LinearLayout as parent of AppBarLayout and move PagerSlidingTabStrip inside AppBarLayout.
<android.support.design.widget.CoordinatorLayout
android:id="#+id/coordinatorLayout"
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.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/appBarLayout"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways"/>
<com.astuetz.PagerSlidingTabStrip
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
app:pstsIndicatorColor="#color/mantis"/>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/vpPager"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/white"/>
</android.support.design.widget.CoordinatorLayout>
This example will will work for you.Just copy this in your own project and replace the Tablayout with your PagerslidingTabstrip if you want to use this.
Here ist the acitivitymain.xml
<android.support.design.widget.CoordinatorLayout 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/rootLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="lh.com.myapplicationstack.MainActivity"
android:background="#e8e8e8">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:layout_scrollFlags="scroll|snap"/>
<android.support.design.widget.TabLayout
android:id="#+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:layout_scrollFlags="snap|enterAlways"/>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:background="#e7e7e7" />
<!-- Put the part below this comment into your Fragment.xml(Wrap it with a Linearlayout) -->
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true"
android:id="#+id/Nested_scroll_view"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:background="#FAFAFA"
android:padding="4dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Item1"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Item2"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Item3"/>
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
<!-- Put the part above this comment into your Fragment.xml(Wrap it with a Linearlayout)-->
</android.support.design.widget.CoordinatorLayout>
This is the MainActivity.class
public class MainActivity extends AppCompatActivity {
CoordinatorLayout rootLayout;
Toolbar toolbar;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initInstances();
}
private void initInstances() {
toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
getSupportActionBar().setHomeButtonEnabled(true);
rootLayout = (CoordinatorLayout) findViewById(R.id.rootLayout);
}
}
This is the styles.xml which removes the standart Toolbar.
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#1565C0</item>
<item name="colorPrimaryDark">#0d47a1</item>
<item name="android:textColorSecondary">#FF4081</item>
<item name="colorAccent">#FF4081</item>
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
<style name="AppTheme.WithoutActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
This is the manifest where you use the custom style
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="lh.com.myapplicationstack" >
<application
android:allowBackup="true"
android:icon="#mipmap/ic_launcher"
android:label="#string/app_name"
android:supportsRtl="true"
android:theme="#style/AppTheme.WithoutActionBar" >
<activity android:name=".MainActivity" >
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
Just copy all these files to your project and customize it as you like.
Related
Below is a picture of my app UI (actionBar/toolBar + webView + tabs). As you can see, the AB/toolbar + tabs are transparent (black color hence no background) but it refuses to fold above my webView (EdgeScrollViewPager) in the background. I am setting the color to #null in both the toolbar and tabBar. I do not know what I do for logical errors in the code, ie why the actionBar/toolbar and tabBar do not lie on top of the dark blue background (webView).
app_bar_main.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"
tools:context="com.MainActivity">
<include layout="#layout/toolbar" />
<com.ui.util.EdgeScrollViewPager
android:id="#+id/content_main_viewpager"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:visibility="visible"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
</com.ui.util.EdgeScrollViewPager>
<android.support.design.widget.TabLayout
android:id="#+id/content_main_tabs"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:tabMaxWidth="0dp"
app:tabGravity="fill"
app:tabMode="fixed"
app:tabTextAppearance="#style/ML.Tab"
app:tabPadding="0dp"
app:tabIndicatorHeight="0dp"
app:tabIndicatorColor="#null"
android:visibility="visible"
android:background="#null"
app:background="#null">
</android.support.design.widget.TabLayout>
</LinearLayout>
toolbar.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/toolbar"
app:theme="#style/ML.Toolbar"
app:popupTheme="#style/ML.Toolbar.PopupTheme"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_scrollFlags="scroll|enterAlways"
>
<include layout="#layout/topbar_loading_indicator" />
</android.support.v7.widget.Toolbar>
style.xml
<style name="ML.Toolbar" parent="#style/Widget.AppCompat.ActionBar">
<item name="android:background">#null</item>
<item name="background">#null</item>
<item name="android:windowActionBarOverlay">true</item>
<item name="windowActionBarOverlay">true</item>
</style>
Try this:
<?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.MainActivity">
<include layout="#layout/app_toolbar" />
<com.ui.util.EdgeScrollViewPager
android:id="#+id/content_main_viewpager"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:visibility="visible"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
</com.ui.util.EdgeScrollViewPager>
<android.support.design.widget.TabLayout
android:id="#+id/content_main_tabs"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_alignParentBottom="true"
android:background="#null"
android:visibility="visible"
app:background="#null"
app:tabGravity="fill"
app:tabIndicatorColor="#null"
app:tabIndicatorHeight="0dp"
app:tabMaxWidth="0dp"
app:tabMode="fixed"
app:tabPadding="0dp"
app:tabTextAppearance="#style/ML.Tab">
</android.support.design.widget.TabLayout>
If you want to Float the views You can either use relative layout or frame layout.
I am trying to implement Toolbar using android design library. The Output works as expected on Lollipop and Marshmallow devices but it does not show ToolBar on Kitkat devices.
I have seen similar posts on stack overflow(here_1,here_2) and tried to implement the changes listed. However, I am unable to get this working on Kit Kat devices.
I have included the following in my build.gradle file:
compile 'com.android.support:appcompat-v7:23.0.1'
compile 'com.android.support:design:23.0.1'
compile 'com.android.support:cardview-v7:23.0.1'
Here is my main_Activity.xml file:
<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:id="#+id/drawer_layout"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:fitsSystemWindows="true"
android:theme="#style/Theme.MyMovie"
tools:context=".MainActivity">
<include layout="#layout/include_grid_viewpager"/>
<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/nav_header"
app:menu="#menu/drawer_view"/>
</android.support.v4.widget.DrawerLayout>
Here is my include_grid_viewpager.xml file:
<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/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".Chalisa">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay"
>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar1"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/AppTheme.PopupOverlay"
/>
</android.support.design.widget.AppBarLayout>
<GridView
android:id="#+id/gridview1"
android:columnWidth="80dp"
android:paddingTop="?attr/actionBarSize"
android:gravity="center_horizontal"
android:background="#drawable/stroke"
android:numColumns="3"
android:stretchMode="spacingWidthUniform"
android:layout_width="match_parent"
android:layout_height="wrap_content">
</GridView>
</android.support.design.widget.CoordinatorLayout>
and Here is my style.xml file
<resources>
<style name="Theme.Mytheme" parent="Base.Theme.DesignDemo">
</style>
<style name="Base.Theme.DesignDemo" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">#FF0000</item>
<item name="colorPrimaryDark">#FC1501</item>
<item name="colorAccent">#FF0000</item>
<item name="android:windowBackground">#color/window_background</item>
<item name="android:textSize">16sp</item>
</style>
<style name="Widget.CardContent" parent="android:Widget">
<item name="android:paddingLeft">16dp</item>
<item name="android:paddingRight">16dp</item>
<item name="android:paddingTop">24dp</item>
<item name="android:paddingBottom">24dp</item>
<item name="android:orientation">vertical</item>
</style>
</resources>
Here is my manifest file:
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="aps.com.nap" >
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
<application
android:allowBackup="true"
android:icon="#mipmap/ic_launcher"
android:label="#string/app_name"
android:theme="#style/Theme.Mytheme">
<activity
android:name=".MainActivity"
android:label="#string/app_name"
android:screenOrientation="portrait">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
<activity android:name=".DetailData"
android:parentActivityName=".MainActivity"
android:screenOrientation="portrait"/>
<activity android:name=".myDetail"
android:parentActivityName=".MainActivity"
android:screenOrientation="portrait"/>
</application>
</manifest>
I have spent more than 4 hours digging through internet and stack overflow responses. I believe I am making some minor mistake in my XML.
Request you all to provide any information that will help me resolve this Issue at the earliest.
Thank you for all the help.
I had to change my include_grid_viewpager.xml as follows to get it working.
moved the grid inside the AppBar Layout, so that it is below the action bar. The grid view was overlaying the action bar.
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar1"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:layout_scrollFlags="scroll|enterAlways"
/>
<GridView
android:id="#+id/gridview1"
android:columnWidth="110dp"
android:gravity="center_horizontal"
android:background="#drawable/stroke"
android:numColumns="3"
android:stretchMode="spacingWidthUniform"
android:layout_width="match_parent"
android:layout_height="wrap_content">
</GridView>
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>
Thank you for all the support.
I have got the same problem. In my case, appending dummy view before AppBarLayout solved the problem.
Following is my own case:
[Before]
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout
android:id="#+id/eya_fl_activity_viewer_container"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ProgressBar
android:id="#+id/eya_pb_activity_base_viewer"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="?attr/actionBarSize"
android:visibility="gone" />
</FrameLayout>
<android.support.design.widget.AppBarLayout
android:id="#+id/eya_abl_activity_base_viewer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<include layout="#layout/lzc_toolbar" />
</android.support.design.widget.AppBarLayout>
<!-- Other views... -->
</android.support.design.widget.CoordinatorLayout>
[After]
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- Dummy view -->
<FrameLayout
android:id="#+id/eya_fl_activity_viewer_container"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<android.support.design.widget.AppBarLayout
android:id="#+id/eya_abl_activity_base_viewer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<include layout="#layout/lzc_toolbar" />
</android.support.design.widget.AppBarLayout>
<!-- Other views... -->
</android.support.design.widget.CoordinatorLayout>
Please review inside onCreate() of your activity, have you called the following yet?
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar1);
setSupportActionBar(toolbar);
Moreover, post your AndroidManifest.xml for more info.
I'm trying to make Toolbar with EditText within it like this:
Right now I can do some thing similar but only with static title, Any ideas to get started?
I have done this like below:
There is Toolbar as AppBar (aka ActionBar) at the top and second toolbar below it with two EditText. First Toolbar is under CollapsingToolbarLayout in case you want it to be collapsed.
Java:
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.toolbar_1);
setSupportActionBar(toolbar);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
getSupportActionBar().setTitle("");
}
#Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.main, menu);
return true;
}
}
activity_main.xml:
<android.support.design.widget.CoordinatorLayout
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:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_tool_bar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:elevation="0dp"
app:expandedTitleTextAppearance="#style/Widget.AppCompat.ActionBar.TabText"
app:layout_scrollFlags="scroll|enterAlways"
app:statusBarScrim="?attr/colorAccent">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar_1"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/primary"
android:minHeight="?attr/actionBarSize"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:layout_collapseMode="none"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light">
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar_2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/primary"
android:minHeight="?attr/actionBarSize"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:layout_collapseMode="none"
app:elevation="0dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:paddingLeft="32dp"
android:paddingTop="16dp"
android:paddingBottom="56dp"
android:paddingRight="16dp">
<android.support.design.widget.TextInputLayout
android:id="#+id/lNameLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/fNameLayout"
android:layout_marginTop="10dp">
<EditText
android:id="#+id/ltitle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ems="10"
android:hint="Title"/>
</android.support.design.widget.TextInputLayout>
<android.support.design.widget.TextInputLayout
android:id="#+id/lNameLayout2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/fNameLayout"
android:layout_marginTop="10dp"
android:layout_marginBottom="10dp">
<EditText
android:id="#+id/ldesc"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ems="10"
android:hint="Description"/>
</android.support.design.widget.TextInputLayout>
</LinearLayout>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>
Colors:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="primary">#303F9F</color>
<color name="primary_dark">#3F51B5</color>
<color name="accent">#00E5FF</color>
</resources>
And styles.xml:
<resources>
<style name="AppTheme" parent="AppTheme.Base"/>
<style name="AppTheme.Base" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">#color/primary</item>
<item name="colorPrimaryDark">#color/primary_dark</item>
<item name="colorAccent">#color/accent</item>
<item name="colorControlNormal">#FFF</item>
</style>
</resources>
Use android:theme="#style/AppTheme" for application in manifest and android:theme="#style/AppTheme.Base" forMainActivity`.
I think that you need to create you own toolbarlyout and set it to the activity toolbar.
try this :
http://javatechig.com/android/actionbar-with-custom-view-example-in-android
you just need to create your component.
i hope that will be helpful for you ;)
You can use a linear layout with the same color of your toolbar. The toolbar attribute android:elevation needs to be 0px.
Activity (xml)
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<include
layout="#layout/toolbar_task"
android:layout_width="match_parent"
android:layout_height="wrap_content"
></include>
<fragment xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools" android:id="#+id/fragment_task"
android:name="com.hashicode.simpletodo.fragment.TaskFragment" tools:layout="#layout/fragment_task"
android:layout_width="match_parent" android:layout_height="match_parent" />
</LinearLayout>
Toolbar (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:fitsSystemWindows="true"
android:minHeight="?attr/actionBarSize"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:background="?attr/colorPrimaryDark"
android:elevation="0px">
</android.support.v7.widget.Toolbar>
Fragment (xml)
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<LinearLayout
android:id="#+id/taskname_area"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/PrimaryDarkColor"
android:orientation="vertical">
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingBottom="36dp"
android:paddingLeft="72dp"
android:paddingRight="16dp">
<EditText
android:id="#+id/task_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/task.name"
android:textSize="30dp"/>
</android.support.design.widget.TextInputLayout>
</LinearLayout>
<!-- some code -->
</android.support.design.widget.CoordinatorLayout>
Activity (java)
public class TaskActivity extends AppCompatActivity {
#Override
protected void onCreate(#Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
initializeTodo(savedInstanceState);
setContentView(R.layout.activity_task);
//set the toolbar
setSupportActionBar((Toolbar) findViewById(R.id.toolbar));
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
getSupportActionBar().setTitle(null);
}
The result:
AppBarLayout would be best bet
Ref https://developer.android.com/reference/android/support/design/widget/AppBarLayout.html
Example
http://www.feelzdroid.com/2015/07/android-appbarlayout-scrolling-example.html
obviously you would need to do customizations
Hope this helps
I am tying to get transparent toolbar over RecyclerView contains custom Relative Layout i called it customHeader . my layout in the main activity is like:
i use android support design library v.22.2.1 and other support libraries with the same version
things are fine except that, i am getting toolbar with my primary color rather than transparent toolbar even though, i have removed background color from toolbar layout.
this is the result i have got:
What i want is transparent toolbar but should get filled with primary color only when i scroll up
my activity_main layout is:
<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.support.design.widget.CoordinatorLayout
android:id="#+id/rootLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsingToolbarLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
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>
<FrameLayout
android:id="#+id/content_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
<android.support.design.widget.FloatingActionButton
android:id="#+id/btnCreate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|right"
android:layout_marginBottom="#dimen/btn_fab_margins"
android:layout_marginRight="#dimen/btn_fab_margins"
android:src="#drawable/share"
app:borderWidth="0dp"
app:elevation="6dp"
app:pressedTranslationZ="12dp" />
</android.support.design.widget.CoordinatorLayout>
<android.support.design.widget.NavigationView
android:id="#+id/vNavigation"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="#color/WHITE"
app:itemIconTint="#color/primary_text"
app:itemTextColor="#color/primary_text"
app:headerLayout="#layout/drawer_header"
app:menu="#menu/drawer_menu"/>
</android.support.v4.widget.DrawerLayout>
then the layout in my fragment is:
<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">
<!-- Story list in main page -->
<com.creativeLabs.news.util.MySwipeRefreshLayout
android:id="#+id/swipe_refresh_story"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity$PlaceholderFragment">
<android.support.v7.widget.RecyclerView
android:id="#+id/list_view_story_list"
android:overScrollMode="never"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</com.creativeLabs.news.util.MySwipeRefreshLayout>
</RelativeLayout>
my customHeader layout is:
<?xml version="1.0" encoding="utf-8"?>
<com.creativeLabs.news.ui.view.SlideTopStory
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_marginBottom="#dimen/story_list_item_margin_vertical"
android:layout_width="match_parent"
android:layout_height="#dimen/slide_image_height">
<ImageView
android:id="#+id/ivStoryimage"
android:contentDescription="#string/story_title"
android:scaleType="centerCrop"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
<ProgressBar
android:id="#+id/loading_bar"
android:layout_centerInParent="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<!-- A mask view -->
<View
android:background="#drawable/title_slide_background"
android:layout_alignParentBottom="true"
android:layout_width="match_parent"
android:layout_height="70dip"/>
<View
android:background="#drawable/title_slide_background1"
android:layout_alignParentTop="true"
android:layout_width="match_parent"
android:layout_height="70dip"/>
<TextView
android:id="#+id/title"
android:layout_alignParentBottom="true"
android:textColor="#android:color/white"
android:textSize="#dimen/text_size_large"
android:gravity="center_vertical"
android:paddingLeft="#dimen/slide_image_title_padding"
android:paddingRight="#dimen/slide_image_title_padding"
android:paddingEnd="#dimen/slide_image_title_padding"
android:layout_marginBottom="#dimen/slide_image_title_margin"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</com.creativeLabs.news.ui.view.SlideTopStory>
My app thems.xml:
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
<item name="colorControlNormal">#android:color/white</item>
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
.......
.......
in the manifest -> application tag:
android:theme="#style/AppTheme.WithoutActionBar">
in my activities and fragments, i coded nothing regarding toolbar colors or any other treatments other than
setSupportActionBar(toolbar);
getSupportActionBar().setHomeButtonEnabled(true);
toolbar.setNavigationIcon(getActionBarIconResource());
so, why toolbar is getting the app primary color? how can i get a transparent toolbar ..any help please?
Thanks in advance
<android.support.v7.widget.Toolbar
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar" />
Check how u style is applied
Where u set it to transparent (alpha?)
View.getBackground().setAlpha(..) ;
I'd like the toolbar(actionbar) to hide completely when scrolling down. On launching the activity or scrolling back up the toolbar should be visible and the statusbar light grey.
start as [ statusbar | toolbar | content ]
scrolling down [ co-(statusbar)-ntent ]
scrolling up [ statusbar | toolbar | content ]
currently:
on startup / boot
scrolled content down
scrolled content up
activity_layout.xml
<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:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/background_white"
tools:context="com.conevoud.captjeluigi.ui.activities.GalleryActivity">
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<FrameLayout
android:id="#+id/content_frame"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<include layout="#layout/toolbar" />
</android.support.design.widget.CoordinatorLayout>
<include layout="#layout/drawer_left" />
</android.support.v4.widget.DrawerLayout>
toolbar.xml
<merge xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<android.support.design.widget.AppBarLayout
android:id="#+id/toolbar_frame"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="?popup_theme"
app:theme="#style/ThemeOverlay.AppCompat.ActionBar" />
</android.support.design.widget.AppBarLayout>
</merge>
styles:
<item name="windowActionModeOverlay">true</item>
<item name="android:windowTranslucentNavigation">true</item>
<item name="android:windowTranslucentStatus">true</item>
thank you for reading this.
I had a sinular problem before, try setting android:fitsSystemWindows=”true” in your AppBarLayout.
<android.support.design.widget.AppBarLayout
android:id="#+id/toolbar_frame"
android:fitsSystemWindows=”true”
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="?popup_theme"
app:theme="#style/ThemeOverlay.AppCompat.ActionBar" />
</android.support.design.widget.AppBarLayout>
I had the similar problem. Mine was solved.
Added android:fitsSystemWindows="true" to theAppBarLayout.
Addedapp:layout_scrollFlags="scroll|enterAlways|snap" for Toolbar
Below is the layout I had.
<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"
tools:context=".HomeActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways|snap"
app:popupTheme="#style/AppTheme.PopupOverlay" />
<android.support.design.widget.TabLayout
android:id="#+id/id_tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/id_viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="#dimen/fab_margin"
android:src="#android:drawable/ic_dialog_email"/>
it's looks like the only options is - get rid of
<item name="android:statusBarColor">#android:color/transparent</item>
property