How to make a sidebar with a flexible behavior over different screen sizes?

[Muhammed Refaat]

I'm using a sidebar into my android app, this app required to run on from 7' to 10' android tablets, the problem is the side bar gives me different behaviors with the different sizes, look at the following pics:

with 7':



with 10':



and that happens with either fixing the sidebar size, making it in a specific range, or giving it the freedom to fit.

and that's my XML code that i wrote to integrate the sidebar:

                         <LinearLayout
                            android:id="@+id/bottom_of_center"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_gravity="center"
                            android:layout_marginLeft="30dp"
                            android:layout_marginRight="30dp"
                            android:layout_weight="3"
                            android:orientation="vertical" >

                            <TextView
                                android:layout_width="fill_parent"
                                android:layout_height="0dp"
                                android:text="Dimming Control"
                                android:layout_weight="1"
                                android:textColor="@android:color/white"
                                android:layout_gravity="left"
                                android:layout_marginLeft="20dp" />

                            <LinearLayout  
                                android:orientation="vertical"
                                android:layout_width="400dp"
                                android:layout_height="0dp"
                                android:layout_weight="2"
                                android:layout_gravity="left"
                                android:layout_marginBottom="2dp"
                                android:layout_marginLeft="20dp"
                                android:paddingLeft="1dp"
                                android:paddingRight="1dp"
                                android:paddingTop="2dp"
                                android:paddingBottom="2dp"
                                android:gravity="center"
                                android:background="@drawable/light_dimmingbg">


                            <SeekBar
                                android:id="@+id/seekbar"
                                android:layout_width="fill_parent"
                                android:layout_height="0dp"
                                android:layout_gravity="left"
                                android:layout_weight="2"
                                android:layout_marginBottom="2dp"
                                android:layout_marginRight="20dp"
                                android:layout_marginTop="2dp"
                                android:layout_marginLeft="20dp"
                                android:max="100"
                                android:minHeight="10dp"
                                android:maxHeight="13dp"
                                android:minWidth="120dp"
                                android:progress="20"
                                android:thumb="@drawable/light_sliderhandle"
                                />
                            </LinearLayout>
                        </LinearLayout>

[Steve Luke]

I'm not seeing it. Did you replace the seekbar/progress bar images in your theme with 9 patches that may not have been made correctly?

[Muhammed Refaat]

Steve Luke wrote:I'm not seeing it. Did you replace the seekbar/progress bar images in your theme with 9 patches that may not have been made correctly?

No, i didn't do that, i have used only the default sidebar progress bar, but changed the thumb. And i'm also using an Android built-in theme called (NoTitleBar)

[Steve Luke]

Still not seeing it. Can you post light_dimmingbg and light_sliderhandle images - in xxhdpi if you have it. What version of Android are you putting it on? Are you running it on an emulator and seeing the problem, or only in the layout builder?

Can you also post the entire layout - cleaning out any of the non-needed bits, so I can just copy what you have and put it in my system to see how it works (without having to guess about what layout is containing the outermost LinearLayout)?

[Muhammed Refaat]

Steve Luke wrote:Still not seeing it. Can you post light_dimmingbg and light_sliderhandle images - in xxhdpi if you have it. What version of Android are you putting it on? Are you running it on an emulator and seeing the problem, or only in the layout builder?

Can you also post the entire layout - cleaning out any of the non-needed bits, so I can just copy what you have and put it in my system to see how it works (without having to guess about what layout is containing the outermost LinearLayout)?

light_dimmingbg:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners android:radius="90dp" />
    
    <gradient 
       android:startColor="#313030"
       android:centerColor="#2B2B2B"
       android:endColor="#161616"
       android:angle="270" />

</shape>

light_sliderhandle:



and running on API 14 as min sdk, and the target sdk is API 18

And this problem is in the layout builder as i use it to view my work on different sizes.
thanks.

[Steve Luke]

I have not been able to reproduce the problem. do you have scaled versions of the thumbnail image for different screen densities? If so, what sizes do you have and what are the dimensions of the button.

The closest I was able to come to reproducing the problem was if I had an image that was much too large in some densities, and much too low in others. For example, if you take the image you provided and assume it is XXHDPI (as I had asked for) then the image is a bit small, and is smaller than 13dp on XXHDPI (on XXHDPI, 13dp is 39 pixels, the image is 29 pixels). This sort of looked like the image you have for the 10 inch display, but not quite as extreme.

I wasn't able to reproduce the display issue you have on the 7 inch display.

I assume, now, that the problem isn't with the part of the layout you sent, but rather the rest of the layout stealing or giving room, and the seekbar fills or contracts with the excess space. For example, if I put layouts above and below the group you posted and then made the layouts larger and smaller, then I could mirror the problem you have exactly. You should use a defined size (in dp) for this component [edit: rather than using layout_weight] so the component's 9patch doesn't expand or contract with space [edit: but maintains a consistent physical size]. This may mean you need to adjust the rest of the layout to fit.