Wednesday, 10 June 2015

User Interface with XML

Relative Layout

It displays child views in relative positions. The position of each view can be specified as 
relative to sibling elements (such as to the left-of or below another view) or in positions 
relative to the parent  RelativeLayout area (such as aligned to the bottom, left or center).

Positioning Views:

lets child views specify their position relative to the parent view or to each other (specified by ID).

Attribute:

android:layout_alignParentTop
If "true", makes the view match the top edge of the parent.

android:layout_centerVertical
If "true", centers this child vertically within its parent.

android:layout_below
Positions the top edge of this view below the view specified with a resource ID.

android:layout_toRightOf
Positions the left edge of this view to the right of the view specified with a resource ID.

Example: create new project

activity_main.xml:
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingLeft="16dp"
    android:paddingRight="16dp" >

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/imageView"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:src="@drawable/profile"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:text="Sex"
        android:id="@+id/textView"
        android:layout_below="@+id/imageView"
        android:layout_alignParentLeft="true"
        android:textColor="#000"
        android:layout_alignParentStart="true" />

    <RadioGroup
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/textView"
        android:layout_toRightOf="@+id/textView"
        android:layout_toEndOf="@+id/textView">

        <RadioButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Male"
            android:id="@+id/radioButton"
            android:checked="true" />
        <RadioButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Female"
            android:id="@+id/radioButton2"
            android:layout_below="@+id/radioButton"
            android:layout_alignParentLeft="true"
            android:checked="false" />

    </RadioGroup>

    <CheckBox
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Include My Number"
        android:id="@+id/checkBox"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Submit"
        android:id="@+id/button"
        android:layout_alignParentBottom="true"

        android:layout_alignParentRight="true"
        />
</RelativeLayout>


MainActivity.java
package com.relativelayout;
import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.Button;
import android.widget.CheckBox;
import android.widget.CompoundButton;
import android.widget.RadioButton;
import android.widget.RadioGroup;
import android.widget.Toast;


public class MainActivity extends ActionBarActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        RadioGroup radioGroup = (RadioGroup) findViewById(R.id.radiogroup);
        CheckBox checkBox = (CheckBox) findViewById(R.id.checkBox);
        Button submitBtn = (Button) findViewById(R.id.button);

        radioGroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {

            @Override
            public void onCheckedChanged(RadioGroup group, int checkedId) {
                RadioButton checkedRadioButton = (RadioButton) findViewById(checkedId);
                String text = checkedRadioButton.getText().toString();
                Toast.makeText(getApplicationContext(), text, Toast.LENGTH_SHORT).show();
            }
        });

        checkBox.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {

                                                @Override
                                                public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {

                                                    Toast.makeText(getApplicationContext(), "CheckBox selection: " + isChecked, Toast.LENGTH_SHORT).show();
                                                }
                                            }
        );

        submitBtn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(getApplicationContext(), "Record Submited Succesfully", Toast.LENGTH_SHORT).show();
            }
       });
    }
     @Override    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.menu, menu);
        return true;
    }
     @Override    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();
        //noinspection SimplifiableIfStatement        if (id == R.id.action_settings) {
            return true;
        }
       return super.onOptionsItemSelected(item);    }
}

Listener On RadioGroup:

RadioGroup.OnCheckedChangeListener: Interface definition for a callback to be invoked when the checked radio button changed in this group for more detail.

Listener On CheckBox:

CompoundButton.OnCheckedChangeListener: Interface definition for a callback to be invoked when the checked state of a compound button changed for more detail.

Result: run the application

No comments:

Post a Comment