Advertisement
  1. Code
  2. Coding Fundamentals
  3. Tools

Android-एंड्रॉइड पे एक Animated GIF-एनिमेटेड जी आई एफ का प्रयोग करके जीवंत Wallpaper-वॉलपेपर तैयार करें

Scroll to top
Read Time: 8 min

() translation by (you can also view the original English article)

आपने कभी कोई एक सुंदर animated GIF-एनिमेटेड जी आई एफ देखी है जो बिना कोई रुकावट के पुनरावर्तित होती रहती है और क्या आपको ऐसा विचार आया है कि क्या आपके Android-एंड्रॉइड उपकरण पे उसको एक live wallpaper-लाइव वॉलपेपर-जीवंत पृष्ठभूमि चित्र के तौर पर प्रयोग कर सकते है? वैसे, आप यह कर सकते है, और इस ट्यूटोरियल-स्वशिक्षण में मैं आपको दिखाऊंगा की आप यह कैसे कर सकते है।

प्रस्तावना

Graphics-ग्राफ़िक्स को तैयार करने हेतु सिर्फ गणित और code-कॉड का प्रयोग कर के एक रसप्रद और सुंदर लाइव वॉलपेपर तैयार करने की प्रक्रिया को शून्य से शुरुआत करना उबाऊ और समय लेनेवाला बन सकता है। उसमे बहुत सारी सृजनात्मकता की भी आवश्यकता है। दूसरी ओर, एक एनिमेटेड GIF को तैयार करना या कोई एक ऑनलाइन खोजना तुलना में काफी आसान है। इस ट्यूटोरियल-स्वशिक्षण में आप सीखेंगे कि किसी भी एनिमेटेड GIF को एक जीवंत वॉलपेपर में कैसे परिवर्तित कर सकते है।

पूर्वापेक्षा

सुनिश्चित करें कि आपके पास Android Studio-एंड्रॉइड स्टूडियो के सेट अप-स्थापन का अत्याधुनिक संस्करण है। आप उसको Android Developer website-एंड्रॉइड डेवलपर वेबसाइट से हासिल कर सकते है।

हालांकि कोई भी एनिमेटेड GIF चल जाएगी, मैं आपको एक अच्छा cinemagraph-सिनेमाग्राफ डाउनलोड करने का सुझाव देता हूं। एक cinemagraph-सिनेमाग्राफ एक एनिमेटेड GIF का प्रकार ही है—सामान्य तौर पर एक वीडियो से तैयार किया जाता है—जो बिना रुके पुनरावर्तित होता रहता है। Flickr-फ्लिकर पे आपको बहुत सारे अच्छे सिनेमाग्राफ मिल सकते है।

इस ट्यूटोरियल के लिए, मैं Flickr-फ्लिकर के उपयोगकर्ता djandyw.com के द्वारा तैयार किए गए एक cinemagraph-सिनेमाग्राफ का प्रयोग कर रहा हूँ क्योंकि वह Creative Commons license-क्रिएटिव कॉमन्स लाइसेंस-अनुज्ञा के तहत उपलब्ध है।

१. नई परियोजना-प्रोजेक्ट तैयार करें

Android Studio-एंड्रॉइड स्टूडियो को चालू करें, एक नई परियोजना चालू करें, और परियोजना को GIFWallpaper नाम दें। अगर आपकी इस एप्प-एप्लीकेशन-अनुप्रयोग को Google Play-गूगल प्ले पर प्रकाशित करने की योजना है तो एक अनोखा पैकेज नेम-सम्पुट का नाम दें।

SDK-एस डी के को कम से कम API 8: Android 2.2 (Froyo) स्थापित करें।

हमारी एप्प में Activity नहीं रहेगा, इसलिए Add No Activity का चयन करें और Finish पे क्लिक करें।

२. वॉलपेपर का विवरण दर्ज करें

एक जीवंत वॉलपेपर को एक फाइल चाहिए जो उसका विवरण प्रस्तुत करें। एक नई XML फाइल तैयार करें जिसका नाम res/xml/wallpaper.xml हो और उसकी सामग्री को नीचे दर्शाए गए XML से फेर बदली करें:

1
<?xml version="1.0" encoding="UTF-8"?>
2
<wallpaper 
3
  xmlns:android="http://schemas.android.com/apk/res/android"
4
    android:label="GIF Wallpaper"
5
    android:thumbnail="@drawable/ic_launcher">
6
</wallpaper>

Label-लेबल और Thumbnail-थंबनेल विशेष महत्व रखते हैं क्योंकि जब यह वॉलपेपर आपके उपकरण में उपलब्ध वॉलपेपरों की सूचि में दर्शाता है तब प्रयोग में आयेगा।

३. Manifest-मेनिफेस्ट का संपादन करें

एक जीवंत वॉलपेपर के तौर पर चलने के लिए, हमारी एप्प को एक permission-अनुमति की जरुरत पड़ेगी, android.permission.BIND_WALLPAPER.

एक जीवंत वॉलपेपर एक Service के तौर पर चलता है जो android.service.wallpaper.WallpaperService intent action-इरादे की क्रिया को प्राप्त कर सकता है। Service को GIFWallpaperService का नाम दें और उसको परियोजना के manifest-मेनिफेस्ट, AndroidManifest.xml में शामिल करें।

1
<service
2
    android:name=".GIFWallpaperService"
3
    android:enabled="true"
4
    android:label="GIF Wallpaper"
5
    android:permission="android.permission.BIND_WALLPAPER" >
6
    <intent-filter>
7
        <action android:name="android.service.wallpaper.WallpaperService"/>
8
    </intent-filter>
9
    <meta-data
10
        android:name="android.service.wallpaper"
11
        android:resource="@xml/wallpaper" >
12
    </meta-data>
13
</service>

आगे, यह एप्प सिर्फ वही उपकरणों पे इंस्टॉल की जा सके जिन में जीवंत वॉलपेपर चल सके यह सुनिश्चित करने के लिए, नीचे दर्शाए गए code-कोड के हिस्से को manifest-मेनिफेस्ट में शामिल करें:

1
<uses-feature
2
    android:name="android.software.live_wallpaper"
3
    android:required="true" >
4
</uses-feature>

४. Animated GIF-एनिमेटेड जी आई एफ को शामिल करें

Flickr-फ्लिकर से डाउनलोड की हुई एनिमेटेड GIF-जी आई ऍफ़ को परियोजना के assets-एसेट्स फोल्डर में कॉपी करें। मैंने GIF-जी आई ऍफ़ को girl.gif नाम दिया है।

५. Service-सर्विस को तैयार करें

एक नया Java का class-क्लास बनाएं और उसको GIFWallpaperService.java नाम दें। यह क्लास WallpaperService क्लास को विस्तृत करना चाहिए।

1
public class GIFWallpaperService extends WallpaperService {
2
    
3
}

चूँकि WallpaperService एक एब्स्ट्रैक्ट क्लास है, आपको उसकी onCreateEngine method-मेथड को override-ओवरराइड-अधिभावित करना पड़ेगा और आपके खुद के Engine के इंस्टैंस को रिटर्न करना पड़ेगा, जो GIF की फ्रेम्स को रेंडर कर सकता है।

एनिमेटेड GIF के प्रयोग के लिए, आपको पहले उसको Movie ऑब्जेक्ट में परिवर्तित करना पड़ेगा। आप इसके लिए Movie के क्लास की decodeStream मेथड का प्रयोग कर सकते है। एक बार Movie ऑब्जेक्ट तैयार हो जाता है, तो उसको एक पैरामीटर के तौर पर कस्टम Engine के constructor-कंस्ट्रक्टर में प्रसार करें।

onCreateEngine मेथड इस तरह दिखनी चाहिए:

1
@Override
2
public WallpaperService.Engine onCreateEngine() {
3
    try {
4
  	Movie movie = Movie.decodeStream(
5
                getResources().getAssets().open("girl.gif"));
6
7
		return new GIFWallpaperEngine(movie);
8
	}catch(IOException e){
9
		Log.d("GIF", "Could not load asset");
10
		return null;
11
	}
12
}

६. Engine-इंजिन को तैयार करें

चलिए, अब Engine पर काम चालू करते हैं। GIFWallpaperService क्लास में GIFWallpaperEngine के नाम से एक क्लास तैयार करें और उसको WallpaperService.Engine से एक्सटेंड-विस्तृत करें।

नए क्लास में निम्नलिखित फ़ील्ड्स को शामिल करें:

  • frameDuration: यह पूर्णांक रि-ड्रा ऑपरेशन्स-फिर से चित्रित करने की क्रिया के बीच के विलम्ब को दर्शाता है। २० का मूल्य आपको ५० फ्रेम्स प्रति सेकंड देगा।
  • visible: यह बूलियन engine को बताता है कि क्या जीवंत वॉलपेपर स्क्रीन पे अभी दिख रहा है या नहीं। यह महत्वपूर्ण है क्योंकि हमें वॉलपेपर को जब वह नहीं दिख रहा हो तब ड्रा नहीं करना चाहिए।
  • movie: यह एक Movie ऑब्जेक्ट के स्वरुप में एनिमेटेड GIF है।
  • holder: यह engine को उपलब्ध SurfaceHolder ऑब्जेक्ट को दर्शाता है। उसको onCreate मेथड को ओवरराइड करके इनिशिअलैज़ करना पड़ेगा।
  • handler: यह एक Handler ऑब्जेक्ट है जो एक Runnable को, जो वॉलपेपर को वास्तव में ड्रा करने के लिए जिम्मेदार है, चालू करने के लिए प्रयोग में आएगा।

अब आपका क्लास ऐसा दिखना चाहिए:

1
private class GIFWallpaperEngine extends WallpaperService.Engine {
2
    private final int frameDuration = 20;
3
4
    private SurfaceHolder holder;
5
    private Movie movie;
6
    private boolean visible;
7
    private Handler handler;
8
9
    public GIFWallpaperEngine(Movie movie) {
10
        this.movie = movie;
11
        handler = new Handler();
12
    }
13
14
    @Override
15
    public void onCreate(SurfaceHolder surfaceHolder) {
16
        super.onCreate(surfaceHolder);
17
        this.holder = surfaceHolder;
18
    }
19
}

आगे, draw नामक मेथड तैयार करें जो एनिमेटेड GIF के विषयवस्तु को चित्रित करता है। चलिए इस मेथड को और विस्तार से देखते हैं:

  • हम पहले जाँच करेंगे की क्या visible वेरिएबल true स्थापित किया गया है। अगर यह है तभी हम आगे बढ़ेंगे।
  • चित्रित करने के लिए Canvas पाने के लिए SurfaceHolder की lockCanvas मेथड का प्रयोग करें।
  • एनिमेटेड GIF को सही नाप और स्थान पे रखने के बाद Canvas पे उसकी फ्रेम चित्रित करें।
  • एक बार पूरा चित्रण हो जाता है, तो Canvas को SurfaceHolder पे वापिस भेज दें।
  • Movie ऑब्जेक्ट के setTime मेथड का प्रयोग करके एनिमेटेड GIF की वर्तमान फ्रेम को नवीनतम बनाएं।
  • frameDuration मिलिसेकंड्स तक इंतज़ार करने के बाद handler का प्रयोग करके मेथड को फिरसे कॉल करें-बुलाएं।

draw मेथड को कभी भी सीधा सीधा नहीं कॉल करते-बुलाते। वह हमेशा Handler और एक Runnable ऑब्जेक्ट का प्रयोग करके कॉल की जाती है। इसलिए, चलिए एक Runnable ऑब्जेक्ट, क्लास की एक फील्ड बनाते है और उसको drawGIF नाम देते हैं।

GIFWallpaperService क्लास में निम्नलिखित कोड को शामिल करें:

1
private Runnable drawGIF = new Runnable() {
2
    public void run() {
3
        draw();
4
    }
5
};
6
7
private void draw() {
8
    if (visible) {
9
        Canvas canvas = holder.lockCanvas();
10
        canvas.save();
11
            // Adjust size and position so that

12
            // the image looks good on your screen

13
            canvas.scale(3f, 3f);
14
            movie.draw(canvas, -100, 0);
15
        canvas.restore();
16
        holder.unlockCanvasAndPost(canvas);
17
        movie.setTime((int) (System.currentTimeMillis() % movie.duration()));
18
19
        handler.removeCallbacks(drawGIF);
20
        handler.postDelayed(drawGIF, frameDuration);
21
    }
22
}

वॉलपेपर की दर्शनियता में जब भी बदलाव आता है तब onVisibilityChanged मेथड स्वचालित रूप से कॉल होती है-बुलाई जाती । हमें उसको ओवरराइड करना पड़ेगा और, visible आर्गुमेंट के मूल्य के आधार पर, drawGIF को या तो चालू या बंध करना है। कोई भी रुकी हुई drawGIF के रन्स-को रोकने के लिए Handler की removeCallbacks मेथड का प्रयोग होता है।

1
@Override
2
public void onVisibilityChanged(boolean visible) {
3
    this.visible = visible;
4
    if (visible) {
5
        handler.post(drawGIF);
6
    } else {
7
        handler.removeCallbacks(drawGIF);
8
    }
9
}

अंत में, अगर वॉलपेपर को निष्क्रिय किया गया है तो रुके पड़े हुए कोई drawGIF के दौर को रोकने के लिए Engine की onDestroy मेथड को ओवरराइड करें।

1
@Override
2
public void onDestroy() {
3
    super.onDestroy();
4
    handler.removeCallbacks(drawGIF);
5
}

७. Compile-कंपाइल और Install-इंस्टॉल करें

आपका लाइव-जिवंत वॉलपेपर तैयार है। उसको कंपाइल करें और आपके एंड्राइड उपकरण पे उसको इंस्टॉल करें। एक बार इंस्टॉल हो जाने के बाद, उपलब्ध वॉलपेपरों की सूचि में आपको यह वॉलपेपर दिखना चाहिए।

ज्यादातर लॉन्चर्स आपको 'लॉन्ग टैप' की चेष्टा के बाद वॉलपेपर को बदलने का एक विकल्प देते हैं। विकल्प के तौर पर, आप वॉलपेपर को बदलने के लिए 'डिस्प्ले सेटिंग्स' पे भी जा सकते है।

अगर GIF बहुत छोटा दिख रहा है या वह सही तरीके से स्थापित नहीं हुआ है, तो draw मेथड पे वापिस जाएं और नाप और स्थान को ठीक करें।

समापन

अब आप जानते है कि एक लाइव वॉलपेपर तैयार करने के लिए एनिमेटेड GIF का प्रयोग कैसे कर सकते है।  बिना कोई हिचकिचाहट, ज्यादा GIFs  से परीक्षण करें। अगर आप आपके लाइव वॉलपेपर को Google Play-गूगल प्ले पे प्रकाशित करना चाहते है, तो सुनिश्चित करें कि आपके पास एनिमेटेड GIF को व्यावसायिक रूप में प्रयोग करने के लिए रचयिता से अनुमति हासिल है। WallpaperService class के बारे में ज्यादा सीखने के लिए Android Developer website-एंड्रॉइड डेवलपर वेबसाइट की मुलाकात लें।


Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.