Develop Reference

Fragment replaced when inflate BottomSheetDialog

I have a problem in my activity: it has FragmentContainerView that initially show the home fragment and, when the activity's method onCreate start, it show a BottomSheetDialog. When I show the BottomSheetDialog the Home Fragment disappear.
From what I know the problem is the replace method, so I think that I should insert the Dialog in a child fragment, but I don't know how.
This is my project:
MainActivity onCreate
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
toolbar = findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
toolbar.setSubtitle("Workout");
toolbar.setNavigationOnClickListener(v -> {
getSupportFragmentManager().beginTransaction().replace(R.id.fragmentContainerView, new HomeFragment()).commit();
toolbar.setSubtitle("Workout");
});
bottomSheetDialog = new BottomSheetDialog(this, R.style.BottomSheetTheme);
bottomSheetDialog.setContentView(LayoutInflater.from(getApplicationContext()).
inflate(R.layout.bottom_sheet_layout, findViewById(R.id.bottom_sheet)));
bottomSheetDialog.show();
}
activitymain.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=".MainActivity">
<androidx.fragment.app.FragmentContainerView
android:id="#+id/fragmentContainerView"
android:name="com.example.myproject.Fragments.HomeFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="?actionBarSize"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:layout="#layout/fragment_home" />
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?actionBarSize"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:menu="#menu/items"
app:navigationIcon="#drawable/app_logo"
app:titleTextColor="#color/white"
app:subtitleTextColor="#color/white" />
</androidx.constraintlayout.widget.ConstraintLayout>
bottom_sheet_layout.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"
android:id="#+id/bottom_sheet"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/bottom_sheet_background">
<TextView
android:id="#+id/titleView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:gravity="center"
android:text="title"
android:textColor="#color/red_700"
android:textSize="20sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/TextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:text="text"
android:textColor="#E53935"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/titleView" />
</androidx.constraintlayout.widget.ConstraintLayout>
bottom_sheet_backgound.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#color/white"/>
<corners android:topLeftRadius="20dp" android:topRightRadius="20dp"/>
</shape>
themes.xml
<resources xmlns:tools="http://schemas.android.com/tools">
<!-- Base application theme. -->
<style name="Theme.MyApp" parent="Theme.MaterialComponents.DayNight.NoActionBar">
<!-- Primary brand color. -->
<item name="colorPrimary">#color/red_700</item>
<item name="colorPrimaryVariant">#color/red_900</item>
<item name="android:background">#color/black</item>
<item name="android:textColor">#color/white</item>
<!-- Status bar color. -->
<item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
<!-- Customize your theme here. -->
<item name="android:listDivider">#drawable/divider</item>
</style>
<style name="BottomSheetTheme" parent="Theme.Design.BottomSheetDialog">
<item name="bottomSheetStyle">#style/BottomSheetStyle</item>
</style>
<style name="BottomSheetStyle" parent="Widget.Design.BottomSheet.Modal">
<item name="background">#android:color/transparent</item>
</style>
</resources>
If you need to see other files, tell me

Ok problem resolved.
For first I was wrong in style and I changed from:
<item name="background">#android:color/transparent</item>
to:
<item name="android:background">#android:color/transparent</item>
The real problem was that BottomSheetDialog's theme has setted the app's theme background like default background, so the background was black.
Resolved by adding:
<item name="android:background">#android:color/transparent</item>
in BottomSheetTheme

How to center menu items ina androidstudio

I made a menu with a navigationView on Android Studio and I put a menu inside with two groups and items. I want to center all the items but it didn't work. Can you help me please?
Here the code
Activity mains
<?xml version="1.0" encoding="utf-8"?>
<androidx.drawerlayout.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"
android:layout_centerHorizontal="true"
tools:openDrawer="start">
<include
layout="#layout/landing_page"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<com.google.android.material.navigation.NavigationView
android:id="#+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="#color/grey_middle"
app:itemTextColor="#color/menu"
app:menu="#menu/activity_main_drawer" />
</androidx.drawerlayout.widget.DrawerLayout>
and the activity_main_drawer
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
tools:showIn="navigation_view">
<group android:checkableBehavior="single">
<item
android:id="#+id/nav_normal"
android:icon="#drawable/ic_menu_camera"
android:title="#string/menu_normal"
android:visible="false" />
<item
android:id="#+id/nav_avance"
android:icon="#drawable/ic_menu_gallery"
android:title="#string/menu_avance" />
<item
android:id="#+id/nav_hot"
android:icon="#drawable/ic_menu_slideshow"
android:title="#string/menu_hot"/>
<item
android:id="#+id/nav_premium"
android:icon="#drawable/ic_menu_slideshow"
android:title="#string/menu_premium" />
</group>
<group android:checkableBehavior="single">
<item
android:id="#+id/nav_stat"
android:title="#string/menu_stat" />
<item
android:id="#+id/nav_trophees"
android:title="#string/menu_trophees" />
<item
android:id="#+id/nav_langues"
android:title="#string/menu_langues" />
<item
android:id="#+id/nav_noter"
android:title="#string/menu_noter" />
<item
android:id="#+id/nav_contact"
android:title="#string/menu_contact"/>
</group>
</menu>
Thanks, everyone, I hope you will succeed to help me.

Persistent Bottom Sheet with rounded corners in Android crashes when used in a card view

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>

Android DrawerMenu selected item not showing properly in UI

I want to make menu item in different color when it is clicked and also persist the color as it was selected from the list. currently it is not showing the green color when an item is selected
shape_drawer_menu_item.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#color/drawer_menu" android:state_pressed="false" />
<item android:drawable="#color/drawer_menu_selected_item" android:state_checked="true"/>
<item android:drawable="#color/drawer_menu_selected_item" android:state_activated="true"/>
<item android:drawable="#color/drawer_menu_selected_item" android:state_pressed="true"/>
<item android:drawable="#color/drawer_menu_selected_item" android:state_active="true" />
</selector>
menu_drawer.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">
<group android:checkableBehavior="single">
<item
android:id="#+id/nav_featured"
android:icon="#drawable/ic_nav_featured"
android:title="#string/title_nav_featured"
android:checkable="true"
android:checked="true"/>
<item
android:id="#+id/nav_tour"
android:icon="#drawable/ic_nav_tour"
android:title="#string/title_nav_tour" />
</group>
</menu>
activity_main.xml
<?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">
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#1C3553">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_scrollFlags="scroll|enterAlways">
<include layout="#layout/toolbar" />
</FrameLayout>
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:id="#+id/frame_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/appbar"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="#dimen/spacing_large"
android:clickable="true"
android:src="#drawable/ic_search"
android:tint="#android:color/white"
app:layout_anchor="#id/frame_content"
app:layout_anchorGravity="end|bottom" />
</android.support.design.widget.CoordinatorLayout>
<android.support.design.widget.NavigationView
android:id="#+id/nav_view"
android:layout_width="#dimen/drawer_menu_width"
android:layout_height="match_parent"
android:layout_gravity="start"
app:itemTextColor="#android:color/white"
app:itemBackground="#drawable/shape_drawer_menu_item"
android:fitsSystemWindows="false"
android:scrollbars="none"
android:background="#2F3847"
app:headerLayout="#layout/nav_header"
app:itemIconTint="#android:color/white"
app:menu="#menu/menu_drawer"
/>
</android.support.v4.widget.DrawerLayout>
ActivityMain.java
OnCreate() =>
navigationView = (NavigationView) findViewById(R.id.nav_view);
navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
#Override
public boolean onNavigationItemSelected(MenuItem item) {
actionBar.setTitle(item.getTitle().toString());
//item.setChecked(true);
navigationView.setCheckedItem(item.getItemId());
boolean s=item.isEnabled();
return onItemSelected(item.getItemId());
}
});

You need to remove group checkable behaviour attribute and put only put checkable = true in your item, it will works. Best of luck!!
<?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">
<group>
<item
android:id="#+id/nav_featured"
android:icon="#drawable/ic_nav_featured"
android:title="#string/title_nav_featured"
android:checkable="true"/>
<item
android:id="#+id/nav_tour"
android:icon="#drawable/ic_nav_tour"
android:title="#string/title_nav_tour"
android:checkable="true" />
</group>
</menu>

Push toolbar content below statusbar

I am trying to make a transparant toolbar for my app. I now use windowTranslucentStatus to achieve this. My problem is now that my statusbar is over my toolbar. I guess I need to give my toolbar a margin top with the height of the statusbar. How can do I know what the height of the statusbar is?
My layout:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".Activites.DealersActivity_">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<include layout="#layout/toolbar" />
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
</RelativeLayout>
</LinearLayout>
<include layout="#layout/drawer"
android:id="#+id/drawer"
></include>
</android.support.v4.widget.DrawerLayout>
My Toolbar:
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/toolbar"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:minHeight="?attr/actionBarSize"
android:background="#drawable/toolbar_background">
<TextView
android:visibility="gone"
android:typeface="monospace"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Toolbar Title"
android:textSize="20sp"
android:textColor="#color/toolbar_text"
android:layout_gravity="center"
android:id="#+id/toolbar_title" />
</android.support.v7.widget.Toolbar>

After your explanations, it also seems to me that you need to set margin in your toolbar.
Regretfully, I am not aware of a way to determine the height of a status bar in the layout xml (e.g. like "?attr/actionBarSize"). However, you can determine it in the code: see here.
When you get the height programatically, you would like to change the padding of your toolbar programatically too. Use this method to do it.

I wanted to do the same thing. What I ended up doing is this:
activity_main.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"
android:fitsSystemWindows="true"
tools:context=".MainActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:background="#drawable/gradient_actionbar"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:fitsSystemWindows="true"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
android:background="#color/colorTransparent"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
<include layout="#layout/content_main" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab_main_openCameraIntent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="#dimen/fab_margin"
app:fabSize="normal"
android:tint="#color/colorIcons"
android:elevation="2dp"
app:srcCompat="#drawable/ic_camera_kindawhite_24dp" />
</android.support.design.widget.CoordinatorLayout>
And in styles.xml
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- 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:windowDrawsSystemBarBackgrounds">true</item>
<item name="android:statusBarColor">#color/colorTransparent</item>
<item name="android:windowTranslucentStatus">false</item>
</style>
<style name="AppTheme.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />
<style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />
</resources>
I hope this helps!