Develop Reference

Bottom nav bar android studio

<FrameLayout
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toTopOf="#+id/bottomnav">
</FrameLayout>
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/bottomnav"
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" />
Whenever i try to add bottom navigation bar the whole activity goes blank

If you would like to display buttons in the Bottom Navigation Bar, you need to add app:menu to BottomNavigationView:
<?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:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center">
<FrameLayout
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toTopOf="#+id/bottomnav">
</FrameLayout>
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/bottomnav"
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>
Under res/menu, create a 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/main" android:title="Main" />
<item android:id="#+id/secondary" android:title="Secondary" />
</menu>
Then you should see 2 buttons in your Bottom Navigation Bar.
The above should work fine on a Physical Android Device. If you are not able to preview the Bottom Navigation Bar in Design view of Android Studio, please check if your build.gradle has the following dependency:
implementation 'com.google.android.material:material:1.5.0'
You can either downgrade it to:
implementation 'com.google.android.material:material:1.3.0'
or upgrade it to:
implementation 'com.google.android.material:material:1.6.0'

Does a TextView inside a Toolbar become immutable?

I tried following a tutorial (https://guides.codepath.com/android/using-the-app-toolbar#custom-title-view) on creating a custom TextView inside a Toolbar. What I want to do is have the ability to dynamically change the text inside the TextView using Java. However, the problem is that I can't and no error messages are being displayed.
Toolbar code in XML:
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorPrimary"
android:minHeight="?attr/actionBarSize"
android:elevation="4dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:id="#+id/toolbarTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Test1"
android:textSize="16sp"
android:textColor="#color/textColor" />
</androidx.appcompat.widget.Toolbar>
Toolbar Java code in the Activity Class:
Toolbar toolbar = findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
getSupportActionBar().setDisplayShowTitleEnabled(false);
TextView toolbarTitle = toolbar.findViewById(R.id.toolbarTitle);
toolbarTitle.setText("Test");
Styles.xml:
<!-- 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/colorSecondary</item>
<item name="colorAccent">#color/colorAccent</item>
</style>
A simple toolbarTitle.setText() should do the job but for some unknown reasons it doesn't. Even if I remove the android:text from the XML code and use setText() right after the Java code it still doesn't work.
Does this mean that TextViews inside Toolbars are immutable?
Thanks!
Edit 1:
So I managed to find the problem but haven't particularly found a solution. The problem is caused by the Data Binding in the activity_main.xml file. Once the all code related to Data Binding is removed, I'm able to use setText() the way I want. Why is this causing a problem?
activity_main.xml:
<?xml version="1.0" encoding="utf-8"?>
<layout
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"
tools:context=".activity.MainActivity">
<data>
<variable
name="VM"
type="com.tahmidu.app.view_model.IMainActivityNavViewModel" />
</data>
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/colorPrimary">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorPrimary"
android:minHeight="?attr/actionBarSize"
android:theme="?attr/actionBarTheme"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:id="#+id/toolbarTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/textColor" />
</androidx.appcompat.widget.Toolbar>
<FrameLayout
android:id="#+id/audioMainFragment"
android:name="com.tahmidu.app.fragment.AudioFragment"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="#+id/bottomNavigationView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/toolbar" />
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/bottomNavigationView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorSecondary"
app:itemIconTint="#color/bottom_navigation_color"
app:labelVisibilityMode="unlabeled"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:menu="#menu/bottom_navigation_main" />
</androidx.constraintlayout.widget.ConstraintLayout>
</layout>

TextViews inside toolbars are definitely not immutable. Maybe the problem is where you are calling the textview.setText() method. It should be after after the view is created, so on onCreate() or onViewCreated()

Solution (Suggested by Nabil): Bind the text. Ensure you set the LifecycleOwner() method otherwise the UI would not update. setText() stops working if you use Data Binding from the looks of it.

No layout preview visible after setting app theme to material design and using material button

I am using the material design as my app theme, but due to this, there is some issue while viewing the layout preview in android studio. There is no preview displayed but when I run the code I am able to view the design on the device.
The issue is mainly because of the material button I have used. when I comment the button code the preview is shown, but when I uncomment the code and refresh the layout the preview is again not visible.
Below is the code od how I have applied the material theme to my app:
<style name="AppTheme" parent="Theme.MaterialComponents.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>
Below is the Code I have used in my layout:
<?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">
<TextView
android:id="#+id/tvTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/app_name"
android:layout_marginTop="115dp"
android:layout_centerHorizontal="true"
android:textSize="30dp"
style="#style/text_sui_generis"
android:textColor="#color/colorPrimary"/>
<RelativeLayout
android:id="#+id/rlSpinner"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/tvTitle"
android:layout_marginTop="80dp"
android:layout_centerHorizontal="true"
android:background="#drawable/border_shadow"
android:padding="5dp">
<ImageView android:layout_width="20dp"
android:layout_height="20dp"
android:src="#drawable/ic_location"
android:id="#+id/locationImage"
android:layout_centerVertical="true"/>
<Spinner
android:id="#+id/locationSpinner"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toEndOf="#id/locationImage"
android:layout_marginStart="5dp"
android:layout_centerVertical="true"/>
</RelativeLayout>
<com.google.android.material.button.MaterialButton
android:id="#+id/signin_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/sign_in"
style="#style/buttonCustomFont"
android:layout_below="#id/rlSpinner"
android:layout_centerHorizontal="true"
android:layout_marginTop="60dp"
android:elevation="1dp"/>
</RelativeLayout>

Actually, this is the issue of Android Studio.
I also have faced this issue in Android Studio 3.4.2 stable version. In this stable version, the design preview is not working when set App theme as "Theme.MaterialComponents.*"
The design preview is working fine with beta "Android Studio 3.5 RC 1"
Try downloading the latest beta version.

Use Force Refresh Layout Option in Design Preview

You don't wrote buttonCustomFont in style i think
Remove this line and refresh preview
style="#style/buttonCustomFont"
Full code
<com.google.android.material.button.MaterialButton
android:id="#+id/signin_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/sign_in"
android:layout_below="#id/rlSpinner"
android:layout_centerHorizontal="true"
android:layout_marginTop="60dp"
android:elevation="1dp"/>

Android, white screen is display when navigating between activities

The problem I have is that I have a white screen displayed when I want to switch between the 1st activity "ww1" and the 2nd activity "ww2", I have already tried a solution which says that I should create a theme in my styles.xml and add it to my second activity but the result was a black screen displayed while switching between the activity .
Here's the ww1.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"
android:background="#drawable/ww1"
tools:context=".ww1">
<Button
android:id="#+id/menu"
android:layout_width="163dp"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:background="#drawable/menu"
android:visibility="visible" />
<Button
android:id="#+id/next_btn"
android:layout_width="55dp"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignParentTop="true"
android:layout_marginTop="210dp"
android:background="#drawable/next"
android:visibility="visible" />
ww2.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"
android:background="#drawable/ww2"
tools:context=".ww2">
<Button
android:id="#+id/menu"
android:layout_width="163dp"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:background="#drawable/menu"
android:visibility="visible" />
<Button
android:id="#+id/next_btn"
android:layout_width="55dp"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignTop="#+id/previous_btn"
android:background="#drawable/next"
android:visibility="visible" />
<Button
android:id="#+id/previous_btn"
android:layout_width="57dp"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:layout_marginTop="211dp"
android:background="#drawable/previous"
android:visibility="visible" />
Code used to display the ww2.xml :
Intent mySuperIntent = new Intent(ww1.this, ww2.class);
startActivity(mySuperIntent);
overridePendingTransition(R.anim.slide_from_right,R.anim.slide_to_left);

Use it its worked for me
Intent mySuperIntent = new Intent(ww1.this, ww2.class);
intent.addFlags(Intent.FLAG_ACTIVITY_CLEAR_TASK | Intent.FLAG_ACTIVITY_NEW_TASK);
startActivity(mySuperIntent);
overridePendingTransition(R.anim.slide_from_right,R.anim.slide_to_left);
if dont work use it
in Your style add
<style name="AppTheme" parent="Theme.AppCompat">
<item name="android:windowDisablePreview">true</item>
</style>
However a better approach is do less things on main thread during Activity.onCreate and let show the preview screen while user is waiting. For a smooth transition, you can set a custom background to your windows adding this to your theme:
<style name="AppTheme" parent="Theme.AppCompat">
<item name="android:windowBackground">#drawable/slash_screen</item>
</style>

How use the real Floating Action Button (FAB) Extended?

To remove any doubts or thoughts about duplicate: on Material Design is defined what is "extended".
But most of the people confuses "extended" with "Type of Transition: Speed Dial", what make hard to find solutions. Like here
Question
So what I'm looking forward is how setup the FAB with text and a extended size.
Today my code is like this:
<android.support.design.widget.FloatingActionButton
android:id="#+id/maps_main_distance_btn"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:text="#string/str_distance_btn"
app:elevation="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
But my button look like this:
No text and no right format. I'm using it in a Constraint Layout.

Add the dependencies in your Gradle file:
implementation 'com.google.android.material:material:1.1.0-alpha04'
in your xml file:
<com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_alignParentBottom="true"
android:layout_alignParentEnd="true"
android:layout_margin="#dimen/fab_margin"
android:text="Create"
app:icon="#drawable/outline_home_24" />

You can create a utility class that animates a MaterialButton to an Extended FloatingActionButton using a ConstraintLayout. You'll first need to declare the two states of the MaterialButton in xml, and then use the TransitionManager to animate between them.
You can read a medium post about it here, in the meantime, I'll add bits of relevant code here.
Collapsed FAB state:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout android:id="#+id/extend_fab_container"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/bg_fab"
android:elevation="8dp">
<android.support.design.button.MaterialButton
android:id="#+id/fab"
style="#style/Widget.MaterialComponents.Button.UnelevatedButton"
android:layout_width="56dp"
android:layout_height="56dp"
app:cornerRadius="56dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
Extended FAB State:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout android:id="#+id/extend_fab_container"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:elevation="8dp"
android:background="#drawable/bg_fab">
<android.support.design.button.MaterialButton
android:id="#+id/fab"
style="#style/Widget.MaterialComponents.Button.UnelevatedButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:cornerRadius="56dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
Background Drawable:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#color/colorAccent" />
<corners android:radius="56dp" />
</shape>
And relevant Java Expansion code:
private void setExtended(boolean extended, boolean force) {
if (isAnimating || (extended && isExtended() && !force)) return;
ConstraintSet set = new ConstraintSet();
set.clone(container.getContext(), extended ? R.layout.fab_extended : R.layout.fab_collapsed);
TransitionManager.beginDelayedTransition(container, new AutoTransition()
.addListener(listener).setDuration(150));
if (extended) button.setText(currentText);
else button.setText("");
set.applyTo(container);
}

You can use this library to do that. (I used another way)
But I used a FancyButton to create a round and awesome button in coordinator layout as below:
<mehdi.sakout.fancybuttons.FancyButton
android:id="#+id/actMain_btnCompare"
app:layout_behavior="#string/fab_transformation_sheet_behavior"
android:layout_width="125dp"
android:layout_height="38dp"
android:layout_gravity="bottom|center"
android:layout_margin="20dp"
android:elevation="3dp"
android:padding="2dp"
fancy:fb_borderColor="#color/white"
fancy:fb_borderWidth="3dp"
fancy:fb_defaultColor="#color/colorPrimaryDark"
fancy:fb_radius="20dp"
fancy:fb_text="مقایسه محصول"
fancy:fb_textColor="#color/white"
fancy:fb_textGravity="center"
fancy:fb_textSize="13sp" />
and result is:
That can have icon in it (see FancyButton).
with app:layout_behavior="#string/fab_transformation_sheet_behavior" it acts like fab as below:
Good luck.

The short answer: set the background to a rect with rounded corners, rather than an oval. Then set the dimension of the radius to half that of the height of the button.
How I actually did it:
<android.support.design.widget.FloatingActionButton
android:id="#+id/maps_main_distance_btn"
android:layout_width="#dimen/floating_button_width"
android:layout_height="#dimen/floating_button_height"
android:layout_marginBottom="8dp"
android:background="#drawable/btn_background_expanded"
android:text="#string/str_distance_btn"
app:elevation="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
drawable/btn_background_expanded.xml:
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="?android:colorControlHighlight">
<item>
<shape android:shape="rectangle">
<solid android:color="?android:colorAccent" />
<corners
android:radius="#dimen/floating_button_radius"
/>
</shape>
</item>
</ripple>