Wednesday, May 16, 2018

Working with Images In Android


Working with Images



Images are used to make the user interface interactive and more user friendly. Images can be used with almost all the widgets like TextView, EditText, Buttons, ImageButtons etc.
To use the images we need to create a “drawable” folder in “res” folder and put all the images in this “drawable” folder.
Demo App : “Working with Images”


What we will do : We have five images named “one”, “two”, “three”, “four” and “five”.

                                                               


We have five buttons on main screen named  “One”, “Two”, “Three”, “Four” and “Five”.
When clicks on a particular button, we will show the respective image in Image View using  method setImageResource(resourceId);

main_activity.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >
   

   <LinearLayout
    android:layout_marginTop="30dp"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal" >
   

    <Button
        android:id="@+id/buttonOne"
        android:layout_weight="1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="One"
        android:onClick="showOne"/>
    
     <Button
        android:id="@+id/buttonTwo"
        android:layout_weight="1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="Two"
        android:onClick="showTwo" />
    
     <Button
        android:id="@+id/buttonThree"
        android:layout_weight="1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="Three"
        android:onClick="showThree"/>
    
     <Button
        android:id="@+id/buttonFour"
        android:layout_weight="1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="Four"
        android:onClick="showFour" />
    
     <Button
        android:id="@+id/buttonFive"
        android:layout_weight="1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="Five"
        android:onClick="showFive"/>
    
   
    </LinearLayout>
   
    <ImageView
        android:id="@+id/imageView1"
        android:layout_marginTop="50dp"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:layout_gravity="center_horizontal"
        android:src="@drawable/one" />
   
</LinearLayout>

MainActivity.java
public class MainActivity extends Activity
{
    ImageView myImageView;
       @Override
       protected void onCreate(Bundle savedInstanceState)
       {
              super.onCreate(savedInstanceState);
              setContentView(R.layout.activity_main);
             
              // get the reference of image view
              myImageView = (ImageView)findViewById(R.id.imageView1);
       }

      
       /* when user clicks on Button "One"
        * set the particular image in myImageView
        */
       public void showOne(View V)
       {
              myImageView.setImageResource(R.drawable.one);
       }
      
       /* when user clicks on Button "Two"
        * set the particular image in myImageView
        */
       public void showTwo(View V)
       {
              myImageView.setImageResource(R.drawable.two);
       }
      
       /* when user clicks on Button "Three"
        * set the particular image in myImageView
        */
       public void showThree(View V)
       {
              myImageView.setImageResource(R.drawable.three);
       }
      
       /* when user clicks on Button "Three"
        * set the particular image in myImageView
        */
       public void showFour(View V)
       {
              myImageView.setImageResource(R.drawable.four);
       }
      
       /* when user clicks on Button "Five"
        * set the particular image in myImageView
        */
       public void showFive(View V)
       {
              myImageView.setImageResource(R.drawable.five);
       }

}




Screenshots
             
     Main Screen(When nothing selected)                           When Button “One” Selected

        
          When Button “Three” Selected                               When Button “Five” Selected