Android view not centering in ConstraintLayout/LinearLayout

Question

I have created this layout which as you can see on the second picture is not horizontally centered, with the card view always being left aligned:

above: picture from xml design view.

below: picture from emulator.

I have tried:

changing the MaterialCardView's width and height to 0dp, which just removed the view entirely.
setting gravity and layout_gravity to center
setting weight = 1
the above in linear layout
tested in both emulator and physical device.

Below is the xml:

<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="120sp">


    <com.google.android.material.card.MaterialCardView
        android:id="@+id/cardView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginVertical="10dp"
        app:cardBackgroundColor="@color/white"
        app:cardCornerRadius="30dp"
        app:cardElevation="10dp"
        app:strokeColor="@color/black"
        app:strokeWidth="3dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent">

This layout is held within a recycler view:

<androidx.constraintlayout.widget.ConstraintLayout
    android:id="@+id/constraintLayout2"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    app:layout_constraintTop_toBottomOf="@+id/my_toolbar"
    app:layout_constraintBottom_toBottomOf="parent">

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recycler_view"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toTopOf="@+id/above_item"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/below_item" />

The ListAdapter for the RecyclerView:

override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): RecyclerView.ViewHolder {
    val binding = LayoutAlarmBinding.inflate(LayoutInflater.from(parent.context))
    return MyViewHolder(binding)
}

override fun onBindViewHolder(holder: RecyclerView.ViewHolder, position: Int) {
    val currentItem = alarmList[position]
    val recurring = currentItem.repeat
    val switch = holder.itemView.findViewById<SwitchCompat>(R.id.switch_alarm)
    }
}

home binding:

class HomeFragment : Fragment() {

lateinit var binding: FragmentHomeBetterBinding
private lateinit var alarmViewModel: AlarmViewModel

override fun onCreateView(
    inflater: LayoutInflater, container: ViewGroup?,
    savedInstanceState: Bundle?
): View {
    binding = FragmentHomeBetterBinding.inflate(inflater, container, false)

    // RecyclerView
    val adapter = AlarmListAdapter()
    val recyclerView = binding.recyclerView
    recyclerView.adapter = adapter
    recyclerView.layoutManager = LinearLayoutManager(requireContext())


    //ViewModel
    alarmViewModel = ViewModelProvider(this)[AlarmViewModel::class.java]
    alarmViewModel.readAlarmData.observe(viewLifecycleOwner) { alarm ->
        adapter.setData(alarm)
        setTvNextAlarm(adapter, alarm)
    }

    binding.btnAddAlarm.setOnClickListener {
        Navigation.findNavController(requireView())
            .navigate(R.id.action_homeFragment_to_newAlarmFragment)
    }                

    return binding.root
}

"you can see on the second picture is not properly horizontally aligned" - what is your definition of "properly horizontally aligned"? IOW, what is an example of what it _should_ look like? Also, show the ViewHolder where you inflate each item's layout. — dominicoder, Mar 15 '23 at 19:18
Your problems seem to be within the CardView. But I do not see the content of the card View. So it is difficult to know what is wrong. — hoford, Mar 15 '23 at 21:51
@dominicoder It should look like the fist picture it should be centered horizontally. I changed the text to show this a little more clearly now and added in some code snippets. — Joe Pleavin, Mar 16 '23 at 13:28
@hoford you think the contents of the card view are affecting the recyclerView's orientation? I can post the contents later and see, but I don't see how a separate constraint view could affect the outer view. — Joe Pleavin, Mar 16 '23 at 13:30
`LayoutAlarmBinding.inflate(LayoutInflater.from(parent.context))` is your problem. See: [match\_parent width does not work in RecyclerView](https://stackoverflow.com/questions/30691150/match-parent-width-does-not-work-in-recyclerview) — dominicoder, Mar 16 '23 at 14:38
@dominicoder yep, this worked in the end: `val binding = LayoutAlarmBinding.bind(LayoutInflater.from(parent.context).inflate(R.layout.layout_alarm, parent, false))` — Joe Pleavin, Mar 16 '23 at 17:42
Better yet, close it as a duplicate - this same issue has been asked and answered multiple times already. — dominicoder, Mar 17 '23 at 15:09

score 0 · Accepted Answer · answered Mar 17 '23 at 13:17

It turns out that the alarm item from the picture was filling the recyclerView but the recyclerView was not filling the screen.

This is a problem with the way it was inflated, to fix it I changed my LayoutInflater to this:

val binding = LayoutAlarmBinding.bind(LayoutInflater.from(parent.context).inflate(R.layout.layout_alarm, parent, false))

Android view not centering in ConstraintLayout/LinearLayout

1 Answers1