We Keep Coding

How to update style of selected item inside ViewPager?

I want to update the style of the selected item inside a ViewPager.
How can I do this?
This is the UI design. As you can see, the "November" tab is selected, so the corresponding bar is highlighted in yellow.
The way I've implemented this is a ViewPager with a custom item (white, not highlighted):
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.cardview.widget.CardView
android:layout_width="142dp"
android:layout_height="275dp"
android:layout_margin="0dp"
app:cardElevation="0dp"
app:cardBackgroundColor="#android:color/transparent">
<TextView
android:id="#+id/monthly_spend_month"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/December"
android:textColor="#color/aluminum"
android:textSize="20sp"
android:textStyle="normal"
android:layout_marginStart="22dp"
android:layout_marginTop="34dp"/>
<RelativeLayout
android:id="#+id/monthly_spend_card"
android:layout_marginTop="120dp"
android:layout_marginStart="22dp"
android:layout_width="120dp"
android:layout_height="155dp"
android:background="#drawable/monthlyspend_card_bg_inactive">
<TextView
android:id="#+id/monthly_spend_text"
android:textColor="#color/almost"
android:layout_marginTop="50dp"
android:layout_marginStart="22dp"
android:text="Total
spent"
android:textSize="#dimen/balanceDescTextSize"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:id="#+id/monthly_spend_amount"
android:textColor="#color/almost"
android:layout_marginTop="10dp"
android:layout_marginStart="22dp"
android:layout_below="#id/monthly_spend_text"
android:text="$ 254.98"
android:textSize="#dimen/balanceDescTextSize"
android:textStyle="bold"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</RelativeLayout>
</androidx.cardview.widget.CardView>
</LinearLayout>
I plan on doing the highlighting programmatically.
Here's some adapter code:
#NonNull
#Override
public Object instantiateItem(#NonNull ViewGroup container, int position) {
layoutInflater = LayoutInflater.from(context);
View view = layoutInflater.inflate(R.layout.monthlyspend_item, container, false);
TextView monthlySpendMonth, monthlySpendAmount;
monthlySpendCard = view.findViewById(R.id.monthly_spend_card);
monthlySpendMonth = view.findViewById(R.id.monthly_spend_month);
monthlySpendAmount = view.findViewById(R.id.monthly_spend_amount);
monthlySpendMonth.setText(monthlySpendings.get(position).getMonth());
monthlySpendAmount.setText(monthlySpendings.get(position).getAmountSpent());
container.addView(view, 0);
return view;
}
Any help would be appreciated!

I thing you are missing click listener :
view.setOnClickListener(new OnClickListener(){
public void onClick(View v){
// do you stuff here
}
});
((ViewPager)container).addView(view, 0)
Also inside instantiateItem() make int position as final.

you should change your model (in your case "monthlyspendings") at the selected item position.
then notify the adapter
adapter.notifyDataSetChanged()
and finally, custom selected view according to the model. for exapmle :
if(monthlySpendings.get(position).isSelected) monthlySpendCard.setBackgroundColor(Color.parseColor("#fcd14b"));

Using RecyclerView with GridLayoutManager to add dynamic buttons to a layout

I am adding dynamic imagebuttons to a layout in a Fragment using recyclerview with gridlayoutmanager. The buttons are added as a user performs an action, so they are not all created during onCreateView().
I seem to have to initialize my recycler view and adapter onCreateView() with a an empty imagebutton, when my app starts up. And so I do that, but it creates a little grey square like the image below.
and then when the user performs an action and the real button I want is created, the square is still present over my image button that was just created like you can see in this new image below.
DOES ANYONE KNOW HOW I CAN GET THE INITIAL EMPTY GREY IMAGE BUTTON TO NOT BE THERE AT STARTUP OR OVER MY "DriveDroid" IMAGE BUTTON?
I have tried setting the initial background of my image button to transparent (using background color = #00000000), but this seems to make a transparent image button over my DriveDroid button, so that my onClick listener for DriveDroid no longer works.
Here is how I initialize my recycler view:
public class MyFragment extends Fragment {
private GridLayoutManager lLayout;
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.my_fragment, container, false);
// Create an empty list to initialize the adapter (or else get nullPointerException error)
List<ItemObject> myList = new ArrayList<ItemObject>();
lLayout = new GridLayoutManager(getActivity(), 4, GridLayoutManager.HORIZONTAL, false);
RecyclerView rView = (RecyclerView)view.findViewById(R.id.recycler_view);
rView.setHasFixedSize(true);
rView.setLayoutManager(lLayout);
RecyclerViewAdapter rcAdapter = new RecyclerViewAdapter(getActivity(),myList);
rView.setAdapter(rcAdapter);
return view;
}
And here is my layout my_fragment
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_horizontal"
android:layout_margin="5dp"
android:id="#+id/my_fragment"
>
<android.support.v7.widget.RecyclerView
android:id="#+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbars="horizontal" />
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/new_app_button"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/new_app_name"
android:layout_below="#+id/new_app_button"
android:layout_alignStart="#+id/new_app_button"
android:layout_alignLeft="#+id/new_app_button"
android:gravity="center"
/>
</RelativeLayout>
HERE IS HOW I CHANGED MY LAYOUT TO GET IT TO WORK, IF IT HELPS ANYONE ELSE!
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_horizontal"
android:layout_marginTop="15dp"
android:id="#+id/my_fragment"
>
<android.support.v7.widget.RecyclerView
android:id="#+id/recycler_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scrollbars="horizontal" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/new_app_button"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/new_app_name"
android:gravity="center"
android:layout_below="#+id/new_app_button"
/>
</RelativeLayout>
</LinearLayout>

As mentioned in the comment, that your controls was overlapping each others, you should wrap them inside linear layout or add properties to make them positioned relative to each others.
Regarding the grey button this should be related to "new_app_button"

progressbar on top of Button in relative layout issue in Android Studio

Ok this is a weird one I hope someone can explain to me.
I have a custom button layout which creates a button with a circular progress bar in the middle of the button. My XML code is below. What I can't work out however is that the ProgressBar seems to be appearing behind the button. If I set the button background to anything other than transparent the progressbar cannot be seen. With the button background as transparent I can then see the ProgressBar but it still appears behind the button text. I was under the understanding that views appeared in the order they are added. I have even tried setting the view to be on top (view.bringToFront();) and I've tried removing the view and recreating it.
Why does the progressbar appear behind the button and what can I do to solve it?
Many thanks
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:background="#android:color/holo_blue_bright"
android:padding="2dp">
<Button
android:id="#+id/button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/transparent"
android:text="Button"
android:gravity="center"
android:textColor="#android:color/white"
android:singleLine="true"
android:clickable="false">
</Button>
<ProgressBar
android:id="#+id/progressBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/transparent"
android:layout_centerInParent="true"
android:visibility="visible"
/>
</RelativeLayout>
Code using the above layout
private void setupTableLayout(int NumberOfRows, int NumberOfButtons){
TableLayout.LayoutParams tableParams = new TableLayout.LayoutParams(TableLayout.LayoutParams.MATCH_PARENT, TableLayout.LayoutParams.MATCH_PARENT);
TableRow.LayoutParams rowParams = new TableRow.LayoutParams(0, android.widget.TableRow.LayoutParams.MATCH_PARENT, 3f);
TableLayout tableLayout = (TableLayout) findViewById(R.id.thetablelayout);
tableLayout.removeAllViews();
for (int i = 0; i < NumberOfRows; i++) {
TableRow tableRow = new TableRow(this);
tableRow.setLayoutParams(tableParams);
RelativeLayout btnOneLayout = (RelativeLayout)getLayoutInflater().inflate(R.layout.custom_button, null);
RelativeLayout btnTwoLayout = (RelativeLayout)getLayoutInflater().inflate(R.layout.custom_button, null);
ProgressBar btnOneProgressBar = (ProgressBar)btnOneLayout.findViewById(R.id.progressBar);
ProgressBar btnTwoProgressBar = (ProgressBar)btnTwoLayout.findViewById(R.id.progressBar);
btnOneLayout.setLayoutParams(rowParams);
btnTwoLayout.setLayoutParams(rowParams);
Button btnOne = (Button)btnOneLayout.findViewById(R.id.button);
btnOne.setText("Btn 1, Row " + i);
btnOne.setId(1001 + i);
Button btnTwo = (Button)btnTwoLayout.findViewById(R.id.button);
btnTwo.setText("Btn 2, Row " + i);
btnTwo.setId(2001 + i);
setButtonClickListener(btnOneLayout, btnOneProgressBar);
setButtonLongClickListener(btnOneLayout, btnOneProgressBar);
tableRow.addView(btnOneLayout); //Add layout, instead of just Button
View adivider = new View(this);
adivider.setLayoutParams(new TableRow.LayoutParams(20, TableRow.LayoutParams.MATCH_PARENT));
adivider.setBackgroundColor(Color.TRANSPARENT);
// This bit of code deals with odd/even numbers of buttons.
if (((i + 1) * 2) < NumberOfButtons + 1) {
tableRow.addView(adivider);
tableRow.addView(btnTwoLayout);
} else {
tableRow.addView(adivider);
btnTwoLayout.setBackgroundResource(android.R.color.transparent);
tableRow.addView(btnTwoLayout);
}
tableLayout.addView(tableRow);
}
}

You are propably running this on android >= 5.0. In 5.0 they added elevation field for views. Elevation defines z-order of views in ViewGroup.
In that case button have non-zero elevation value and progress bar have zero value elevation.
Set elevation of progress bar to e.g. 10dp
<ProgressBar
...
android:elevation="10dp"/>

Put your button into another layout (best choice for this case is probably FrameLayout).
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
... >
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button
android:id="#+id/button"
... />
</FrameLayout>
<ProgressBar
android:id="#+id/progressBar"
... />
</RelativeLayout>
I can't tell you why exactly you get that effect, but I suppose that is a bug. Notice that if you replace Button with other view, for example TextView that problem doesn't exits. But when you change RelativeLayout to any other (tested with FrameLayout) this bug still appears. I guess it's going about background property and order of drawing or measurement in any layout.

try using FrameLayout like this
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:background="#android:color/holo_blue_bright"
android:padding="2dp">
<Button
android:id="#+id/button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/transparent"
android:text="Button"
android:gravity="center"
android:textColor="#android:color/white"
android:singleLine="true"
android:clickable="false">
</Button>
<ProgressBar
android:layout_gravity="center"
android:id="#+id/progressBar"
android:layout_width="40dp"
android:layout_height="40dp"
android:background="#android:color/transparent"
android:layout_centerInParent="true"
android:visibility="visible"
/>
</FrameLayout>
See this link
Generally, FrameLayout should be used to hold a single child view,
because it can be difficult to organize child views in a way that's
scalable to different screen sizes without the children overlapping
each other. You can, however, add multiple children to a FrameLayout
and control their position within the FrameLayout by assigning gravity
to each child, using the android:layout_gravity attribute.
Child views are drawn in a stack, with the most recently added child on top.

By adding marginTop you can do that.. otherwise you can change the structure of button and progress bar...
<linearLayout android:orientation="horizontal" ... >
<ImageView
android:id="#+id/thumbnail"
android:layout_weight="0.8"
android:layout_width="0dip"
android:layout_height="fill_parent"
>
</ImageView>
<TextView
android:id="#+id/description"
android:layout_marginTop="-20dip"
android:layout_weight="0.2"
android:layout_width="0dip"
android:layout_height="wrap_content"
>
</TextView>
this code is working fine for me :D

Click Event for an element inside list view items to toggle contents of ListItem

I have an activity inside my android app that lists some information inside ListView , in the top left corner of each Item there is a more information icon, when user touches this icon application should change the content of this list item to some useful information , and also the icon should change to another icon , for example a close icon , again when user touchs close icon application should show list item contents.
For changing the Icon i used this code, but first time that i click icon nothing happens , second time it changes, and sometimes when i click one of the icons the icon of another list item changes.
ListActivity.java
list.setOnItemClickListener(new OnItemClickListener() {
#Override
public void onItemClick(AdapterView<?> parent, View viewCliced, int position, long id)
{
img = (ImageView)viewCliced.findViewById(R.id.img_icon);
img.setOnClickListener(new OnClickListener()
{
#Override
public void onClick(View arg0)
{
img.setImageResource(R.drawable.setting);
}
});
}
});
this code changes the icon but user should touch icon twice and sometimes change another list item's icon :|
this is the XML of ListView Item
listitem.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" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginTop="10dp"
android:background="#drawable/item_select"
android:orientation="vertical" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="horizontal"
android:weightSum="8" >
<LinearLayout
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
android:gravity="top|left"
android:orientation="vertical" >
<ImageView
android:id="#+id/img_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:src="#drawable/bookabout" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="7"
android:gravity="right|center_vertical"
android:orientation="vertical" >
<TextView
android:id="#+id/txt_subject"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="15dp"
android:text="نام فصل"
android:textColor="#000000" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="right|center_vertical"
android:orientation="vertical" >
<TextView
android:id="#+id/txt_explanation"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="15dp"
android:text="توضیحات فصل درسی"
android:textColor="#000000" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
How i should develop this feature ?
toggling between two kind of contents for a ListView item when user touches an Icon inside the ListView Item
I read a lot of article about list views but i couldn't find a way to do that,
Thank you very much for answering
Best Regards

"For changing the Icon i used this code, but first time that i click icon nothing happens , second time it changes, and sometimes when i click one of the icons the icon of another list item changes."
because you declare the listener inside the list listener so for the first time you click the icon your listener set (because you click list item ) and for the second time the icon responses. pull out listener of img and put it in onCreate method. Inside your adapter modify the getView method like this:
#Override
public View getView(int position, View row, ViewGroup parent) {
final int listItemPosition = position;
ImageView img = (ImageView)row.findViewById(R.id.image1);
img.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View arg0) {
// Change icon here
// If you'd like to delete item use the code below
// List.remove(listItemPosition);
// Adapter.this.notifyDataSetChanged();
}
});
}

How can I implement a ListView within a LinearLayout?

I am trying to make a simple Checkbook app, whose MainActivity stores a list of transactions. I would like a TextView at the top and bottom of the screen that show the account balance and an option to add a new transaction, respectively. I would like a list of transactions in between that scroll. I was able to implement a ListView and add a header and footer view, but if the transaction list exceeds the size of the screen the headers and footers can scroll off screen.
Is there any way to position a ListView within the linear layout, or freeze the headers/footers to stay on the screen?
Here is my XML file so far:
<TextView
android:id="#+id/header_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="#string/default_header_string">
</TextView>
<ListView
android:id="#+id/transaction_list_view"
android:layout_width="match_parent"
android:layout_height="wrap_content">
</ListView>
<TextView
android:id="#+id/footer_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="#string/add_transaction_string">
</TextView>
And here is my onCreate, which has no syntax errors but I am unable to click the footerview to add a transaction:
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_checkbook);
ListView list = (ListView) findViewById(R.id.transaction_list_view);
// Create a new Adapter
mAdapter = new TransactionAdapter(list.getContext());
// Inflate footerView and headerView
LayoutInflater inflater = getLayoutInflater();
TextView headerView = (TextView) inflater.inflate(R.layout.header_view, null);
TextView footerView = (TextView) inflater.inflate(R.layout.footer_view, null);
// Set listener for footerView
footerView.setOnClickListener(new OnClickListener() {
#Override
public void onClick(View view) {
Intent transactionIntent = new Intent(CheckbookActivity.this, AddTransactionActivity.class);
startActivityForResult(transactionIntent, ADD_TRANSACTION_REQUEST);
}
});
list.setAdapter(mAdapter);
}

use the below code. This will satisfy your requirement. I tried this and working for me.
Relative layout with below,above attributes. Relativelayout is better than Linear layout with weight method.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/relative"
android:layout_width="match_parent"
android:orientation="vertical"
android:layout_height="match_parent" >
<TextView
android:id="#+id/textView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_alignParentTop="true"
android:gravity="center_horizontal"
android:text="ListView Heading" />
<TextView
android:id="#+id/textView2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_alignParentBottom="true"
android:gravity="center_horizontal"
android:text="ListView Footer" />
<ListView
android:id="#+id/listView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/textView1"
android:layout_above="#id/textView2"
></ListView>
The UI will like this

Try this way, hope this will help you to solve your problem.
Instead of using header/footer just put as below code in your XML:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:gravity="center">
<TextView
android:id="#+id/header_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/default_header_string">
</TextView>
<ListView
android:id="#+id/transaction_list_view"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
</ListView>
<TextView
android:id="#+id/footer_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/add_transaction_string">
</TextView>
</LinearLayout>

Yes, you can do it with weightsum and layout_weight in linearlayout and also you can create this type of view using RelativeLayout.
1) In LinearLayout just add weightsum="1" to your linearlayout and add layout_weight="0.2" to each of your header and footer and add layout_weight="0.6" to your listview.
2) In relativeLayout add alignParentTop to your header and alignParentBottom to your footer and set listview to layout_below="#+id/header" and layout_above="2+id/footer"

I found a possible solution for your problem from a similiar post. Hope this helps you.

For what you are trying to accomplish to freeze the header/footer. It will be easier to use a relative layout to position the header/footer then have your listview in the middle
<RelativeLayout ...>
<TextView
android:id="#+id/header_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:gravity="center"
android:text="#string/default_header_string">
</TextView>
<ListView
android:id="#+id/transaction_list_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/header_view"
android:layout_above="#+id/footer_view">
</ListView>
<TextView
android:id="#+id/footer_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:gravity="center"
android:text="#string/add_transaction_string">
</TextView>
</RelativeLayout>
You can use a LinearLayout for this task. But I don't recommend it as it's a bit "hacky".

Get all the elements in a array: Example:- (weatherArray)
Loop through all the elements :-
Example:-
mainLayout = ((LinearLayout)refreshObj.get("mainLayout"));
mainLayout.removeAllViews();
for (int i = 0; i < weatherArray.length(); i++) {
View childView = getLayoutInflater().inflate(R.layout.weather_row4_item, mainLayout,false);
TextView todayTempStatus = (TextView) childView.findViewById(R.id.todayTempStatus);
todayTempStatus.setText("");
}
This is an example without using listview, which we will populate lienarlayout using child view.