I am creating an android app but I have some problem I cant remove this blue heading or I don’t know how its called, or action bar ?
I have tried some methods but they didn’t work.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:layout_width="match_parent"
android:layout_height="match_parent" android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:paddingBottom="#dimen/activity_vertical_margin"
tools:showIn="#layout/activity_main"
tools:context=".MainActivity"
android:background="#9AEA30">
<ImageView
android:layout_width="250dp"
android:layout_height="250dp"
android:id="#+id/imageView"
android:src="#drawable/discount"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />
</RelativeLayout>
What did you try?
Just add this in styles.xml
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
</style>
And
android:theme="#style/AppTheme"
in AndroidManifest.xml in application section.
The easiest way to remove it is to make your Activity extend the Activity class and not the AppCompatActivity.
That is do something like this:
public class MyActivity extends Activity {
}
In your style file (res/values/styles.xml) is declared the style of your project.
For example
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
</style>
Change "Theme.AppCompat.Light.DarkActionBar" with "Theme.AppCompat.Light.NoActionBar"
like this
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
</style>
The same can be achieved for Dark themes.
If you're on Android Studio, you'll have a choice to change the Theme from the preview windows without any code.
This method work for me :
Remove this code from following activity_main.xml :
<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" />
may be late but i found a way too just remove the following code from your xml layout
<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" />
</android.support.design.widget.AppBarLayout>
This is the simplest and cleanest solution IMO:
ActionBar actionBar = getSupportActionBar();
if (actionBar != null) {
actionBar.hide();
}
Related
I am using a prominent app bar with an image in a fragment.
My style and xml files look like this:
theme.xml:
<resources xmlns:tools="http://schemas.android.com/tools">
<!-- Base application theme. -->
<style name="Theme.MainTheme" parent="Theme.MaterialComponents.DayNight.NoActionBar">
<!-- Primary brand color. -->
<item name="colorPrimary">#color/DeepSkyBlue</item>
<item name="colorPrimaryVariant">#color/DeepSkyBlueVariant</item>
<item name="colorOnPrimary">#color/white</item>
<!-- Secondary brand color. -->
<item name="colorSecondary">#color/teal_200</item>
<item name="colorSecondaryVariant">#color/teal_700</item>
<item name="colorOnSecondary">#color/purple_500</item>
<!-- Status bar color. -->
<item name="android:statusBarColor">#android:color/transparent</item>
</style>
</resources>
main_activity.xml (which opens automatically the fragment):
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<androidx.fragment.app.FragmentContainerView
android:id="#+id/fragment_container_view_tag"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:name="com.example.tempapp.pkgFragments.PersonAddFragment" />
</androidx.constraintlayout.widget.ConstraintLayout>
fragment_add_person.xml (which uses a layout to prevent redudancy):
<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"
>
<include
android:id="#+id/layoutAppBar"
layout="#layout/layout_app_bar_prominent" />
<androidx.core.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
</androidx.core.widget.NestedScrollView>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
last but not least, my layout_app_bar_prominent.xml:
<?xml version="1.0" encoding="utf-8"?>
<!-- Layout tag not necessary, as we don't use any binding....-->
<com.google.android.material.appbar.AppBarLayout android:id="#+id/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="#dimen/app_bar_height_image_view"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<!--- contentScrim defines what should "appear" when the bar is not collapsed.
if not set in this case, the image will remain when bar is not collapsed-->
<com.google.android.material.appbar.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:contentScrim="?attr/colorPrimary"
app:collapsedTitleTextColor="?attr/colorOnPrimary"
app:expandedTitleTextColor="?attr/colorOnPrimary"
>
<ImageView
android:id="#+id/expandedImage"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitXY"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.7"
android:contentDescription="#string/app_bar_expanded_image"
/>
<com.google.android.material.appbar.MaterialToolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:navigationIcon="?attr/homeAsUpIndicator"
>
</com.google.android.material.appbar.MaterialToolbar>
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
So here is my situation:
My aim is that the toolbar image (expandedImage) should appear in the statusbar also.
After researching, some suggested adding the following code in my activity in order to accomplish this:
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
getWindow().setFlags(
WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS,
WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS
);
}
This works perfect and my image appears in my status bar:
HOWEVER, the issue I am having now, is that (when i collapse my toolbar), the title and menu icons appear behind the status bar due to the code I add above:
So there is basically no margin between the statusbar and my toolbar, which by default always exists.
If I remove the flag option, I don't have that issue anymore but then the image wouldn't appear in the status bar.
Any ideas how I could solve my issue? I've tried many solutions like:
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
<item name="android:windowTranslucentStatus">true</item>
android:fitsSystemWindows="true"
but none of the situations worked for me...
Using CoordinatorLayout instead of ConstraintLayout for your activity will probably solve your problem.
NOTE: android:fitsSystemWindows=true is (in every subview) necessary, otherwise the app bar will never "fill" the status bar or you will experience some unexpected behaviour.
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
>
<androidx.fragment.app.FragmentContainerView
android:id="#+id/fragment_container_view_tag"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"´
android:name="com.example.tempapp.pkgFragments.PersonAddFragment" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
I have troubles with making it work.
It only works with default fonts like sans-seriff. Any imported fonts work with all textviews, however not with the collapsing toolbar. Please help.
Styles.xml
<style name="AppBarTitleStyle" parent="ThemeOverlay.AppCompat.Dark.ActionBar">
<item name="android:fontFamily">#font/amatica_sc_reg</item>
<item name="android:titleTextColor">#android:color/white</item>
</style>
CollapsingToolbar.xml
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="308dp"
android:background="#color/color_secondary"
app:expanded="false">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:id="#+id/collapsingtoolbarid"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/colliding"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp"
app:layout_scrollFlags="exitUntilCollapsed|scroll|snap"
app:title="Learn Miwok"
app:expandedTitleTextAppearance="#style/AppBarTitleStyle"
app:collapsedTitleTextAppearance="#style/AppBarTitleStyle">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbarid"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin">
</androidx.appcompat.widget.Toolbar>
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
you can add font with java by using this below code
final Typeface tf = Typeface.createFromAsset(context.getAssets(), "fonts/amatica_sc_reg");
collapsingToolbar.setCollapsedTitleTypeface(tf);
collapsingToolbar.setExpandedTitleTypeface(tf);
I am stuck on a very interesting problem that I have tried to solve for quite some time.
I have added toolbars to views in Android before, but have never faced the below problem.
When accessing the Toolbar directly, or assigning it by setSupportActionBar(myToolbar) The toolbar itself will not be modifiable in any way. I even tried setting the view to gone, and it would not work. As well, the toolbar has nothing on it. No app name, no hamburger menu or back arrow, nothing.
Relevant code posted below:
BaseActivity.java
#Nullable
#BindView(R.id.app_bar)
protected Toolbar mToolbar;
private Unbinder unbinder;
#Override
protected void onCreate(#Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(getLayoutResource());
unbinder = ButterKnife.bind(this);
if(mToolbar != null) {
Timber.tag("Toolbar").d("Toolbar is not null. Oh glorious day");
setSupportActionBar(mToolbar);
}
}
base_drawer_activity.xml
<?xml version="1.0" encoding="utf-8"?>
<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:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.v4.widget.DrawerLayout
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:orientation="vertical">
<include
android:id="#+id/app_bar"
layout="#layout/toolbar" />
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:id="#+id/container_frame"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipToPadding="true">
</FrameLayout>
</LinearLayout>
<android.support.design.widget.NavigationView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/navigation_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true"/>
</android.support.v4.widget.DrawerLayout>
</android.support.design.widget.CoordinatorLayout>
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_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/colorPrimary"
android:clipToPadding="true"
app:layout_collapseMode="pin"
app:layout_scrollFlags="scroll|enterAlways"
android:popupTheme="#style/ThemeOverlay.AppCompat.Light"/>
styles.xml
<resources>
<!-- Base application theme. -->
<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>
<item name="android:windowBackground">#color/colorDefaultBackground</item>
</style>
</resources>
The application tag in my manifest also has android:theme="#style/AppTheme" set
The toolbar itself is not null in the view (have already checked that)
And it is not the SDK itself, as I opened up a project using the same method of creating a support action bar and it worked fine.
Am I missing something really obvious here?
Solved it!
After looking around a bit, I found that my child class was actually calling setContent, as well as my parent class, overriding any changes to the view I had made.
Just a simple oversight on my part.
Ive got a Layout where I have viewpager with sliding tabs.Now I want to make the upper part of my layout transparent so I get the effect that the activity before it is kinda visible.
It should look like this :
My Layout :
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".Main">
<include
android:id="#+id/tool_bar"
layout="#layout/tool_bar"
android:layout_marginTop="200dp" //THIS part should make the upper piece transparent
android:layout_height="wrap_content"
android:layout_width="match_parent"
/>
<com.kas.SlidingTabs.SlidingTabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:elevation="2dp"
android:background="#color/colorPrimary"/>
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_height="match_parent"
android:layout_width="match_parent"
></android.support.v4.view.ViewPager>
My Apptheme I used in this Activity :
<style name="AppTheme.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
I allready tried #android:color/transparent as background in LinearLayout but its not helping.I also tried this solution https://stackoverflow.com/a/8831226/4035864
But then my logcat says :You need to use a Theme.AppCompat theme (or descendant) with this activity.
EDIT:
ToolbarLayout :
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:background="#color/colorPrimary"
android:elevation="2dp"
android:theme="#style/Base.ThemeOverlay.AppCompat.Dark"
xmlns:android="http://schemas.android.com/apk/res/android" />
I want to create a Android ActionBar which looks like the following.
How can I build such a ActionBar. Is it possible to build it with Android material Design?
I would use the new ToolBar from Android Design Support Library
http://android-developers.blogspot.it/2015/05/android-design-support-library.html
Using ToolBar instead of ActionBar will give you more control on the elements themselves.
You can find a good article here:
http://www.android4devs.com/2014/12/how-to-make-material-design-app.html
app_bar.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/appBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#3F51B5"
android:theme="#style/ThemeOverlay.AppCompat.Dark" >
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.TabLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left"
android:id="#+id/tabLayout"/>
</FrameLayout>
</android.support.v7.widget.Toolbar>
main_activity_layout.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="wrap_content"
tools:context=".MainActivity">
<include layout="#layout/app_bar" />
</RelativeLayout>
main_activity_onCreate()
toolBar = (Toolbar) findViewById(R.id.appBar);
toolBar.setTitle("Titolo");
setSupportActionBar(toolBar);
tabLayout = (TabLayout) findViewById(R.id.tabLayout);
tabLayout.addTab(tabLayout.newTab().setIcon(R.drawable.user));
tabLayout.addTab(tabLayout.newTab().setIcon(R.drawable.user_group_1));
tabLayout.addTab(tabLayout.newTab().setIcon(R.drawable.user_group_2));
styles.xml
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
</style>
Technically you could stitch together such a layout with multiple elements. For example you have a header layout containing a TabLayout on the left and a Toolbar on the right side, instead of using the standard ActionBar.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:orientation="horizontal">
<android.support.design.widget.TabLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" />
<android.support.v7.widget.Toolbar
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" />
</LinearLayout>
This example uses the AppCompat v7 and the Design Support library.
You may style the Views in a way (e.g. same background color) such that it looks as if its one single UI element.