How do I add a functional edit icon for a profile picture in Android Studio?-CodePudding

So I have a fragment that gives the layout for a profile edit section and I have an image that represent the profile picture of a particular user and I want to efficiently add an edit icon on bottom right corner of the picture for user to select, which allows them to change a new picture.

And I want some help in doing so.

fragment_profile_setting.xml :

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".ProfileSettingFragment">

<de.hdodenhof.circleimageview.CircleImageView
    android:id="@ id/profile_picture_edit"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_centerInParent="true"
    android:src="@drawable/profilepic"
    app:civ_border_color="@color/greyblack"
    app:civ_border_width="4dp"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toEndOf="parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>

As for the java code it contains only the methods that inflates the fragment.

ProfileSettingFragment.java :

package com.teamrocket.blooddonationcommunity;

import android.os.Bundle;

import androidx.fragment.app.Fragment;

import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class ProfileSettingFragment extends Fragment {

    public ProfileSettingFragment() {
    }

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                         Bundle savedInstanceState) {
        return inflater.inflate(R.layout.fragment_profile_setting, container, false);
    }
}

Do flag this if duplicated and drop a link.

CodePudding user response：

You can basically add another ImageView. Add a click listener to that ImageView. So, users will be able to edit profile picture or add new one.

You can update the layout file as below:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".ProfileSettingFragment" >

    <com.google.android.material.imageview.ShapeableImageView
        android:id="@ id/profile_picture"
        android:layout_width="150dp"
        android:layout_height="150dp"
        android:layout_margin="10dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:shapeAppearanceOverlay="@style/ImageView.Circle"
        app:srcCompat="@drawable/profile_picture" />

    <ImageView
        android:id="@ id/edit_profile_picture_button"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_marginEnd="4dp"
        android:layout_marginBottom="4dp"
        android:background="@drawable/bg_circle"
        android:padding="8dp"
        android:src="@drawable/ic_edit_24"
        app:layout_constraintBottom_toBottomOf="@id/profile_picture"
        app:layout_constraintEnd_toEndOf="@id/profile_picture"
        app:tint="@color/white" />

</androidx.constraintlayout.widget.ConstraintLayout>

With ShapeableImageView, you can basically build circle image view without any third party also. And you can add below style to your styles.xml. Thus, your ShapeableImageView will be as circle.

<style name="ImageView.Circle" parent="">
    <item name="cornerSize">50%</item>
</style>

I also added bg_circle drawable to make edit_profile_picture_button circle. Because ShapeableImageView doesn't support padding, if you would like to add padding into that edit_profile_picture_button for better UI. Here is the simple code of that drawable file.

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid android:color="@android:color/holo_red_dark" />
</shape>

With ViewBinding or DataBinding, you can interact with your views easier. I am giving an example with ViewBinding, and you can find more info about them in here:

ViewBinding: https://developer.android.com/topic/libraries/view-binding

DataBinding: https://developer.android.com/topic/libraries/data-binding

Basically add this to your app(module) level gradle as shown in the developer website.

android {
    ...
    buildFeatures {
        viewBinding true
    }
}

And update your ProfileSettingFragment:

public class ProfileSettingFragment extends Fragment {

    private FragmentProfileSettingBinding binding;

    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        binding = FragmentProfileSettingBinding.inflate(inflater);
        return binding.getRoot();
    }

    @Override
    public void onViewCreated(@NonNull View view, @Nullable Bundle savedInstanceState) {
        super.onViewCreated(view, savedInstanceState);
        binding.editProfilePictureButton.setOnClickListener(editProfilePictureButton -> {
            // Update the profile picture or add new one
        });
    }
}