Sunday, October 12, 2014

Add and Remove view dynamically, keep views after orientation changed

Refer to my old example "Add and Remove view dynamically", the new views will be clean after orientation change. This post show how to save and restory data in onSaveInstanceState() and onRestoreInstanceState() to keep the views.


MainActivity.java
package com.example.androiddynamicview;

import java.util.ArrayList;
import android.support.v7.app.ActionBarActivity;
import android.content.Context;
import android.os.Bundle;
import android.util.Log;
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;

public class MainActivity extends ActionBarActivity {

 EditText textIn;
 Button buttonAdd;
 LinearLayout container;
 ArrayList<CharSequence> itemList;
 
 String TAG = "AndroidDynamicView";

 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main);
  
  Log.i(TAG, "onCreate()");

  textIn = (EditText) findViewById(R.id.textin);
  buttonAdd = (Button) findViewById(R.id.add);
  container = (LinearLayout) findViewById(R.id.container);
  
  itemList = new ArrayList<CharSequence>();

  buttonAdd.setOnClickListener(new OnClickListener() {

   @Override
   public void onClick(View arg0) {
    
    addNewView(textIn.getText().toString());

   }
  });
 }

 @Override
 protected void onSaveInstanceState(Bundle outState) {
  // TODO Auto-generated method stub
  super.onSaveInstanceState(outState);
  
  Log.i(TAG, "onSaveInstanceState()");
  
  outState.putCharSequenceArrayList("KEY_ITEMS", itemList);
  
 }

 @Override
 protected void onRestoreInstanceState(Bundle savedInstanceState) {
  // TODO Auto-generated method stub
  super.onRestoreInstanceState(savedInstanceState);
  
  Log.i(TAG, "onRestoreInstanceState()");
  
  ArrayList<CharSequence> savedItemList = savedInstanceState.getCharSequenceArrayList("KEY_ITEMS");
  if(savedItemList != null){
   for(CharSequence s : savedItemList){
    addNewView(s);
    
   }
  }
 }

 private void addNewView(final CharSequence newText){
  LayoutInflater layoutInflater = (LayoutInflater) getBaseContext()
    .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
  final View newView = layoutInflater.inflate(R.layout.row, null);
  TextView textOut = (TextView) newView
    .findViewById(R.id.textout);
  textOut.setText(newText);
  Button buttonRemove = (Button) newView
    .findViewById(R.id.remove);
  buttonRemove.setOnClickListener(new OnClickListener() {

   @Override
   public void onClick(View v) {
    ((LinearLayout) newView.getParent())
      .removeView(newView);
    itemList.remove(newText);
   }
  });

  container.addView(newView);
  itemList.add(newText);
 }

}

/res/layout/activity_main.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="com.example.androiddynamicview.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>

    <LinearLayout
        android:id="@+id/container"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical" >
    </LinearLayout>

</LinearLayout>

/res/layout/row.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" >

    <Button
        android:id="@+id/remove"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:text="Remove" />

    <TextView
        android:id="@+id/textout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_toLeftOf="@id/remove" />

</RelativeLayout>


download filesDownload the files.

1 comment:

Matt said...

Hello,

I got question. You have done great job. I was trying to work with your code and got some success but I can't figure it out how to do this for multiple text view to look like:



what I was able to achieve is after rotation of screen: