How to Create an ImageButton in Android?
Last Updated :
17 Jul, 2022
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
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 {
ImageButton gfgImageButton;
@Override
protected void onCreate(Bundle savedInstanceState) {
super .onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
gfgImageButton = (ImageButton) findViewById(R.id.imageButton);
gfgImageButton.setOnClickListener(view -> {
Toast.makeText(MainActivity. this , "Welcome to GeeksforGeeks" , Toast.LENGTH_SHORT).show();
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() {
lateinit var gfgImageButton: ImageButton
override fun onCreate(savedInstanceState: Bundle?) {
super .onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
gfgImageButton = findViewById(R.id.imageButton)
gfgImageButton.setOnClickListener {
Toast.makeText( this , "Welcome to GeeksforGeeks" , Toast.LENGTH_SHORT).show()
val i = Intent(Intent.ACTION_VIEW)
i.data = Uri.parse(url)
startActivity(i)
}
}
}
|
Output:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...