CODEWITHSUNDEEP
javaandroidxmlalert
theprasunranjan
theprasunranjan

Reputation: 105

How to create circle imageview with a transparent border?

I want to create an alert dialog same as shown in the image but I am stuck on how to create that center imageview with the transparent border.

enter image description here

Upvotes: 2

Views: 155

Answers (1)

Bö macht Blau
Bö macht Blau

Reputation: 13009

Your dialog has some Views which resemble a BottomAppBar and a FloatingActionButton. Of course it is possible to write a custom View which looks just like a BottomAppBar, but it's easier to use the original thing.

You can use the following layout for the dialog (I left out the button bar because I think you already know you can achieve this with e.g. a LinearLayout):

<com.google.android.material.bottomappbar.BottomAppBar
    android:id="@+id/bar"
    android:layout_width="match_parent"
    android:layout_height="96dp"
    android:layout_gravity="bottom"
    app:backgroundTint="#0000ff"
    app:fabAlignmentMode="center"
    app:fabCradleMargin="4dp"
    app:fabCradleRoundedCornerRadius="0dp"
    app:fabCradleVerticalOffset="4dp"/>

<TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:textColor="#ffffff"
    android:textSize="12sp"
    android:text="@string/lorem_string"
    android:lines="3"
    android:ellipsize="end"
    android:padding="16dp"
    android:layout_gravity="bottom"
    />

<com.google.android.material.floatingactionbutton.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_anchor="@id/bar"
    app:elevation="0dp"/>

screenshot of dialog

For more information on styling the BottomAppBar, see the developer documentation

Upvotes: 1

Related Questions