CODEWITHSUNDEEP
android
naesmanak
naesmanak

Reputation: 183

icon image within circle background android UI

I am trying to insert an icon within a circular background image, but I'm having an issue with image sizing. The icon is currently larger than the circle, and I can't seem to resize it without also resizing the circle background. Here is my XML:

<android.support.v7.widget.LinearLayoutCompat xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center">

<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:background="@drawable/circle_dark_grey"
    android:src="@drawable/calendar_icon" />

</android.support.v7.widget.LinearLayoutCompat>

I'm pretty new to android UI, so if there is a better way to do this, or if you know how to solve my issue please let me know!

Cheers

Upvotes: 1

Views: 2247

Answers (1)

Harkal
Harkal

Reputation: 1828

you can go by the following two approaches :

1 set padding for the imageview

<ImageView
    android:padding="10dp"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:background="@drawable/circle_dark_grey"
    android:src="@drawable/calendar_icon" />

or

2 you can use framelayout like this

<FrameLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">

    <View
        android:layout_gravity="center"
        android:background="@drawable/circle_dark_grey"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

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

</FrameLayout>

Upvotes: 3

Related Questions