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>
Related
I am trying to add a bottom navigation menu for the application i am trying to make, I followed every step of the video and the bottom nav menu still not showing up. Can someone help me?
Dashboard xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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="Dashboard.Dashboard">
<androidx.fragment.app.FragmentContainerView
android:id="#+id/fragmentContainerView"
android:name="androidx.navigation.fragment.NavHostFragment"
android:layout_width="match_parent"
android:layout_height="0dp"
app:defaultNavHost="true"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:navGraph="#navigation/bottom_nav" />
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/bottom_nav_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:menu="#menu/bottom_nav_menu"/>
</androidx.constraintlayout.widget.ConstraintLayout>
Bottom_Nav_Menu xml
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="#+id/feedFragment"
android:title="#string/home"
android:icon="#drawable/home_icon"/>
<item
android:id="#+id/searchFragment"
android:title="#string/search"
android:icon="#drawable/search_icon"/>
<item
android:id="#+id/postFragment"
android:title="#string/add"
android:icon="#drawable/add_post"/>
<item
android:id="#+id/notificationFragment"
android:title="#string/notification"
android:icon="#drawable/notification_icon"/>
<item
android:id="#+id/profileFragment"
android:title="#string/profile"
android:icon="#drawable/person_icon"/>
</menu>
never mind, I got it work somehow. Everything was working perfectly. I just needed to add a library before I use the bottom navigation bar.
This library in your build.grandle
implementation 'androidx.navigation:navigation-fragment:2.4.1'
implementation 'androidx.navigation:navigation-ui:2.4.1'
I have created a persistent bottom sheet in android with the intent of displaying a ListView containing additional information about locations. I want the sheet to have rounded corners. I got a ton of results for modal dialog but none for persistent. Is it possible or should I use the modal version?
As suggested in an answer here, I tried wrapping it in a card view but the app crashes when I try to open the fragment.
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout
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"
android:orientation="vertical"
tools:context=".fragments.MapFragment">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="5dp"
app:cardCornerRadius="20dp">
<fragment
android:id="#+id/autocomplete_fragment"
android:name="com.google.android.libraries.places.widget.AutocompleteSupportFragment"
android:layout_width="match_parent"
android:layout_height="wrap_content"
tools:layout="#layout/places_autocomplete_item_powered_by_google" />
</androidx.cardview.widget.CardView>
<com.google.android.gms.maps.MapView
android:id="#+id/mapView"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</RelativeLayout>
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="450dp"
app:cardCornerRadius="24dp"
app:cardElevation="8dp"
app:layout_behavior="#string/bottom_sheet_behavior"
app:behavior_hideable="true"
app:behavior_peekHeight="55dp">
<androidx.core.widget.NestedScrollView
android:id="#+id/bottom_sheet"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/tvBottomSheet"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/placeholder_text"
android:textColor="#color/colorCommon_BLACK"
android:textSize="37sp" />
</androidx.core.widget.NestedScrollView>
</androidx.cardview.widget.CardView>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
With the new Material Component library you can customize the shape of your component using the shapeAppearanceOverlay attribute.
You can use something like:
<!-- BottomSheet -->
<style name="CustomBottomSheet" parent="Widget.MaterialComponents.BottomSheet">
<item name="shapeAppearanceOverlay">#style/CustomShapeAppearanceOverlay.MaterialComponents.BottomSheet</item>
....
</style>
<style name="CustomShapeAppearanceOverlay.MaterialComponents.BottomSheet" parent="">
<item name="cornerSizeTopRight">16dp</item>
<item name="cornerSizeTopLeft">16dp</item>
<item name="cornerSizeBottomRight">0dp</item>
<item name="cornerSizeBottomLeft">0dp</item>
</style>
Then you can apply this style to your single component or your theme app.
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.MaterialComponents.Light">
...
<item name="bottomSheetStyle">#style/CustomBottomSheet</item>
</style>
If you are using a non-modal bottom sheet just apply the style. For example:
<LinearLayout
android:id="#+id/standardBottomSheet"
app:layout_behavior="com.google.android.material.bottomsheet.BottomSheetBehavior"
style="?attr/bottomSheetStyle"
...>
U can add shape for you bottom sheet background background
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#color/you_color"/>
<corners
android:bottomRightRadius="2dp"
android:bottomLeftRadius="2dp"
android:topLeftRadius="2dp"
android:topRightRadius="2dp"/>
</shape>
You could also use the app:shapeAppearance attribute:
Create a ShapeAppearance in styles.xml:
<resources>
...
<style name="BottomSheetShapeAppearance">
<item name="cornerFamily">rounded</item>
<item name="cornerSizeTopLeft">16dp</item>
<item name="cornerSizeTopRight">16dp</item>
</style>
</resources>
Set the app:shapeAppearance attribute on the BottomSheet component:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
style="#style/Widget.MaterialComponents.BottomSheet"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
app:layout_behavior="com.google.android.material.bottomsheet.BottomSheetBehavior"
app:shapeAppearance="#style/BottomSheetShapeAppearance">
...
</LinearLayout>
Here's how it looks:
More info: https://material.io/develop/android/theming/shape
You can wrap your sheet layout with a card view to have rounded corners.
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.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">
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="450dp"
app:layout_behavior="#string/bottom_sheet_behavior"
app:cardCornerRadius="24dp"
app:cardElevation="8dp"
app:behavior_hideable="true"
app:behavior_peekHeight="55dp">
<androidx.core.widget.NestedScrollView
android:id="#+id/bottom_sheet"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/tvBottomSheet"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="ABC"
android:textSize="37sp" />
</androidx.core.widget.NestedScrollView>
</androidx.cardview.widget.CardView>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
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 created NavigationDrawer and put needed items in it. On most devices it looks good, but on certain devices text is cutted by vertical.
Items in NavigationDrawer created in menu.xml, so i used components like "menu", "group" and "item". I think if I use TextView instead, i could define margins and paddings, but in menu.xml i can not do that.
Here is my menu.xml. How can I fix it?
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<group android:checkableBehavior="single">
<item
android:id="#+id/nav_contacts"
android:icon="#drawable/ic_contacts"
android:title="#string/contacts" />
<item
android:id="#+id/nav_dialogs"
android:icon="#drawable/ic_message"
android:title="#string/dialogs" />
</group>
<item android:title="#string/settings">
<menu>
<item
android:id="#+id/nav_settings_profile"
android:icon="#drawable/ic_account"
android:title="#string/profile" />
<item
android:id="#+id/nav_settings_notifications"
android:icon="#drawable/ic_notifications"
android:title="#string/notifications" />
<item
android:id="#+id/nav_settings_black_list"
android:icon="#drawable/ic_black_list"
android:title="#string/black_list" />
</menu>
</item>
<group
android:id="#+id/about_exit"
android:checkableBehavior="none">
<item
android:id="#+id/nav_about"
android:icon="#drawable/ic_about"
android:title="#string/about" />
<item
android:id="#+id/nav_exit"
android:icon="#drawable/ic_exit"
android:title="#string/exit" />
</group>
Here is activity layout, where I bind my Drawer with menu.xml file:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:openDrawer="start">
<include
layout="#layout/app_bar_main"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<android.support.design.widget.NavigationView
android:id="#+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true"
app:menu="#menu/activity_main_drawer" />
</android.support.v4.widget.DrawerLayout>
Screenshot :
I tested using this NavigationView project and it is using the support design library version 22.2.0 and it work perfectly in the most phones I have here, samsumg s3, nexus 6, moto x, so i can't reproduce this error that you have. This error looks like a bug in some phones, i don't know what phone you are using, but I did some searchs and no one have this problem, this error may be linked with some version of android, and can be a bug of design library, I'm not sure about this.
I suggest you to:
1 - Update you design library for the most recent version and check if it works, or
2 - Implement a Navigation Drawer with listview with header and an custom adapter (Work perfectly for the most phones with android version 2.3 to 6.0), or
4 - NavigationView with custom layout (recommend)
from StackOverflow answer
<android.support.design.widget.NavigationView
android:id="#+id/navigation"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<include layout="#layout/nav_header" />
<ListView
android:id="#+id/lst_menu_items"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
</LinearLayout>
</android.support.design.widget.NavigationView>
or
5 - Wait for more answers or start a bounty.