Search code examples
androidonclickandroid-imageviewscaletype

How to change Image scaleType when button is pressed


Hello im trying to change imageView scaleType when button is pressed currently im using centercrop(as defualt) i want that when button is pressed it changes to fit center and vice versa

for eg : 1 Instagram :- when you upload a photo to your post there is a button to adjust the image crop

2 youtube :- in youtube if you have noticed in the home there are some comunity tabs where images are uploaded when you click the image it changes the crop and vise versa

also another small question related to this that how to change the button(the button is an ImageView) background when pressed and vice versa

just as a note i want to use this in an adapterclass

imagepost_buttons.xml // the button for switching the scaleType

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/relativeLayoutImagePost"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_alignParentStart="true"
        android:layout_marginTop="10dp"
        android:layout_marginStart="15dp"
        android:contentDescription="@string/todo"
        android:gravity="center"
        android:elevation="10dp"
        android:src="@drawable/ic_baseline_open_in_full_24" />
</RelativeLayout>

circular_scaling_background.xml // the background i want to change when button(ImageView) is pressed and vise versa

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">

    <solid android:color="@color/lite_grey"/>
    <stroke android:width="0dp" android:color="@color/lite_grey"/>
    <size android:width="24dp" android:height="24dp"/>

</shape>

post_item_container_home.xml // the ImageView which i want to change the scaleType

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_centerInParent="true"
    android:background="@color/black"
    android:orientation="vertical"
    android:weightSum="5">

    <com.google.android.material.card.MaterialCardView
        android:id="@+id/Card_View"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_marginStart="5dp"
        android:layout_marginEnd="5dp"
        android:layout_weight="4"
        app:cardBackgroundColor="@color/black"
        app:shapeAppearanceOverlay="@style/RoundedCornerHome">

        <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <com.google.android.material.imageview.ShapeableImageView
                android:id="@+id/imagePostHome"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_gravity="center"
                android:adjustViewBounds="true"
                android:contentDescription="@string/todo"
                android:scaleType="centerCrop"
                app:shapeAppearanceOverlay="@style/RoundedCornerHome" />

            <include
                android:id="@+id/imagepost_buttons"
                layout="@layout/imagepost_buttons" />
        </FrameLayout>

    </com.google.android.material.card.MaterialCardView>

    <com.google.android.material.card.MaterialCardView
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_marginStart="5dp"
        android:layout_marginTop="10dp"
        android:layout_marginEnd="5dp"
        android:layout_marginBottom="10dp"
        android:layout_weight="1"
        app:cardBackgroundColor="@color/grey"
        app:shapeAppearanceOverlay="@style/RoundedCornerHome">

        <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <include
                android:id="@+id/material_cardview_snipet"
                layout="@layout/material_cardview_snipet" />
        </FrameLayout>


    </com.google.android.material.card.MaterialCardView>


</LinearLayout>

PostAdapter_Home.java // adapter class

public class PostAdapter_Home extends RecyclerView.Adapter<PostAdapter_Home.PostViewHolder> {
    public static List<Upload> mUploads;
    public Context mcontext;

    public PostAdapter_Home(Context context, List<Upload> uploads) {
        mUploads = uploads;
        mcontext = context;
    }


    @NonNull
    @Override
    public PostViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        View view;
        view = LayoutInflater.from(mcontext).inflate(R.layout.post_item_container_home, parent, false);
        return new PostViewHolder(view);

    }

    @Override
    public void onBindViewHolder(@NonNull PostViewHolder holder, int position) {
        Home_Fragment.saved_position = holder.getAbsoluteAdapterPosition();
        Home_Fragment.saved_position = 0;
        Upload uploadCurrent = mUploads.get(position);
        Shimmer shimmer = new Shimmer.ColorHighlightBuilder()
                .setBaseColor(Color.parseColor("#F3F3F3"))
                .setBaseAlpha(1)
                .setHighlightColor(Color.parseColor("#E7E7E7"))
                .setHighlightAlpha(1)
                .setDropoff(50)
                .build();
        ShimmerDrawable shimmerDrawable = new ShimmerDrawable();
        shimmerDrawable.setShimmer(shimmer);
        Glide.with(mcontext)
                .load(uploadCurrent.getmImageUrl())
                .diskCacheStrategy(DiskCacheStrategy.AUTOMATIC)
                .placeholder(shimmerDrawable)
                .into(holder.imageView);


    }

    @Override
    public int getItemCount() {
        return mUploads.size();
    }

    public static class PostViewHolder extends RecyclerView.ViewHolder {
        ShapeableImageView imageView;

        public PostViewHolder(@NonNull View itemView) {
            super(itemView);
            imageView = itemView.findViewById(R.id.imagePostHome);
        }


        public int getAbsoluteAdapterPosition() {
            return 0;
        }
    }
}

Update 1

PostAdapter_Home.java // update from the answer // it is not working i know i have messed it up , i dont know how to implement it exactly

public class PostAdapter_Home extends RecyclerView.Adapter<PostAdapter_Home.PostViewHolder> {
    public static List<Upload> mUploads;
    public Context mcontext;
    View view;

    public PostAdapter_Home(Context context, List<Upload> uploads) {
        mUploads = uploads;
        mcontext = context;
    }


    @NonNull
    @Override
    public PostViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        View view;
        view = LayoutInflater.from(mcontext).inflate(R.layout.post_item_container_home, parent, false);
        return new PostViewHolder(view);

    }

    @Override
    public void onBindViewHolder(@NonNull PostViewHolder holder, int position) {
        Home_Fragment.saved_position = holder.getAbsoluteAdapterPosition();
        changeScaleType(position);


    }

    private void changeScaleType(int position) {
        ShapeableImageView imageView;
        imageView = view.findViewById(R.id.imagePostHome);
        Home_Fragment.saved_position = 0;
        Upload uploadCurrent = mUploads.get(position);
        Shimmer shimmer = new Shimmer.ColorHighlightBuilder()
                .setBaseColor(Color.parseColor("#F3F3F3"))
                .setBaseAlpha(1)
                .setHighlightColor(Color.parseColor("#E7E7E7"))
                .setHighlightAlpha(1)
                .setDropoff(50)
                .build();
        ShimmerDrawable shimmerDrawable = new ShimmerDrawable();
        shimmerDrawable.setShimmer(shimmer);
        String imgTag = imageView.getTag().toString();
        Log.e(TAG, "imgTag---" + imgTag);
        if (imgTag.equals("")) {
            Glide.with(mcontext).load(uploadCurrent.getmImageUrl()).diskCacheStrategy(DiskCacheStrategy.AUTOMATIC)
                    .placeholder(shimmerDrawable).fitCenter().into(imageView);
            imageView.setTag("centerInside");
        } else {
            if (imgTag.equals("centerCrop")) {
                Glide.with(mcontext).load(uploadCurrent.getmImageUrl()).diskCacheStrategy(DiskCacheStrategy.AUTOMATIC)
                        .placeholder(shimmerDrawable).fitCenter().into(imageView);
                imageView.setTag("centerInside");
            } else {
                Glide.with(mcontext).load(uploadCurrent.getmImageUrl()).diskCacheStrategy(DiskCacheStrategy.AUTOMATIC)
                        .placeholder(shimmerDrawable).centerCrop().into(imageView);
                imageView.setTag("centerCrop");
            }
        }

    }

    @Override
    public int getItemCount() {
        return mUploads.size();
    }

    public static class PostViewHolder extends RecyclerView.ViewHolder {
        ShapeableImageView imageView;

        public PostViewHolder(@NonNull View itemView) {
            super(itemView);
            imageView = itemView.findViewById(R.id.imagePostHome);
        }


        public int getAbsoluteAdapterPosition() {
            return 0;
        }
    }
}

Solution

  • Try this:

    private void changeScaleType(){
                    String imgTag = imagePostHome.getTag().toString();
                    Log.e(TAG,"imgTag---"+imgTag);
                    if(imgTag.equals("")){
                        Glide.with(this).load(imgUrl).fitCenter().into(imagePostHome);
                        imagePostHome.setTag("centerInside");
                    }else {
                        if (imgTag.equals("centerCrop")) {
                            Glide.with(this).load(imgUrl).fitCenter().into(imagePostHome);
                            imagePostHome.setTag("centerInside");
                        }else{
                            Glide.with(this).load(imgUrl).centerCrop().into(imagePostHome);
                            imagePostHome.setTag("centerCrop");
                        }
                    }
                }
    
    • Set tag to imageView
    • On click of view add fitCenter and centerCrop to code while loading image to imageview using Glide

    Edit:

    Call changeScaleType() method on click of view that is responsible for change scale type of imagevew, For example, As In you case relativeLayoutImagePost is responsible for change scale type of imagevew.

    FindViewById of Views in PostViewHolder class, Add values to views in onBindViewHolder method of Adapter

    Here is coding for adapter:

    public class PostAdapter_Home extends RecyclerView.Adapter<PostAdapter_Home.PostViewHolder> {
        private static String TAG = PostAdapter_Home.class.getSimpleName();
        public static List<Upload> mUploads;
        public Context mcontext;
        View view;
    
        public PostAdapter_Home(Context context, List<Upload> uploads) {
            mUploads = uploads;
            mcontext = context;
        }
        
        @NonNull
        @Override
        public PostViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
            View view;
            view = LayoutInflater.from(mcontext).inflate(R.layout.post_item_container_home, parent, false);
            return new PostViewHolder(view);
    
        }
    
        @Override
        public void onBindViewHolder(@NonNull PostViewHolder holder, int position) {
            Shimmer shimmer = new Shimmer.ColorHighlightBuilder()
                    .setBaseColor(Color.parseColor("#F3F3F3"))
                    .setBaseAlpha(1)
                    .setHighlightColor(Color.parseColor("#E7E7E7"))
                    .setHighlightAlpha(1)
                    .setDropoff(50)
                    .build();
            ShimmerDrawable shimmerDrawable = new ShimmerDrawable();
            shimmerDrawable.setShimmer(shimmer);
            Upload uploadCurrent = mUploads.get(position);
            Glide.with(mcontext).load(uploadCurrent.getmImageUrl()).diskCacheStrategy(DiskCacheStrategy.AUTOMATIC)
                    .placeholder(shimmerDrawable).fitCenter().into(holder.imagePostHome);
    
            holder.relativeLayoutImagePost.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View view) {
    
                    changeScaleType(holder, position);
                }
            });
    
        }
    
        private void changeScaleType(PostViewHolder holder,int position) {
            Shimmer shimmer = new Shimmer.ColorHighlightBuilder()
                    .setBaseColor(Color.parseColor("#F3F3F3"))
                    .setBaseAlpha(1)
                    .setHighlightColor(Color.parseColor("#E7E7E7"))
                    .setHighlightAlpha(1)
                    .setDropoff(50)
                    .build();
            ShimmerDrawable shimmerDrawable = new ShimmerDrawable();
            shimmerDrawable.setShimmer(shimmer);
            
            Upload uploadCurrent = mUploads.get(position);
            String imgTag = holder.imagePostHome.getTag().toString();
            Log.e(TAG, "imgTag---" + imgTag);
            if (imgTag.equals("")) {
                Glide.with(mcontext).load(uploadCurrent.getmImageUrl()).diskCacheStrategy(DiskCacheStrategy.AUTOMATIC)
                        .placeholder(shimmerDrawable) .fitCenter().into( holder.imagePostHome);
                holder.imagePostHome.setTag("centerInside");
            } else {
                if (imgTag.equals("centerCrop")) {
                    Glide.with(mcontext).load(uploadCurrent.getmImageUrl()).diskCacheStrategy(DiskCacheStrategy.AUTOMATIC)
                            .placeholder(shimmerDrawable) .fitCenter().into( holder.imagePostHome);
                    holder.imagePostHome.setTag("centerInside");
                } else {
                    Glide.with(mcontext).load(uploadCurrent.getmImageUrl()).diskCacheStrategy(DiskCacheStrategy.AUTOMATIC)
                            .placeholder(shimmerDrawable).centerCrop().into( holder.imagePostHome);
                    holder.imagePostHome.setTag("centerCrop");
                }
            }
    
        }
    
        @Override
        public int getItemCount() {
            return mUploads.size();
        }
    
        public static class PostViewHolder extends RecyclerView.ViewHolder {
    
            private MaterialCardView CardView;
            private ShapeableImageView imagePostHome;
            private RelativeLayout relativeLayoutImagePost;
    
            public PostViewHolder(@NonNull View itemView) {
                super(itemView);
    
                CardView = itemView.findViewById(R.id.Card_View);
                imagePostHome = itemView.findViewById(R.id.imagePostHome);
                relativeLayoutImagePost = itemView.findViewById(R.id.relativeLayoutImagePost);
    
            }
    
    
        }
    }