Showing posts with label Android code sample: Layout. Show all posts
Showing posts with label Android code sample: Layout. Show all posts

Tuesday, July 19, 2016

android:gravity vs android:layout_gravity


This simple example show how android:gravity and android:layout_gravity affect the placement.


<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="16dp"
    android:orientation="vertical"
    tools:context="com.blogspot.android_er.androidgravity.MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="20dp"
        android:layout_gravity="center_horizontal"
        android:autoLink="web"
        android:text="http://android-er.blogspot.com/"
        android:textStyle="bold"/>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_margin="10dp"
        android:background="#D00000">
        <TextView
            android:layout_width="match_parent"
            android:layout_height="200sp"
            android:layout_margin="10dp"
            android:gravity="center"
            android:layout_gravity="center"
            android:background="#0000C0"
            android:textSize="28sp"
            android:textStyle="bold"
            android:text="android-er"/>
    </LinearLayout>
</LinearLayout>


Friday, September 5, 2014

Make square shaped layout, equal width and height

To make a layout in square shape, with equal width and height, we can re-assign LayoutParams.width and height of our layout in OnGlobalLayoutListener.

like this:
  myGridLayout.getViewTreeObserver().addOnGlobalLayoutListener(
   new OnGlobalLayoutListener(){

   @Override
   public void onGlobalLayout() {
    
    int pLength;
    int pWidth = myGridLayout.getWidth();
    int pHeight = myGridLayout.getHeight();
    
    //Set myGridLayout equal width and height
    if(pWidth>=pHeight){
     pLength = pHeight;
    }else{
     pLength = pWidth;
    }
    ViewGroup.LayoutParams pParams = myGridLayout.getLayoutParams();
    pParams.width = pLength;
    pParams.height = pLength;
    myGridLayout.setLayoutParams(pParams);
    
    //deprecated in API level 16
    myGridLayout.getViewTreeObserver().removeGlobalOnLayoutListener(this);
    //for API Level >= 16
    //myGridLayout.getViewTreeObserver().removeOnGlobalLayoutListener(this);
   }});


Update last exercise.

Modify activity_main.xml, to change 8x8 centered GridLayout
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.example.androidtouchview.MainActivity" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:autoLink="web"
        android:text="http://android-er.blogspot.com/"
        android:textStyle="bold" />

    <GridLayout
        android:id="@+id/mygrid"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal"
        android:columnCount="8"
        android:rowCount="8"
        android:layout_gravity="center"
        android:background="@android:color/background_light" >
    </GridLayout>

</LinearLayout>

Modify MainActivity.java
package com.example.androidtouchview;

import com.example.androidtouchview.MyView.OnToggledListener;

import android.support.v7.app.ActionBarActivity;
import android.view.ViewGroup;
import android.view.ViewTreeObserver.OnGlobalLayoutListener;
import android.widget.GridLayout;
import android.widget.Toast;
import android.os.Bundle;

public class MainActivity extends ActionBarActivity 
 implements OnToggledListener{
 
 int numberOfGlobalLayoutCalled = 0;
 
 MyView[] myViews;
 
 GridLayout myGridLayout;

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

  myGridLayout = (GridLayout)findViewById(R.id.mygrid);
  
  int numOfCol = myGridLayout.getColumnCount();
  int numOfRow = myGridLayout.getRowCount();
  myViews = new MyView[numOfCol*numOfRow];
  for(int yPos=0; yPos<numOfRow; yPos++){
   for(int xPos=0; xPos<numOfCol; xPos++){
    MyView tView = new MyView(this, xPos, yPos);
    tView.setOnToggledListener(this);
    myViews[yPos*numOfCol + xPos] = tView;
    myGridLayout.addView(tView);
   }
  }
  
  myGridLayout.getViewTreeObserver().addOnGlobalLayoutListener(
   new OnGlobalLayoutListener(){

   @Override
   public void onGlobalLayout() {
    
    int pLength;
    final int MARGIN = 5;
    
    int pWidth = myGridLayout.getWidth();
    int pHeight = myGridLayout.getHeight();
    int numOfCol = myGridLayout.getColumnCount();
    int numOfRow = myGridLayout.getRowCount();
    
    //Set myGridLayout equal width and height
    if(pWidth>=pHeight){
     pLength = pHeight;
    }else{
     pLength = pWidth;
    }
    ViewGroup.LayoutParams pParams = myGridLayout.getLayoutParams();
    pParams.width = pLength;
    pParams.height = pLength;
    myGridLayout.setLayoutParams(pParams);
    
    int w = pLength/numOfCol; //pWidth/numOfCol;
    int h = pLength/numOfRow; //pHeight/numOfRow;
    
    for(int yPos=0; yPos<numOfRow; yPos++){
     for(int xPos=0; xPos<numOfCol; xPos++){
      GridLayout.LayoutParams params = 
       (GridLayout.LayoutParams)myViews[yPos*numOfCol + xPos].getLayoutParams();
      params.width = w - 2*MARGIN;
      params.height = h - 2*MARGIN;
      params.setMargins(MARGIN, MARGIN, MARGIN, MARGIN);
      myViews[yPos*numOfCol + xPos].setLayoutParams(params);
     }
    }
    
    Toast.makeText(MainActivity.this, 
     "numberOfGlobalLayoutCalled = " + numberOfGlobalLayoutCalled, 
     Toast.LENGTH_SHORT).show();
    numberOfGlobalLayoutCalled++;
    
    //deprecated in API level 16
    myGridLayout.getViewTreeObserver().removeGlobalOnLayoutListener(this);
    //for API Level >= 16
    //myGridLayout.getViewTreeObserver().removeOnGlobalLayoutListener(this);
   }});
 }

 @Override
 public void OnToggled(MyView v, boolean touchOn) {

  //get the id string
  String idString = v.getIdX() + ":" + v.getIdY();

  Toast.makeText(MainActivity.this, 
   "Toogled:\n" +
   idString + "\n" +
   touchOn, 
   Toast.LENGTH_SHORT).show();
 }

}

Sunday, January 5, 2014

Get child view at run-time, using getChildCount() and getChildAt().

This exercise show how to retrieve child view at run time, using getChildCount() and getChildAt().

Last exercise show how to "Get text from dynamically added view" using button with OnClickListener to include text directly while creating and adding the view. In this exercise, we add a button, named "Show All", to retrieve all dynamic added view indirectly from their parent LinearLayout, container.

Get child view at run-time, using getChildCount() and getChildAt().
Get child view at run-time, using getChildCount() and getChildAt().

package com.example.androiddynamicview;

import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.EditText;
import android.widget.LinearLayout;
import android.widget.TextView;
import android.widget.Toast;
import android.animation.LayoutTransition;
import android.app.Activity;
import android.content.Context;

public class MainActivity extends Activity {
 
 EditText textIn;
 Button buttonAdd;
 LinearLayout container;
 Button buttonShowAll;

 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main);
  textIn = (EditText)findViewById(R.id.textin);
  buttonAdd = (Button)findViewById(R.id.add);
  container = (LinearLayout)findViewById(R.id.container);
  
  buttonAdd.setOnClickListener(new OnClickListener(){

   @Override
   public void onClick(View arg0) {
    LayoutInflater layoutInflater = 
      (LayoutInflater) getBaseContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE);
    final View addView = layoutInflater.inflate(R.layout.row, null);
    final TextView textOut = (TextView)addView.findViewById(R.id.textout);
    textOut.setText(textIn.getText().toString());
    Button buttonRemove = (Button)addView.findViewById(R.id.remove);
    buttonRemove.setOnClickListener(new OnClickListener(){

     @Override
     public void onClick(View v) {
      ((LinearLayout)addView.getParent()).removeView(addView);
     }});
    
    Button buttonInsert = (Button)addView.findViewById(R.id.insert);
    buttonInsert.setOnClickListener(new OnClickListener(){

     @Override
     public void onClick(View v) {
      String text = textOut.getText().toString();
      String newText = textIn.getText().toString() + text;
      textIn.setText(newText);
     }});
    
    container.addView(addView, 0);
   }});
  
  LayoutTransition transition = new LayoutTransition();
  container.setLayoutTransition(transition);
  
  buttonShowAll = (Button)findViewById(R.id.showall);
  buttonShowAll.setOnClickListener(new OnClickListener(){

   @Override
   public void onClick(View arg0) {
    
    String showallPrompt = "";

    int childCount = container.getChildCount();
    showallPrompt += "childCount: " + childCount + "\n\n";

    for(int c=0; c<childCount; c++){
     View childView = container.getChildAt(c);
     TextView childTextView = (TextView)(childView.findViewById(R.id.textout));
     String childTextViewText = (String)(childTextView.getText());
     
     showallPrompt += c + ": " + childTextViewText + "\n";
    }
    
    Toast.makeText(MainActivity.this, 
      showallPrompt, 
      Toast.LENGTH_LONG).show();
   }});
 }
}

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:orientation="vertical"
    tools:context=".MainActivity" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:autoLink="web"
        android:text="http://android-er.blogspot.com/"
        android:textStyle="bold" />
    
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <Button
            android:id="@+id/add"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:text="Add"/>
        <EditText
            android:id="@+id/textin"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_toLeftOf="@id/add"/>
    </RelativeLayout>
    <Button
        android:id="@+id/showall"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Show All" />
    <LinearLayout 
        android:id="@+id/container"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">
    </LinearLayout>

</LinearLayout>

The layout of the dynamic view, /res/layout/row.xml, refer last exercise.



download filesDownload the files.

Wednesday, January 1, 2014

Horizontal-Vertical scrollable view

By using and , we can make a layout scrollable horizontally and vertically.

Horizontal-Vertical scrollable view
Horizontal-Vertical scrollable view
Example XML:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:autoLink="web"
        android:text="http://android-er.blogspot.com/"
        android:textStyle="bold" />

    <HorizontalScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#ff0000"
        android:padding="5dp" >

        <ScrollView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#00ff00"
            android:padding="5dp" >

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                android:background="#909090" >

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="Horizontal-Vertical scroll view" />

                <LinearLayout
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:background="#d0d0d0"
                    android:orientation="horizontal"
                    android:padding="5dp" >

                    <ImageView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:background="#c0c0c0"
                        android:src="@drawable/ic_launcher" />

                    <ImageView
                        android:layout_width="400dp"
                        android:layout_height="wrap_content"
                        android:background="#b0b0b0"
                        android:src="@drawable/ic_launcher" />

                    <ImageView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:background="#a0a0a0"
                        android:src="@drawable/ic_launcher" />
                </LinearLayout>

                <ImageView
                    android:layout_width="400dp"
                    android:layout_height="400dp"
                    android:src="@drawable/ic_launcher" />

                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:src="@drawable/ic_launcher" />
                
                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:src="@drawable/ic_launcher" />
                
            </LinearLayout>
        </ScrollView>
    </HorizontalScrollView>

</LinearLayout>