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
Related
Im adding a Hamburger Icon on the lesft side of my ToolBar but when Im running it the app crashes
Here is my xml file
<LinearLayout
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:fitsSystemWindows="true"
android:orientation="vertical">
<android.support.design.widget.AppBarLayout
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="#dimen/abc_action_bar_default_height_material"
android:background="?attr/colorPrimary"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="Test"
android:background="#color/colorPrimary"
android:textColor="#color/black"
android:textSize="18dp"
android:gravity="center"/>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.DrawerLayout
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- Real content goes here -->
<FrameLayout
android:id="#+id/content"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:textColor="#color/black"
android:text="Test"/>
</FrameLayout>
<!-- The navigation drawer -->
<android.support.design.widget.NavigationView
android:id="#+id/navigation"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:headerLayout="#layout/navigation_header"
app:menu="#menu/navigation_menu"/>
</android.support.v4.widget.DrawerLayout>
</LinearLayout>
and here is my java class
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBarDrawerToggle;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.Toolbar;
public class test extends AppCompatActivity {
private DrawerLayout sideBar;
private ActionBarDrawerToggle sideBarToggle;
private Toolbar actionToolbar;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_test);
/* Side Bar */
actionToolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(actionToolbar);
sideBar = (DrawerLayout) findViewById(R.id.navigation);
sideBarToggle = new ActionBarDrawerToggle(this, sideBar, R.string.Open, R.string.Close);
sideBar.addDrawerListener(sideBarToggle);
sideBarToggle.syncState();
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
}
}
Does it have any conflict with my custom Toolbar?
I dont know whats wrong and Im trying to search everywhere but still no luck. I dont know what or where to fix. thnx for the future help
Updated
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/toolbar"
>
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="#dimen/abc_action_bar_default_height_material"
android:background="?attr/colorPrimary"
android:theme="#style/Theme.AppCompat.DayNight.NoActionBar">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/colorPrimary"
android:gravity="center"
android:text="Test"
android:textColor="#color/black"
android:textSize="18dp" />
</android.support.design.widget.AppBarLayout>
</android.support.v7.widget.Toolbar>
Added style.xml
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
</style>
</resources>
style.xml
<resources>
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
</style>
</resources>
main_activity.xml
<?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="im.opriday.customlistview.MainActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbr"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</android.support.design.widget.AppBarLayout>
</RelativeLayout>
MainActivity
import android.support.v7.widget.Toolbar instead of import android.widget.Toolbar
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbr);
setSupportActionBar(toolbar);
getSupportActionBar().setTitle("Hello");
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
getSupportActionBar().setDisplayShowHomeEnabled(true);
getSupportActionBar().setHomeAsUpIndicator(R.drawable.ic_menu_black_24dp);
}
This code would be correct. No need in extra TextView
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="#dimen/abc_action_bar_default_height_material"
android:background="?attr/colorPrimary"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</android.support.design.widget.AppBarLayout>
You do not have identifier(android:id="#+id/toolbar") mentioned for the toolbar which you are referencing in your code. Since its not found it would return exception.
<android.support.design.widget.AppBarLayout
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:id="#+id/toolbar" <!---missing-->
android:layout_height="200dp">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="Test"
android:background="#color/colorPrimary"
android:textColor="#color/black"
android:textSize="18dp"
android:gravity="center"/>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
Your style.xml should have parent with ActionBar like ThemeOverlay.AppCompat.Dark.ActionBar and not NoActionBar as you have right now
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="ThemeOverlay.AppCompat.Dark.ActionBar">
Please follow this tutorial for guidance link
Your layout must be in this order.
<DrawerLayout>
<AppBarLayout>
<Toolbar>
// Toolbar content
</Toolbar>
</AppBarLayout>
<NavigationView />
</DrawerLayout>
You need to include the toolbar in your ActionBarDraweToggle constructor parameter if you want a default hamburger menu.
sideBarToggle = new ActionBarDrawerToggle(this, sideBar, actionToolbar , R.string.Open, R.string.Close);
First of all , I know that There are too many answer here.But I have tried probably all of them.
Here is links :
How to display custom view in ActionBar?
How to make a Custom View(EditText) on the actionbar automatically selected?
Some others web-sites :
http://wptrafficanalyzer.in/blog/adding-custom-action-view-to-action-bar-in-android/
http://www.sanfoundry.com/java-android-program-add-custom-view-actionbar/
I want to make a custom action bar which has a Edittext. Here is my code.
But all my tried is fail. Emuletor or real phone crushing all my running.How can I fix it ?
My main_activty :
public class MainActivity extends AppCompatActivity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ArrayList<String> data = new ArrayList<>();
data.add("hi");
toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(mToolbar);
actionBarCustomView = findViewById(R.id.actionbar_in_toolbar); //wrapper because layout is included
autocompleteTextView = actionBarCustomView.findViewById(R.id.actionbar_search);
autocompleteTextView.clearFocus();
autocompleteTextView.setAdapter(new AutocompleteListViewAdapter(this, R.layout.activity_main, data, this));
}
}
my layout_part_of_design : Missing classes
The following classes could not be found:
- android.support.design.widget.AppBarLayout (Fix Build Path, Edit XML, Create Class)
- android.support.design.widget.CoordinatorLayout (Fix Build Path, Edit XML, Create Class)
Tip: Try to build the project. Tip: Try to refresh the layout.
There is not any code or different something.I am using 21 API.
and Render problem :
Couldn't resolve resource #color/primary Tip: Try to refresh the layout.
Activity_main xml :
<?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:fab="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<?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="wrap_content"
android:background="#color/primary"
android:focusable="true"
android:focusableInTouchMode="true"
android:paddingBottom="10dp"
android:paddingEnd="20dp"
android:paddingRight="20dp"
android:paddingTop="10dp">
<AutoCompleteTextView
android:id="#+id/actionbar_search"
android:layout_width="match_parent"
android:layout_height="35dp"
android:layout_alignParentTop="true"
android:layout_centerVertical="true"
android:layout_marginLeft="8dp"
android:layout_marginStart="8dp"
android:hint="Some Hint"
android:background="#color/primary_dark"
android:drawableLeft="#drawable/ic_search_white_24dp"
android:drawableStart="#drawable/ic_search_white_24dp"
android:gravity="center_vertical"
android:padding="5dp"
android:singleLine="true"
android:textColor="#color/white"
android:textColorHint="#color/white"
android:textSize="#dimen/bigger_text_size_14sp" />
</RelativeLayout>
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
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:popupTheme="#style/AppTheme.PopupOverlay">
<include
android:id="#+id/actionbar_in_toolbar"
layout="#layout/toolbar.xml" />
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="?attr/actionBarSize"
android:background="#android:color/white"
tools:ignore="MergeRootFrame" />
</android.support.design.widget.CoordinatorLayout>
</RelativeLayout>
You need a custom toolbar for sure.
First, let's create custom xml for toolbar.
toolbar.xml
<?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="wrap_content"
android:background="#color/primary"
android:focusable="true"
android:focusableInTouchMode="true"
android:paddingBottom="10dp"
android:paddingEnd="20dp"
android:paddingRight="20dp"
android:paddingTop="10dp">
<AutoCompleteTextView
android:id="#+id/actionbar_search"
android:layout_width="match_parent"
android:layout_height="35dp"
android:layout_alignParentTop="true"
android:layout_centerVertical="true"
android:layout_marginLeft="8dp"
android:layout_marginStart="8dp"
android:hint="Some Hint"
android:background="#color/primary_dark"
android:drawableLeft="#drawable/ic_search_white_24dp"
android:drawableStart="#drawable/ic_search_white_24dp"
android:gravity="center_vertical"
android:padding="5dp"
android:singleLine="true"
android:textColor="#color/white"
android:textColorHint="#color/white"
android:textSize="#dimen/bigger_text_size_14sp" />
</RelativeLayout>
then place this toolbar in your activity layout (includes fragment)
activity_something.xml
<?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:fab="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.CoordinatorLayout
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: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:popupTheme="#style/AppTheme.PopupOverlay">
<include
android:id="#+id/actionbar_in_toolbar"
layout="#layout/toolbar.xml" />
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="?attr/actionBarSize"
android:background="#android:color/white"
tools:ignore="MergeRootFrame" />
</android.support.design.widget.CoordinatorLayout>
</RelativeLayout>
then in activity (written in Java), set as a custom toolbar, find views by Id and do all the stuff you need
MyActivity.java
toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(mToolbar);
actionBarCustomView = findViewById(R.id.actionbar_in_toolbar); //wrapper because layout is included
autocompleteTextView = actionBarCustomView.findViewById(R.id.actionbar_search);
autocompleteTextView.clearFocus();
autocompleteTextView.setAdapter(new AutocompleteListViewAdapter(this, R.layout.item_some_layout, data, this));
set this in your style themes.
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
app.gradle
minSdkVersion 16
targetSdkVersion 22
compileSdkVersion 27
buildToolsVersion '27.0.3'
...
implementation 'com.android.support.constraint:constraint-layout:1.0.2'
implementation com.android.support:design:25.3.1
...
this should work.
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.
Today I was thinking of a way to improve my tablet design, and I found this image
I wanted that so bad, as it looks amazing. I am searching google for about a hour now and I haven't come across any good tutorials. I've found this one: v21 Material Design for Pre Lollipop.
I started implementing this right away and everything I tried went completely wrong. The theming for the standalone actionbar needs to be the ThemeOverlay.AppCompat.ActionBar however on my phone layout I am extending the Theme.AppCompat.NoActionBar theme. (Theme is below)
It's just not clear what I should do to make something like the image above on Tablets and show the normal (custom) supportActionBar on Phones without messing up one of them.
Here is my AppTheme style (that I apply to my app)
<!-- Base application theme. -->
<style name="AppTheme" parent="#style/Theme.AppCompat.NoActionBar">
<!-- your app branding color for the app bar -->
<item name="colorPrimary">#color/primaryColor</item>
<!-- darker variant for the status bar and contextual app bars -->
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<!-- theme UI controls like checkboxes and text fields -->
<item name="colorAccent">#color/colorAccent</item>
</style>
Before you ask, yes I've found this quesion on SO, but no this isn't a duplicate question. The post that Chris Banes wrote didn't make things clear for me as well.
Is it possible to do this without destroying both the layouts? Thinking out loud, the reason for me to pick the custom toolbar was because I had included a custom searchview, but removed it. There is another view in the toolbar but I think that it could be removed if it's really necessary.
This is the layout of my phone version.
<?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:id="#+id/coordinatorLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:theme="#style/Theme.AppCompat.NoActionBar">
<android.support.design.widget.AppBarLayout
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:animateLayoutChanges="true"
android:orientation="vertical">
<include android:id="#+id/toolbar" layout="#layout/toolbar"
app:layout_scrollFlags="scroll|enterAlways" />
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/toolbar"
android:background="#color/primaryColor"
android:minHeight="?attr/actionBarSize"/>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.DrawerLayout
android:id="#+id/drawerLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/appBarLayout"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity" />
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout
android:id="#+id/replaceFrameLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/errorWarnings"
android:visibility="gone"
android:gravity="center"
android:layout_gravity="center">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/errorIcon"
android:tint="#color/fab_material_red_500"
android:layout_centerVertical="true"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/errorDescription"
android:layout_below="#+id/errorIcon"/>
</RelativeLayout>
<com.tim.koers.wallpapers.UI.FilterButton
android:id="#+id/filterButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right|bottom"
android:layout_margin="16dp"
android:clickable="true"
android:src="#drawable/ic_menu_filter"
android:elevation="6dp"
android:tint="#color/fab_material_white"
android:visibility="gone"/>
</FrameLayout>
<android.support.design.widget.NavigationView
android:id="#+id/navigation_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:menu="#menu/drawer"/>
</android.support.v4.widget.DrawerLayout>
</android.support.design.widget.CoordinatorLayout>
Here is my tablet layout:
<?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:id="#+id/coordinatorLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v4.widget.DrawerLayout
android:id="#+id/drawerLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:animateLayoutChanges="true"
android:orientation="vertical"
android:background="#android:color/white"
android:layout_marginEnd="64dp"
android:layout_marginStart="64dp"
android:layout_marginTop="56dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<!-- This is the secondary toolbar, 72dp also according to specs -->
<include android:id="#+id/toolbar" layout="#layout/toolbar"
app:layout_scrollFlags="scroll|enterAlways" />
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/toolbar"
android:background="#color/primaryColor"
android:minHeight="?attr/actionBarSize"/>
</RelativeLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="56dp"
android:layout_marginEnd="64dp"
android:layout_marginStart="64dp"
tools:context=".MainActivity" />
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout
android:id="#+id/replaceFrameLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/errorWarnings"
android:visibility="gone"
android:gravity="center"
android:layout_gravity="center">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/errorIcon"
android:tint="#color/fab_material_red_500"
android:layout_centerVertical="true"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/errorDescription"
android:layout_below="#+id/errorIcon"/>
</RelativeLayout>
<com.tim.koers.wallpapers.UI.FilterButton
android:id="#+id/filterButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right|bottom"
android:layout_margin="16dp"
android:clickable="true"
android:src="#drawable/ic_menu_filter"
android:elevation="6dp"
android:tint="#color/fab_material_white"
android:visibility="gone"/>
</FrameLayout>
<android.support.design.widget.NavigationView
android:id="#+id/navigation_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:menu="#menu/drawer"/>
</android.support.v4.widget.DrawerLayout>
</FrameLayout>
</android.support.design.widget.CoordinatorLayout>
I found an article that implements this layout.
Create a Card Toolbar (Nested Toolbar) in Android
You can implement it to your tablet layout.
It is composed of a extended-height toolbar (blue) and a CardView with title and regular menu.
The basic structure:
<FrameLayout>
<!-- Extended Toolbar holding Drawer icon -->
<android.support.v7.widget.Toolbar />
<android.support.v7.widget.CardView>
<LinearLayout>
<!-- Card Toolbar -->
<android.support.v7.widget.Toolbar />
<!-- Divider -->
<View />
</LinearLayout>
</android.support.v7.widget.CardView>
</FrameLayout>
step1 double the height of the toolbar
step2 setting up the CardView as the secondary toolbar
step3 Java code
origin toolbar: set Navigation Icon
CardView toolbar: set menu and title
See More
Android 5.0 - How to implement this tablet layout from Material Design guidelines
Googling this Picture
After many hours of trying things out I've come up with the following code:
For your phone layout use this as a base:
<?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:id="#+id/coordinatorLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:theme="#style/Theme.AppCompat.NoActionBar">
<android.support.v4.widget.DrawerLayout
android:id="#+id/drawerLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:animateLayoutChanges="true"
android:orientation="vertical">
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:background="#color/primaryColor"
android:minHeight="?attr/actionBarSize"
style="#style/tabsWidgetIndicatorColors"
android:theme="#style/Theme.AppCompat.NoActionBar">
</android.support.v7.widget.Toolbar>
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/toolbar"
android:background="#color/primaryColor"
android:minHeight="?attr/actionBarSize"/>
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- Put your content here -->
</FrameLayout>
</RelativeLayout>
<android.support.design.widget.NavigationView
android:id="#+id/navigation_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true"
app:menu="#menu/drawer"/>
</android.support.v4.widget.DrawerLayout>
</android.support.design.widget.CoordinatorLayout>
For your tablet layout use this as a base:
<?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:id="#+id/coordinatorLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:theme="#style/Theme.AppCompat"
>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v4.widget.DrawerLayout
android:id="#+id/drawerLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:fitsSystemWindows="true">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="128dp"
android:orientation="vertical">
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/primaryColor"
android:minHeight="?attr/actionBarSize"
android:id="#+id/actionToolbar"
/>
<View
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/primaryColor"
android:minHeight="?attr/actionBarSize"
/>
</LinearLayout>
<android.support.design.widget.AppBarLayout
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:animateLayoutChanges="true"
android:orientation="vertical"
android:layout_marginEnd="64dp"
android:layout_marginStart="64dp"
android:layout_marginTop="56dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<!-- This is the secondary toolbar, 72dp also according to specs -->
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:background="#color/colorSecondary"
android:theme="#style/ThemeOverlay.AppCompat.ActionBar"
android:minHeight="72dp"
style="#style/tabsWidgetIndicatorColors"
>
<!--android:background="?attr/colorPrimary"-->
</android.support.v7.widget.Toolbar>
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/toolbar"
android:background="#color/colorSecondary"
android:minHeight="?attr/actionBarSize"/>
<!--android:background="?attr/colorPrimary"-->
</RelativeLayout>
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- your content here-->
</FrameLayout>
</RelativeLayout>
<android.support.design.widget.NavigationView
android:id="#+id/navigation_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true"
app:menu="#menu/drawer"/>
</android.support.v4.widget.DrawerLayout>
</FrameLayout>
</android.support.design.widget.CoordinatorLayout>
In your main code use findViewById to find the Toolbar with the id #+id/toolbar and #+id/actionBar.
If you are on a tablet layout, both Toolbars should not be null. On a phone, the actionBar is null.
Check for that, and if it's not null, you will need to set the supportactionbar to the toolbar with the id #+id/actionBar, and you will need to inflate the menu on the toolbar with the id #+id/toolbar. While running the tablet/phone check, make a new private boolean accessible to your class named isInflateMenuEnabled. If the #+id/actionBar toolbar is not null, isInflateMenuEnabled should be false.
To wrap things up, this is the code:
public class MainActivity extends AppCompatActivity implements Toolbar.OnMenuItemClickListener{
private boolean isInflateMenuEnabled = true;
private Toolbar mToolbar;
#Override
protected void onCreate(Bundle savedInstanceState) {
setContentView(R.layout.activity_main);
//Check if it is a tablet or phone
mToolbar = (Toolbar) findViewById(R.id.toolbar);
Toolbar actionToolbar = (Toolbar)findViewById(R.id.actionToolbar);
if(actionToolbar != null){
isInflateMenuEnabled= false;
setSupportActionBar(actionToolbar);
actionToolbar.setTitle("");
mToolbar.inflateMenu(R.menu.menu_main);
mToolbar.setOnMenuItemClickListener(this);
}else{
mToolbar.inflateMenu(R.menu.menu_main); // Inflate the menu because there will be no menu inflated automatically anymore.
mToolbar.setOnMenuItemClickListener(this);
setSupportActionBar(mToolbar);
}
mToolbar.setTitle(getString(R.string.title));
}
#Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.menu_main, menu);
return isInflateMenuEnabled;
}
#Override
public boolean onOptionsItemSelected(final MenuItem item) {
// Handle action bar item clicks here. The action bar will
// automatically handle clicks on the Home/Up button, so long
// as you specify a parent activity in AndroidManifest.xml.
// This will be working with your menu clicks
}
}
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(..) ;