Android : Rounded-edges view grow within another rounded-edges view

Question

I am trying to make two rounded edges views, A and B, in Android. Both views have the same corner radius but B is within A or B should look like within A.

B's width is dynamic according to the percentage below. When the percentage is more than 5%, this works perfectly fine. However, as the percentage is less than 5%, it will turn out like the failure-figure below. They look like completely independence views, though they actually are. I need the green part grows within the gray area only. How can this be accomplished?

Ideally, it should look like

But I failed to make it. :/ The figure I got A is the gray view and B is green

Here is what I did, define a drawable as given below

<RelativeLayout
    android:id="@+id/percentageBarViewGroup"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

  <View
    android:id="@+id/a_Bar"
    android:layout_width="match_parent"
    android:layout_height="20dp"
    android:background="@drawable/progress_bar_empty_background"/>

  <View
    android:id="@+id/b_Bar"
    android:layout_width="0dp"
    android:layout_height="20dp"
    android:background="@drawable/progress_bar_progressing_background"/>

</RelativeLayout>

[Solution of the question above](http://stackoverflow.com/a/26201117/7035842) This works the best for me. Thank you! @K.Sopheak — shumin, Oct 19 '16 at 09:55

Omid Heshmatinia · Answer 1 · 2016-10-19T06:05:52.333

0

You should use nested views and padding .

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent" android:layout_height="match_parent">

    <FrameLayout
    android:id="@+id/a_Bar"
    android:layout_width="match_parent"
    android:layout_height="20dp"
    android:background="@drawable/progress_bar_empty_background">
    <View
        android:id="@+id/b_Bar"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:background="@drawable/progress_bar_progressing_background"/>
    </FrameLayout>
</RelativeLayout>

At the end add stroke to your progress_bar_progressing_backgroundwith the same color as progress_bar_empty_background.

something like this :

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
   <corners android:radius="3dp"/>
   <stroke android:width="2dp" android:color="#222"/>
   <solid android:color="#fff"/>
</shape>

edited Oct 19 '16 at 06:05

answered Oct 19 '16 at 04:45

Omid Heshmatinia

5,089
2
35
50

It doesn't work. Some part of B will be cut off due to its size is decreased by the padding. – shumin Oct 19 '16 at 05:42
i edited my answer and removed padding. You will reach your aim with stroke. @shumin – Omid Heshmatinia Oct 19 '16 at 06:06
Thanks! I will try it later. :] – shumin Oct 19 '16 at 06:47
[Solution](http://stackoverflow.com/a/26201117/7035842) This works better for me. Thank you @Smartiz anyway! :]]] – shumin Oct 19 '16 at 09:59

Android : Rounded-edges view grow within another rounded-edges view

1 Answers1