How to create a layout which will take 4/5 to screen width android

Question

I'm implementing a horizontal recycler view which Trending category cardviews are something like this image

but I achieved this by fixing the width. for small screen cardview covers whole width which I don't want my code is...

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:orientation="vertical" android:layout_width="wrap_content"
android:layout_height="wrap_content">
<android.support.v7.widget.CardView
    android:layout_width="300dp"
    android:layout_height="150dp"
    card_view:cardCornerRadius="3dp"
    android:layout_marginLeft="5dp"
    android:layout_marginStart="5dp"
    android:layout_marginEnd="5dp"
    android:layout_marginRight="5dp"
    card_view:cardElevation="1dp">

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

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:scaleType="fitXY"
            android:id="@+id/trendimage"
            android:src="@drawable/placeholder" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="4dp"
            android:id="@+id/trendtitle"
            android:layout_gravity="bottom"
            android:hint="Zakir Khan's Event"
            android:textSize="14sp"
            android:background="#88000000"
            android:textColor="@color/icons" />
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom|end"
            android:src="@drawable/place_white_24dp"/>
    </FrameLayout>

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

Answer 1

You can achieve that by using PercentRelativeLayout.

Step 1:
Add the percent support library into your module gradle file.

compile 'com.android.support:percent:23.0.0'

Step 2:
Add percentage width into your layouts:

Example:

<?xml version="1.0" encoding="utf-8"?>
    <android.support.percent.PercentRelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical" 
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">
    <android.support.v7.widget.CardView
        app:layout_widthPercent="80%"
        android:layout_height="150dp"
        card_view:cardCornerRadius="3dp"
        android:layout_marginLeft="5dp"
        android:layout_marginStart="5dp"
        android:layout_marginEnd="5dp"
        android:layout_marginRight="5dp"
        card_view:cardElevation="1dp">

        <android.support.percent.PercentRelativeLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@android:color/holo_red_dark">

            <ImageView
                android:id="@+id/trendimage"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="fitXY"
                android:src="@drawable/test"/>

            <TextView
                android:id="@+id/trendtitle"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="bottom"
                android:background="#88000000"
                android:hint="Test Event"
                android:padding="4dp"
                android:textSize="14sp"/>

            <ImageView
                app:layout_widthPercent="10%"
                app:layout_heightPercent="10%"
                android:layout_alignParentBottom="true"
                android:layout_alignParentRight="true"
                android:src="@drawable/test"/>

        </android.support.percent.PercentRelativeLayout>

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

The results that i am getting:

I hope this helps

Answer 2

You can need to calculate the width of the screen and take 4/5 of that to set into you onBindViewHolder call of Adapter. You can set the layout param(width) of item view there.