ImageSlider, ImageSwitcher, SearchView

📖 Theory

home screen ને showmanship ની જરૂર છે

committee ની demand list FestConnect Mobile ના home screen માટે film poster જેમ reads થાય છે: 3 event banners એ slide past each other જોઈએ loop પર, અને search એ proper search bar માં live કરવું જોઈએ magnifier icon સાથે, તમારા plain EditText નહીં.

ત્રણ widgets તેને deliver કરે છે: animated image changes માટે ImageSwitcher, switching ને sliding માં turn કરવા માટે timer, અને SearchView, search bar જેને Android already build કર્યું છે જેથી તમે તેને faking કરવાનું બંધ કરો.

📖 Theory

ImageSwitcher અને તેનો factory

plain ImageView નવું image માં SNAPS થાય છે. ImageSwitcher handover ને animate કરે છે: જૂનું poster slides out, નવું slides in.

તેની એક structural oddity: switcher ને ખબર નથી કે તે શેની વચ્ચે switching કરે છે. તમારે તેને ViewFactory આપવું પડે છે જેનું makeView() ImageView ને manufactures કરે છે જે તે તેની વચ્ચે animate કરે છે:

switcher.setFactory(() -> new ImageView(this));

પછી choreography ને pick કરો: setInAnimation, setOutAnimation (stock ones જેમ android.R.anim.slide_in_left), અને setImageResource(R.drawable.poster2) સાથે pictures ને change કરો.

⌨️ Practical

Poster banner: switcher + timer = slider

public class HomeActivity extends AppCompatActivity {
    int[] posters = { R.drawable.garba, R.drawable.coding, R.drawable.robo };
    int current = 0;
    Handler handler = new Handler(Looper.getMainLooper());

    @Override
    protected void onCreate(Bundle b) {
        super.onCreate(b);
        setContentView(R.layout.activity_home);

        ImageSwitcher sw = findViewById(R.id.posterSwitcher);
        sw.setFactory(() -> new ImageView(this));      // the factory!
        sw.setInAnimation(this,  android.R.anim.slide_in_left);
        sw.setOutAnimation(this, android.R.anim.slide_out_right);
        sw.setImageResource(posters[0]);

        handler.postDelayed(new Runnable() {           // the slider part
            @Override public void run() {
                current = (current + 1) % posters.length;  // wrap: 0,1,2,0...
                sw.setImageResource(posters[current]);
                handler.postDelayed(this, 3000);       // re-post: every 3s
            }
        }, 3000);
    }
}

📖 Theory

SearchView: bar જે તમે faking કરવાનું બંધ કરો છો

SearchView આખો search-bar experience ને ships કરે છે: magnifier icon, hint text, clear button. તમારું job એક listener છે 2 callbacks સાથે:

searchView.setOnQueryTextListener(new SearchView.OnQueryTextListener() {

public boolean onQueryTextChange(String text) { ... } // દરેક keystroke

public boolean onQueryTextSubmit(String query) { ... } // search pressed

});

Change એ live-filter hook છે: adapter.getFilter().filter(text) user types કરે તેમ event list ને narrows કરે છે. Submit keyboard ના search action પર fires થાય છે. બંને boolean return કરે છે: true એટલે "handled, do nothing further".

split ને recognise કરો છો? change/submit એ TextWatcher નું onTextChanged plus commit moment છે: live-search pattern નું third telling.

🧩 Quiz

classmate ImageSwitcher ને wire કરે છે, setFactory ને skip કરે છે, અને setImageResource ને call કરે છે. શું થાય છે, અને શા માટે factory ever needed હતું?

1. Works fine: switcher default ImageView ને પોતે create કરે છે
2. તે first image call પર Crashes થાય છે: switcher પાસે કોઈ view નથી જેમાં image ને put કરી શકે; makeView() એ તેને manufacture કરવાનું હતું
3. fallback તરીકે image ને show કરે છે animation વગર
4. Compile error: setFactory ને build time પર checked કરવામાં આવે છે

💭 Think first

slider નું clockwork ને Read કરો

listing માં, Runnable handler.postDelayed(this, 3000) ને call કરે છે તેની own run() ની અંદર. 3 ticks ને trace કરો: શું show થાય છે ક્યારે, અને % શું કરે છે? પણ: run() ને directly call કરવું કઈ familiar mistake હોત?

⚠️ Watch out

Showmanship traps

No factory: quiz crash: setFactory anything else પહેલાં.

immortal timer: Handler હજુ re-posting કરે છે after screen closes તે Activity ને leak કરે છે: remove callbacks onDestroy માં (handler.removeCallbacksAndMessages(null)).

ફક્ત submit પર Filtering: users expect કરે છે કે list narrow થાય જેમ તેઓ TYPE કરે છે: wire onQueryTextChange, ફક્ત submit નહીં.

exam પર "ImageSlider": construction ને honestly name કરો: ImageSwitcher જેને repeating Handler (અથવા ViewPager) દ્વારા advanced કરવામાં આવે છે: classic Android માં કોઈ single stock ImageSlider widget નથી.

📖 Theory

Composition over invention

notice કરો કે slider એ શું શીખવ્યું: Android એ એક ship નથી કર્યું; તમે તેને COMPOSED કર્યું switcher, timer idiom અને % wrap થી: જે રીતે મોટાભાગના "missing" widgets build થાય છે, અને better exam answer pretending કરવા કરતાં કે widget exists કરે છે. એક Unit 1 topic બાકી છે: આખા crowded app ને tabs માં organise કરવું: TabLayout with FrameLayout, next.

✅ Summary

Key takeaways

• ImageSwitcher image changes ને animate કરે છે; setFactory નું makeView() એ inner ImageView ને supply કરવું પડે first.
• setInAnimation/setOutAnimation choreography ને choose કરે છે; setImageResource picture ને change કરે છે.
• slider = switcher + self-re-posting Handler.postDelayed + (i + 1) % n wrap: composed, stock નહીં.
• SearchView ready search bar છે: onQueryTextChange (per keystroke, live filter) + onQueryTextSubmit (commit).
• adapter.getFilter().filter(text) list ને live narrows કરે છે: mobile live-search hook ફરીથી.
• Stop timers onDestroy માં અથવા Activity leaks થાય છે.
• Memory hook: factory dancer ને makes કરે છે, timer beat ને keeps કરે છે, change submit ને beats કરે છે.