Not consistent with different resolutions ldpi/mdpi/ldpi

[GoogleCodeExporter]

I am using android-weel to use it for a km picker for a car application.

We created something to reproduce the android's IME functionality.
When you press on a button a Layout with the android-wheels appears with an 
animation.

The layout is the following:

<LinearLayout android:id="@+id/kilometer_wheel"
        android:layout_marginTop="24dp"
        android:layout_gravity="center_horizontal"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:paddingTop="15dp"
        android:paddingBottom="15dp"
        android:paddingLeft="5dp"
        android:gravity="left|center_vertical"
        android:background="@drawable/layout_bg">

        <kankan.wheel.widget.WheelView android:id="@+id/km_1"
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"/>
        <kankan.wheel.widget.WheelView android:id="@+id/km_2"
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"/>
        <kankan.wheel.widget.WheelView android:id="@+id/km_3"
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"/>
        <kankan.wheel.widget.WheelView android:id="@+id/km_4"
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"/>
        <kankan.wheel.widget.WheelView android:id="@+id/km_5"
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"/>
        <kankan.wheel.widget.WheelView android:id="@+id/km_6"
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:paddingRight="15dp"/>

        <ImageButton android:id="@+id/km_picker_ok_button" 
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/ok_button"
            android:layout_marginLeft="15dp"/>
    </LinearLayout>

When I run the app in different devices the size is not consistent.

Let me attach some screenshots:

 * 240 x 320 pixels, 2.8 inches (ldpi)
 * 320 x 480 pixels, 3.1 inches (mdpi)
 * 480 x 800 pixels, 3.7 inches (hdpi)

I saw that inside WheelView there are a lot of variables of type int. For 
example: TEXT_SIZE.
I guess this size should depend on the density of the device. I tried to modify 
the code using the following method:

    private int dpToPx(float dp) {
        Log.d("Wheel", "dpToPx with "+dp+ " returning " +  (int) (dp * scale + 0.5f));
        return (int) (dp * scale + 0.5f);
    }

The src: http://pastebin.com/kvUgiErm

Unfortunately this doesn't work.
Any ideas?

Original issue reported on code.google.com by maca...@gmail.com on 26 Dec 2010 at 3:23

Attachments:

• ldpi.png
• mdpi.png
• hdpi.png

[GoogleCodeExporter]

Please wait until the #10 issue (custom view for wheel items) will implemented.
You will have an ability to set the text size for wheel.
Also it will be possible to set the width for each wheel.
So you can set necessary wheel width (depending on wheel amount and the OK 
button size) and calculate text size.

Original comment by yuri.kan...@gmail.com on 16 Jan 2011 at 8:18

[GoogleCodeExporter]

The only problem I see with limiting the text size to a custom view is not 
being able to have that flexibility to change the size in the widget. I am 
working on a project where I am trying to build one app that can work on both a 
phone, and tablet. They have separate layouts, but since they share the same 
id's, using a custom view limits me to adjusting the size for the phone, while 
the tablet one is not really scaled right. This would also be the case with 
font styles as well. This might fix the above persons issue as well.

Original comment by llcod...@gmail.com on 8 Jun 2011 at 1:44

[GoogleCodeExporter]

The solution is to use different layouts for custom views depending on display 
parameters, or different styles.
A one more solution is to implement custom adapter that calculates text size 
according to display resolution and density.

Original comment by yuri.kan...@gmail.com on 8 Jun 2011 at 7:00

[GoogleCodeExporter]

I am already using custom adapters right now, but I will have to look into 
adjusting based on density or display res.

Are those attributes factored in to the current adapter?

Original comment by llcod...@gmail.com on 8 Jun 2011 at 7:05

[GoogleCodeExporter]

No, there are used simple adapters just to demonstrate the wheel functionality.

Original comment by yuri.kan...@gmail.com on 8 Jun 2011 at 7:16

[Pleyades12]

The issue you're experiencing with inconsistent sizes across different devices is common when dealing with various screen densities and resolutions. Here are some steps you can take to address this:

1. Use sp for Text Sizes: Instead of hardcoding text sizes in WheelView, ensure that text sizes are specified in scalable pixels (sp), which scale with the user's preferred text size and the screen density.

2. Convert Dimensions Dynamically: Modify the WheelView class to convert pixel values to density-independent pixels (dp) or scalable pixels (sp) based on the screen density.

3. Custom Adapters and Layouts: Implement custom adapters that can adjust their dimensions based on the display density and resolution.

Here's an example of how you can modify the WheelView to adjust text size dynamically:

Step 1: Modify WheelView

1. Add a method to convert dp to px:

   private int dpToPx(float dp) {
       float scale = getContext().getResources().getDisplayMetrics().density;
       return (int) (dp * scale + 0.5f);
   }

2. Set text size using sp:

   private int spToPx(float sp) {
       float scale = getContext().getResources().getDisplayMetrics().scaledDensity;
       return (int) (sp * scale + 0.5f);
   }
   
   private void setTextSize(TextView textView, float sizeSp) {
       textView.setTextSize(TypedValue.COMPLEX_UNIT_SP, sizeSp);
   }

Step 2: Update Layouts for Different Densities

Create separate layout files for different screen densities. For example, you can create different res/layout, res/layout-mdpi, res/layout-hdpi, etc., and adjust the dimensions accordingly.

Step 3: Custom Adapters

Modify your custom adapter to adjust item sizes based on the screen density:

public class CustomWheelAdapter extends BaseAdapter {
    private Context context;

    public CustomWheelAdapter(Context context) {
        this.context = context;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        TextView textView = (TextView) convertView;
        if (textView == null) {
            textView = new TextView(context);
        }

        // Set text size based on density
        int textSize = spToPx(16); // example text size in sp
        textView.setTextSize(TypedValue.COMPLEX_UNIT_PX, textSize);

        // Set other properties of the text view
        // ...

        return textView;
    }

    private int spToPx(float sp) {
        float scale = context.getResources().getDisplayMetrics().scaledDensity;
        return (int) (sp * scale + 0.5f);
    }

    // Other adapter methods
    // ...
}

Step 4: Use Custom Views for Wheels

Ensure you use custom views that can handle dynamic sizing:

<kankan.wheel.widget.WheelView
    android:id="@+id/km_1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textSize="@dimen/wheel_text_size" />

Define wheel_text_size in res/values/dimens.xml:

<dimen name="wheel_text_size">16sp</dimen>