Question

I have an Android app which calculates poker odds (Shufflebot if you’re interested). It displays cards on the screen that need to be big enough to tap on. A card is rendered by a CardView class and declared in the layout like so:

<com.shufflebot.view.CardView style="@style/CardView"
    android:id="@+id/flop1"></com.shufflebot.view.CardView>

The corresponding “CardView” style is declared in a res/values/styles.xml.

<style name="CardView">
    <item name="android:layout_width">40dp</item>
    <item name="android:layout_height">56dp</item>
    <item name="android:layout_marginRight">1dp</item>
</style>

The CardView paints into whatever dimensions it is given. There is a lot of empty space when the app runs on a tablet so I’d like to make use of it by making the cards bigger and therefore easier to tap on.

Is it possible to define an alternative styles.xml to do this? e.g. could I define a res/values-xlarge/styles.xml (for pre Android 3.2) and a res/values-sw800dp/styles.xml where I can define an alternative version of my style? Better yet, can this file just contain the one modified style while Android goes to the original styles.xml for the other values?

When I attempt this in Eclipse I see red underlines suggesting to me that this is not supported.

The alternative is that I can define multiple versions of cards.xml, e.g. layout-xlarge/cards.xml but this seems like a lot of maintenance overhead given that the rest of the layout is the same and it’s just the size of one element that needs to change.

So what is the best way of scaling one but not all elements like this?

Answer 1

I found the answer myself almost as an afterthought while looking at something else. I isolated the element which has the different style according to different screensizes, i.e. I create a card.xml in each different layout that it applies to:

<?xml version="1.0" encoding="utf-8"?>
<com.shufflebot.view.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    style="@style/CardViewLarge" >
</com.shufflebot.view.CardView>

and

<?xml version="1.0" encoding="utf-8"?>
<com.shufflebot.view.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    style="@style/CardView" >
</com.shufflebot.view.CardView>

Then I replace instances of in my layouts with statements:

<include android:id="@+id/river" layout="@layout/card" />

This obviously wouldn’t work if the cards had attributes other than the id which were different but that isn’t the case for me. And it means that the same handful of layouts can serve different screen sizes.