Progressbar at the top of a button in a relative layout question in Android Studio
Ok this is weird, hopefully someone can explain to me.
I have a custom button layout that creates a button with a circular progress bar in the middle of the button. My XML is shown below. However, I cannot figure out what ProgressBar
appears behind the button. If I set the background of the button to anything other than transparent, the progress bar cannot be seen. With the button's transparent background, I can see it ProgressBar
, but it still appears behind the button text. I was aware that the views appear in the order in which they are added. I even tried setting the top view (view.bringToFront ();) and I tried to remove the view and recreate it.
Why is there a progress indicator 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 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);
}
}
source to share
You can use this on android> = 5.0. In 5.0 they added a height field for views. Elevation defines the z-order of the views in the ViewGroup.
In this case, the button has a non-zero height value and the progress bar has a zero value.
Set the height of the progress bar eg. 10dp
<ProgressBar
...
android:elevation="10dp"/>
source to share
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
Typically, FrameLayout should be used to hold a single child view, because it can be difficult to arrange child views in such a way that they scale to different screen sizes without overlapping children. However, you can add multiple children to the FrameLayout and control their position in the FrameLayout by assigning gravity to each child using the android: layout_gravity attribute.
The child views are drawn on the stack, with the last added child on top.
source to share
By adding marginTop, you can do this. Otherwise, you can change the button structure and the 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 works fine for me: D
source to share
Place your button in a different layout (the 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 cannot tell you exactly why you are getting this effect, but I suppose it is a bug. Note that if you replace with a Button
different kind, for example TextView
, this problem will not end. But when you change RelativeLayout
to any other (tested with FrameLayout
) this error still appears. I am assuming this has a background
draw or dimension property and order in any layout.
source to share