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 eg 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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.