Search code examples
javaandroidpicasso

Picasso: Why is my cardview changes its dimension when the image load?


I used Picasso in loading my Image and my problem is about my cardview it change its Dimension when the Image loads . it looks like this;
Before The image(1) loads and looks like this after the Image(2)
How do I make my dimension fixed even when the image loads. here is my codes

drawer_layout_list.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="128dp"
    card_view:cardBackgroundColor="@android:color/transparent"
    card_view:cardCornerRadius="2dp"
    card_view:cardElevation="3dp">

    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:weightSum="3">


        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center"
            android:layout_weight="2">

            <ImageView
                android:id="@+id/partner_post_image"
                android:layout_width="90dp"
                android:layout_height="90dp"
                android:layout_margin="8dp" />
        </LinearLayout>

        <LinearLayout
            android:layout_weight="1"
            android:weightSum="3"
            android:orientation="vertical"
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <TextView
                android:id="@+id/partner_store"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginLeft="8dp"
                android:layout_marginStart="8dp"
                android:layout_marginTop="8dp"
                android:layout_weight="1"
                android:gravity="bottom|start"
                android:text="Store Name"
                android:textAlignment="viewStart"
                android:textSize="18sp"
                android:textStyle="bold" />

            <TextView
                android:id="@+id/partner_post_desc"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginLeft="8dp"
                android:layout_marginStart="8dp"
                android:layout_weight="2"
                android:gravity="top|start"
                android:text="Description Here"
                android:textAlignment="viewStart"
                android:textColor="#000"
                android:textSize="12sp" />

        </LinearLayout>
    </LinearLayout>

</android.support.v7.widget.CardView>

and my RecyclerView.Holder code is like this

public class PartnerStoreViewHolder extends RecyclerView.ViewHolder {

    private View mView;
    public PartnerStoreViewHolder(View itemView) {
        super(itemView);

        mView = itemView;
    }

    public void setStore(String store ){
        TextView storeName = (TextView) mView.findViewById(R.id.partner_store);
        storeName.setText(store);
    }
    public void setDescription(String description){
        TextView descName = (TextView) mView.findViewById(R.id.partner_post_desc);
        descName.setText(description);
    }
    public void setImage(Context context, String image){
        ImageView postImage = (ImageView) mView.findViewById(R.id.partner_post_image);
        Picasso.with(context)
                .load(image)
                .error(android.R.drawable.stat_notify_error)
                .placeholder(R.drawable.ic_blu_logo)
                .fit()
                .into(postImage);
    }
}

my Fragment code and adapter

public class PartnerStore extends BaseFragment {
    private RecyclerView recyclerView;
    private FirebaseRecyclerAdapter<PartnersList, PartnerStoreViewHolder> firebaseRecyclerAdapter;
    private DatabaseReference mRef;

    public PartnerStore() {
        // Required empty public constructor
    }
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.drawer_partner_store, container, false);

        mRef = MyDatabaseUtil.getDatabase().getReference().child("partners");

        recyclerView = (RecyclerView) view.findViewById(R.id.partner_store_recycler_view);
        recyclerView.setHasFixedSize(true);
        recyclerView.setLayoutManager(new LinearLayoutManager(getActivity()));

        return view;
    }
    @Override
    public void onStart() {
        super.onStart();

        firebaseRecyclerAdapter = new FirebaseRecyclerAdapter<PartnersList, PartnerStoreViewHolder>(
                PartnersList.class,
                R.layout.drawer_partner_store_list,
                PartnerStoreViewHolder.class,
                mRef
        ){
            @Override
            protected void populateViewHolder(PartnerStoreViewHolder viewHolder, PartnersList model, int position) {
                viewHolder.setStore(model.getPartnerStore());
                viewHolder.setDescription(model.getDescription());
                viewHolder.setImage(getActivity() ,model.getImage());
            }
        };
        recyclerView.setAdapter(firebaseRecyclerAdapter);
    }

    @Override
    public void onDetach() {
        super.onDetach();
        firebaseRecyclerAdapter.cleanup();
    }
}

thanks..

UPDATE
My problem was I never used the space In my Texview, Though I still dont know why it changes the dimension. well, I cheated on my textview and I added white spaces to use the unused spaced from my textview I implemented it like this goes like this...

public void setDescription(String description){
        TextView descName = (TextView) mView.findViewById(R.id.partner_post_desc);
        if (description.length() <= 30){
            for (int x=0; x <= 99; x++){
                description = description + " "; //adding white spaces
            }
            descName.setText(description);
        }else {
            descName.setText(description);
        }
    }

Thanks to All that helped.. I appreciate it


Solution

  • you are giving only third part of view to textviews and one other two parts to imageview's parent layout which is not being used because imageview width is fixed . you should't be using weight at all as you are giving fixed width and height to imageview and wrap content for textviews.

    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    
            <ImageView
                android:id="@+id/partner_post_image"
                android:layout_width="90dp"
                android:layout_height="90dp"
                android:layout_margin="8dp" />
    
    
        <LinearLayout
            android:weightSum="3"
            android:orientation="vertical"
            android:layout_width="match_parent"
            android:layout_height="match_parent">
    
            <TextView
                android:id="@+id/partner_store"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginLeft="8dp"
                android:layout_marginStart="8dp"
                android:layout_marginTop="8dp"
                android:layout_weight="1"
                android:gravity="bottom|start"
                android:text="Store Name"
                android:textAlignment="viewStart"
                android:textSize="18sp"
                android:textStyle="bold" />
    
            <TextView
                android:id="@+id/partner_post_desc"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginLeft="8dp"
                android:layout_marginStart="8dp"
                android:layout_weight="2"
                android:gravity="top|start"
                android:text="Description Here"
                android:textAlignment="viewStart"
                android:textColor="#000"
                android:textSize="12sp" />
    
        </LinearLayout>
    </LinearLayout>
    

    and then try

    Picasso.with(context)
        .load(image)
        .error(android.R.drawable.stat_notify_error)
        .placeholder(R.drawable.ic_blu_logo)
        .fit()
        .centerCrop()
        .into(postImage);
    

    let me know if you still have any issues.