![Page 1: User Interface-UI (Pamja e aplikacionit)naserkastrati.weebly.com/uploads/3/8/8/3/38831473/... · Hyrje në UI Basic views —Views të zakonshme si TextView, EditText, dhe Button](https://reader036.vdocuments.mx/reader036/viewer/2022062402/5e9c290891173b06060e2fe6/html5/thumbnails/1.jpg)
User Interface-UI(Pamja e aplikacionit)
Ligjërata e pestë
Ligjerues Burim Avdiu
UPZ -Universiteti i Prizrenit
![Page 2: User Interface-UI (Pamja e aplikacionit)naserkastrati.weebly.com/uploads/3/8/8/3/38831473/... · Hyrje në UI Basic views —Views të zakonshme si TextView, EditText, dhe Button](https://reader036.vdocuments.mx/reader036/viewer/2022062402/5e9c290891173b06060e2fe6/html5/thumbnails/2.jpg)
Agjenda
• Përdorimi i “basic views” në Android për dizajnimin e UI
• Përdorimi i “picker views” për paraçitjen itemave në listë
• Përdorimi i “list views” për paraçitjen itemave në listë
• Përdorimi i “specialized fragments”
![Page 3: User Interface-UI (Pamja e aplikacionit)naserkastrati.weebly.com/uploads/3/8/8/3/38831473/... · Hyrje në UI Basic views —Views të zakonshme si TextView, EditText, dhe Button](https://reader036.vdocuments.mx/reader036/viewer/2022062402/5e9c290891173b06060e2fe6/html5/thumbnails/3.jpg)
Hyrje në UI➤ Basic views — Views të zakonshme si TextView, EditText, dhe
Button views
➤ Picker views — Views that enable users to select from a list,
such as the TimePicker and DatePicker views
➤ List views — Views that display a long list of items, such as the
ListView and the SpinnerView views
➤ Specialized fragments — Special fragments that perform
specifi c functions
![Page 4: User Interface-UI (Pamja e aplikacionit)naserkastrati.weebly.com/uploads/3/8/8/3/38831473/... · Hyrje në UI Basic views —Views të zakonshme si TextView, EditText, dhe Button](https://reader036.vdocuments.mx/reader036/viewer/2022062402/5e9c290891173b06060e2fe6/html5/thumbnails/4.jpg)
Përdorimi i “Basic Views”Disa nga pamjet bazike(basic views)
➤ TextView
➤ EditText
➤ Button
➤ ImageButton
➤ CheckBox
➤ ToggleButton
➤ RadioButton
➤ RadioGroup
![Page 5: User Interface-UI (Pamja e aplikacionit)naserkastrati.weebly.com/uploads/3/8/8/3/38831473/... · Hyrje në UI Basic views —Views të zakonshme si TextView, EditText, dhe Button](https://reader036.vdocuments.mx/reader036/viewer/2022062402/5e9c290891173b06060e2fe6/html5/thumbnails/5.jpg)
TextView<?xml version=”1.0” encoding=”utf-8”?>
<LinearLayout xmlns:android=”http://schemas.android.com/apk/res/android”
android:layout_width=”fill_parent”
android:layout_height=”fill_parent”
android:orientation=”vertical” >
<TextView
android:layout_width=”fill_parent”
android:layout_height=”wrap_content”
android:text=”@string/hello” />
</LinearLayout>
Është një nga pamjet e cila përdorët për të paraqitur tekst për përdoruesit, në
platforma të tjera njihet si Label.
![Page 6: User Interface-UI (Pamja e aplikacionit)naserkastrati.weebly.com/uploads/3/8/8/3/38831473/... · Hyrje në UI Basic views —Views të zakonshme si TextView, EditText, dhe Button](https://reader036.vdocuments.mx/reader036/viewer/2022062402/5e9c290891173b06060e2fe6/html5/thumbnails/6.jpg)
Button, ImageButton, EditText, CheckBox,ToggleButton, RadioButton, and RadioGroup Views
➤ Button — Reprezenton një buton që mund të klikohet
➤ ImageButton — Njët me butonin po ka dhe imazh
➤ EditText — Një subclass e TextView view që lejon me shënua tekst
➤ CheckBox — Një lloj special i butonit që ka dy gjendje : checked/unchecked
➤ RadioGroup and RadioButton —ka dy gjendje : checked/unchecked.
Një RadioGroup përdorët për të bashkuar një ose më shumë RadioButton views,
Vetëm një RadioButton mund të jetë i zgjedhur( checked) në RadioGroup.
➤ ToggleButton — Paraqet gjendjen e butonit si checked/unchecked duke
përdorur indikatorin r dritës.
Ushtrimi detajon këto llojeve të views
![Page 7: User Interface-UI (Pamja e aplikacionit)naserkastrati.weebly.com/uploads/3/8/8/3/38831473/... · Hyrje në UI Basic views —Views të zakonshme si TextView, EditText, dhe Button](https://reader036.vdocuments.mx/reader036/viewer/2022062402/5e9c290891173b06060e2fe6/html5/thumbnails/7.jpg)
Button, ImageButton, EditText, CheckBox,ToggleButton, RadioButton, and RadioGroup Views
![Page 8: User Interface-UI (Pamja e aplikacionit)naserkastrati.weebly.com/uploads/3/8/8/3/38831473/... · Hyrje në UI Basic views —Views të zakonshme si TextView, EditText, dhe Button](https://reader036.vdocuments.mx/reader036/viewer/2022062402/5e9c290891173b06060e2fe6/html5/thumbnails/8.jpg)
Kontrollimi i BasicView me programimPërdor BasicViews projektin e krijuar dhe modifiko klasën BasicViewsActivity.java për të mundësuar kontrollimin e basicviews:
Button btnSave = (Button) findViewById(R.id.btnSave);
btnSave.setOnClickListener(new View.OnClickListener(){
public void onClick(View v) {
DisplayToast(“You have clicked the Save button”);
}
});
RadioGroup radioGroup = (RadioGroup) findViewById(R.id.rdbGp1);
radioGroup.setOnCheckedChangeListener(new OnCheckedChangeListener(){
public void onCheckedChanged(RadioGroup group, int checkedId) {
RadioButton rb1 = (RadioButton) findViewById(R.id.rdb1);
if (rb1.isChecked()) {
DisplayToast(“Option 1 checked!”);
} else {
DisplayToast(“Option 2 checked!”);
}
}
});
![Page 9: User Interface-UI (Pamja e aplikacionit)naserkastrati.weebly.com/uploads/3/8/8/3/38831473/... · Hyrje në UI Basic views —Views të zakonshme si TextView, EditText, dhe Button](https://reader036.vdocuments.mx/reader036/viewer/2022062402/5e9c290891173b06060e2fe6/html5/thumbnails/9.jpg)
Kontrollimi i BasicView me programimToggleButton toggleButton = (ToggleButton) findViewById(R.id.toggle1);
toggleButton.setOnClickListener(new View.OnClickListener()
{
public void onClick(View v) {
if (((ToggleButton)v).isChecked())
DisplayToast(“Toggle button is On”);
else
DisplayToast(“Toggle button is Off”);
}
});
private void DisplayToast(String msg)
{
Toast.makeText(getBaseContext(), msg,
Toast.LENGTH_SHORT).show();
}
![Page 10: User Interface-UI (Pamja e aplikacionit)naserkastrati.weebly.com/uploads/3/8/8/3/38831473/... · Hyrje në UI Basic views —Views të zakonshme si TextView, EditText, dhe Button](https://reader036.vdocuments.mx/reader036/viewer/2022062402/5e9c290891173b06060e2fe6/html5/thumbnails/10.jpg)
ProgressBar ViewProgressBar view ofron informata për detyrat që janë duke u kryer, p.sh nëse jeni
duke bartur shënime nga web dhe ju duhet të jepni informata lidhur me statusin
e bartjes, ProgressBar view është zgjidhja e duhur për këto raste.
Ushtrimi në vijm detajon Progres Bar-in(Progres Dialog) - BasicViews2.
<ProgressBar android:id="@+id/progressbar"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
progressBar = (ProgressBar) findViewById(R.id.progressbar);
![Page 11: User Interface-UI (Pamja e aplikacionit)naserkastrati.weebly.com/uploads/3/8/8/3/38831473/... · Hyrje në UI Basic views —Views të zakonshme si TextView, EditText, dhe Button](https://reader036.vdocuments.mx/reader036/viewer/2022062402/5e9c290891173b06060e2fe6/html5/thumbnails/11.jpg)
ProgressBar Viewnew Thread(new Runnable()
{
public void run()
{
while (progressStatus < 10)
{ progressStatus = doSomeWork();}
handler.post(new Runnable()
{
public void run()
{progressBar.setVisibility(View.GONE);}
}); //Gone e fshin nga aktiviteti dhe nuk merr hapsir
}
private int doSomeWork()
{
try {Thread.sleep(500);}
catch (InterruptedException e)
{e.printStackTrace();}
return ++progress;
}
}).start();
![Page 12: User Interface-UI (Pamja e aplikacionit)naserkastrati.weebly.com/uploads/3/8/8/3/38831473/... · Hyrje në UI Basic views —Views të zakonshme si TextView, EditText, dhe Button](https://reader036.vdocuments.mx/reader036/viewer/2022062402/5e9c290891173b06060e2fe6/html5/thumbnails/12.jpg)
Kostumizimi i ProgressBar Viewstyle=”@android:style/Widget.ProgressBar.Horizontal” />
// Paraqite horizontalisht progressbarin
handler.post(new Runnable() {
public void run() {
progressBar.setProgress(progressStatus);
}
});// Modifikoje progresbarrin
progressBar.setMax(200);// Me caktu rangun e progressbar-it
![Page 13: User Interface-UI (Pamja e aplikacionit)naserkastrati.weebly.com/uploads/3/8/8/3/38831473/... · Hyrje në UI Basic views —Views të zakonshme si TextView, EditText, dhe Button](https://reader036.vdocuments.mx/reader036/viewer/2022062402/5e9c290891173b06060e2fe6/html5/thumbnails/13.jpg)
AutoCompleteTextView ViewAutoCompleteTextView është e njëjtë me EditText (subclass e EditText) për dallim
nga EditText që parnon vetëm shënime, këtu paraqitet lista që përmban
kombinime që shënohen nga përdoruesi.
Ushtrimi detajon AutoCompleteTextView
<AutoCompleteTextView android:id="@+id/txtShtetet"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
String [] presidentet={"Ibrahim Rugova","Bujar Sejdiu", "Atifete Jahjaga","Salih
Berish","Bamir Topi","Bujar Elshani"};
ArrayAdapter<String> adapter=new ArrayAdapter<String>(this,
android.R.layout.simple_dropdown_item_1line, presidentet);
AutoCompleteTextView
textView=(AutoCompleteTextView)findViewById(R.id.txtShtetet);
textView.setThreshold(3);
textView.setAdapter(adapter);
![Page 14: User Interface-UI (Pamja e aplikacionit)naserkastrati.weebly.com/uploads/3/8/8/3/38831473/... · Hyrje në UI Basic views —Views të zakonshme si TextView, EditText, dhe Button](https://reader036.vdocuments.mx/reader036/viewer/2022062402/5e9c290891173b06060e2fe6/html5/thumbnails/14.jpg)
PICKER VIEWS - TimePicker ViewZgjedhja e dates dhe kohës që zakonisht kërkohet në app, në Android kemi
TimePicker dhe DatePicker views.
TimePicker view mundëson zgjedhjen e kohës të ditës 24-hour ose AM/PM
Ushtrimi për detajon TimePicker view.
<TimePicker android:id="@+id/timePicker"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
timePicker=(TimePicker)findViewById(R.id.timePicker);
timePicker.setIs24HourView(true);
public void onClick(View view)
{
Toast.makeText(getBaseContext(), "Koha e zgjedhur është " +
timePicker.getCurrentHour() + ":" + timePicker.getCurrentMinute(),
Toast.LENGTH_SHORT).show();
}
![Page 15: User Interface-UI (Pamja e aplikacionit)naserkastrati.weebly.com/uploads/3/8/8/3/38831473/... · Hyrje në UI Basic views —Views të zakonshme si TextView, EditText, dhe Button](https://reader036.vdocuments.mx/reader036/viewer/2022062402/5e9c290891173b06060e2fe6/html5/thumbnails/15.jpg)
Dialog për paraqitjen e TimePicker ViewSi TimePicker edhe DatePicker i ofron përdoruesit të mund të zgjedh datën.
//Kur thirret show Dialog metoda thirr onCreateDialog
protected Dialog onCreateDialog(int id)
{ switch (id) {
case TIME_DIALOG_ID:
return new TimePickerDialog(this, mTimeSetListener,
hour, minute, false);}
return null;
}
Kur zgjedhim butonin Set
private TimePickerDialog.OnTimeSetListener mTimeSetListener =
new TimePickerDialog.OnTimeSetListener()
{
public void onTimeSet(TimePicker view, int hourOfDay, int minuteOfHour)
{
hour = hourOfDay; minute = minuteOfHour;
SimpleDateFormat timeFormat = new SimpleDateFormat(“hh:mm aa”);
Date date = new Date(0,0,0, hour, minute);
String strDate = timeFormat.format(date);
![Page 16: User Interface-UI (Pamja e aplikacionit)naserkastrati.weebly.com/uploads/3/8/8/3/38831473/... · Hyrje në UI Basic views —Views të zakonshme si TextView, EditText, dhe Button](https://reader036.vdocuments.mx/reader036/viewer/2022062402/5e9c290891173b06060e2fe6/html5/thumbnails/16.jpg)
DatePicker ViewParaqitja e TimePicker View si Dialog Dritare.
Ushtrimi për detajon DatePicker view.
"Data e zgjedhur është " + datePicker.getDayOfMonth()
+ "/" + (datePicker.getMonth()+1) + "/" + datePicker.getYear()
Në dialog dritare
Calendar today = Calendar.getInstance();
yr = today.get(Calendar.YEAR);
month = today.get(Calendar.MONTH);
day = today.get(Calendar.DAY_OF_MONTH);
public void onDateSet(DatePicker view, int year, int monthOfYear, int dayOfMonth)
{yr = year; month = monthOfYear; day = dayOfMonth;
Toast.makeText(getBaseContext(),
“You have selected : “ + (month + 1) +
“/” + day + “/” + year,
Toast.LENGTH_SHORT).show();
}
![Page 17: User Interface-UI (Pamja e aplikacionit)naserkastrati.weebly.com/uploads/3/8/8/3/38831473/... · Hyrje në UI Basic views —Views të zakonshme si TextView, EditText, dhe Button](https://reader036.vdocuments.mx/reader036/viewer/2022062402/5e9c290891173b06060e2fe6/html5/thumbnails/17.jpg)
LIST VIEWS për paraqitjen e item në listList views janë pamje(views) që mundësojn paraqitjen e itemave në listë.
Në Android, kemi : ListView and SpinnerView.
ListView View - ListView paraqet një listë të itemave vertikalisht në scrolling list.
Ushtrimi për detajon ListView.
setListAdapter(new ArrayAdapter<String>(this,
android.R.layout.simple_list_item_1, presidents));//mbushe listen me
public void onListItemClick( ListView parent, View v, int position, long id)
{
Toast.makeText(this, “You have selected “ + presidents[position],Toast.LENGTH_SHORT).show();
}
![Page 18: User Interface-UI (Pamja e aplikacionit)naserkastrati.weebly.com/uploads/3/8/8/3/38831473/... · Hyrje në UI Basic views —Views të zakonshme si TextView, EditText, dhe Button](https://reader036.vdocuments.mx/reader036/viewer/2022062402/5e9c290891173b06060e2fe6/html5/thumbnails/18.jpg)
Kostumizimi the ListViewNë ushtrimin në vijim do të tregojmë se si mund të zgjedhën shumë itema në
ListView dhe si mundësohet filtrimi.
ListView lstView = getListView();
//lstView.setChoiceMode(ListView.CHOICE_MODE_NONE);
//lstView.setChoiceMode(ListView.CHOICE_MODE_SINGLE);
lstView.setChoiceMode(ListView.CHOICE_MODE_MULTIPLE);
lstView.setTextFilterEnabled(true);
![Page 19: User Interface-UI (Pamja e aplikacionit)naserkastrati.weebly.com/uploads/3/8/8/3/38831473/... · Hyrje në UI Basic views —Views të zakonshme si TextView, EditText, dhe Button](https://reader036.vdocuments.mx/reader036/viewer/2022062402/5e9c290891173b06060e2fe6/html5/thumbnails/19.jpg)
Ruajtja e Itemave në strings.xml FileNë ushtrimin në vijim do të tregojmë se si mund të ruajmë shënimet në xml pastaj të i
përdorim në aktivitet për mbushjen e listës.
<string-array name="presidentet_array">
<item>Ibrahim Rugova</item>
<item>Bujar Sejdiu</item>
<item>Atifete Jahjaga</item>
<item>Salih Berish</item>
<item>Bamir Topi</item>
<item>Bujar Elshani</item>
</string-array>
presidentet=getResources().getStringArray(R.array.presidentet_array);
![Page 20: User Interface-UI (Pamja e aplikacionit)naserkastrati.weebly.com/uploads/3/8/8/3/38831473/... · Hyrje në UI Basic views —Views të zakonshme si TextView, EditText, dhe Button](https://reader036.vdocuments.mx/reader036/viewer/2022062402/5e9c290891173b06060e2fe6/html5/thumbnails/20.jpg)
Kontrollimi i Itemave që janë të zgjedhur<Button android:id="@+id/btn"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Trego Itemat e zgjedhur"
android:onClick="onClick"/>
<ListView android:id="@+id/android:list"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
public void onClick(View view)
{ ListView lstView = getListView();
String itemsSelected = "Itemat e zgjedhur: \n";
for (int i=0; i<lstView.getCount(); i++)
{
if (lstView.isItemChecked(i)) {
itemsSelected += lstView.getItemAtPosition(i) + "\n";
}
}
Toast.makeText(this, itemsSelected, Toast.LENGTH_LONG).show();
}
![Page 21: User Interface-UI (Pamja e aplikacionit)naserkastrati.weebly.com/uploads/3/8/8/3/38831473/... · Hyrje në UI Basic views —Views të zakonshme si TextView, EditText, dhe Button](https://reader036.vdocuments.mx/reader036/viewer/2022062402/5e9c290891173b06060e2fe6/html5/thumbnails/21.jpg)
Përdorimi i SpinnerViewListView paraqet list të itemave në një aktivitet , por shpesh ju duhet hapësirë për
të vendosur view të tjera në dritare, për këtë nuk mund të përdorim ListView. Në
kësi raste përdorim SpinnerView.
Ushtrimi për detajon SpinnerView.
<Spinner
android:id="@+id/spinner1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawSelectorOnTop="true"
/>
Spinner s1 = (Spinner) findViewById(R.id.spinner1);
ArrayAdapter<String> adapter = new ArrayAdapter<String>
(this, android.R.layout.simple_spinner_item, presidents);
s1.setAdapter(adapter);
s1.setOnItemSelectedListener(new OnItemSelectedListener()
![Page 22: User Interface-UI (Pamja e aplikacionit)naserkastrati.weebly.com/uploads/3/8/8/3/38831473/... · Hyrje në UI Basic views —Views të zakonshme si TextView, EditText, dhe Button](https://reader036.vdocuments.mx/reader036/viewer/2022062402/5e9c290891173b06060e2fe6/html5/thumbnails/22.jpg)
Kuptimi i fragmenteve të spec.Si kemi përmendur fragmentet janë “mini-activitiete” që kanë jetën e vetë, nevoitet
të kenë një class që zgjeron klasën bazë Fragment.
Përveç klasës bazë të Fragmenteve, mund të zgjerohen të tjera subclasses për të
krijuar fragmente të specializuara.
Në vijim do të përshkruajm tre subclasses të Fragment:
• ListFragment, DialogFragment, and PreferenceFragment.
ListFragment.
Një list fragment është një fragment që përmban një ListView, bënë paraqitjen e një
liste të itemave nga data source si array, xml fajl,etj.
Një list fragment është i përdorshme si : Fragmenti i parë përmban list të itemave
pasi të zgjidhet një item atëhet në fragmentin tjeter na hapet detajet rrefh itemit që
kemi zgjedhur.
Ushtrimi për detajon ListFragment.
![Page 23: User Interface-UI (Pamja e aplikacionit)naserkastrati.weebly.com/uploads/3/8/8/3/38831473/... · Hyrje në UI Basic views —Views të zakonshme si TextView, EditText, dhe Button](https://reader036.vdocuments.mx/reader036/viewer/2022062402/5e9c290891173b06060e2fe6/html5/thumbnails/23.jpg)
ListFragmnet<?xml version=”1.0” encoding=”utf-8”?>
<LinearLayout xmlns:android=”http://schemas.android.com/apk/res/android”
android:orientation=”vertical”
android:layout_width=”fill_parent”
android:layout_height=”fill_parent”>
<ListView android:id=”@id/android:list”
android:layout_width=”match_parent”
android:layout_height=”match_parent”
android:layout_weight=”1”
android:drawSelectorOnTop=”false”/>
</LinearLayout>
public class Fragment1 extends ListFragment {
<fragment
android:name=”net.learn2develop.ListFragmentExample.Fragment1”
android:id=”@+id/fragment1”
android:layout_weight=”0.5”
android:layout_width=”0dp”
android:layout_height=”200dp” />
![Page 24: User Interface-UI (Pamja e aplikacionit)naserkastrati.weebly.com/uploads/3/8/8/3/38831473/... · Hyrje në UI Basic views —Views të zakonshme si TextView, EditText, dhe Button](https://reader036.vdocuments.mx/reader036/viewer/2022062402/5e9c290891173b06060e2fe6/html5/thumbnails/24.jpg)
DialogFragmentLloj tjeter i fragmenteve është dialog fragment. Një dialog fragment hapet lartë në
aktivitetit dhe paraqet shënimet. Përdorët kur dëshirojmë që përdoruesit ti ofrohet
mundësi shënimi/zgjedhje para se të ekzekutohet kodi.
Për krijimi e dialog fragment, duhet të zgjerohet klasa bazë DialogFragment.
Ushtrimi për detajon DialogFragment.
![Page 25: User Interface-UI (Pamja e aplikacionit)naserkastrati.weebly.com/uploads/3/8/8/3/38831473/... · Hyrje në UI Basic views —Views të zakonshme si TextView, EditText, dhe Button](https://reader036.vdocuments.mx/reader036/viewer/2022062402/5e9c290891173b06060e2fe6/html5/thumbnails/25.jpg)
PreferenceFragmentLloj tjeter i fragmenteve është dialog fragment. Një dialog fragment hapet lartë në
aktivitetit dhe paraqet shënimet. Përdorët kur dëshirojmë që përdoruesit ti ofrohet
mundësi shënimi/zgjedhje para se të ekzekutohet kodi.
Për krijimi e dialog fragment, duhet të zgjerohet klasa bazë DialogFragment.
Ushtrimi për detajon DialogFragment.
![Page 26: User Interface-UI (Pamja e aplikacionit)naserkastrati.weebly.com/uploads/3/8/8/3/38831473/... · Hyrje në UI Basic views —Views të zakonshme si TextView, EditText, dhe Button](https://reader036.vdocuments.mx/reader036/viewer/2022062402/5e9c290891173b06060e2fe6/html5/thumbnails/26.jpg)
Pyetje
• Si të kemi rezultatin në programim nëse RadioButton është
zgjedhur?
• Hsi të qasemi në string resource në strings.xml fajll?
• Shëno kodin që ka datën aktuale.
• Trego tre fragmentet e spec. dhe përshkruaj secilin prej tyre
![Page 27: User Interface-UI (Pamja e aplikacionit)naserkastrati.weebly.com/uploads/3/8/8/3/38831473/... · Hyrje në UI Basic views —Views të zakonshme si TextView, EditText, dhe Button](https://reader036.vdocuments.mx/reader036/viewer/2022062402/5e9c290891173b06060e2fe6/html5/thumbnails/27.jpg)
Fundi
• Pyetje?