Introducing Android Studio : Working with images
In the previous article, we learned about Introducing Android Common Palettes. Now in this article, we are going to learn how to play around with images in Android studio. Images are the core way to make your app more attractive and interesting to the user and they are pretty easy to add in android studio. I’ll be sharing how to add list of images using recyclerView and cardView.
So, lets begin..
Steps to follow to add images in Resources :
1. Open your project in Android Studio
2. Click on res
3. Click on drawable
4.Double click on drawable folder.
5.Copy your image file in it and rename as your wish.
6. Now write your image file name after @drawable/
After adding it would look like :
After adding the image, you can use the added image in code:
You can either add image by using xml file
<ImageView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:src="@drawable/image_name" />You can set image by using program also:
ImageView iv = (ImageView)findViewById(v);
iv.setImageResource(R.drawable.image_name);Now lets see what can we do with images using recyclerView and cardView in sample example…
To use RecyclerView and cardView in our project we have to implement some dependencies in our build.gradle file
implementation 'androidx.recyclerview:recyclerview:1.1.0'
implementation 'androidx.cardview:cardview:1.0.0'Create an XML for BuyMoreActivity :
<?xml version=”1.0" encoding=”utf-8"?>
<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”
tools:context=”.recyclerview.BuyMoreActivity”
android:orientation=”vertical”> <com.google.android.material.appbar.AppBarLayout
android:layout_width=”match_parent”
android:layout_height=”wrap_content”
android:theme=”@style/AppTheme.AppBarOverlay”> </com.google.android.material.appbar.AppBarLayout> <androidx.recyclerview.widget.RecyclerView
android:id=”@+id/recyclerview_id”
android:layout_width=”match_parent”
android:layout_height=”match_parent”
>
</androidx.recyclerview.widget.RecyclerView>
</LinearLayout>
Create an XML for cardView :
<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/cardview_id"
android:layout_width="120dp"
android:layout_height="190dp"
xmlns:cardview="http://schemas.android.com/apk/res-auto"
android:layout_margin="5dp"
cardview:cardCornerRadius="4dp">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="@+id/item_img_id"
android:layout_width="match_parent"
android:layout_height="160dp"
android:scaleType="centerCrop"
android:background="#2d2d2d"/>
<TextView
android:id="@+id/item_title_id"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="Item Title"
android:gravity="center"
android:textSize="13dp"
android:textColor="#2d2d2d"/>
</LinearLayout>
</androidx.cardview.widget.CardView>Design Layout for cardView :
Create class for the performing actions :
package com.example.appdemo.recyclerview;
import android.content.Context;
import android.content.Intent;
import android.net.Uri;
import android.os.Bundle;
import com.google.android.material.floatingactionbutton.FloatingActionButton;
import com.google.android.material.snackbar.Snackbar;
import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;
import androidx.appcompat.widget.Toolbar;
import androidx.recyclerview.widget.GridLayoutManager;
import androidx.recyclerview.widget.LinearLayoutManager;
import androidx.recyclerview.widget.RecyclerView;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.LinearLayout;
import com.example.appdemo.R;
import java.util.ArrayList;
import java.util.List;
public class BuyMoreActivity extends AppCompatActivity {
private List<ItemDetails> itemList;
private RecyclerView recyclerView;
private RecyclerViewAdapter myAdapter;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_buy_more);
createItemList();
callRecycleView();
}
public void createItemList()
{
itemList = new ArrayList<>();
itemList.add(new ItemDetails("Samosa","Fried food Item","So yummy, too tasty",R.drawable.samosa));
itemList.add(new ItemDetails("Burger","Fried food Item","So yummy, too tasty",R.drawable.burger));
itemList.add(new ItemDetails("Rice","Boiled food Item","So yummy, too tasty",R.drawable.rice));
itemList.add(new ItemDetails("Rolls","Non-veg food Item","So yummy, too tasty",R.drawable.rolls));
itemList.add(new ItemDetails("Noodles","Boiled food Item","So yummy, too tasty",R.drawable.noodles));
itemList.add(new ItemDetails("Curd","Milk food Item","So yummy, too tasty",R.drawable.curd));
itemList.add(new ItemDetails("Samosa","Fried food Item","So yummy, too tasty",R.drawable.samosa));
itemList.add(new ItemDetails("Burger","Fried food Item","So yummy, too tasty",R.drawable.burger));
itemList.add(new ItemDetails("Rice","Boiled food Item","So yummy, too tasty",R.drawable.rice));
itemList.add(new ItemDetails("Rolls","Non-veg food Item","So yummy, too tasty",R.drawable.rolls));
itemList.add(new ItemDetails("Noodles","Boiled food Item","So yummy, too tasty",R.drawable.noodles));
itemList.add(new ItemDetails("Curd","Milk food Item","So yummy, too tasty",R.drawable.curd));
}
public void callRecycleView() {
recyclerView = findViewById(R.id.recyclerview_id);
recyclerView.setHasFixedSize(true);
myAdapter = new RecyclerViewAdapter(itemList,this);
recyclerView.setLayoutManager(new GridLayoutManager(this,3));
recyclerView.setAdapter(myAdapter);
}
}Now, we have to create adapter class for our recyclerView, which would look like
package com.example.appdemo.recyclerview;
import android.content.Context;
import android.content.Intent;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;
import androidx.annotation.NonNull;
import androidx.cardview.widget.CardView;
import androidx.recyclerview.widget.RecyclerView;
import com.example.appdemo.R;
import java.util.List;
public class RecyclerViewAdapter extends RecyclerView.Adapter<RecyclerViewAdapter.MyViewHolder> {
private List<ItemDetails> itemDetailsList;
private Context mContext;
public RecyclerViewAdapter(List<ItemDetails> itemDetailsList, Context mContext) {
this.itemDetailsList = itemDetailsList;
this.mContext = mContext;
}
public static class MyViewHolder extends RecyclerView.ViewHolder
{
private TextView txt_item_title;
ImageView img_item_thumbnail;
public MyViewHolder(@NonNull View itemView) {
super(itemView);
txt_item_title = (TextView) itemView.findViewById(R.id.item_title_id);
img_item_thumbnail = (ImageView)itemView.findViewById(R.id.item_img_id);
}
}
@NonNull
@Override
public MyViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
View view = LayoutInflater.from(mContext).inflate(R.layout.cardview_item_layout,parent,false);
MyViewHolder myViewHolder = new MyViewHolder(view);
return myViewHolder;
}
@Override
public void onBindViewHolder(@NonNull MyViewHolder holder, final int position) {
holder.txt_item_title.setText(itemDetailsList.get(position).getTitle());
holder.img_item_thumbnail.setImageResource(itemDetailsList.get(position).getThumbnail());
}
@Override
public int getItemCount() {
return itemDetailsList.size();
}
}Thats it….
Our app is Ready.
That’s it. Now we have successfully built an app!
we have implemented a image using recyclerView and cardView in our app :)
Extra notes : If you’re working with app where you gonna actually use in publication, then you need to very careful of the copyright status of the images that you’re using. But if you’re just playing with the app for practise, then downloading an images from google images just to test thing is perfectly fine.
Let’s take it to the next level in upcoming article.
Thanks for reading..