How to Create an ImageButton in Android?
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.
XML
< LinearLayout 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: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.
Java
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 w3wiki" , 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); }); } } |
Kotlin
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 w3wiki" , 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:
Contact Us