ImageVIew doesn't fill the enitre parent view when shared element transition impemented

20 Views Asked by At

I've a recyclerView in which there is an item which has the imageView and when i click on the image which i want to see on the whole screen, but on the contrary it is observed that the image is not covering the whole screen as it should have

I've tried to see if i gave any padding or margin so i fill the background with a colour but it shows the linear layout is not occupying the whole screen. i was expecting the height of the layout to be whole screen as i've given the layout_height as match_parent. i've also implemented the shared element transition.

Here's the code for the reference:

MessageAdapter.kt

class MessagesAdapter(private val context: Context?,
                      private val messageData: ArrayList<MessageData>): RecyclerView.Adapter<RecyclerView.ViewHolder>() {

    companion object {
        const val ITEM_SENT = 1
        const val ITEM_RECEIVE = 2
    }

    class SentViewHolder(itemView: View): RecyclerView.ViewHolder(itemView) {
        val binding: ItemSendBinding = ItemSendBinding.bind(itemView)
    }

    class RecieveViewHolder(itemView: View): RecyclerView.ViewHolder(itemView) {
        val binding: ItemRecieveBinding = ItemRecieveBinding.bind(itemView)
    }

    override fun getItemViewType(position: Int): Int {
        val message = messageData[position]
        return if(FirebaseAuth.getInstance().uid == message.getSenderId()){
            ITEM_SENT
        }else {
            ITEM_RECEIVE
        }
    }

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): RecyclerView.ViewHolder {
        Log.d("onCreateViewHolder", "Initialized")
        return when (viewType){
            ITEM_SENT -> SentViewHolder(LayoutInflater.from(context).inflate(R.layout.item_send, parent, false))
            ITEM_RECEIVE -> RecieveViewHolder(LayoutInflater.from(context).inflate(R.layout.item_recieve, parent, false))
            else -> throw IllegalArgumentException("Unknown view Type: $viewType")
        }
    }

    override fun getItemCount(): Int {
        println(messageData.size)
        return messageData.size
    }

    override fun onBindViewHolder(holder: RecyclerView.ViewHolder, position: Int) {
        val message = messageData[position]

        Log.d("onBindViewHolder", "Initialized")

        if(holder is SentViewHolder){
            when (message.getContentType()) {
                "Text" -> {
                    holder.binding.senderMsgText.text = message.getMessage()
                    holder.binding.senderMsgText.visibility = View.VISIBLE
                    holder.binding.senderMsgImage.visibility = View.GONE
                }

                "Image" -> {
                    ViewCompat.setTransitionName(holder.binding.senderMsgImage, message.getTimeStamp().toString())

                    if (context != null) {
                        Glide.with(context)
                            .load(message.getMessage())
                            .diskCacheStrategy(DiskCacheStrategy.AUTOMATIC)
                            .into(holder.binding.senderMsgImage)

                        holder.binding.senderMsgText.visibility = View.GONE
                        holder.binding.senderMsgImage.visibility = View.VISIBLE

                        holder.itemView.setOnClickListener {
                            val intent = Intent(context, MenuActivity::class.java)
                                .apply {
                                    putExtra("OptionName", "ImageViewer")
                                    putExtra("ImageURl", message.getMessage())
                                    putExtra("TransitionName",  ViewCompat.getTransitionName(holder.binding.senderMsgImage))
                                }
                            val options = ActivityOptionsCompat.makeSceneTransitionAnimation(context as Activity, holder.binding.senderMsgImage,
                                ViewCompat.getTransitionName(holder.binding.senderMsgImage).toString()
                            )

                            context.startActivity(intent, options.toBundle())
                        }
                    }
                }
            }
        }
        else if(holder is RecieveViewHolder){
            when (message.getContentType()) {
                "Text" -> {
                    holder.binding.recieverMsgText.text = message.getMessage()
                    holder.binding.recieverMsgText.visibility = View.VISIBLE
                    holder.binding.recieverMsgImage.visibility = View.GONE
                }

                "Image" -> {
                    ViewCompat.setTransitionName(holder.binding.recieverMsgImage, message.getTimeStamp().toString())

                    if (context != null) {
                        Glide.with(context)
                            .load(message.getMessage())
                            .diskCacheStrategy(DiskCacheStrategy.AUTOMATIC)
                            .into(holder.binding.recieverMsgImage)

                        holder.binding.recieverMsgText.visibility = View.GONE
                        holder.binding.recieverMsgImage.visibility = View.VISIBLE
                    }

                    holder.itemView.setOnClickListener {
                        val intent = Intent(context, MenuActivity::class.java)
                            .apply {
                                putExtra("OptionName", "ImageViewer")
                                putExtra("ImageURl", message.getMessage())
                                putExtra("TransitionName",  ViewCompat.getTransitionName(holder.binding.recieverMsgImage))
                            }
                        val options = ActivityOptionsCompat.makeSceneTransitionAnimation(context as Activity, holder.binding.recieverMsgImage,
                            ViewCompat.getTransitionName(holder.binding.recieverMsgImage).toString()
                        )

                        context.startActivity(intent, options.toBundle())
                    }
                }
            }
        }
    }

}

item_send.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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="wrap_content"
    android:layout_marginStart="100dp"
    android:layout_marginTop="10dp"
    android:layout_marginEnd="7dp">

    <RelativeLayout
        android:id="@+id/senderMsg"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <TextView
            android:id="@+id/senderMsgText"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/sender_drawable"
            android:paddingStart="15dp"
            android:paddingTop="10dp"
            android:paddingEnd="20dp"
            android:paddingBottom="10dp"
            android:layout_alignParentEnd="true"
            android:text="@string/message"
            android:textSize="18sp"
            android:layout_below="@id/senderMsgImage"/>

        <ImageView
            android:id="@+id/senderMsgImage"
            android:layout_width="match_parent"
            android:layout_height="300dp"
            android:scaleType="centerCrop"
            android:background="@drawable/sender_drawable"
            android:contentDescription="@string/senderImage_description"
            android:padding="4dp"
            android:src="@drawable/ic_gallery" />

    </RelativeLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

item_recieve.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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="wrap_content"
    android:layout_marginStart="7dp"
    android:layout_marginTop="10dp"
    android:layout_marginEnd="100dp">

    <RelativeLayout
        android:id="@+id/recieverMsg"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <TextView
            android:id="@+id/recieverMsgText"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:paddingStart="15dp"
            android:paddingTop="10dp"
            android:paddingEnd="20dp"
            android:paddingBottom="10dp"
            android:layout_alignParentStart="true"
            android:background="@drawable/reciever_drawable"
            android:text="@string/message"
            android:textSize="18sp" />

        <ImageView
            android:id="@+id/recieverMsgImage"
            android:layout_width="match_parent"
            android:layout_height="300dp"
            android:background="@drawable/reciever_drawable"
            android:contentDescription="@string/senderImage_description"
            android:padding="4dp"
            android:scaleType="centerCrop"
            android:src="@drawable/ic_gallery" />

    </RelativeLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

imageViewer.kt

class ImageViewer : Fragment() {
    private var _binding: FragmentImageViewerBinding? = null
    private val binding get() = _binding
    private var imageUrl: String? = null

    private lateinit var toolbarSettings: androidx.appcompat.widget.Toolbar

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        postponeEnterTransition()
        sharedElementEnterTransition = TransitionInflater.from(context).inflateTransition(android.R.transition.move)
    }

    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        // Inflate the layout for this fragment
        _binding = FragmentImageViewerBinding.inflate(inflater, container, false)
        val view = binding?.root

        val activity = this.activity

        if(activity != null){
            toolbarSettings = activity.findViewById(R.id.toolbarMenu)
        }

        toolbarSettings.visibility = View.GONE

        val imageUrl = activity?.intent?.getStringExtra("ImageURl")
        val transitionName = activity?.intent?.getStringExtra("TransitionName")

        binding?.sendRecieveImage?.transitionName = transitionName

        context?.let {
            binding?.sendRecieveImage?.let { it1 ->
                Glide.with(it)
                    .load(imageUrl)
                    .diskCacheStrategy(DiskCacheStrategy.AUTOMATIC)
                    .into(it1)

                activity?.supportStartPostponedEnterTransition()
            }
        }

        return view
    }

    override fun onConfigurationChanged(newConfig: Configuration) {
        super.onConfigurationChanged(newConfig)

        val isLandscape = newConfig.orientation == Configuration.ORIENTATION_LANDSCAPE

        if(isLandscape){
            val layoutParams = binding?.sendRecieveImage?.layoutParams
            layoutParams?.height = newConfig.screenHeightDp
            binding?.sendRecieveImage?.layoutParams = layoutParams
        }
        // Perform the necessary UI updates or transitions here
        binding?.sendRecieveImage?.animate()?.rotation(360f)?.start()
        context?.let {
            binding?.sendRecieveImage?.let { it1 ->
                Glide.with(it)
                    .load(imageUrl)
                    .diskCacheStrategy(DiskCacheStrategy.AUTOMATIC)
                    .into(it1)
            }
        }
    }


}

fragment_image_viewer.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/splash"
    tools:context=".fragments.ImageViewer">

    <ImageView
        android:id="@+id/sendRecieveImage"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:contentDescription="@string/senderImage_description"
        android:scaleType="fitCenter"
        tools:srcCompat="@tools:sample/backgrounds/scenic" />

</LinearLayout>

Note: I'm using Menu.kt (Activity) to navigate between the fragments

Menu.kt (where i'm controlling the navigation of the fragments)

if(intent != null){
            optionValue = intent.getStringExtra("OptionName").toString()
            when (optionValue){
                "Settings" -> {
                    supportFragmentManager.beginTransaction().replace(R.id.frameLayout, Settings()).commit()
                    binding.toolbarMenu.title = "Settings"
                }
                "MessagingScreen" -> {
                    supportFragmentManager.beginTransaction().replace(R.id.frameLayout, Message()).commit()
                    binding.toolbarMenu.title = "Message"
                }
                "About" -> {
                    supportFragmentManager.beginTransaction().replace(R.id.frameLayout, About()).commit()
                    binding.toolbarMenu.title = "About Us"
                }
                "StatusScreen" -> {
//                    Toast.makeText(this, "Status Screen Called", Toast.LENGTH_SHORT).show()
                    supportFragmentManager.beginTransaction().replace(R.id.frameLayout, StoryViewer()).commit()
                    binding.toolbarMenu.title = "Status View"
                }
                "Contacts" -> {
                    supportFragmentManager.beginTransaction().replace(R.id.frameLayout, Contacts()).commit()
                    binding.toolbarMenu.title = "Contacts"
                }
                "ImageViewer" -> {
                    supportFragmentManager.beginTransaction().replace(R.id.frameLayout, ImageViewer()).commit()
                    binding.toolbarMenu.title = "ImageViewer"
                }
            }
        }

Thank You

0

There are 0 best solutions below