Jorge Jorge - 5 months ago 16
Android Question

ImageButton over another image

Well, I recently see whatsapp and tinder application. The "change profile picture" option is the same besides the button over. How we can do this? Is there any lib? or shape to do this ?

enter image description here

Answer

Use this code :

<FrameLayout
    android:gravity="center"
    android:layout_centerInParent="true"
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"
    android:paddingBottom="24.0dip"
    android:paddingLeft="0.5dip"
    android:paddingRight="0.5dip"
    android:paddingTop="35.0dip"
    android:background="#ff26a69a"
    xmlns:android="http://schemas.android.com/apk/res/android">


    <de.hdodenhof.circleimageview.CircleImageView
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/profile_image"
        android:layout_width="178.0dip"
        android:layout_height="178.0dip"
        android:src="@drawable/ic_settings_profile"
        app:civ_border_width="2dp"
        app:civ_border_color="#FF000000"/>


    <ProgressBar
        style="?android:attr/progressBarStyleInverse"
        android:id="@+id/change_photo_progress"
        android:layout_gravity="center"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:visibility="gone" />

    <ImageButton
        style="@style/ActionBarButtonStyle"
        android:background="@drawable/input_circle"
        android:elevation="2.0dip"
        android:id="@+id/change_photo_btn"
        android:layout_gravity="bottom|center|right"
        android:layout_height="52.0dip"
        android:layout_marginBottom="2.0dip"
        android:layout_width="52.0dip"
        android:src="@drawable/ic_cam_white" />
</FrameLayout>

in drawable folder

input_circle.xml

<?xml version="1.0" encoding="utf-8"?>
<selector
  xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" android:drawable="@drawable/input_circle_pressed" />
    <item android:state_focused="true" android:state_enabled="true" android:drawable="@drawable/input_circle_pressed" />
    <item android:drawable="@drawable/input_circle_normal" />
</selector>

Output :

enter image description here