CODEWITHSUNDEEP
android
androidnewbie
androidnewbie

Reputation: 374

Android imageview align center of a circular progress bar

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>

Upvotes: 0

Views: 1927

Answers (2)

Harish Sharma
Harish Sharma

Reputation: 370

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

enter image description here

Upvotes: 1

Karan
Karan

Reputation: 83

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.

Upvotes: 0

Related Questions