3

I have seen a different post related to this topic already before posting this question so I can definitely say that this question is not a duplicate. I have a different problem which I couldn't fix or find a solution to it.

Problem: I have created a Vertical Seekbar using new <SeekBar> </SeekBar> view. It does look fine when I see the preview in Android Studio but on the device, the SeekBar doesn't fill the height of the screen. I have rotated the SeekBar view with 90deg and try to set the height:match_parent and width:wrap_content but it isn't working at all as I expected. So I set the height to some hard-coded value and it looked fine. The only problem is, I will have to check the height of the view in which it is getting populated and set the height of the SeekBar problematically, which I want to avoid.

slider.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/slider"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/roundcorner"
    android:backgroundTint="@color/design_default_color_primary"
    android:gravity="center"
    android:layout_gravity="center"
    android:elevation="5dp"
    android:orientation="vertical">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textAlignment="center"
        android:textColor="#fff"
        android:text="@string/RangeValue"
        android:paddingTop="16dp"
        android:paddingBottom="16dp"/>
    <FrameLayout
        android:layout_weight="1"
        android:background="#fff"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <SeekBar
            android:id="@+id/seeker"
            android:layout_width="wrap_content" <!-- Set this to 400dp and it looks fine -->
            android:layout_height="match_parent"
            android:rotation="270"
            android:layout_gravity="center"/>
    </FrameLayout>

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_round_done_24px"
        android:layout_gravity="center"
        android:padding="16dp"  />

</LinearLayout>

enter image description here

Update

Thank you Reaz for your answer

enter image description here

content_main.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#fff"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context=".MainActivity"
    tools:showIn="@layout/app_bar_main">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
        <RelativeLayout
            android:layout_weight="1"
            android:layout_width="match_parent"
            android:layout_height="match_parent">
            <include
                layout="@layout/maingrid"
                android:background="@color/colorAccent"
                android:layout_centerInParent="true"
                android:layout_width="match_parent"
                android:layout_height="match_parent"/>
            <LinearLayout
                android:background="@android:color/transparent"
                android:layout_centerInParent="true"
                android:id="@+id/radarCanvas"
                android:layout_width="300dp"
                android:layout_height="300dp"
                android:orientation="vertical">
            </LinearLayout>
            <include
                android:layout_alignParentBottom="true"
                layout="@layout/biosignals"
                android:layout_width="match_parent"
                android:layout_height="wrap_content" /> 

             <!--- this is where i am including slider layout -->
             <include
                android:layout_alignParentRight="true"
                layout="@layout/slider"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:layout_margin="24dp" /> 

        </RelativeLayout>
    </LinearLayout>
</android.support.constraint.ConstraintLayout>
Reaz Murshed
  • 23,691
  • 13
  • 78
  • 98
B L Λ C K
  • 600
  • 1
  • 8
  • 24

3 Answers3

0

You are setting weight inside the Framelayout when the orientation is vertical and at the same time the height of FrameLayout is set to match_parent. If you are setting like this there will be no effect of the weight. Try setting the height to 0dp it will work for sure.

<FrameLayout
    android:layout_weight="1"
    android:background="#fff"
    android:layout_width="match_parent"
    android:layout_height="0dp">

    <SeekBar
        android:id="@+id/seeker"
        android:layout_width="wrap_content" // set this to 400dp and it looks fine
        android:layout_height="match_parent"
        android:rotation="270"
        android:layout_gravity="center"/>

</FrameLayout>

enter image description here

This is my result

Reaz Murshed
  • 23,691
  • 13
  • 78
  • 98
Abraham Mathew
  • 2,029
  • 3
  • 21
  • 42
0

You need to get rid of your FrameLayout which is limiting the width of the SeekBar. I tried to implement the layout like the following and I think it should fit in your case as well.

Another important thing you should notice that, because of your rotation, the width and height are interchanged in the view for your SeekBar. Hence I made the layout_width="match_parent". Hope that helps! 

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/slider"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_gravity="center"
    android:elevation="5dp">

    <TextView
        android:id="@+id/text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="30dp"
        android:padding="16dp"
        android:text="100"
        android:textAlignment="center" />

    <SeekBar
        android:id="@+id/seeker"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:layout_gravity="center"
        android:rotation="270" />

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="20dp"
        android:padding="16dp"
        android:src="@android:drawable/star_on" />

</RelativeLayout>

Here is the result that I have got.

enter image description here

Reaz Murshed
  • 23,691
  • 13
  • 78
  • 98
  • so even though we change the rotation the seekbar's height will not change unless we change the width. Is that correct? – Abraham Mathew Feb 19 '19 at 05:31
  • You are rotating it 270 deg which translates the height and width in that angle as well. Hence to cover the vertical region, you need to modify the width. Let me know if that solves your problem. :) – Reaz Murshed Feb 19 '19 at 05:39
  • @ReazMurshed Thanks :) Your solution works but I was encountering few problems and I trying to fix em before coming back to you. I couldn't fix them so I am ask your help again. - (1) Right now this slider is taking fullscreen instead of sitting on right nicely (2) My icon and text are coming on top of the slider, I don't know how you managed to do it. I am gonna update my post. Please check. – B L Λ C K Feb 20 '19 at 05:59
  • Sure thing. Will check as soon as I can. – Reaz Murshed Feb 20 '19 at 06:01
  • I am getting the result that I have shown in the image where slider is small with your updated layout. With relative layout, atleast I was getting the full height of the slider but lenearlayout gives me my previous result as shown in my first image. – B L Λ C K Feb 20 '19 at 06:55
  • I see. Let me try with the `RelativeLayout` then. – Reaz Murshed Feb 20 '19 at 06:56
  • I tried to add a top and bottom margin to the `TextView` and the `ImageView`. Please check the updated code. – Reaz Murshed Feb 20 '19 at 07:08
  • So the problem is with relative layout it is taking the whole screen horizontally. You can check by setting the background color to some color instead of no color which basically sits on top of other layout and make it non clickable. I am including slider.xml inside content_main.xml inside a Relativelayout, please check in the post, which basically host three layouts gridview,canvas (linearlayout) and slider.xml. I amusing Relative layout in content_main.xml becuase I want the canvas and gridview to sit on top of each other whereas slider should sit right side instead of taking whole screen. – B L Λ C K Feb 20 '19 at 07:37
0
<RelativeLayout
    android:layout_width="400dp"
    android:layout_height="200dp"
    android:layout_gravity="center">
    <SeekBar
        android:layout_width="400dp"
        android:layout_height="match_parent"
        android:layout_gravity="center"
        android:maxHeight="4dp"
        android:minHeight="4dp"
        android:progress="50"
        android:progressDrawable="@drawable/custom_seek_bar"
        android:rotation="270"
        android:thumb="@drawable/seekbar_thumb" />
</RelativeLayout>
Use this code, you will get desired result
Mãñîsh Kûmãr
  • 1