How to create Fragment Application in Urdu

How to create Fragment Application in Urdu

اس ٹوٹوریل میں ہم آپ کو فریگمینٹ ایپلیکیشن بنانا سکھائیں گے۔

۔سب سے پہلے آپ ایک نئی اینڈرائیڈ ایپ بنائیں جسکا نام آپ  فریگمینٹ ایپ رکھیں ۔ 

۔ اب آپ جو لے آؤٹ کے اوپر ٹیکسٹ ویو رکھا ہوا ہے اسکو ڈلیٹ کردیں۔

۔ اب آپ کوڈ ونڈو میں جاکر کنسٹریٹ لے آؤٹ کو ختم کرکے اس کی  جگہ لینیئر لے آؤٹ  لکھ دیں۔

۔ اب آپ اپنے اس  لے آؤٹ کا اوریئنٹیشن کو ورٹیکل سیٹ  کردیں، جیسا کہ نیچے دی گئی تصویر میں دکھایا گیا ہے۔

Fragment Linear Layout

۔ اب آپ اس مین لینیئر لے آؤٹ میں ایک اور لینیئر لےآؤٹ جو کے ھاریزونٹل ہے اسکو رکھ دیں۔

۔ اب آپ اس لینیئر لے آؤٹ کی وڈتھ میچ پیرنٹ اور ہائیٹ ریپ کنٹینٹ  پراپرٹی ونڈو سے سیٹ کر دیں، سیٹنگ نیچے دی جارہی ہے۔

Layout_width = match_parent

Layout_height = wrap_content

۔ اب آپ اس دوسرے لے آؤٹ کے اوپر دو بٹنس ڈریگ کرکے رکھ دیں، اور پراپرٹی نیچے دی گئی سیٹنگ کی طرح سیٹ کرلیں۔

Layout_width = match_parent

Layout_height = wrap_content

Layout_weight = 1

۔ اب آپ پہلے بٹن کا نام      فرسٹ فریگمینٹ      رکھیں اور دوسرے بٹن کا نام سیکنڈ فریگمینٹ  رکھ دیں۔

۔ اب آپ دونوں بٹنس کو ایک ساتھ شفٹ کی پریس کرکے سلیکٹ کریں ، اور اسکی لے آؤٹ مارجن  5 ڈی پی  رکھ دیں، جیسے ہی آپ یہ مارجن سیٹ کریں گے تو آپ کے لے آؤٹ پر جو بٹنس رکھے ہوئے ہیں ، ان کے اوپر ، دائیں ، بائیں اور نیچے کی جانب تھوڑا فاصلہ بن جائے گایہ لے آؤٹ مارجن سیٹ کرنے کی وجہ سے ہوا ہے۔

 ۔ اب ہم اس دوسرے لینیئر لے آؤ ٹ کا بیک گراؤنڈ سیٹ کریں گے، اسکے لیے ہم اس لے آؤٹ کو پہلے سلیکٹ کریں گے اب اسکا بیک گراؤنڈ کلر کوئی سابھی سیٹ کردیں گے، جو آپ کو اچھا لگے آپ اس کلر کو اس لے آؤٹ کے اوپر لگا سکتے ہیں۔

۔ اب آپ اپنے بٹنس کا کلر تبدیل کردیں ، ایک ایک کو علہد ہ سے سلیکٹ کریں اور پراپرٹی ونڈو سے ان کے کلر آپ اپنی مرضی سے رکھ دیں،اگر بیک گراؤنڈ پراپرٹی سے کلر تبدیل نہ ہو تو آپ بیک گراؤنڈ ٹنٹ پراپرٹی سے کلر کو تبدیل کر سکتے ہیں،   اور ٹیکسٹ سائز تھوڑا سے بڑھا دیں۔ آپ کے لے آؤٹ   اور بٹنس کی سیٹنگ نیچے دی گئی تصویر کی طرح ہونی چاہئے۔

Linear Layout With Two Buttons

۔  اب اس تصویر میں بٹنس کے نیچے جو سفید خالی  جگہ نظر آ رہی ہے، وہاں پر ہم ایک اور لے آؤٹ رکھدیں گے، کیوں کہ اس لے آؤٹ کے اندر ہمیں فریگمینٹ کو ریپلیس کروانا ہے۔

۔ اب آپ ایک نیا لینیئر لے آؤٹ کو ڈریگ کرکے نیچے پہلے مین لے آؤٹ پر رکھ دیں، اگر آپ بٹنس والے لے آؤٹ کے نیچے اس کو رکھیں گے تو مسئلہ ہو جائے گا۔

۔ اب آپ   بٹنس والے لے آؤٹ کو پکڑ کر اوپر مین لے آؤٹ پر رکھ دیں تو آپ کے لے آؤٹ کچھ اس طرح سے نظر آنے چاہیئے جیسا کہ نیچے دی گئی تصویر میں دکھایا گیا ہے۔

Component Tree

۔ اب ہم اپنے پراجیکٹ کے لئے دو فریگمینٹ بنائیں گے جن کو ہم نے   بٹن کلک ایونٹ کے ساتھ ری پلیس کروانا ہیں۔

۔ اب آپ پراجیکٹ ونڈو پر آجائیں جو کے آپ کے اینڈرائیڈ  اسٹوڈیو کے بائیں طرف ہے، وہاں پر آپ جاوا فولڈر پر کلک کر کے اس کے ٹری کو کھو ل دیں اور اس کے اندر جو کام والا پہلا فولڈر ہے اس پر رائٹ کلک کریں تو ایک پاپ اپ ونڈو کھلے گا اس میں سے آپ شو ان ایکسپلورر پر کلک کردیں جیسا کہ نیچے دی  گئی تصویر میں دکھایا گیا ہے۔

Android Show in Explorer

 

۔ آپ جیسے ہی اوپر دی گئی ہدایات پر عمل کریں گے تو آپ کے سامنے آپ کی ایپ کا جو فولڈر ہوگا جس میں آپ کی پوری کی پوری پروگرامننگ، کلاسز، تصویریں اور مزید مددگار فائلیں جو ہوتی ہیں وہ فولڈر خود بہ خود کھل جائے گا۔ اب آپ اس مین فولڈر کو ڈبل کلک کرکے کھول دیں اور اس کے اندر آپ ایک نیا فولڈر فریگمینٹ کے نام سے بنالیں۔ اب آپ جیسے ہی یہ فولڈر بنائیں گے تو آپ دیکھیں گے کہ آپ کے اینڈرائیڈ اسٹوڈیو کے اندروہ فولڈر  ظاہر ہو جائے گا آپ اوپر والی تصویر میں دیکھ سکتے ہیں کے وہ فولڈر دکھائی دے رہا ہے۔

اب سوال یہ پیدا ہوتا ہے کہ ہم نے یہ فولڈر کیوں بنایا ہے؟ جب ہماری ایپلیکیشن کچھ زیادہ بڑی ہو جاتی ہے تو کافی مشکل ہو جاتا ہے انکی ایکٹوٹیز اور فریگمینٹ کو سنبھالناتو اگر ہم ان سارے کاموں کو الگ الگ فولڈرس میں ترتیب سے رکھتے جائیں گے تو ہم کو کام کرنے میں زیادہ مشکل کا سامنا نہیں کرنا پڑیگا۔

۔ اب آپ اس فولڈر پر رائٹ کلک کریں اورنیو آپشن سے ہوکرآپ  فریگمینٹ پر اپنے مائوس کے کرسر کو لائیں اور فریگمینٹ (بلینک)  پر کلک کردیں، جیساکہ نیچے دی گئی تصویر میں دکھایا گیا ہے۔

First Fragment

 

۔ آپ جیسے ہی اوپر دی گئی ہدایت پر عمل کریں گے تو نیچے دی گئی تصویر ظاہر ہوگی، اب آپ اس تصویر کی طرح فریگمینٹ نیم باکس میں فرسٹ فریگمینٹ  لکھ دیں اور فنش بٹن پر کلک کردیں۔ جیسا کہ نیچے دی گئی تصویر میں دکھایا گیا ہے۔

First Fragment Component

۔ اب ہمارے پاس ایک فریگمینٹ کی ایکس ایم ایل فائل مل گئی ہے اور ایک جاوا کی کوڈنگ فائل مل گئی ہے، جو کہ نئی فریگمینٹ بنانے سے خود بخود بن جاتے ہیں۔

۔ اب آپ فرسٹ فریگمینٹ جاوا   فائل میں جاکر غیر ضروری کوڈنگ کو ڈلیٹ کردیں اور نیچے دی گئی تصویرسے دیکھ کر سیٹنگ رہنے دیں۔

 

First Fragment Coding

۔ اب آپ نیچے دی گئی لائن نمبر 1 کی کوڈنگ کو لائن نمبر 2 میں تبدیل کرکے اپنے کوڈ کو سیٹ کردیں۔

return inflater.inflate(R.layout.fragment_first, container, false);

View view = inflater.inflate(R.layout.fragment_first, container, false);

return view;

۔ اوپر جو تین لائنوں میں کوڈنگ لکھی ہے، اس میں سے پہلی لائن میں بائے ڈفالٹ سیٹنگ ہے جو اینڈرائڈ اسٹوڈیو نے خود دی ہے، جیسے ہی ہم نے نئی فریگمینٹ بنائی تھی تب یہ کوڈ آگیا تھا، اب ہم دوسری اور تیسری لائن والا کوڈ پہلی لائن سے تبدیل کردیں گےجس میں بتایا گیا ہے کہ ہم ایک  ویو  کا آبجیکٹ بنا رہے ہیں جس کانام ویو  رکھا ہے، وہ برابر ہوجو ہمارا نیا فرسٹ فریگمینٹ ایکس ایم ایل  لے آؤٹ ہے اسکو کال کرکے تیسری لائن میں لکھے  رٹرن ویو کے ذریعے سے اپنے مین لے آؤٹ میں ظاہر کروا دیں گے۔

۔ اب آپ اوپر ٹوٹوریل کو دبارہ دہرائیں، اور جہاں پر فرسٹ فریگمینٹ  ہو وہاں پر سیکنڈ فریگمینٹ لکھ دیں مطلب یہ  کہ آپ دوسری فریگمنٹ تخلیق کریں، تو ہمارے پاس دو فریگمینٹ  بن جائیں گی۔

۔ اب آپ  لے آؤٹ فولڈر سے  فریگمینٹ فرسٹ  ایکس ایم ایل فائل کو اوپن کرلیں اگر وہ اوپن نہیں ہو تو، اب آپ دیکھیں گے کہ آپ کے پاس اس بار فریم لے آؤٹ  نظر آئے گا،  آپ اسکا کلر بیک گراؤنڈ پراپرٹی سے اپنی مرضی سی سیٹ کردیں، اور اس لے آؤٹ کے  اوپر جو ٹیکسٹ  ویو رکھا ہوا ہے اسکو تبدیل کرکے آپ فرسٹ فریگمینٹ رکھ دیں، اور ٹیکسٹ سائز بڑاکرلیں، اور اسکو سینٹر کردیں۔

۔ اب آپ اپنے فریگمینٹ سیکنڈ ایکس ایم ایل  فائل کی ساری سیٹنگ بھی پہلی فریگمینٹ کی طرح کر لیں۔

۔ اب ہم اپنی مین ایکٹوٹی جاوا  فائل میں آئیں گے اور اپنے فریگمینٹ   کو بٹن کلک کے ذریعے سے ری پلیس کروادینگے۔جب ہم پہلا بٹن کلک کریں تو، پہلی فریگمینٹ کھل جائے اور اسی طرح جب ہم دوسرا بٹن کلک کریں تو ہماری دوسری فریگمینٹ کھل جائے۔

28۔ اب آپ اپنے آخری لینیئر لے آؤٹ کی آئی ڈی نیچے دئے گئے طریقے سے سیٹ کرلیں۔

Id = LinearLayout

۔ اب آپ نیچے دی گئی کوڈنگ کو اپنے   مین ایکٹوٹی جاوا  فائل میں ٹائپ کرلیں۔

 

package com.aftabsoomro.myfragmentapp;

import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.FragmentTransaction;

import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.LinearLayout;

import com.aftabsoomro.myfragmentapp.Fragments.FirstFragment;
import com.aftabsoomro.myfragmentapp.Fragments.SecondFragment;

public class MainActivity extends AppCompatActivity {

    Button btnFirst, btnSecond;
    LinearLayout linearLayout;



        @Override
        protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        btnFirst = findViewById(R.id.btnFirst);
        btnSecond = findViewById(R.id.btnSecond);
        linearLayout = findViewById(R.id.linearLayout);

        btnFirst.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

                FirstFragment firstFragment = new FirstFragment();
                FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();
                transaction.replace(R.id.linearLayout, firstFragment);
                transaction.commit();
            }
        });

            btnSecond.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

                SecondFragment secondFragment = new SecondFragment();
                FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();
                transaction.replace(R.id.linearLayout, secondFragment);
                transaction.commit();

            }
        });
    }

}

۔ سب سے پہلے ہم نے  اپنے دو بٹنس کے لئے دو ویری ایبلس بنائے ہیں اور ان کو الگ الگ نام دے دئے ہیں، اور اپنے آخری لینئر لے آؤٹ کے لئے ایک ویری ایبل بنایا ہے اسکو بھی ایک نام دے دیا ہے ، آپ اوپر کوڈنگ میں دیکھ سکتے ہیں۔

۔ اس کے بعد ہم نے ان ویری ایبلس کو اپنے اپنے ویوز دوبٹنس اور ایک لے آؤٹ اسائن کردئے ہیں جو کہ فائنڈ ویو بائے آئڈی کے ذریعے سے کیا ہے، اور تینوں کو آخر میں ان کی آئڈیز کے مطابق اٹیچ کردیا ہے۔جیسا کے نیچے کوڈ میں دیکھ سکتے ہیں۔

btnFirst = findViewById(R.id.btnFirst);
btnSecond = findViewById(R.id.btnSecond);
linearLayout = findViewById(R.id.linearLayout);

 

۔ اس کے بعد ہم نے اپنے دو بٹنس کے لئے آن کلک  لسنر سیٹ کروایا ہے، جس میں ہم نے بتایا ہے کہ جب پہلا بٹن کلک ہوگا تو پہلے فریگمینٹ کا ایک آبجیکٹ بنائیں گے، اور اس کے نیچے فریگمینٹ کی ٹرانزیکشن بنائی ہے اسکو گیٹ سپورٹ فریگمینٹ مینیجر کے ساتھ جوڑ دیا ہے جو ٹرانزیکشن کوشروع کروائے گا، اور اسکے بعد ہم ٹرانزیکشن کے ذریعے سے اپنے لے آؤٹ کے اندر پہلی فریگمینٹ کو ری پلیس کروادیں گے، اور آخر میں ہم اپنی ٹرانزیکشن کو کومٹ کردیں گےتو ہمارا کام ہو جائے گا، اس میں ہم نے چار لائن کا کوڈ لکھا ہے تو ہمارا کام ہوجائے گا، یہ چار لائنیں جو میں نے سمجھانے کی کوشش کی ہے وہ نیچے دی گئی ہیں آپ ان کا غور سے مطالع کریں۔

FirstFragment firstFragment = new FirstFragment();
FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();
transaction.replace(R.id.linearLayout, firstFragment);
transaction.commit();

 

۔ اب آپ اپنے دوسرے بٹن کے لئے بھی اس طرح سے کوڈنگ کریں گے جو اوپر ہم نے پیش کردی ہے، اب ساری کوڈنگ کے بعد جو رزلٹ آئے گا وہ نیچے دی گئی تصویر میں دکھایا گیا ہے۔

 

Final Fragment App

 

۔ پہلے بٹن پر کلک کرنے سے بائیں جانب والا نتیجہ ظاہر ہوگا اور دوسرے بٹن پر کلک کرنے سے دائیں جانب والا نتیجہ ظاہر ہوگا۔

اگر آپ اس پوسٹ کا پی ڈی ایف فائل ڈائون لوڈ کرنا چاہتے ہیں تو اس لنک پر کلک کریں۔

Android Introduction in Urdu

Leave a Reply

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

error: Content is protected !! If you want any content to be copied, then contact Admin