Nowadays, image buttons play a big role in making the android application more interactive and user-friendly. Be it any social media app like Instagram or Facebook or any shopping app or streaming app, each application uses this feature widely. In this article, we will take a look at the implementation of this section in Android.
We will be building a simple application in which we will be implementing an ImageButton and will be using it to create toasts and intents. After clicking on the image, it will behave in a similar manner to a button and perform the desired task. (A sample video is given below to get an idea about what we are going to create in this article)
Step By Step Implementation
Step 1: Create a New Project in Android Studio
To create a new project in Android Project just refer to this article on How to Create New Project in Android Studio. The code has been given in both Java and Kotlin Programming Language for Android.
Step 2: Add the Required Image to the Drawable Folder.
Drawable folder contains custom drawables or vector drawables or png’s that will automatically gain resource id usable in application. Usually it contains app graphics.
Here, we’ll copy the image file that we’ve chosen and head over to the Android studio. Then open Project files and select Android files. Navigate to the app > res > drawable. Right-click on the drawable folder and open it in explorer. Paste the copied image here and close it. You will now be able to locate your image inside the drawable folder in android studio.
Step 3: Working with the activity_main.xml File
Navigate to the app > res > layout > activity_main.xml and add the below code to that file. Below is the code for the activity_main.xml file.
< LinearLayout
android:layout_width = "match_parent"
android:layout_height = "match_parent"
android:orientation = "vertical"
tools:layout_editor_absoluteX = "1dp"
tools:layout_editor_absoluteY = "1dp" >
< ImageButton
android:id = "@+id/imageButton"
android:layout_width = "wrap_content"
android:layout_height = "200dp"
android:layout_marginTop = "200dp"
android:layout_marginLeft = "70dp"
android:layout_marginRight = "70dp"
android:scaleType = "fitCenter"
app:srcCompat = "@drawable/gfg" />
</ LinearLayout >
|
Step 4: Working with the MainActivity File
Go to the MainActivity File and refer to the following code. Below is the code for the MainActivity File. Comments are added inside the code to understand the code in more detail.
import androidx.appcompat.app.AppCompatActivity;
import android.content.Intent;
import android.net.Uri;
import android.os.Bundle;
import android.widget.ImageButton;
import android.widget.Toast;
public class MainActivity extends AppCompatActivity {
// Declaring the variable for image button
ImageButton gfgImageButton;
@Override
protected void onCreate(Bundle savedInstanceState) {
super .onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// Initializing the variable for image button
gfgImageButton = (ImageButton) findViewById(R.id.imageButton);
// Below code is for setting a click listener on the image
gfgImageButton.setOnClickListener(view -> {
// Creating a toast to display the message
Toast.makeText(MainActivity. this , "Welcome to GeeksforGeeks" , Toast.LENGTH_SHORT).show();
// Creating an explicit intent to open the
// link stored in variable url
Intent i = new Intent(Intent.ACTION_VIEW);
i.setData(Uri.parse(url));
startActivity(i);
});
}
} |
import android.content.Intent
import android.net.Uri
import android.os.Bundle
import android.widget.ImageButton
import android.widget.Toast
import androidx.appcompat.app.AppCompatActivity
class MainActivity : AppCompatActivity() {
// Declaring the variable for image button
lateinit var gfgImageButton: ImageButton
override fun onCreate(savedInstanceState: Bundle?) {
super .onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
// Initializing the variable for image button
gfgImageButton = findViewById(R.id.imageButton)
// Below code is for setting a click listener on the image
gfgImageButton.setOnClickListener {
// Creating a toast to display the message
Toast.makeText( this , "Welcome to GeeksforGeeks" , Toast.LENGTH_SHORT).show()
// Creating an explicit intent to open the
// link stored in variable url
val i = Intent(Intent.ACTION_VIEW)
i.data = Uri.parse(url)
startActivity(i)
}
}
} |
Output: