SnackBars plays a very important role in the user experience. The snack bar which may or may not contain the action button to do shows the message which had happened due to the user interaction immediately. So in this article, it’s been discussed how the SnackBars can be implemented using custom layouts. Have a look at the following image to get an idea of how can the custom-made SnackBars can be differentiated from the regular(normal) SnackBars. Note that we are going to implement this project using the Java language.
Steps to Implement the Custom SnackBars in Android
Step 1: Create an empty activity project
- Create an empty activity Android Studio project. And select the JAVA as a programming language.
- Refer to Android | How to Create/Start a New Project in Android Studio? to know how to create an empty activity Android studio project.
Step 2: Working with the activity_main.xml file
- The main layout here includes only one button which when clicked the custom SnackBar is to be shown.
- Invoke the following code, in the activity_main.xml file.
<? xml version = "1.0" encoding = "utf-8" ?>
< RelativeLayout
android:layout_width = "match_parent"
android:layout_height = "match_parent"
tools:context = ".MainActivity"
tools:ignore = "HardcodedText" >
< Button
android:id = "@+id/showSnackbarButton"
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
android:layout_centerInParent = "true"
android:backgroundTint = "@color/colorPrimary"
android:text = "SHOW SNACKBAR"
android:textColor = "@android:color/white" />
</ RelativeLayout >
|
Output UI: Run on Emulator
Step 3: Creating a custom layout for Snackbar
- Under layout folder create a layout for SnackBar which needs to be inflated when building the SnackBar under the MainActivity.java file.
<? xml version = "1.0" encoding = "utf-8" ?>
< RelativeLayout
android:layout_width = "match_parent"
android:layout_height = "match_parent"
tools:ignore = "HardcodedText" >
< androidx.cardview.widget.CardView
android:layout_width = "match_parent"
android:layout_height = "wrap_content"
android:layout_margin = "8dp"
android:elevation = "4dp"
app:cardBackgroundColor = "@color/colorPrimaryDark"
app:cardCornerRadius = "4dp"
app:cardPreventCornerOverlap = "true"
app:cardUseCompatPadding = "true" >
< RelativeLayout
android:layout_width = "match_parent"
android:layout_height = "match_parent"
android:padding = "8dp" >
< ImageView
android:id = "@+id/imageView"
android:layout_width = "45dp"
android:layout_height = "45dp"
android:layout_alignParentStart = "true"
android:src = "@drawable/image_logo" />
< TextView
android:id = "@+id/textView1"
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
android:layout_marginStart = "4dp"
android:layout_toEndOf = "@id/imageView"
android:text = "GeeksforGeeks"
android:textAlignment = "center"
android:textColor = "@android:color/white"
android:textSize = "18sp"
android:textStyle = "bold" />
< TextView
android:id = "@+id/textView2"
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
android:layout_below = "@id/textView1"
android:layout_marginStart = "4dp"
android:layout_toEndOf = "@id/imageView"
android:text = "Computer Science Portal"
android:textColor = "@android:color/white"
android:textSize = "14sp" />
<!--this view separates between button and the message-->
< View
android:layout_width = "2dp"
android:layout_height = "45dp"
android:layout_toStartOf = "@id/gotoWebsiteButton"
android:background = "@android:color/white" />
< Button
android:id = "@+id/gotoWebsiteButton"
style = "@style/Widget.MaterialComponents.Button.TextButton"
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
android:layout_alignParentEnd = "true"
android:text = "GOTO WEBSITE"
android:textColor = "@android:color/white"
android:textSize = "14sp" />
</ RelativeLayout >
</ androidx.cardview.widget.CardView >
</ RelativeLayout >
|
Which produces the following view:
Step 4: Working with the MainActivity.java file
import androidx.appcompat.app.AppCompatActivity;
import android.graphics.Color;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.Toast;
import com.google.android.material.snackbar.Snackbar;
public class MainActivity extends AppCompatActivity {
Button bShowSnackbar;
@Override
protected void onCreate(Bundle savedInstanceState) {
super .onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// register the button with appropriate ID
bShowSnackbar = findViewById(R.id.showSnackbarButton);
bShowSnackbar.setOnClickListener( new View.OnClickListener() {
@Override
public void onClick(View v) {
// create an instance of the snackbar
final Snackbar snackbar = Snackbar.make(v, "" , Snackbar.LENGTH_LONG);
// inflate the custom_snackbar_view created previously
View customSnackView = getLayoutInflater().inflate(R.layout.custom_snackbar_view, null );
// set the background of the default snackbar as transparent
snackbar.getView().setBackgroundColor(Color.TRANSPARENT);
// now change the layout of the snackbar
Snackbar.SnackbarLayout snackbarLayout = (Snackbar.SnackbarLayout) snackbar.getView();
// set padding of the all corners as 0
snackbarLayout.setPadding( 0 , 0 , 0 , 0 );
// register the button from the custom_snackbar_view layout file
Button bGotoWebsite = customSnackView.findViewById(R.id.gotoWebsiteButton);
// now handle the same button with onClickListener
bGotoWebsite.setOnClickListener( new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(getApplicationContext(), "Redirecting to Website" , Toast.LENGTH_SHORT).show();
snackbar.dismiss();
}
});
// add the custom snack bar layout to snackbar layout
snackbarLayout.addView(customSnackView, 0 );
snackbar.show();
}
});
}
} |
import androidx.appcompat.app.AppCompatActivity;
import android.graphics.Color;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.Toast;
import com.google.android.material.snackbar.Snackbar;
class MainActivity : AppCompatActivity() {
var bShowSnackbar: Button? = null
override fun onCreate(savedInstanceState: Bundle?) {
super .onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
// register the button with appropriate ID
bShowSnackbar = findViewById(R.id.showSnackbarButton)
bShowSnackbar.setOnClickListener(object : OnClickListener() {
fun onClick(v: View?) {
// create an instance of the snackbar
val snackbar = Snackbar.make(v, "" , Snackbar.LENGTH_LONG)
// inflate the custom_snackbar_view created previously
val customSnackView: View =
layoutInflater.inflate(R.layout.custom_snackbar_view, null )
// set the background of the default snackbar as transparent
snackbar.view.setBackgroundColor(Color.TRANSPARENT)
// now change the layout of the snackbar
val snackbarLayout = snackbar.view as SnackbarLayout
// set padding of the all corners as 0
snackbarLayout.setPadding( 0 , 0 , 0 , 0 )
// register the button from the custom_snackbar_view layout file
val bGotoWebsite: Button = customSnackView.findViewById(R.id.gotoWebsiteButton)
// now handle the same button with onClickListener
bGotoWebsite.setOnClickListener(object : OnClickListener() {
fun onClick(v: View?) {
Toast.makeText(
applicationContext,
"Redirecting to Website" ,
Toast.LENGTH_SHORT
).show()
snackbar.dismiss()
}
})
// add the custom snack bar layout to snackbar layout
snackbarLayout.addView(customSnackView, 0 )
snackbar.show()
}
})
}
} //This code is written by Ujjwal kumar Bhardwaj |