Android choosing Image from Camera -Gossip Buzzer

Taking pictures from camera or display is a fundamental component for some applications those remembers media for their applications. A basic notes application may require a profile picture to make the notes more close to home. Getting a thumbnail picture from camera is simple, however now and then you need the full goal picture without putting away it in exhibition, crop it and dodge the conceivable memory special cases.

In this instructional exercise we will master constructing a basic social profile UI, pick the profile picture from camera or exhibition with yield and picture change highlights.

DEMO

1. uCrop – trimming library

For trimming usefulness, we are going to utilize uCrop library. This library is utilized numerous mainstream applications and tried on different gadgets/OS variants. Despite the fact that the library gives best editing experience, it won’t give a choice to pick the information picture from camera or exhibition. Everything necessary is a bitmap and gives back the edited bitmap.

In this article we utilize the equivalent editing library yet on head of it, we’ll manufacture a component to pick the picture from camera or display.

For data about uCrop, visit the official documentation.

2. Beginning New Project/Profile Screen

We will probably fabricate a basic social profile UI (like Instagram) and utilize the picture trimming usefulness to apply the profile picture. You can take picture utilizing camera or look over display, yield and set it as profile picture. So we should begin by making another venture in Android Studio.

1. Make another venture in Android Studio from File ⇒ New Project and select Basic Activity from formats. I have given my bundle name as info.androidhive.imagepicker

2. Open application/build.gradle and include Dexter, ButterKnife, Glide, CircularImageView and uCrop conditions.

conditions {

/…

/Butterknife

execution ‘com.jakewharton:butterknife:8.8.1’

annotationProcessor ‘com.jakewharton:butterknife-compiler:8.8.1’

/dexter consents

execution “com.karumi:dexter:5.0.0″

/roundabout imageview

execution ‘com.mikhaellopez:circularimageview:3.2.0’

/Glide

execution ‘com.github.bumptech.glide:glide:4.7.1’

execution ‘com.github.bumptech.glide:annotations:4.7.1’

implementation(‘com.github.bumptech.glide:okhttp3-integration:4.0.0’) {

bar gathering: ‘coast parent’

}

annotationProcessor ‘com.github.bumptech.glide:compiler:4.7.1’

execution ‘com.github.yalantis:ucrop:2.2.2’

}

3. Add the underneath assets to separate strings.xml, dimen.xml and colors.xml records.

<resources>

<string name=”app_name”>Image Pick &amp; Crop</string>

<string name=”action_settings”>Settings</string>

<string name=”profile_desc”>Rowan Sebastian Atkinson CBE is an English entertainer, humorist and screenwriter</string>

<string name=”profile_title”>Mr Bean</string>

<string name=”posts”>posts</string>

<string name=”followers”>followers</string>

<string name=”following”>following</string>

<string name=”msg_error_unable_select_profile_pic”>Unable to set profile picture. It would be ideal if you attempt again!</string>

<string name=”lbl_set_profile_photo”>Set profile image</string>

<string name=”lbl_take_camera_picture”>Take a picture</string>

<string name=”lbl_choose_from_gallery”>Choose from gallery</string>

<string name=”toast_image_intent_null”>Image picker alternative is missing!</string>

<!- – textual style families – >

<string name=”font_family_light”>sans-serif-light</string>

<string name=”font_family_medium”>sans-serif-medium</string>

<string name=”font_family_regular”>sans-serif</string>

<string name=”font_family_condensed”>sans-serif-condensed</string>

<string name=”font_family_black”>sans-serif-black</string>

<string name=”font_family_thin”>sans-serif-thin</string>

<string name=”dialog_permission_title”>Grant Permissions</string>

<string name=”dialog_permission_message”>This application needs consent to utilize this element. You can give them in application settings.</string>

<string name=”go_to_settings”>GOTO SETTINGS</string>

</resources>

<resources>

<dimen name=”fab_margin”>16dp</dimen>

<dimen name=”toolbar_profile_width”>90dp</dimen>

<dimen name=”dimen_20dp”>20dp</dimen>

<dimen name=”activity_padding”>16dp</dimen>

<dimen name=”profile_title”>23dp</dimen>

<dimen name=”profile_desc”>13dp</dimen>

<dimen name=”meta_count”>20dp</dimen>

<dimen name=”meta_label”>12dp</dimen>

<dimen name=”dimen_40dp”>40dp</dimen>

<dimen name=”ic_plus_width”>28dp</dimen>

</resources>

<?xml version=”1.0″ encoding=”utf-8″?>

<resources>

<color name=”colorPrimary”>#5770f3</color>

<color name=”colorPrimaryDark”>#5770f3</color>

<color name=”colorAccent”>#D81B60</color>

<color name=”gradient_start”>#5770f3</color>

<color name=”gradient_end”>#8e5aeb</color>

<color name=”profile_desc”>#D1D1FF</color>

<color name=”bg_meta_container”>#000000</color>

<color name=”profile_default_tint”>#e0e0e0</color>

</resources>

4. Download this res envelope and add the substance to your undertaking’s res organizer. This organizer contains important symbols expected to construct the profile screen.

5. Open the design document your fundamental action (activity_main.xml) and add the beneath code to accomplish the profile format.

<?xml version=”1.0″ encoding=”utf-8″?>

<android.support.design.widget.CoordinatorLayout xmlns:android=”http://schemas.android.com/apk/res/android”

xmlns:app=”http://schemas.android.com/apk/res-auto”

xmlns:tools=”http://schemas.android.com/devices”

android:layout_width=”match_parent”

android:layout_height=”match_parent”

tools:context=”.MainActivity”>

<android.support.design.widget.AppBarLayout

android:layout_width=”match_parent”

android:layout_height=”wrap_content”

android:theme=”@style/AppTheme.AppBarOverlay”>

<android.support.v7.widget.Toolbar

android:id=”@+id/toolbar”

android:layout_width=”match_parent”

android:layout_height=”?attr/actionBarSize”

android:background=”?attr/colorPrimary”

app:popupTheme=”@style/AppTheme.PopupOverlay”/>

<include layout=”@layout/layout_toolbar_profile”/>

</android.support.design.widget.AppBarLayout>

<include layout=”@layout/content_main”/>

</android.support.design.widget.CoordinatorLayout>

Make another xml format layout_toolbar_profile.xml and include the beneath code.

<?xml version=”1.0″ encoding=”utf-8″?>

<LinearLayout xmlns:android=”http://schemas.android.com/apk/res/android”

xmlns:app=”http://schemas.android.com/apk/res-auto”

android:layout_width=”match_parent”

android:layout_height=”wrap_content”

android:gravity=”center_horizontal”

android:orientation=”vertical”>

<RelativeLayout

android:layout_width=”@dimen/toolbar_profile_width”

android:layout_height=”wrap_content”>

<com.mikhaellopez.circularimageview.CircularImageView

android:id=”@+id/img_profile”

android:layout_width=”@dimen/toolbar_profile_width”

android:layout_height=”@dimen/toolbar_profile_width”

android:layout_marginTop=”@dimen/activity_padding”

android:layout_marginBottom=”@dimen/activity_padding”

android:scaleType=”centerInside”

android:src=”@drawable/baseline_account_circle_black_48″

app:civ_border_color=”@android:color/white”

app:civ_border_width=”2dp”/>

<com.mikhaellopez.circularimageview.CircularImageView

android:id=”@+id/img_plus”

android:layout_width=”@dimen/ic_plus_width”

android:layout_height=”@dimen/ic_plus_width”

android:layout_alignBottom=”@id/img_profile”

android:layout_alignParentRight=”true”

android:src=”@drawable/ic_plus”

app:civ_shadow=”true”

app:civ_shadow_radius=”1″/>

</RelativeLayout>

<TextView

android:layout_width=”wrap_content”

android:layout_height=”wrap_content”

android:fontFamily=”@string/font_family_medium”

android:text=”@string/profile_title”

android:textColor=”@android:color/white”

android:textSize=”@dimen/profile_title”/>

<TextView

android:id=”@+id/profile_desc”

android:layout_width=”wrap_content”

android:layout_height=”wrap_content”

android:layout_marginBottom=”@dimen/dimen_40dp”

android:gravity=”center_horizontal”

android:paddingLeft=”@dimen/dimen_20dp”

android:paddingRight=”@dimen/dimen_20dp”

android:text=”@string/profile_desc”

android:textColor=”@color/profile_desc”

android:textSize=”@dimen/profile_desc”/>

<LinearLayout

android:layout_width=”match_parent”

android:layout_height=”wrap_content”

android:background=”@color/bg_meta_container”

android:orientation=”horizontal”

android:paddingTop=”@dimen/activity_padding”

android:paddingBottom=”@dimen/activity_padding”

android:weightSum=”3″>

<LinearLayout

android:layout_width=”0dp”

android:layout_height=”wrap_content”

android:layout_weight=”1″

android:gravity=”center”

android:orientation=”vertical”>

<TextView

android:layout_width=”wrap_content”

android:layout_height=”wrap_content”

android:text=”1320″

android:textColor=”@android:color/white”

android:textSize=”@dimen/meta_count”

android:textStyle=”bold”/>

<TextView

android:layout_width=”wrap_content”

android:layout_height=”wrap_content”

android:fontFamily=”@string/font_family_condensed”

Leave a Reply

Your email address will not be published. Required fields are marked *