With the new Toolbar API in Android Lollipop and AppCompat-v7, they are removing a lot of the automatic features to make Toolbar/ActionBar more robust. One of those things is the progress bar. Since Toolbar is simply a ViewGroup, I assumed adding a ProgressBar would be simple. However, I cannot seem to get it to work properly.
I have done the following (using the SmoothProgressBar library):
// I instantiate the toolbar and set it as the actionbar
mToolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(mToolbar);
// I create a ProgressBar and set the drawable to the SmoothProgressBar drawable
ProgressBar progressBar = new ProgressBar(this);
progressBar.setIndeterminateDrawable(new SmoothProgressDrawable.Builder(this).color(Color.BLUE).interpolator
(new DecelerateInterpolator()).sectionsCount(4).separatorLength(8).speed(2f).mirrorMode(true).build());
// I add the progressbar to the view with what I thought were the proper LayoutParams.
Toolbar.LayoutParams params = new Toolbar.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, 20);
params.gravity = Gravity.BOTTOM;
mToolbar.addView(progressBar, params);
progressBar.setIndeterminate(true);
I had figured this would work as I'm simply adding a ProgressBar to the bottom of the ViewGroup. However, it is not showing at all and is removing the Title. Below you can see a before and after. Does anyone know how to go about fixing this? My goal is to have a ProgressBar underneath the actionbar.
Before
After
The easiest way is to the to add the ProgressBar directly in the XML-Layout files.
1. One time Solution
Using a RelativeLayout as root and use android:layout_below to keep the ProgressBar and the main content below the toolbar.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimaryDark"/>
<fr.castorflex.android.smoothprogressbar.SmoothProgressBar
android:id="#+id/loadProgressBar"
style="#style/LoadProgressBar"
android:layout_width="match_parent"
android:layout_height="4dp"
android:layout_below="#+id/toolbar"
android:indeterminate="true"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/toolbar"
android:orientation="vertical">
<!-- Your Content here -->
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Content Text"/>
</LinearLayout>
</RelativeLayout>
Now you can access the Toolbar and the ProgressBar in the Activitiy onCreate method
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
toolbar = (Toolbar) findViewById(R.id.toolbar);
progressBar = (SmoothProgressBar) findViewById(R.id.loadProgressBar);
if (toolbar != null) {
setSupportActionBar(toolbar);
}
}
2. General solution using include
A more general approach is to put the Toolbar and the ProgressBar in a separate XML-Layout file and include this in the activity layout.
toolbar.xml
<merge xmlns:android="http://schemas.android.com/apk/res/android">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimaryDark"/>
<fr.castorflex.android.smoothprogressbar.SmoothProgressBar
android:id="#+id/loadProgressBar"
style="#style/LoadProgressBar"
android:layout_width="match_parent"
android:layout_height="4dp"
android:layout_below="#+id/toolbar"
android:indeterminate="true"/>
</merge>
activity_main.xml
<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">
<include
layout="#layout/toolbar"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/toolbar"
android:orientation="vertical">
<!-- Your Content here -->
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Content Text"/>
</LinearLayout>
</RelativeLayout>
This will show the horizontal toolbar below the toolbar:
<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">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize">
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<me.zhanghai.android.materialprogressbar.MaterialProgressBar
android:layout_width="match_parent"
android:layout_height="4dp"
android:indeterminate="true"
app:mpb_progressStyle="horizontal"
app:mpb_useIntrinsicPadding="false"
android:layout_alignParentBottom="true"
style="#style/Widget.MaterialProgressBar.ProgressBar.Horizontal" />
</RelativeLayout>
</android.support.design.widget.AppBarLayout>
You can visit my github for more information Horizontal Progressbar below toolbar or watch this youtube tutorial Toolbar with Horizontal Progressbar
Try this, will show under statusBar
<androidx.coordinatorlayout.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">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay"
app:elevation="0dp"
android:elevation="0dp">
<ProgressBar
android:id="#+id/progressbar"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:indeterminate="true"
android:max="100"
android:layout_marginTop="-7dp"
android:layout_marginBottom="-7dp"
android:visibility="visible" />
<androidx.appcompat.widget.Toolbar
Related
I am making a simple app. I use CoordinatorLayout and AppbarLayout, AppbarLayout contains two Toolbar.
<?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=".MainActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar1"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_scrollFlags="scroll|enterAlways"
>
<LinearLayout
android:layout_width="match_parent"
android:orientation="horizontal"
android:layout_height="wrap_content">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="hi"/>
</LinearLayout>
</android.support.v7.widget.Toolbar>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar2"
android:layout_width="match_parent"
android:visibility="gone"
app:layout_collapseMode="pin"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="sign"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="hil"
/>
</LinearLayout>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="call"/>
</android.support.v4.widget.NestedScrollView>
public void call(View view) {
Toolbar toolbar=(Toolbar)findViewById(R.id.toolbar1);
Toolbar toolbar2=(Toolbar)findViewById(R.id.toolbar2);
toolbar.setVisibility(View.GONE);
toolbar2.setVisibility(View.VISIBLE);
}
In normal, the First toolbar will scroll, but When I click on the button in NestedScrollView. The second toolbar should show, toolbar must pin at the top don't want to scroll.
What to do?
As #kris Larson said.
The Toolbar, being a child of the AppBarLayout, gets its LayoutParams from the AppBarLayout. These layout params have the scroll flags that are set in the XML.
So, you get the AppBarLayout.LayoutParams from the Toolbar, and call setScrollFlags() to change the flags to the value you want.
Toolbar toolbar = findViewById(R.id.toolbar); // or however you need to do it for your code
AppBarLayout.LayoutParams params = (AppBarLayout.LayoutParams) toolbar.getLayoutParams();
params.setScrollFlags(0); // clear all scroll flags
I'm trying to add a border that would look like this:
https://imgur.com/a/r8rHGQl
My toolbar.xml:
<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_main"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorPrimary"
android:elevation="1dp"
app:theme="#style/AppTheme"
app:titleTextAppearance="#style/TitleText"
app:titleTextColor="#color/colorPrimaryText"
>
</android.support.v7.widget.Toolbar>
In my java code I do :
toolbar = findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
and inflating the menu.
If I try to nest the toolbar in relative/linear/constrains layout and add a View at the bottom I get the "android.widget.LinearLayout cannot be cast to android.support.v7.widget.Toolbar" error
Also tried to <include a layout with a View inside of it, but then the line appears in the middle of my toolbar and my title disappears.
Also including my menu.xml:
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item
android:id="#+id/item1"
android:icon="#drawable/main_btn_info"
android:title="Item 1"
app:showAsAction="always"/>
</menu>
Create toolbar inside Linear Layout with a view
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar_main"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorPrimary"
android:elevation="1dp"
app:theme="#style/AppTheme"
app:titleTextAppearance="#style/TitleText"
app:titleTextColor="#color/colorPrimaryText"/>
<View
android:background="your border color"
android:layout_width="match_parent"
android:layout_height="2dp" />
</LinearLayout>
Include this in all your layouts.
Then find toolbar in activity using toolbar id instead of xml name
toolbar = findViewById(R.id.toolbar_main);
setSupportActionBar(toolbar);
I used this method:
<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:orientation="vertical">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:title="Setting"
app:titleTextColor="#color/colorPrimary" />
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_marginTop="1dp"
android:layout_marginBottom="1dp"
android:background="#DDD" />
</LinearLayout>
Made another layout with the border and included it in every activity, I know it's not the best way to do it, but result is the same for now.
Try using the elevation parameter
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar_login"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#FFFFFF"
app:title="Log In"
android:elevation="5dp"
app:titleTextColor="#000000" />
android:elevation="5dp"
This gives you out an basic elevation border bottom shadow for Toolbar
I'm trying to disable the shadow below a transparent AppBarLayout/Toolbar. Here's the layout:
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:background="#000">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:background="#android:color/transparent"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.v7.widget.Toolbar
android:id="#+id/imagePreviewToolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize" />
</android.support.design.widget.AppBarLayout>
<include layout="#layout/content_image_preview" />
</android.support.design.widget.CoordinatorLayout>
I already tried with
app:elevation="0dp"
and
getSupportActionBar().setElevation(0);
but that makes the UP arrow invisible. I also tried to remove the AppBarLayout and use only the Toolbar, but the problem persists.
Anyone has a solution?
EDIT:
Replacing the AppBarLayout + Toolbar combo with this code:
<android.support.v7.widget.Toolbar
android:id="#+id/imagePreviewToolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#android:color/transparent"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:elevation="0dp"/>
partially fixed the problem. Now the Toolbar becomes invisible only when the device is in landscape mode! The Android Studio Layout Editor shows me the Toolbar in both orientations just fine, so I don't really know what the problem could be..
after some tries i did find that ToolBar should be the last view in this case else if it will be first then the view coming after it will overlap it as it has height set to match_parent so try this way in layout.
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"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/imagePreviewToolbar" >
<ImageView
android:id="#+id/image_preview"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/galacticos"
android:contentDescription="abc"
android:scaleType="fitCenter" />
<LinearLayout
android:id="#+id/actionBtns"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:orientation="horizontal"
android:padding="16dp" >
<ImageButton
android:id="#+id/setBackgroundBtn"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#null"
android:contentDescription="abc"
android:src="#drawable/ic_launcher" />
<ImageButton
android:id="#+id/downloadBtn"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="?selectableItemBackgroundBorderless"
android:clickable="true"
android:contentDescription="abc"
android:src="#drawable/ic_launcher" />
</LinearLayout>
</RelativeLayout>
<android.support.v7.widget.Toolbar
android:id="#+id/imagePreviewToolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:fitsSystemWindows="true"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar" />
And don't forget to initialize this all and set your title to false to only show the toolBar back button:
Activity Code
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.test);
Toolbar mToolBar = (Toolbar) findViewById(R.id.imagePreviewToolbar);
setSupportActionBar(mToolBar);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
getSupportActionBar().setDisplayShowTitleEnabled(false);
getSupportActionBar().setHomeButtonEnabled(true);
}
Pics
Hope i helped you.
Make toolbar like this:
<android.support.design.widget.AppBarLayout
android:id="#+id/myAppBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:elevation="0dp"...>
</android.support.design.widget.AppBarLayout>
And after that in your Activity;
findViewById(R.id.myAppBar).bringToFront();
I have some problems about android toolbar. Normally if I set a custom view into toolbar, the view should fill the whole toolbar space from left to right and has no margin.
but mine has a empty space in the left , these are my code :
xml:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.v7.widget.Toolbar
android:id="#+id/base_toolbar"
android:layout_width="match_parent"
android:layout_height="46dip"
android:background="?attr/colorPrimary" />
<FrameLayout
android:id="#+id/base_content"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
activity:
private void initToolbar() {
toolbar = (Toolbar) findViewById(R.id.base_toolbar);
setSupportActionBar(toolbar);
ActionBar actionBar = getSupportActionBar();
if( actionBar != null)
actionBar.setDisplayOptions(ActionBar.DISPLAY_SHOW_CUSTOM);
contentLayout = (FrameLayout) findViewById(R.id.base_content);
}
Is here anything wrong with my code or it should be like this ?
The space on the left is caused by Toolbar's contentInsetStart which by default is 16dp. You can set it to 0 to remove it. Dont forget to add the schema.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.v7.widget.Toolbar
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/base_toolbar"
android:layout_width="match_parent"
android:layout_height="46dip"
android:background="?attr/colorPrimary"
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp" />
<FrameLayout
android:id="#+id/base_content"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
You can do like this,
<android.support.v7.widget.Toolbar
android:id="#+id/my_awesome_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#1E90FF"
android:minHeight="?attr/actionBarSize" >
<TextView
android:id="#+id/toolbar_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:ellipsize="end"
android:singleLine="true"
android:text="Toolbar Title"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textColor="#ffffff" />
</android.support.v7.widget.Toolbar>
I want to make the ActionBar transparent and it above the image like this picture.
How set it?
Layout
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
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="wrap_content"
android:background="#drawable/background_white"
android:minHeight="?attr/actionBarSize" />
<FrameLayout
android:id="#+id/framelayout_content"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</FrameLayout>
Solution 1#
//whole toolbar will be transparent
mToolbar.setAlpha(0.0f);
Solution 2#
//only background of toolbar will be transparent
mToolbar.getBackground().setAlpha(0);
#maros136:
I think you should add the toolbar layout below the framelayout_content and the root layout should be a RelativeLayout in order to have the toolbar always on top.
Like this:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/main_details_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
Your layout here
</LinearLayout>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/transparent"
/>
</RelativeLayout>
Result:
https://play.google.com/store/apps/details?id=com.levionsoftware.photos