Android seekbars cut off/clipped on rotation in FrameLayout

Question

So I'm trying to make a poor-man's interactive radar plot or spider chart, and I couldn't find one. I did find this: Android Layout views rotated and spaced around a circle? and thought of rotating seekbars in it and it kinda works, but the seekbars themselves get clipped/cut-off by some boundary and I don't know what it is. I tried a few things with padding, but they didn't help.

The MainActivity code looks like this:

protected void onCreate(Bundle savedInstanceState)
{
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    Context context = getApplicationContext();

    final FrameLayout main = (FrameLayout)findViewById(R.id.main);

    int numViews = 6;
    for(int i = 0; i < numViews; i++)
    {
        // Create some quick TextViews that can be placed.
        TextView v = new TextView(this);
        SeekBar sb = new SeekBar(this);

        // Set a text and center it in each view.
        v.setText("View " + i);

        v.setGravity(Gravity.CENTER);
        v.setBackgroundColor(0xff00ffff);
        // Force the views to a nice size (150x100 px) that fits my display.
        // This should of course be done in a display size independent way.
        FrameLayout.LayoutParams lp = new FrameLayout.LayoutParams(400, 75);
        FrameLayout.LayoutParams lpv = new FrameLayout.LayoutParams(300, 75);

        // Place all views in the center of the layout. We'll transform them
        // away from there in the code below.
        lp.gravity = Gravity.CENTER;
        lpv.gravity = Gravity.CENTER;

        lp.bottomMargin = 150;
        lpv.bottomMargin = 150;

        // Set layout params on view.
        v.setLayoutParams(lpv);
        sb.setLayoutParams(lp);

        // Calculate the angle of the current view. Adjust by 90 degrees to
        // get View 0 at the top. We need the angle in degrees and radians.
        float angleDeg = i * 360.0f / numViews - 90.0f;
        float angleRad = (float)(angleDeg * Math.PI / 180.0f);
        // Calculate the position of the view, offset from center (300 px from
        // center). Again, this should be done in a display size independent way.
        v.setTranslationX(500 * (float)Math.cos(angleRad));
        v.setTranslationY(500 * (float)Math.sin(angleRad));

        sb.setTranslationX(250 * (float)Math.cos(angleRad));
        sb.setTranslationY(250 * (float)Math.sin(angleRad));
        // Set the rotation of the view.
        v.setRotation(angleDeg +90f);

        sb.setRotation(angleDeg );
        main.addView(sb);
        main.addView(v);
    }
}

and activity_main.xml code is:

<?xml version="1.0" encoding="utf-8"?>

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/main"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity" >

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Settings"
android:layout_marginBottom="150px"/>
</FrameLayout>

Any seekbar that is horizontal(if there were 8) or vertical looks fine, but those that are diagonal are not displaying correctly. The result is this:

So View 1 and 2 barely show the bar, though the thumbs all move correctly. View 4 and 5 don't show it at all. What should I change to make them fully visible? Thank you very much!

Edit: adding screenshots of numViews= 8 and 15

It's strange that there's only some of the diagonals visible on the right side, nothing on the left. Could there be some sort of padding "box" that needs to be rotated too?

Answer 1

Its problem of android devices different screen resolution and densities. so please read this "Supporting Multiple Screens" read this site: https://developer.android.com/guide/practices/screens_support.html

Answer 2

I recently ran into this problem as well. But I was building my UI with the layout editor in Android Studio, and was wondering why the rotated seekbars looked fine in the preview. So I tried adding a software layerType and that seemed to work!

android:layerType="software"

Or in your case:

sb.setLayerType(View.LAYER_TYPE_SOFTWARE, null);

Hope this helps.

Screenshot

Answer 3

I ran your code on 2 emulators & it looks fine -

What Android version are you running on?

Answer 4

You also need to support different screens in manifast xml file Open "AndroidManifest" and add the following after android versionName.

<supports-screens android:smallScreens="true"

                android:normalScreens="true"

                android:largeScreens="true"

                android:xlargeScreens="true"

                android:anyDensity="true"

                android:resizeable="true"/>