Android-View Elements

TextView: It is used to display text on the screen, and it is a very important UI element for Android.

<TextView
    android:layout_width="wrap_content"
    android:textSize="10dp"
    android:textAlignment="center"
    android:textStyle="bold"
    android:textColor="@color/black"
    android:layout_height="wrap_content"
    android:text="Hello World!"
    />

EditText: Allows the user to enter and edit text.

<EditText
    android:layout_width="match_parent"
    android:id="@+id/login"
    android:hint="Id"
    android:layout_height="wrap_content"/>

Button: It is used to perform some action on click.


<Button
    android:id="@+id/button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="#4CAF50"
    android:paddingStart="10dp"
    android:paddingEnd="10dp"
    android:text="Button"
    android:textColor="@android:color/background_light"
    android:textSize="24sp"
    />

ImageView: It displays any kind of image from Bitmap or Drawable, add your image in the drawable or mipmap and use it.

<ImageView
    android:id="@+id/image"
    android:layout_width="wrap_content"
    android:src="@mipmap/ic_launcher"
    android:layout_height="wrap_content"/>

<ImageView
    android:id="@+id/image1"
    android:layout_width="wrap_content"
    android:src="@drawable/ic_launcher_background"
    android:layout_height="wrap_content"/>

ProgressBar: Shows the progress of an ongoing task.

<ProgressBar
    android:layout_width="wrap_content"
    android:id="@+id/progress_bar"
    style="?android:attr/progressBarStyleHorizontal"
    android:layout_height="wrap_content"/>

CheckBox: It is mostly used where the user can select one or more than one option from the given list option.

Here is the .xml code for the checkbox,


<CheckBox
    android:id="@+id/check_one"
    android:layout_width="match_parent"
    android:text="one"
    android:layout_marginTop="16dp"
    android:layout_height="wrap_content"/>
 <CheckBox
     android:id="@+id/check_two"
     android:layout_width="match_parent"
     android:text="two"
     android:layout_marginTop="16dp"
     android:layout_height="wrap_content"/>
 <CheckBox
     android:id="@+id/check_three"
     android:layout_width="match_parent"
     android:text="Three"
     android:layout_marginTop="16dp"
     android:layout_height="wrap_content"/>

Now the how to call checkbox class,

package com.example.loginretrofit;
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.CheckBox;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

    CheckBox check1, check2, check3;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        check1=(CheckBox)findViewById(R.id.check_one);
        check2=(CheckBox)findViewById(R.id.check_two);
        check3=(CheckBox)findViewById(R.id.check_three);
    }
    
    //call on the click on button
    public void Check(View v){
        if(check1.isChecked())
            Toast.makeText(this, "one", Toast.LENGTH_SHORT).show();
        if(check2.isChecked())
            Toast.makeText(this, "two", Toast.LENGTH_SHORT).show();
        if(check3.isChecked())
            Toast.makeText(this, "three", Toast.LENGTH_SHORT).show();
    }

}

RadioButton: It is used when the user can choose only one option from a group and compulsory needs to choose one option.

Here the .xml code, in the xml file under a layout user has write the following code,

<RadioGroup
    android:id="@+id/radioGroup"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <RadioButton
        android:id="@+id/radioButton1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Option 1" />

    <RadioButton
        android:id="@+id/radioButton2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Option 2" />

    <RadioButton
        android:id="@+id/radioButton3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Option 3" />
</RadioGroup>

After that call the RadioGroup and RadioButton in the MainActivity.java and perform the action on the button.

package com.example.loginretrofit;
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.RadioButton;
import android.widget.RadioGroup;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

    private RadioGroup radioGroup;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        radioGroup = findViewById(R.id.radioGroup);
        radioGroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(RadioGroup group, int checkedId) {
                RadioButton radioButton = group.findViewById(checkedId);
                if (radioButton != null) {
                    String selectedOption = radioButton.getText().toString();
                    Toast.makeText(MainActivity.this, "Selected: " + selectedOption, Toast.LENGTH_SHORT).show();
                }
            }
        });
    }

}

ToggleButton: It is an on/off button it displays the current state of ToggleButton.

<ToggleButton
    android:id="@+id/toggleButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerHorizontal="true"
    android:layout_centerVertical="true"
    android:onClick="onToggleClick"
    />

Here is How to perform on click on ToggleButton,

package com.example.loginretrofit;
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Toast;
import android.widget.ToggleButton;

public class MainActivity extends AppCompatActivity {

    ToggleButton togglebutton;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        togglebutton = (ToggleButton)findViewById(R.id.toggleButton);
    }
    public void onToggleClick(View view)
    {
        if (togglebutton.isChecked()) {
            Toast.makeText(this, "Toggle is ON", Toast.LENGTH_SHORT).show();
        }
        else {
            Toast.makeText(this, "Toggle is OFF", Toast.LENGTH_SHORT).show();
        }
    }
}

Switch: Represents a two-state operation switch (on or off).


<Switch
    android:id="@+id/idSwitch"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerInParent="true"
    android:layout_margin="10dp" />

In this here check the status of the switch and add a check change listener, in the MainActivity.java,

public class MainActivity extends AppCompatActivity {

    private Switch switchView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        switchView = findViewById(R.id.idSwitch);

        //here the we check is the status
        if (switchView.isChecked()) {
            Toast.makeText(MainActivity.this, "Switch is Checked", Toast.LENGTH_SHORT).show();
        } else {
            Toast.makeText(MainActivity.this, "Switch is UnChecked", Toast.LENGTH_SHORT).show();
        }

        //here we are add check change listener
        switchView.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
                if (isChecked) {
                    Toast.makeText(MainActivity.this, "Switch is Checked", Toast.LENGTH_SHORT).show();
                } else {
                    Toast.makeText(MainActivity.this, "Switch is UnChecked", Toast.LENGTH_SHORT).show();
                }
            }
        });
    }
}

Spinner: Displays a dropdown list of options, this is the easy way of show of the list.

<Spinner
    android:id="@+id/spinner"
    android:layout_height="50dp"
    android:layout_width="160dp"
    android:layout_marginEnd="10dp"
    android:layout_marginStart="10dp"
    android:layout_marginBottom="10dp"
    android:layout_marginTop="10dp"
   />

Here in the Main Activity implements Adapter view, Array adapter used for the bind data to the spinner.


package com.example.loginretrofit;
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.Spinner;
import android.widget.Toast;


public class MainActivity extends AppCompatActivity implements AdapterView.OnItemClickListener {

    String[] numbers = { "one", "two", "three", "four", "five", "Six" };

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Spinner spin = findViewById(R.id.spinner);
        spin.setOnItemSelectedListener((AdapterView.OnItemSelectedListener) this);

        //Create the instance of ArrayAdapter
        ArrayAdapter adapter = new ArrayAdapter(this, android.R.layout.simple_spinner_item,numbers);
        adapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);

        //set adapter
        spin.setAdapter(adapter);

    }

    @Override
    public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
        Toast.makeText(getApplicationContext(), numbers[position], Toast.LENGTH_LONG).show();
    }
}

CardView: It is a flexible and adjustable container for showing data or material in a card-like style offered by the UI component CardView. It is a component of the AndroidX framework and is frequently used to design cards that look uniformly good on all devices.

Firstly user has added to add card dependency in the build.gradle file,

implementation 'androidx.cardview:cardview:1.0.0'

Some common attributes include:

cardElevation
cardCornerRadius
cardBackgroundColor
cardUseCompatPadding

Add desired content in the CardView like textviews, imageviews, etc.

<androidx.cardview.widget.CardView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:cardElevation="4dp"
    app:cardCornerRadius="8dp">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:src="@drawable/ic_launcher_background"
        android:scaleType="centerCrop" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Card Title"
        android:textSize="16sp"
        android:textColor="@color/black"
        android:padding="8dp" />

</androidx.cardview.widget.CardView>

DatePicker: DatePicker is used to select dates by day, month, and year in the Android app. The Date picker has two modes, first to show the complete calendar and second to show the date in spinner mode.

This is used when the user wants a calendar,

<DatePicker
    android:id="@+id/datePicker"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:datePickerMode="calendar"/>

This is used when the user wants date in spinner mode,

<DatePicker
    android:id="@+id/datePicker1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:datePickerMode="spinner"
    android:calendarViewShown="false"/>

TimePicker: Allows the user to select a time by hour and minute.

Here is the .xml code:

<TimePicker
    android:id="@+id/timePicker"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_above="@+id/textView1"
    android:layout_centerHorizontal="true"
    android:layout_marginBottom="36dp" />

<Button
    android:id="@+id/button1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginBottom="20dp"
    android:text="Change Time" />

In the .java file code for the time picker:


public class MainActivity extends AppCompatActivity  {
    TimePicker timepicker;
    Button changetime;


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        timepicker=(TimePicker)findViewById(R.id.timePicker);

        //code for 24 hour view
        timepicker.setIs24HourView(true);
        changetime=(Button)findViewById(R.id.button1);
        changetime.setOnClickListener(new View.OnClickListener(){
            @Override
            public void onClick(View view) {
                Toast.makeText(MainActivity.this, getCurrentTime(), Toast.LENGTH_SHORT).show();

            }
        });
    }

    public String getCurrentTime(){
        String currentTime="Current Time: "+timepicker.getCurrentHour()+":"+timepicker.getCurrentMinute();
        return currentTime;
    }
}

SeekBar: It is a kind of ProgressBar represents a slider that allows selecting a value from a range.

Define these line codes under the .xml file,

<SeekBar
    android:id="@+id/seekBar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginEnd="8dp"
    android:layout_marginStart="8dp"
    android:layout_marginTop="372dp"
   />

Now here how to perform seekbar event,

package com.example.loginretrofit;
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.SeekBar;
import android.widget.Toast;


public class MainActivity extends AppCompatActivity  {

    SeekBar seekBar;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        seekBar=(SeekBar)findViewById(R.id.seekBar);
        seekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
            @Override
            public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
                Toast.makeText(MainActivity.this, "progress", Toast.LENGTH_SHORT).show();
            }

            @Override
            public void onStartTrackingTouch(SeekBar seekBar) {
                Toast.makeText(MainActivity.this, "start", Toast.LENGTH_SHORT).show();
            }

            @Override
            public void onStopTrackingTouch(SeekBar seekBar) {
                Toast.makeText(MainActivity.this, "stop", Toast.LENGTH_SHORT).show();
            }
        });

    }

}

RatingBar: Shows a rating indicator, normally represented as a star.

Code for .xml,

<RatingBar
    android:id="@+id/ratingBar"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginLeft="72dp"
    android:layout_marginTop="60dp" />

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="submit"
    android:id="@+id/btn"/>

Code for rating the user:

package com.example.loginretrofit;
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.RatingBar;
import android.widget.Toast;


public class MainActivity extends AppCompatActivity  {

    RatingBar ratingbar;
    Button button;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        OnButtonClick();
    }
    public void OnButtonClick() {
        ratingbar = (RatingBar) findViewById(R.id.ratingBar);
        button = (Button) findViewById(R.id.btn);

        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View arg0) {
                //Getting the rating and displaying it on the toast
                String rating = String.valueOf(ratingbar.getRating());
                Toast.makeText(getApplicationContext(), rating, Toast.LENGTH_LONG).show();
            }

        });
    }
}

WebView: A view inside the application called WebView shows web pages.

Need to add permission under the AndroidManifest.xml for the access of internet.

<uses-permission android:name="android.permission.INTERNET" />

In the .xml file add these lines,

<WebView
    android:id="@+id/web"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:layout_editor_absoluteX="8dp"
    tools:layout_editor_absoluteY="8dp" />

In the .java file:

package com.example.loginretrofit;
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.webkit.WebView;
import android.webkit.WebViewClient;


public class MainActivity extends AppCompatActivity  {

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

        WebView webView = findViewById(R.id.web);

        // loading url in the WebView.
        webView.loadUrl("https://www.google.org");
        webView.getSettings().setJavaScriptEnabled(true);

        // onPageFinished and override Url loading.

        webView.setWebViewClient(new WebViewClient());
    }
}

Android-View Elements

You may also like...

Android Tutorials