Android imageview align center of a circular progress bar

Question

I have fixed the marginTop, so that that image can be displayed inside the circular progress bar. But when I use a phone with larger monitor, the the image is not placed inside the circular bar anymore, and it overlaps the progress bar. I know it is probably cause of the marginTop, but how to place the image inside the progress bar and let it be the center of the progress bar?

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:tools="http://schemas.android.com/tools"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:paddingBottom="@dimen/activity_vertical_margin"
  android:paddingLeft="@dimen/activity_horizontal_margin"
  android:paddingRight="@dimen/activity_horizontal_margin"
  android:paddingTop="@dimen/activity_vertical_margin"
  android:layout_centerInParent="true"
  tools:context="com.example.mygames.MainActivity$PlaceholderFragment">

<ProgressBar

    android:id="@+id/circularProgressbar"
    style="?android:attr/progressBarStyleHorizontal"
    android:layout_width="350dp"
    android:layout_height="750dp"
    android:indeterminate="false"
    android:max="100"
    android:progress="50"
    android:progressDrawable="@drawable/circular"
    android:secondaryProgress="100"
    android:layout_marginBottom="110dp"
    android:layout_alignParentBottom="true"
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="true" />

<ImageView
    android:layout_width="150dp"
    android:layout_height="150dp"
    android:background="@drawable/whitecircle"
    android:id="@+id/imageView3"
    android:layout_alignTop="@+id/tv"
    android:layout_centerHorizontal="true"
    android:layout_marginTop="50dp" />

<TextView
    android:id="@+id/tv"
    android:layout_width="250dp"
    android:layout_height="250dp"
    android:gravity="center"
    android:text="25%"
    android:textColor="#ffffff"
    android:textSize="35sp"
    android:textStyle="bold"
    android:layout_marginBottom="57dp"
    android:layout_alignBottom="@+id/circularProgressbar"
    android:layout_centerHorizontal="true" />

<TextView
    android:id="@+id/textView2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentTop="true"
    android:layout_centerHorizontal="true"
    android:layout_marginTop="16dp"
    android:textSize="20sp"
    android:text="Progress" />


</RelativeLayout>

My dimen.xml:

<resources>
 <!-- Default screen margins, per the Android Design guidelines. -->
 <dimen name="activity_horizontal_margin">16dp</dimen>
 <dimen name="activity_vertical_margin">16dp</dimen>
 <dimen name="fab_margin">16dp</dimen>
 <dimen name="appbar_padding_top">8dp</dimen>
</resources>

use different values for different screen sizes http://stackoverflow.com/questions/32860815/how-to-define-dimens-xml-for-every-different-screen-size-in-android , http://stackoverflow.com/questions/21280277/different-values-folders-in-android you can use different dimensions for margin top — Charuක, Mar 11 '17 at 13:23
put your `ProgressBar` and `ImageView` in a separate `Relativelayout` — shadygoneinsane, Mar 11 '17 at 13:29
@androidnewbie No need to create multiple layouts you can have multiple margin top sizes depending on the screen size, go through the links given and try it. — Charuක, Mar 11 '17 at 13:32
I have read the links you posted above, but how can I edit the `dimen.xml`? — androidnewbie, Mar 11 '17 at 13:33
Your links showed the values, but didn't teach how to edit. thanks — androidnewbie, Mar 11 '17 at 13:36
I have totally three values files, so which one should I edit? — androidnewbie, Mar 11 '17 at 13:48
@androidnewbie check the answer use a same name for margin Top with different values in particular dimen.xml and thats it — Charuක, Mar 11 '17 at 13:57

score 1 · Answer 1 · answered Jul 13 '18 at 11:03

1

The desired behaviour can be achieved by creating a custom UI component and setting the dimensions dynamically at run time. For reference, you can have a look at following library. https://github.com/erharishsh/progressbar-with-image

answered Jul 13 '18 at 11:03

Harish Sharma

360
1
2
7

score 0 · Answer 2 · answered Mar 11 '17 at 18:42

0

Go to this library. You can replace image on the floating button.

https://github.com/JorgeCastilloPrz/FABProgressCircle.git

Nicely done by JorgeCastilloPrz.

Hope this helps.

answered Mar 11 '17 at 18:42

Karan

83
7

Android imageview align center of a circular progress bar

2 Answers2