We Keep Coding

Android: AdapterView select item

I have an AdapterView filled with items
and I would like to select the item I click on, something like this:
is there a possible way I can do this?
This is how I build the adapter
adapter = new ArrayAdapter<String>(
context,
android.R.layout.simple_selectable_list_item,
QuestionActivity.OptionArrayList.get(position));
context.startActivity(i);

You can check this sample project I just made. I think the code speaks for itself but feel free to ask questions if You aren't sure about something. But basically I set OnItemClickListener to the ListView and I change the background to selected_back which is a shape in drawable folder. Also, I keep a reference to the last changed View so when user click on another View it will be easy to change its background again to normal_back.
MainActivity.java
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.ListView;
import androidx.appcompat.app.AppCompatActivity;
import java.util.ArrayList;
public class MainActivity extends AppCompatActivity
{
View lastChangedView = null;
#Override
protected void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ArrayList<String> arrayList = new ArrayList<>();
arrayList.add("One");
arrayList.add("Two");
arrayList.add("Three");
final ArrayAdapter<String> adapter = new ArrayAdapter<String>(
this,
R.layout.list_view_item,
arrayList);
ListView listView = findViewById(R.id.listView);
listView.setAdapter(adapter);
listView.setOnItemClickListener(new AdapterView.OnItemClickListener()
{
#Override
public void onItemClick(AdapterView<?> parent, View view, int position, long id)
{
if (lastChangedView != null)
{
lastChangedView.setBackgroundResource(R.drawable.normal_back);
}
lastChangedView = view;
Log.d("Main", "Item click at " + position);
view.setBackgroundResource(R.drawable.selected_back);
}
});
}
}
acitivty_main.xml
<FrameLayout 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"
tools:context=".MainActivity">
<ListView
android:id="#+id/listView"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</FrameLayout>
list_view_item.xml (in layout folder)
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:textSize="32sp"
android:background="#drawable/normal_back" />
normal_back.xml (in a drawable folder)
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#FFFFFF" />
</shape>
selected_back.xml (in a drawable folder)
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<stroke
android:width="2dp"
android:color="#0000FF" />
<solid android:color="#FFFFFF" />
</shape>
Result (after clicking on "Two"):

You need a custom adapter to achieve this. It will simply extend BaseAdater, and will have a custom view along with a boolean to keep info of which item was selected. You can follow Using a BaseAdapter with ListView guide.
CustomAdatpter class will be as follows -
public class MyAdapter extends BaseAdapter {
private Context context;
private ArrayList<String> arrayList;
//taking boolean to keep track of item selected
private boolean isItemSelected = false;
public MyAdapter(Context context, ArrayList<String> arrayList) {
this.context = context;
this.arrayList = arrayList;
}
#Override
public int getCount() {
return arrayList.size();
}
#Override
public Object getItem(int position) {
return arrayList.get(position); //returns list item at the specified position
}
#Override
public long getItemId(int position) {
return position;
}
#Override
public View getView(final int position, View convertView, ViewGroup parent) {
if (convertView == null) {
convertView = LayoutInflater.from(context).
inflate(R.layout.item, parent, false);
}
TextView textView = (TextView) convertView.findViewById(R.id.text_view);
textView.setText(arrayList.get(position));
//setting click listener on convertView which is each item view
convertView.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
if (isItemSelected){
//item is selected, need to un select item,
isItemSelected = false;
textView.setBackgroundResource(R.drawable.unselected_bg);
}
else{
//item is not selected, need to select item
isItemSelected = true;
textView.setBackgroundResource(R.drawable.selected_bg);
}
}
});
return convertView;
}
}
I am using R.drawable.unselected_bg and R.drawable.selected_bg which are nothing but drawable files as follows -
selected_bg.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#5B5BC9"/>
<stroke android:color="#4CAF50" android:width="5dp"/>
</shape>
unselected_bg.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#5B5BC9"/>
</shape>
In last item has following layout which was inflated in getView();
item.xml
<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:clickable="true"
android:focusable="true"
android:id="#+id/text_view"
android:background="#drawable/unselected_bg"
android:padding="16dp">
</TextView>
If you notice, I have given android:background="#drawable/unselected_bg" just to make item unselected on create.
Result will be as follows -
Happy Coding !

Set a title and description for each photo in carouse android

I am using a carouselView library for my app. https://github.com/sayyam/carouselview
The images are displaying and the carousel is working but how do I set a title and description below each image as it slides for each image.
I have a string containing all the title and text for each image.
e.g
<string name="first_image_title">First image title</string>
<string name="first_image_desc">This is a description for first image title</string>
<string name="second_image_title">2nd image title</string>
<string name="second_image_desc">This is a description for the second image title</string>
<string name="third_image_title">3rd image title</string>
<string name="third_image_desc">This is a description for the third image title</string>
All these are supposed to be placed below the sliding images (for each image.)
fragment_safety.xml
Containing the image and where the title and description for each image supposed to be
<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="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
tools:context="fragments.SafetyFragment">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/tabContent"
android:background="#drawable/rounded_corner2">
<com.synnapps.carouselview.CarouselView
android:id="#+id/carouselView"
android:layout_width="match_parent"
android:layout_height="200dp"
app:fillColor="#FFFFFFFF"
app:pageColor="#00000000"
app:radius="6dp"
app:slideInterval="5000"
app:strokeColor="#FF777777"
app:strokeWidth="1dp"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/textTitle"
android:layout_below="#+id/carouselView"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/textDesc"
android:layout_below="#+id/textTitle"/>
</RelativLayout>
SafetyFragment.java
According to the doc, I am supposed to implement ViewListener for customView but I cant wrap my head around how to do this....Get all the titles and description in the string and set them for each of the images sliding.
public class SafetyFragment extends Fragment {
private CarouselView carouselView;
private int[] sampleImages = {R.drawable.image1,
R.drawable.image2, R.drawable.image3,
R.drawable.image4, R.drawable.image5,
R.drawable.image6};
public SafetyFragment() {
// Required empty public constructor
}
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
}
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// Inflate the layout for this fragment
View root = inflater.inflate(R.layout.fragment_safety, container, false);
carouselView = root.findViewById(R.id.carouselView);
ImageListener imagesListenerx = new ImageListener() {
#Override
public void setImageForPosition(int position, ImageView imageView) {
Glide.with(SafetyFragment.this).load(sampleImages[position]).into(imageView);
}
};
ViewListener viewListener = new ViewListener() {
#Override
public View setViewForPosition(int position) {
View customView = getLayoutInflater().inflate(R.layout.fragment_safety, null);
//set view attributes here
return customView;
}
};
carouselView.setPageCount(sampleImages.length);
carouselView.setViewListener(viewListener);
return root;
}
}

I found a way to do this.
1.Declare a string array for each text you want to display in each carousel
private String[] titles = {"One", "Two", "Three"}
2. Set a custom view listener and get the view in the layout
ViewListener viewListener = new ViewListener() {
int i;
#Override
public View setViewForPosition(int position) {
View customView = getLayoutInflater().inflate(R.layout.fragment_safety, null);
//set view attributes here
safety_title = customView.findViewById(R.id.safetyTextTitle);
safety_images = customView.findViewById(R.id.safetyImages);
Glide.with(SafetyFragment.this).load(sampleImages[position]).into(safety_images);
//Very Important
safety_title.setText(titles[position]);
return customView;
}
};

As per the documentation you can create a custom view and bind views with the data
ViewListener viewListener = new ViewListener() {
#Override
public View setViewForPosition(int position) {
View customView = getLayoutInflater().inflate(R.layout.view_custom, null);
//set view attributes here
return customView;
}
};

I use this way:
ViewListener viewListener = new ViewListener() {
#Override
public View setViewForPosition(int position) {
View customView = getLayoutInflater().inflate(R.layout.custom_carousel, null);
//set view attributes here
TextView car_title = (TextView) customView.findViewById(R.id.textTitle);
ImageView car_image = (ImageView) customView.findViewById(R.id.imageView);
car_title.setText(sampleTitle[position]);
car_image.setImageResource(sampleImages[position]);
return customView;
}
};
While custom view in custom_carousel.xml will be like this:
<?xml version="1.0" encoding="utf-8"?>
<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="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto">
<ImageView
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/textDesc"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
tools:src="#tools:sample/avatars[1]" />
<TextView
android:id="#+id/textTitle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:text="test" />
</RelativeLayout>

how can I change icon when the Parent group has been expanded to show its children

I have an expandable list view and I would like to change the icon from right facing arrow to down facing arrow when the parent group has been clicked and children are shown . Currently when I click on the parent group to expand and show children the icon does not change from right arrow to down arrow it just remains as rigth arrow icon . This is what I have in my exapndable adaptor at the moment .
#Override
public View getGroupView(int groupPosition, boolean isExpanded,
View convertView, ViewGroup parent) {
String headerTitle = getGroup(groupPosition).toString();
if (convertView == null) {
LayoutInflater infalInflater = (LayoutInflater) this._context
.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
convertView = infalInflater.inflate(R.layout.list_group, null);
ImageView arrowImageView = (ImageView) convertView.findViewById (R.id.group_header_arrow);
if (isExpanded) {
arrowImageView.setImageResource(R.drawable.arrow_down);
(ApplicationContext.Activity.Resources.GetColor (Resource.Color.standard_blue));
}
}
TextView lblListHeader = (TextView) convertView
.findViewById(R.id.lblListHeader);
lblListHeader.setText(headerTitle);
TextView Header = (TextView) convertView
.findViewById(R.id.lblListHeader);
lblListHeader.setText(headerTitle);
return convertView;
}
The XML for the group header
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="8dp"
android:background="#f4f4f4">
<ImageView
android:id="#+id/group_header_arrow"
android:src="#drawable/arrow_right"
android:layout_centerVertical="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingRight="10dp" />
<TextView
android:id="#+id/lblListHeader"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:paddingLeft="?android:attr/expandableListPreferredItemPaddingLeft"
android:textSize="17dp"
android:textColor="#388C2A" />
</LinearLayout>

Add this code in adapter class,
final ExpandableListView mExpandableListView= (ExpandableListView) parent ;
mExpandableListView.setOnGroupExpandListener(new ExpandableListView.OnGroupExpandListener() {
#Override
public void onGroupExpand(int groupPosition) {
arrowImageView.setImageResource(R.drawable.arrow_down);
}
});
mExpandableListView.setOnGroupCollapseListener(new ExpandableListView.OnGroupCollapseListener() {
#Override
public void onGroupCollapse(int groupPosition) {
arrowImageView.setImageResource(R.drawable.arrow_left);
}
});
if(mExpandableListView.isGroupExpanded(groupPosition))
{
arrowImageView.setImageResource(R.drawable.arrow_down);
}
else
{
arrowImageView.setImageResource(R.drawable.arrow_left);
}

Use this,
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_empty="true" android:drawable="#drawable/right_indicator"/>
<item android:state_expanded="true" android:drawable="#drawable/left_indicator" />
<item android:drawable="#drawable/right_indicator" />
saved in Drawable,

How can I make a Viewpager with custom tabs like this?

How can I achieve a Tab/Viewpager style like this ?
So its not looking like the normal Sliding Tab Layout like here.
Are there some guides to follow out there ? It looks very custom to me

First define the slidingTabLayout with your view pager as:
<com.forthcode.androidoze.Utils.SlidingTabLayout
android:id="#+id/sliding_tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#FFFFFFFF"/>
<android.support.v4.view.ViewPager
android:id="#+id/vpPager"
android:layout_width="match_parent"
android:layout_height="wrap_content">
</android.support.v4.view.ViewPager>
In above code I have taken the sliding tab color as transparent, you can take any as per your need.
Now define a custom view thatrepresent your single tab.
customtab.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="center_horizontal"
android:padding="10dp">
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:layout_gravity="center"
android:textAppearance="?android:attr/textAppearanceMedium"/>
</LinearLayout>
Now create a selector.xml inside the drawable folder that defines the text color of the tab when it will be selected and not selected.
selector.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_selected="true" android:color="#ccc" />
<item android:state_focused="true" android:color="#ccc" />
<item android:state_pressed="true" android:color="#ccc" />
<item android:color="#fff" />
</selector>
In the last line of selector.xml is the default tab text color when the tab is not selected.
Now finally in your void populateTabStrip() method of SlidingTabLayout class just add the code to implement the selector with the tab as shown below:
tabTitleView.setTextColor(getResources().getColorStateList(R.drawable.selector));
Remember this line should be inside the populateTabStrip() inside the for loop, just to make it easy i'm writing the complete method populateTabStrip(){} of slidingTabLayout, so your populateTabStrip() should look like this:
private void populateTabStrip() {
final PagerAdapter adapter = mViewPager.getAdapter();
final OnClickListener tabClickListener = new TabClickListener();
for (int i = 0; i < adapter.getCount(); i++) {
View tabView = null;
TextView tabTitleView = null;
if (mTabViewLayoutId != 0) {
// If there is a custom tab view layout id set, try and inflate it
tabView = LayoutInflater.from(getContext()).inflate(mTabViewLayoutId, mTabStrip,
false);
tabTitleView = (TextView) tabView.findViewById(mTabViewTextViewId);
}
if (tabView == null) {
tabView = createDefaultTabView(getContext());
}
if (tabTitleView == null && TextView.class.isInstance(tabView)) {
tabTitleView = (TextView) tabView;
}
if (mDistributeEvenly) {
LinearLayout.LayoutParams lp = (LinearLayout.LayoutParams) tabView.getLayoutParams();
lp.width = 0;
lp.weight = 1;
}
tabTitleView.setText(adapter.getPageTitle(i));
tabView.setOnClickListener(tabClickListener);
tabTitleView.setTextColor(getResources().getColorStateList(R.drawable.selector));
String desc = mContentDescriptions.get(i, null);
if (desc != null) {
tabView.setContentDescription(desc);
}
mTabStrip.addView(tabView);
if (i == mViewPager.getCurrentItem()) {
tabView.setSelected(true);
}
}
}
Now in the Activity or Fragment where you are using the tab define the viewpager,slidingtablayout and the viewpager adapter, and set the adapter with view pager and set the slidingtab with view pager as shown below(Note i have used inside fragment, if you are using Activity then modify as per your need):
SlidingTabLayout mSlidingTabLayout;
ViewPager mViewPager;
PagerAdapter mPagerAdapter;
SharedPreferences mySharedpref;
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// Inflate the layout for this fragment
View view= inflater.inflate(R.layout.fragment_home, container, false);
mPagerAdapter=new PagerAdapter(getChildFragmentManager());
mViewPager= (ViewPager) view.findViewById(R.id.vpPager);
mSlidingTabLayout= (SlidingTabLayout) view.findViewById(R.id.sliding_tabs);
mViewPager.setAdapter(mPagerAdapter);
mSlidingTabLayout.setCustomTabView(R.layout.customtab, R.id.textView1);
mSlidingTabLayout.setSelectedIndicatorColors(R.color.tabIndicator);
mSlidingTabLayout.setCustomTabColorizer(new SlidingTabLayout.TabColorizer() {//change the color of the tab indcator
#Override
public int getIndicatorColor(int position) {
// TODO Auto-generated method stub
return getResources().getColor(R.color.tabIndicator);
}
});
mSlidingTabLayout.setViewPager(mViewPager);
mViewPager.setCurrentItem(tabPosition);
return view;
}
This should work fine. if you find any issue then comment, i will try to reply

You can have a top layout in your activity, in top of the view pager.
In the OnPageSelected of the ViewPager you can change the text color of the top layout to simulate tab selection

Change Background color item of ListView while maintaining effect of custom Drawable

I try to change the background color at specific item within my ListView, while maintaining the effect of the custom Drawable.
My custom list_items :
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/label"
style="#android:style/TextAppearance.Holo"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/background_list"
android:textColor="#color/white" />
My custom ArrayAdapter :
public class MissionDataListAdapter extends ArrayAdapter {
private final ArrayList<MissionData> list_missions;
public MissionDataListAdapter(Context context, int textViewResourceId, ArrayList<MissionData> objects) {
super(context, textViewResourceId, objects);
this.list_missions = objects;
}
#Override
public View getView(int position, View convertView, ViewGroup parent){
View v = super.getView(position, convertView, parent);
MissionData mission = list_missions.get(position);
if(position==4){
v.setBackgroundResource(R.color.mauve);
}
return v;
}
}
My Layout for my Activity :
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/border_list"
android:orientation="vertical" >
<ListView
android:id="#+id/missionsListView"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:divider="#color/blue2"
android:dividerHeight="1dp" />
</LinearLayout>
My custom drawable for change the color when item is pressed :
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#color/orange_off" android:state_pressed="true"/>
</selector>
public class MissionsListActivity extends Activity implements OnClickListener {
[..]
MissionDataListAdapter arrayAdapter;
ArrayList<String> donnees_parses;
ArrayList<MissionData> missions;
ListView missionsListView;
MissionData selectedmission;
MissionsDAO missionsBdd;
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.missions);
[..]
missionsListView = (ListView)this.findViewById(R.id.missionsListView);
int layoutID = R.layout.list_items;
arrayAdapter = new MissionDataListAdapter(this, layoutID , missions);
missionsListView.setAdapter(arrayAdapter);
}
[..]
For the above code, the background color of fourth item its changed, but is no longer affected by the custom Drawable :
[..]
<item android:drawable="#color/orange_off" android:state_pressed="true"/>
[..]
So, how can I change the background color of one item while maintaining the effects of Drawable on my item ?

Why not create another drawable with another color and then set that drawable if the position is 4:
#Override
public View getView(int position, View convertView, ViewGroup parent){
View v = super.getView(position, convertView, parent);
MissionData mission = list_missions.get(position);
if(position==4){
v.setBackgroundResource(R.drawable.background_list_mauve);
}
return v;
}