Search code examples
javaandroidandroid-layoutandroid-cardviewscreen-size

specify layout width of cardview to fit all phone screen sizes

need some advice here!

Basically, I want my card view to be like the 2nd pic but without specifying a specific width size, as specifying a specific size will cause the layout to look differently to in other phones.

What I have tried:

1) tried wrap_content, but the sizes of the card view will be different depending on the contents inside it. Some will be long until it's overlaying the index panel, then some will be short. Also, it is definitely not match_parent because the index panel will overlay the cardview. wrapcontent

2) specify a specific number (315dp) for the width. It looked great on my actual phone, but not on other emulators. specified the width to 315dp

3) added "android:layout_toStartOf="@+id/recycler_search" to my card view layout, but there is no effect.

Perhaps I could just demonstrate using my phone, but that will not be efficient isn't it?

As such, anyone knows how I could overcome this? Any help is greatly appreciated!

Here are my codes:

card view layout

<?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="315dp"
android:layout_height="wrap_content"
android:layout_margin="10dp"
app:cardCornerRadius="10dp"
app:cardBackgroundColor="#f5f0f0"
app:cardElevation="5dp">

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:layout_margin="5dp">


<LinearLayout
    android:orientation="vertical"
    android:layout_weight="9"
    android:layout_width="0dp"
    android:layout_height="wrap_content">

    <TextView
        android:id="@+id/keyword"
        android:layout_marginLeft="10dp"
        android:gravity="center_vertical|start"
        android:textAllCaps="true"
        android:textStyle="bold"
        android:textColor="#000000"
        android:textSize="15dp"
        android:text="Baggage Management Interface Device 
        (BMID) Testing 123"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">

        <TextView
            android:id="@+id/codeHeader"
            android:layout_marginLeft="10dp"
            android:layout_marginTop="5dp"
            android:gravity="center_vertical|start"
            android:textStyle="bold"
            android:textColor="#a8000000"
            android:text="Code:"
            android:textSize="13dp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

        <TextView
            android:id="@+id/acronym"
            android:layout_marginLeft="5dp"
            android:layout_marginTop="5dp"
            android:gravity="center_vertical|start"
            android:textStyle="italic"
            android:textColor="#a8000000"
            android:text="GST"
            android:textSize="13dp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

    </LinearLayout>

    <!--<LinearLayout-->
        <!--android:layout_width="wrap_content"-->
        <!--android:layout_height="wrap_content">-->

        <!--<TextView-->
            <!--android:id="@+id/ruleHeader"-->
            <!--android:layout_marginLeft="10dp"-->
            <!--android:layout_marginTop="5dp"-->
            <!--android:gravity="center_vertical|start"-->
            <!--android:textStyle="bold"-->
            <!--android:textColor="#a8000000"-->
            <!--android:text="Desc:"-->
            <!--android:textSize="13dp"-->
            <!--android:layout_width="wrap_content"-->
            <!--android:layout_height="wrap_content" />-->

        <!--<TextView-->
            <!--android:id="@+id/description"-->
            <!--android:layout_marginLeft="5dp"-->
            <!--android:layout_marginTop="5dp"-->
            <!--android:gravity="center_vertical|start"-->
            <!--android:textColor="#a8000000"-->
            <!--android:text="If none are set then 'GST' is 
            set to NULL"-->
            <!--android:textSize="13dp"-->
            <!--android:maxLines="2"-->
            <!--android:layout_width="wrap_content"-->
            <!--android:layout_height="wrap_content" />-->

    <!--</LinearLayout>-->

    <!--<LinearLayout-->
        <!--android:layout_width="wrap_content"-->
        <!--android:layout_height="wrap_content">-->

    <!--<TextView-->
        <!--android:id="@+id/relatedKeyword"-->
        <!--android:layout_marginLeft="10dp"-->
        <!--android:layout_marginTop="5dp"-->
        <!--android:gravity="center_vertical|start"-->
        <!--android:textColor="#a8000000"-->
        <!--android:text="Related Keyword:"-->
        <!--android:textSize="12sp"-->
        <!--android:textStyle="bold"-->
        <!--android:layout_width="wrap_content"-->
        <!--android:layout_height="wrap_content" />-->

        <!--<TextView-->
            <!--android:id="@+id/relatedKeyword1"-->
            <!--android:clickable="true"-->
            <!--android:layout_marginLeft="5dp"-->
            <!--android:layout_marginTop="5dp"-->
            <!--android:textColor="#a8000000"-->
            <!--android:text="Keyword 1,"-->
            <!--android:textSize="12sp"-->
            <!--android:layout_width="wrap_content"-->
            <!--android:layout_height="wrap_content"/>-->

        <!--<TextView-->
            <!--android:id="@+id/relatedKeyword2"-->
            <!--android:clickable="true"-->
            <!--android:layout_marginLeft="5dp"-->
            <!--android:layout_marginTop="5dp"-->
            <!--android:textColor="#a8000000"-->
            <!--android:text="Keyword 2,"-->
            <!--android:textSize="12sp"-->
            <!--android:layout_width="wrap_content"-->
            <!--android:layout_height="wrap_content"/>-->

        <!--<TextView-->
            <!--android:id="@+id/relatedKeyword3"-->
            <!--android:clickable="true"-->
            <!--android:layout_marginLeft="5dp"-->
            <!--android:layout_marginTop="5dp"-->
            <!--android:textColor="#a8000000"-->
            <!--android:text="Keyword 3"-->
            <!--android:textSize="12sp"-->
            <!--android:layout_width="wrap_content"-->
            <!--android:layout_height="wrap_content"/>-->

    <!--</LinearLayout>-->


    <TextView
        android:id="@+id/tv_rules_read_more"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="right"
        android:textStyle="bold"
        android:textSize="14sp"
        android:clickable="true"
        android:padding="5dp"
        android:textColor="@android:color/holo_blue_dark"
        android:text="@string/read_more"/>


</LinearLayout>
</LinearLayout>

main layout

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout
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"
xmlns:fab="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".KnowledgeActivity"
android:background="@drawable/bokeh10"
android:id="@+id/drawerLayout">

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
    <ImageView
        android:id="@+id/drawable_header"
        android:layout_width="match_parent"
        android:layout_height="70dp"
        android:src="@drawable/bg_login"/>

    <com.mancj.materialsearchbar.MaterialSearchBar
        android:id="@+id/search_bar"
        android:layout_alignParentTop="true"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:mt_speechMode="false"
        app:mt_hint="Search" />

<in.myinnos.alphabetsindexfastscrollrecycler.IndexFastScrollRecyclerView
        android:id="@+id/recycler_search"
        android:layout_below="@+id/search_bar"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:setIndexBarColor="#ffffff"
        app:setIndexBarTextColor="#000000"/>

</RelativeLayout>

<android.support.design.widget.NavigationView
    android:id="@+id/nvNavView"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    app:menu="@menu/navigation_menu"
    android:layout_gravity="start">
</android.support.design.widget.NavigationView>

Edit: For everyone asking why not match_parent

This is how it looked like! The index panel is covering some parts of the card view. You may say it's just a little bit, but I have more card views with longer title.

match parent

Solution

  • Someone posted a solution and I don't know why it got deleted! I followed his solution and my issue is magically solved when I did little changes to my codes!

    The OP's solution was to follow this gitHub (https://github.com/intuit/sdp/tree/master/sdp-android/src/main/res) and change the 351dp to 351sdp.

    So here are the steps I did to somewhat solve my concern.

    1. Create a new Value Resource File under the values folder
    2. Name the file as positive_sdp
    3. Follow exactly like what was written in the GitHub. The positive_sdp file should contain the relevant dimension you want your widget, drawable or anything to be. So in my positive_sdp xml file, I had these:
    <dimen name="_315sdp">315.00dp</dimen>
<dimen name="_80sdp">80.00dp</dimen>
<dimen name="_250sdp">250.00dp</dimen>
    1. I saved the file as usual.
    2. At first, I forgot to change my 351dp to 'dimen/_27sdp', but when I run my app on 4 different phones (2 emulators & 2 actual phones), I realised that the width of my cardview is right before the index panel like how I wanted it to be. However, before this, if I stick to 351dp and run my app on the same 4 emulators, the width of my cardview was everywhere!
    3. In conclusion, I believed my issue got solved by just creating the positive_sdp file.

    I hope everyone can benefit from this!