When you switch the order of the elements, place Button after ImageButton, the z-index is not affected. I tried with other types of Views and they are positioned correctly on top of one another depending on their order in the parent FrameLayout.
I tried programmatically with View.bringToFront() without success.
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Suzi"
android:textSize="22sp" />
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#mipmap/ic_launcher" />
</FrameLayout>
I tried to reproduce the issue: it is reproduced for me on Lollipop+ devices and isn't reproduced on pre-Lollipop.
Could you please check this?
If it is exactly the case, then the solution might be to use android:translationZ attribute (which is available since Lollipop)
Something like:
<FrameLayout android:layout_width="wrap_content"
android:layout_height="wrap_content"
xmlns:android="http://schemas.android.com/apk/res/android">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Suzi"
android:textSize="22sp"
android:translationZ="1dp"/>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher"
android:translationZ="2dp"/>
</FrameLayout>
And that fact that translationZ isn't available on pre-Lollipop would not matter (and attribute would be ignored), as there is no such issue.
Hope it helps
Related
In my code below, I have a white view with an elevation of 8dp. The blue button has an elevation of 10dp so in theory it should show. However, it doesn't. It only shows the part in which it is not directly over the white view. I know it's something to with the elevation however I do not know exactly what. I have sussed out that it's fine when the white view is =<2, but as soon as I set it higher, the problem occurs.
Here is my code:
<?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">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<View
android:layout_width="match_parent"
android:layout_height="#dimen/login_background"
android:background="#color/colorPrimary" />
<View
android:id="#+id/view"
android:layout_width="#dimen/login_container_width"
android:layout_height="#dimen/login_container_height"
android:layout_centerHorizontal="true"
android:layout_marginTop="#dimen/login_container_margin_top"
android:background="#drawable/login_container"
android:elevation="8dp">
</View>
<Button
android:id="#+id/button"
android:layout_width="190dp"
android:layout_height="50dp"
android:layout_marginBottom="52dp"
android:background="#drawable/login_button"
android:elevation="10dp"
android:text="LOGIN"
android:textColor="#color/white"
android:textSize="20sp"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true" />
</RelativeLayout>
</LinearLayout>
The following reflects this Stack Overflow question and the accepted answer.
Let's consider what you start off with. I don't have access to all your dimensions, etc. to make the following look exactly like your example but the basis is there. Below is the base layout. You can see that the button lies beneath the view even though the view has an elevation of 8dp and the button has an elevation of 10dp.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/colorPrimaryDark">
<View
android:id="#+id/view"
android:layout_width="match_parent"
android:layout_height="175dp"
android:layout_alignBottom="#+id/button"
android:layout_alignParentEnd="true"
android:layout_alignParentStart="true"
android:layout_margin="30dp"
android:background="#android:color/white"
android:elevation="8dp">
</View>
<Button
android:id="#+id/button"
android:layout_width="190dp"
android:layout_height="50dp"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="52dp"
android:background="#mipmap/ic_launcher"
android:elevation="10dp"
android:text="LOGIN"
android:textColor="#color/white"
android:textSize="20sp" />
</RelativeLayout>
</LinearLayout>
So, why is this? It is because android:elevation="10dp" in the XML for the button isn't really defining the elevation. Instead, the button's elevation is controlled by a "StateListAnimator" that controls the android:elevation and android:translationZ properties." (See accepted answer to above-referenced question.)
If you don't really care for what the StateListAnimator is doing for your layout, you can simply eliminate it by adding android:stateListAnimator="#null" to the XML for the button. Here is what the layout looks like after adding this code. (Please note that the designer may not show the changes immediately; Android Studio 3.0 Beta 6 didn't). So, you may need to refresh the layout to see the changes.
As you can see, the button is now above the view as we expect.
If you do care what StateListAnimator does for you, you will need to define your own and enter its name instead of #null in the XML statement changed above. The answer I reference above has the StateListAnimator that Android presumably uses, so you can take that as a basis and change the elevation to what you prefer. I haven't tried this, but it should work.
First the title may look senseless but I don't know how I describe my problem well in the title.
I have a Relative layout which has 2 buttons (Past games and Upcoming Games) and 2 listviews. Whenever a button is pressed the associated listview is collapsed (height will be zero) if it is already expanded or the reverse will happen. ( i used this solution)
Problem:
Everything is fine when I run it on a 5-inch screen phone. Please see the following picture:
[![][2]][2]
But if I run it on a 10-inch tablet it looks like this:
[![][3]][3]
The same will happen when it will run on less than 5-inch phone.
My questions
Do I need to make another layout for the tablet? like in the layout-large folder?
or I can use some event(s) in Jave file that dynamically set the buttons align parent bottom property when the listview is not collapsed.
or it can be fixed in my current XML
Below is the code for that part I am asking for help
<LinearLayout
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:layout_marginTop="10dp"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:id="#+id/btnPastGames"
android:layout_width="match_parent"
android:layout_height="30dp"
android:layout_centerHorizontal="true"
android:layout_marginLeft="15dp"
android:layout_marginStart="15dp"
android:background="#color/YellowColor"
android:text="Past Games"
android:textAllCaps="false"
android:textSize="15sp" />
<ListView
android:id="#+id/lvPastGames"
android:layout_width="match_parent"
android:layout_height="255dp"
android:layout_below="#+id/btnPastGames"
android:layout_centerHorizontal="true"
android:layout_marginLeft="17dp"
android:layout_marginStart="17dp"
android:layout_marginTop="5dp"
android:divider="#null" />
<Button
android:id="#+id/btnUpcommigGames"
android:layout_width="match_parent"
android:layout_height="30dp"
android:layout_below="#+id/lvPastGames"
android:layout_centerHorizontal="true"
android:layout_marginLeft="15dp"
android:layout_marginStart="15dp"
android:background="#color/YellowColor"
android:text="Up Coming Games"
android:textAllCaps="false"
android:textSize="15sp" />
<ListView
android:id="#+id/lvUpcomingGames"
android:layout_width="match_parent"
android:layout_height="255dp"
android:layout_below="#+id/btnUpcommigGames"
android:layout_centerHorizontal="true"
android:layout_marginLeft="17dp"
android:layout_marginStart="17dp"
android:divider="#null" />
</RelativeLayout>
</LinearLayout>
If you guys can give me some advice on making the user interface that will run on all screen sizes and densities I will be very thankful
Thanks to anyone who will help me
You are trying to workaround functionality of ExpandableListView. Look at the following page:
http://www.androidhive.info/2013/07/android-expandable-list-view-tutorial/
Need some enlightenment if this is different Android version issue (v18 SDK and before).
Below is the layout we have, in particular the txt_subitem should be align bottom of img_picture. The code below works fine for v19 and later (since Kit-Kat), but not for v18, as shown in picture beneath.
<RelativeLayout
android:id="#+id/img_container"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/img_picture"
android:layout_width="100dp"
android:layout_height="80dp"
android:src="#0f0"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:layout_margin="20dp"/>
<TextView
android:id="#+id/txt_subitem"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/img_picture"
android:text="testing"
android:layout_alignBottom="#+id/img_picture"
android:background="#00f"
/>
</RelativeLayout>
The below shows what v19 SDK display. E.g. the blue color is aligned with the green box, which is expected due to android:layout_alignBottom="#id/img_picture"
However, for v18 SDK and before (tested on v17 and v16 through emulator and real devices), the image is layout where the blue color box is not aligned as expected, but alignment extend to the margin (20dp) of #+id\img_picture.
Could someone shed some light if this is the Android v18 SDK issue or I have missed something. Thanks!
For API 18 and earlier, the margin is being applied after the alignment so if the margin in the ImageView is greater than 0 you will get your textview moved. You can check this setting the margin to 0.
If you want to add a margin from his parent, try this:
Keeping android:layout_margin="20dp", add android:layout_marginTop="10dp" to your TextView
Not keeping android:layout_margin="20dp", use padding in the parent view (like the example).
<RelativeLayout
android:id="#+id/img_container"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="20dp">
<ImageView
android:id="#+id/img_picture"
android:layout_width="100dp"
android:layout_height="80dp"
android:src="#0f0"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"/>
<TextView
android:id="#+id/txt_subitem"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#id/img_picture"
android:layout_alignLeft="#id/img_picture"
android:text="testing"
android:background="#00f"/>
</RelativeLayout>
#Courtesy to Frank N. Stein
<RelativeLayout
android:id="#+id/img_container"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/img_picture"
android:layout_width="100dp"
android:layout_height="80dp"
android:src="#0f0"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:layout_margin="20dp"/>
<TextView
android:id="#+id/txt_subitem"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#id/img_picture"
android:text="testing"
android:layout_alignBottom="#id/img_picture"
android:background="#00f"
/>
</RelativeLayout>
you can use FrameLayout instead of RelativeLayout. that will suitable for your requirement.In FrameLayout you can move your TextView with simply using gravity.
What the cause of this design view error in Android Studio?
Exception raised during rendering: mBaselineAlignedChildIndex of LinearLayout points to a View that doesn't know how to get its baseline.
Here's the layout:
<ScrollView
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/mainListView"
android:orientation="vertical">
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/bg_btn_btm_actionbar"
android:src="#mipmap/ab_solid_example"/>
<ListView
android:id="#+id/eventStates"
android:layout_width="wrap_content"
android:layout_height="40dp"
android:background="#drawable/listviewimg"
android:drawSelectorOnTop="true"
android:footerDividersEnabled="true"
android:headerDividersEnabled="true"
android:textColor="#000000" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<Button
android:id="#+id/btn_cancel_callresult"
android:layout_width="153dp"
android:layout_height="wrap_content"
android:layout_gravity="bottom" android:layout_marginRight="#dimen/abc_action_bar_default_padding_material"
android:background="#color/white"
android:onClick="cancelCallResult"
android:text="Cancel"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textColor="#color/white" />
</LinearLayout>
</LinearLayout>
</ScrollView>
</LinearLayout>
Just had this same error. Baseline-alignment has to do with the parent LinearLayout determining the baseline of each child, and specifically, the last child in the layout. My issue involved a TimePicker - in API 21+, it's a graphical clock, so there are no TextViews to provide baseline information.
Here, the problem is in lines 27-35:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<Button
android:id="#+id/btn_cancel_callresult"
android:layout_width="153dp"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
You're missing an "android:orientation=vertical" (or horizontal) on this inner LinearLayout around the Button, and the Button itself specifies a gravity within its parent ("linear-gravity") of "bottom". There's no orientation or height specified for any of it, so the outer LinearLayout doesn't know how to determine a baseline for it.
Also, that inner LinearLayout is unnecessary as-is. If you want an empty space between the List and the Button, try using a Space widget, or if you want the List to fill the space all the way to the Button, give the List a weight attribute ("layout-weight=1.0").
I know this is old but for people who run into this problem, this is a known bug, lookup "Issue 214062".
It has been resolved in API 24.
It is only a problem on the Android Studio preview tab, not on the actual emulator or device, when TimePicker visibility is gone.
To fix this issue, use tools namespace as quickfix, so that at least you'll be able to see the preview, while still being hidden on a device, like so:
<TimePicker
android:id="#+id/timerpicker"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="gone"
tools:visibility="visible"
/>
I'm trying to set my TextView to the left of an ImageButton, but I can't seems to find this option.
I was expecting to use something like android:layout_alignLeft, but this option is missing.
I've tried to google the issue, but couldn't find any relative results.
Without it my TextView overlaps the ImageButton and I want to avoid it.
UPDATE
The full xml code is too complex, but here is the important part of it:
<FrameLayout
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_alignParentLeft="true"
android:background="#color/white"
android:layout_marginLeft="8dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:layout_toLeftOf="#+id/frameLayoutBalanceClosed">
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/button_edit_nickname"
android:id="#+id/card_closed_control_editNickname" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/card_closed_description_nickname"
android:layout_margin="8dp" android:layout_gravity="left"/>
</FrameLayout>
I think what you need is a RelativeLayout. You can specify your TextView to the left of your ImageView with it's specifications. Your code would look something like this:
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<TextView
android:id="#+id/text"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_toLeftOf="#+id/imagebutton1" />
<ImageButton
android:id="#+id/imagebutton1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</RelativeLayout>
The reason FrameLayout isn't working is because it's purpose is to overlay items on top of each other, which wouldn't work at all!
If that isn't what you're looking for, you could also use a TableLayout in which items are arranged in columns.