Mdunge Apps

It is sometimes useful to have your own custom list, here we are going to create a custom layout with a switch, button and an image.


1. first, we need to create the xml file of our layout res/layout/sliding_item.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:gravity="center"    android:background="@drawable/head_light_banner"    android:orientation="vertical"    android:id="@+id/car_light_banner">


    <ImageView        android:id="@+id/car_light"        android:layout_width="100dp"        android:layout_height="100dp"/>

    <TextView        android:id="@+id/car_light_title"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:background="@null"        android:textColor="#fff"        android:textSize="20dp"        android:text="Car Lights" />

    <LinearLayout        android:layout_width="wrap_content"        android:layout_height="50dp"        android:gravity="center"        android:background="@null"        android:orientation="horizontal">

        <Switch            android:id="@+id/switch_plug"            android:layout_width="wrap_content"            android:layout_margin="10dp"            android:layout_height="wrap_content"            android:textSize="10dp"            android:trackTint="#fff"            android:checked="false"            android:colorForeground="#fff"/>

        <Button            android:id="@+id/detail_button"            android:layout_width="wrap_content"            android:layout_height="40dp"            android:textSize="10dp"            android:text="Detail" />

    </LinearLayout>

</LinearLayout>

2. in you res/layout/activity_main.xml

<android.support.v4.view.ViewPager    android:id="@+id/slider_view"    android:layout_width="match_parent"    android:layout_height="223dp"    android:layout_weight="1"    android:gravity="center" />

Notice that the name of our id is viewPager

3. now we will create our SlidingItem class

package com.designspaza.carcontroller;

import android.app.Activity;
import android.content.Context;
import android.content.Intent;
import android.graphics.Color;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Button;
import android.widget.CompoundButton;
import android.widget.ImageView;
import android.widget.TextView;
import android.widget.LinearLayout;
import android.widget.Switch;
import android.widget.Toast;

    public class SlidingItem extends PagerAdapter {
        Context context;
        int car_light[];
        int car_light_banner[];
        int car_set_banner = -1;
        String car_light_title[];
        LayoutInflater layoutInflater;


        public CarLights(Context context, int car_light[],int car_light_banner[], String car_light_title[]) {
            this.context = context;
            this.car_light    = car_light;
            this.car_light_banner = car_light_banner;
            this.car_light_title = car_light_title;
            layoutInflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        }

        @Override        public int getCount() {
            return car_light.length;
        }

        @Override        public boolean isViewFromObject(View view, Object object) {
            return view == ((LinearLayout) object);
        }

        @Override        public Object instantiateItem(ViewGroup container, final int position) {
            View CarLightView = layoutInflater.inflate(R.layout.car_lights, container, false);

            final ImageView CarLight = (ImageView) CarLightView.findViewById(R.id.car_light);
            CarLight.setImageResource(car_light[position]);

            final LinearLayout CarLightBanner = (LinearLayout) CarLightView.findViewById(R.id.car_light_banner);
            CarLightBanner.setBackgroundResource(car_light_banner[position]);

            TextView CarLightTitle = (TextView) CarLightView.findViewById(R.id.car_light_title);
            CarLightTitle.setText(car_light_title[position]);

            Switch SwitchPlug = (Switch) CarLightView.findViewById(R.id.switch_plug);

            Button DetailButton = (Button) CarLightView.findViewById(R.id.detail_button);

            container.addView(CarLightView);

            //listening to image click            CarLight.setOnClickListener(new View.OnClickListener() {
                @Override                public void onClick(View v) {
                    if( car_set_banner != car_light[position]) {
                        CarLightBanner.setBackgroundResource(car_light[position]);
                        car_set_banner = car_light[position];
                    }
                    else {
                        CarLightBanner.setBackgroundResource(car_light_banner[position]);
                        car_set_banner = car_light_banner[position];
                    }
                    Toast.makeText(context, "you clicked image " + (position + 1), Toast.LENGTH_LONG).show();
                }
            });


            //listening to switch flip            //SwitchPlug.setChecked(false);            SwitchPlug.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
                @Override                public void onCheckedChanged(CompoundButton compoundButton, boolean bChecked) {
                    if (bChecked) {
                        CarLight.setBackgroundColor(Color.rgb(255,255,255));
                        CarLight.setPadding(3,3,3,3);
                        Toast.makeText(context, "turn on " + (position + 1), Toast.LENGTH_LONG).show();
                    } else {
                        CarLight.setBackgroundColor(Color.rgb(0,0,0));
                        CarLight.setPadding(0,0,0,0);
                        Toast.makeText(context, "turn off " + (position + 1), Toast.LENGTH_LONG).show();
                    }

                }
            });

            //details direction for popup            DetailButton.setOnClickListener(new View.OnClickListener(){
                @Override                public void onClick(View v) {
                    //car lights intent                    Intent i = new Intent(context.getApplicationContext(), PopActivity.class);

                    i.putExtra("car_light_title", car_light_title[position]);
                    i.putExtra("car_light", car_light[position]);
                    context.startActivity(i);
                }
            });

            return CarLightView;
        }

        @Override        public void destroyItem(ViewGroup container, int position, Object object) {
            container.removeView((LinearLayout) object);
        }
    }

4. now lets edit your MainActivity.java class

public class MainActivity extends AppCompatActivity {


    //custom slider
    int car_light[] = {R.drawable.image_1, R.drawable.image_2, R.drawable.image_3};
    int car_light_banner[] = {R.drawable.head_light_banner, R.drawable.rear_light_banner, R.drawable.rear_light_banner};
    String car_light_title[] = {"Head Light","Rear Light","Stop Lights"};
    SlidingItem SlidingItem;


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

        //car lights        ViewPager viewPager = (ViewPager)findViewById(R.id.slider_view);

        SlidingItem = new SlidingItem(MainActivity.this, car_light,car_light_banner,car_light_title);
        viewPager.setAdapter(SlidingItem);

Note: we create our page viewer object and our SlidingItem class object, and pass through our array to our SlidingItem constructor.

I hope this article was clear