Home / Questions / 119010
Accepted
V0LT3RR4
Asked: 2020-11-21 20:56:55 +0800 CST 2020-11-21 20:56:55 +0800 CST

Fix layout and size of components (RecyclerView)?

  • 772

I have a card_video.xml(which is the element my is populated from RecyclerView) which should look like this according to Android Studio's design view, I understand that it doesn't always look that way due to the properties of each device, but it should look like this for each element:

enter image description here

Which has the following code: 

    <?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    app:cardCornerRadius="15dp"
    app:cardUseCompatPadding="true">

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:weightSum="1">
        <TextView
            android:layout_weight=".1"
            android:paddingLeft="10dp"
            android:id="@+id/textViewIndex"
            android:textSize="20sp"
            android:layout_gravity="center_vertical"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:text="1"/>
        <TextView
            android:layout_weight=".8"
            android:id="@+id/textViewNameCourse"
            android:textAlignment="center"
            android:layout_gravity="center_vertical"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:textSize="16sp"
            android:text="Introduction"/>

        <ImageButton
            android:id="@+id/imageButtonSee"
            style="@style/Widget.AppCompat.Button.Borderless.Colored"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:layout_weight=".1"
            android:src="@drawable/ic_eye_black_24dp" />
    </LinearLayout>

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

When filling the Recycler with data, it ends up looking like this:
enter image description here

Here the code of the Adapter

public class VideoAdapter extends RecyclerView.Adapter<VideoAdapter.ViewHolder>{

    ArrayList<Video> nVideoList;
    private int layout;
    private static OnItemClickListener listener;


    public VideoAdapter(ArrayList<Video> nVideoList, int layout, OnItemClickListener listener) {
        this.nVideoList = nVideoList;
        this.layout = layout;
        this.listener = listener;
    }


    @Override
    public VideoAdapter.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View v = LayoutInflater.from(parent.getContext()).inflate(layout, parent, false);
        return new VideoAdapter.ViewHolder(v);
    }

    @Override
    public void onBindViewHolder(VideoAdapter.ViewHolder holder, int position) {
        holder.index.setText((position+1)+"");
        holder.name.setText(nVideoList.get(position).getName());
        //events
    }

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


    public static class ViewHolder extends RecyclerView.ViewHolder implements View.OnClickListener{

        TextView name;
        TextView index;
        ImageView imageView;
        public ViewHolder(View itemView) {
            super(itemView);
            name = itemView.findViewById(R.id.textViewNameCourse);
            index = itemView.findViewById(R.id.textViewIndex);
            imageView = itemView.findViewById(R.id.imageButtonSee);
            imageView.setOnClickListener(this);
        }

        @Override
        public void onClick(View view) {
            // Llamas el método onItemClickListener() de la interfaz OnItemClickListener
            listener.onItemClickListener(view, getLayoutPosition());
        }
    }
    public interface OnItemClickListener{
        // Este método recibe como parámetro la vista del elemento seleccionado
        void onItemClickListener(View view, int position);
    }
}

Here is the XML where the RecyclerView is:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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="match_parent"
    tools:context="com.example.vycto.atomiccourses.VideoActivity">

    <LinearLayout
        android:id="@+id/linearLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:orientation="horizontal"
        android:weightSum="1"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <ImageButton
            android:id="@+id/buttonBackToCourses"
            style="@style/Widget.AppCompat.Button.Colored"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight=".33"
            android:src="@drawable/ic_arrow_back_white_24dp" />

        <ImageButton
            android:id="@+id/buttonHome"
            style="@style/Widget.AppCompat.Button.Colored"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight=".33"
            android:src="@drawable/ic_home_white" />

        <ImageButton
            style="@style/Widget.AppCompat.Button.Colored"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight=".33"
            android:src="@drawable/ic_list_white" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/linearLayout2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="12dp"
        android:orientation="vertical"
        android:padding="10dp"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/linearLayout">

        <android.support.v7.widget.CardView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:cardCornerRadius="15dp">
            <ImageView
                android:id="@+id/imageViewCoverVideos"
                android:layout_width="match_parent"
                android:layout_height="127dp"
                android:scaleType="fitStart"
                android:src="@drawable/cover_default" />
        </android.support.v7.widget.CardView>

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/textViewNameCourse"
            android:text="Android"
            android:layout_marginTop="3dp"
            android:textAlignment="center"
            android:textSize="22sp"/>
        <TextView
            android:id="@+id/textViewDescriptionCourse"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="10dp"
            android:text="Ingrese aqui descripcion"
            />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/textViewCost1"
            android:layout_gravity="end"
            android:textStyle="bold"
            android:text="Cost: $0 (1 MONTH)"/>

        <android.support.v7.widget.RecyclerView
            android:id="@+id/recyclerViewVideos"
            android:layout_width="match_parent"
            android:layout_height="200dp"></android.support.v7.widget.RecyclerView>

        <Button
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/buttonBuy"
            android:text="Buy"
            android:layout_marginTop="5dp"
            android:layout_marginBottom="3dp"
            style="@style/Widget.AppCompat.Button.Colored"/>
    </LinearLayout>

</android.support.constraint.ConstraintLayout>

I need all the ones you create to be displayed as the first image, thanks.

android

3 Answers

  1. You have to assign layout_width="0dp"to views, no wrap_content, in order to assign percentage values ​​to them:

    <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:weightSum="6">
    <TextView
        android:layout_weight="1"
        android:paddingLeft="10dp"
        android:id="@+id/textViewIndex"
        android:textSize="30sp"
        android:layout_gravity="center_vertical"

       <!--Se cambio de wrap_content a 0dp-->
        android:layout_width="0dp"

        android:layout_height="wrap_content"
        android:text="1"/>
    <TextView
        android:layout_weight="4"
        android:id="@+id/textViewNameCourse"
        android:textAlignment="center"
        android:layout_gravity="center_vertical"

       <!--Se cambio de wrap_content a 0dp-->
        android:layout_width="0dp"

        android:layout_height="wrap_content"
        android:textSize="20sp"
        android:text="Introduction"/>

    <ImageButton
        style="@style/Widget.AppCompat.Button.Borderless.Colored"
        android:layout_width="33dp"
        android:layout_height="wrap_content"
        android:layout_gravity="end"
        android:layout_weight="1"
        android:src="@drawable/ic_eye_black_24dp" />
</LinearLayout>

    This is because although it may not seem like it, wrap_content is a unit of measurement that is calculated at runtime, which causes the system to assign sizes to views and not percentage values.

    Remember that the same happens if the orientation of the LinearLayoutwere vertical. In this case it would be the layout_height="0dp".

    Update:

    Although you didn't add the code, you also have to keep in mind that when you inflate a view, you have to assign it parentso that the view can calculate its size when it is used match_parent.

    Check that you are not sending null when inflating:

     CardView cardView = (CardView)LayoutInflater.from(parent.getContext())
                .inflate(R.layout.card_video, null, false);

    You have to send the parent to the inflate:

     CardView cardView = (CardView)LayoutInflater.from(parent.getContext())
                .inflate(R.layout.card_video, parent, false);
    • 1

  2. I know an answer given that it can be solved in different ways. And it is related to the property android:weightSum, you defined it in 6 specifically. I recommend setting it to 1, it will mean that it is equivalent to 100% The linear layout is in horizontal orientation, therefore the property that you are going to affect in the children is android:layout_widththerefore always set to zero and you set percentages in android:layout_weight. You assign the percentages with .number (attention: in the parent (LinearLayout) 1 = 100%, therefore I assign the first child textview .1 = 10%, the second .8 = 80% and the third .1 = 10%) if you don't assign 100%, what happens is that the components will shift to the left.

    I give you an example:

    <?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView 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"
    app:cardCornerRadius="15dp">

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

        <TextView
            android:id="@+id/textViewIndex"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:layout_weight=".1"
            android:paddingLeft="10dp"
            android:text="1"
            android:textSize="30sp"/>
        <TextView
            android:id="@+id/textViewNameCourse"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:layout_weight=".8"
            android:text="Introduction"
            android:textAlignment="center"
            android:textSize="20sp"/>

        <ImageButton
            style="@style/Widget.AppCompat.Button.Borderless.Colored"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_gravity="end"
            android:layout_weight=".1"
            android:src="@drawable/ic_..."/>


    </LinearLayout>

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

    If you want to give it a better impression, add padding to the cardView. In addition, it may be that the image does not look good, use the ScaleType property or optimize it for the different densities.

    I hope it helps

    Cheers!

    • 1
  3. Best Answer

    Actually your file card_video.xmlis correct, the elements it would display RecyclerViewwould look like this:

    enter image description here

    The real "problem" why the elements of the are displayed incorrectly RecyclerViewis that you are using a ConstraintLayout , I advise you to review the documentation to work with this type of layout, since it can cause unexpected behavior such as the one you indicate in your question:

    enter image description here

    To solve this problem, in the definition of the RecyclerViewdefine android:layout_height="match_parent"instead of android:layout_height="200dp" :

    <android.support.v7.widget.RecyclerView
    android:id="@+id/recyclerViewV"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
</android.support.v7.widget.RecyclerView>

    With this you will cause that in addition to showing all the elements, they are displayed correctly.

    enter image description here

    If it is strictly necessary for your application define 200dp as height for your RecyclerView:

    <android.support.v7.widget.RecyclerView
    android:id="@+id/recyclerViewV"
    android:layout_width="match_parent"
    android:layout_height="200dp">
</android.support.v7.widget.RecyclerView>

    The option is to change the parent container from a ConstraintLayoutto a LinearLayoutwith portrait orientation,

    <?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"
    android:orientation="vertical"
    tools:context="com.example.vycto.atomiccourses.VideoActivity">
...
...

</LinearLayout>

    Through this change you will have the same result, correctly displaying the elements inside the RecyclerView.

    • 1