Design Effective Android App UI – Tip 1

Design Effective Android App UI

Previously we have seen how we can transfer data between activities with the help of putExtra() and getStringExtra() methods. If not then please go through that article to know about them. In this article I have discussed one tip to Design Effective Android App UI. Till now we have design few applications or if anyone have designed by themself you might have note that screen size is a constraint to display information that we want. We may have too much content to display to the user so we cut few of them out or we compromise in putting less functionality for end user. What will happen then, the overall idea of an application might be gets affected. Use of horizontal or vertical scroll view can resolve our problem regarding that one but there is another alteration which we can use.

What we can do, we can get full benefit of VISIBILITY property of a particular View. So what’s the visibility property do? By giving proper value of visibility property of a view we can make use of display screen very well.

Visibility property can have one of three values Gone, Visible & Invisible.

  • Gone: View will stay hidden to users and also not occupy screen space. Benefit of it is other view element can occupy that space.
  • Visible: View will be stay visible to users or you can say it is default property value for views.
  • Invisible: View will stay hidden to users but it will occupy screen space for itself. Major drawback is, it consume the space still after being invisible from the screen.

So this is all about the Visibility property. Let’s understand it practically.

Create new android application by giving proper Name and other parameters. Make sure you will have Linear Layout as root element for the created default activity. I will tell you ‘why we require linear layout’ later at the end of this article. Now put one Spinner at top of the activity. Below that put three different RadioGroups and assign different item names to each RadioGroup by a different category. For example: (Name of Animals, Name of Birds and name of Insects) or (Shapes, Colors, Size). Now create a String Array in strings.xml file with three item values. Item name will be your given category name like, Animals, Birds, Insects. Now right click on the spinner in the layout of activity and select assign entries. Inside the pop window select String Array that we have just created. That will display item values from array of our created values.

Next, make sure you have assigned IDs to each and every view of an activity. So your files will be like as shown in below code snippets.

activity.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <Spinner
        android:id="@+id/spinner1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:entries="@array/Catogories" />

    <RadioGroup
        android:id="@+id/rg1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" 
        android:visibility="gone"
        android:gravity="center">

        <RadioButton
            android:id="@+id/rg1item1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:checked="true"
            android:text="@string/animal_Item_1" />

        <RadioButton
            android:id="@+id/rg1Item2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/animal_Item_2" />

        <RadioButton
            android:id="@+id/rg1item3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/animal_Item_3" />
    </RadioGroup>

    <RadioGroup
        android:id="@+id/rag2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:visibility="gone" >

        <RadioButton
            android:id="@+id/rg2item1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:checked="true"
            android:text="@string/bird_Item_1" />

        <RadioButton
            android:id="@+id/rg2item2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/bird_Item_2" />

        <RadioButton
            android:id="@+id/rg2item3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/bird_Item_3" />
    </RadioGroup>

    <RadioGroup
        android:id="@+id/rg3"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:visibility="gone" >

        <RadioButton
            android:id="@+id/rg3item1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:checked="true"
            android:text="@string/insect_Item_1" />

        <RadioButton
            android:id="@+id/rg3item2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/insect_Item_2" />

        <RadioButton
            android:id="@+id/rg3item3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/insect_Item_3" />
    </RadioGroup>

</LinearLayout>

strings.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>

        <string name="animal_Item_1">Tiger</string>
        <string name="animal_Item_2">Lion</string>
        <string name="animal_Item_3">Lapourd</string>

        <string name="bird_Item_1">Sparrow</string>
        <string name="bird_Item_2">Pegion</string>
        <string name="bird_Item_3">Parrot</string>
        
        <string name="insect_Item_1">Beetle</string>
        <string name="insect_Item_2">Ant</string>
        <string name="insect_Item_3">Bee</string>
        <string-array name="Catogories">
            <item >Animal</item>
            <item >Birds</item>
            <item >Insects</item>
        </string-array>
        
</resources>

Now as you have noted or not, we have to add a property VISIBILITY to three radio groups. Give that property and set its value as GONE. You can see in code snippet above and as you make that change you can see the effect on the emulator.

Now, Inside the MainActivity.java file, declare and create objects of each view elements Spinner and three RadioGroups. Now register a setOnItemSelectedListeneron spinner object and overrides onItemSelected method as shown in code snippet below.

Activity.java

package com.purvik.sol1;

import java.text.BreakIterator;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.AdapterView.OnItemSelectedListener;
import android.widget.ArrayAdapter;
import android.widget.RadioGroup;
import android.widget.Spinner;
import android.widget.Toast;

public class SecAct extends Activity {
    
    Spinner catSpinner;
	RadioGroup rg1, rg2, rg3;
	
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		// TODO Auto-generated method stub
		super.onCreate(savedInstanceState);
	setContentView(R.layout.second_act);
	
	catSpinner = (Spinner)findViewById(R.id.spinner1);
	rg1 = (RadioGroup)findViewById(R.id.rg1);
	rg2 = (RadioGroup)findViewById(R.id.rag2);
	rg3 = (RadioGroup)findViewById(R.id.rg3);
	
	catSpinner.setOnItemSelectedListener(new OnItemSelectedListener() {

		@Override
		public void onItemSelected(AdapterView<?> parent, View view,
				int position, long id) {
			// TODO Auto-generated method stub
			rg1.setVisibility(View.GONE);
			rg2.setVisibility(View.GONE);
			rg3.setVisibility(View.GONE);
			
			Toast.makeText(getApplicationContext(), "Position:" + position, Toast.LENGTH_LONG).show();
			
			if(position == 0)
				rg1.setVisibility(View.VISIBLE);
			else if( position == 1)
				rg2.setVisibility(View.VISIBLE);
			else if(position == 2)
				rg3.setVisibility(View.VISIBLE);
			else
				;	
		}

		@Override
		public void onNothingSelected(AdapterView<?> parent) {
			// TODO Auto-generated method stub
		}
	});
	}
}

The method will get the position of item the user will select. The value of position we will use to implement nested if else structure. What we have to do in that method that, If user have selected first item (i.e Animals) we will set Visibility property of Animals RadioGroup to Visible. If user selects Birds, set Visibility property of Birds RadioGroup to Visible. Do same for the last one. So what happen, at start up none of RadioGroup items is visible to the user but only after selection of a Category from Spinner will display choices to the user. Additional thing we have to add is that we have set Visibility of each RadioGroup to GONE at starting of our onItemSelected method. Why, for the answer run your application on the emulator you will get the difference.

Now if we choose Relative Layout instead of LinearLayout, view elements will take their position relative to each another. Now if we make visibility of any view to GONE, view elements relate to that view will not get their position according to as specified in layout XML file. No matter we can use relative layout to save screen space but it requires a lot more parameter settings. That’s why I told you to do so. Check application screen shot below.

Screen Shots:

Design Effective Android App UI

Home Screen

Design Effective Android App UI

Category Selection

Design Effective Android App UI

Category Selection

Design Effective Android App UI

Category Selection

So, that’s all in this article about Saving Screen Space for an effective UI design.

“Bless for you, Peace for the World” – Purvik Rana

Leave a Reply

Your email address will not be published. Required fields are marked *