Here is my layout， Why is there a white line between the status bar and the title? How do I remove this white line。
I made an album, but found white lines in the nested layout. I didn't search for relevant content on Google, so I posted a post for you to look at. Here are my code and screenshots.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:background="#color/image_display_color">
<FrameLayout
android:id="#+id/surface_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center">
<com.github.chrisbanes.photoview.PhotoView
android:id="#+id/big_image"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</FrameLayout>
<!-- toolbar -->
<LinearLayout
android:id="#+id/layout_top"
android:layout_width="match_parent"
android:layout_height="48dp"
android:layout_marginTop="30dp"
android:visibility="visible"
android:background="#80000000">
<ImageView
android:id="#+id/back"
android:layout_width="48dp"
android:layout_height="48dp"
android:contentDescription="TODO"
android:paddingLeft="10dp"
android:src="#drawable/video_back" />
<TextView
android:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="48dp"
android:paddingLeft="10dp"
android:textColor="#android:color/white"
android:textSize="18sp" />
</LinearLayout>
<!-- 播放进度-->
<LinearLayout
android:background="#80000000"
android:id="#+id/layout_bottom"
android:layout_width="match_parent"
android:layout_height="50dp"
android:alpha="0.9"
android:layout_alignParentBottom="true"
android:layout_marginBottom="20dp"
android:gravity="center_vertical"
android:orientation="horizontal"
android:weightSum="5"
android:visibility="visible">
<Button
android:id="#+id/btn_share"
android:background="#android:color/transparent"
android:layout_width="wrap_content"
android:layout_marginStart="10dp"
android:text="分享"
android:textColor="#color/white"
android:drawableTop="#drawable/ic_baseline_share_24"
android:layout_weight="1"
android:layout_gravity="center_vertical"
android:layout_height="wrap_content" />
<Button
android:id="#+id/btn_favaite"
android:background="#android:color/transparent"
android:layout_weight="1"
android:text="收藏"
android:textColor="#color/white"
android:drawableTop="#drawable/ic_baseline_favorite_24"
android:layout_width="wrap_content"
android:layout_marginStart="10dp"
android:layout_gravity="center_vertical"
android:layout_height="wrap_content" />
<Button
android:id="#+id/btn_copy"
android:background="#android:color/transparent"
android:layout_weight="1"
android:textColor="#color/white"
android:text="复制"
android:drawableTop="#drawable/ic_copy_white"
android:layout_width="wrap_content"
android:layout_marginStart="10dp"
android:layout_gravity="center_vertical"
android:layout_height="wrap_content" />
<Button
android:id="#+id/btn_delete"
android:textColor="#color/white"
android:background="#android:color/transparent"
android:layout_weight="1"
android:layout_width="wrap_content"
android:layout_marginStart="10dp"
android:text="删除"
android:drawableTop="#drawable/ic_baseline_delete_24"
android:layout_gravity="center_vertical"
android:layout_height="wrap_content" />
<Button
android:id="#+id/btn_more"
android:background="#android:color/transparent"
android:layout_weight="1"
android:textColor="#color/white"
android:layout_width="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginRight="10dp"
android:layout_marginStart="10dp"
android:drawableTop="#drawable/ic_baseline_more_vert_24"
android:text="更多"
android:layout_height="wrap_content" />
</LinearLayout>
</RelativeLayout>
Here is my screenshot。
image1
image2
The "line" is because your dark overlay doesn't exactly line up with the top of your content/bottom of the status bar. There's a gap where the content shows through:
You can see the photos through that gap. I'm assuming this layout is overlaid on the entire screen, and you're using layout_marginTop="30dp" to try and move it below the status bar? That's going to have problems - the size of the bar depends on the device. On stock Android (following Material Design guidelines) the status bar is 24dp. On your device, it's obviously close to 30dp - but not exactly! That's why it doesn't line up.
I think making this work perfectly is going to be difficult. If I were you, I wouldn't try to overlay the entire screen. If you use a NoActionBar theme, and add a Toolbar into your layout instead, then you can add your overlay in the same layout. You can cover the Toolbar if you like, and the top of the Activity/Fragment will be below the status bar.
But it looks like you're making some kind of overlay over other apps - in that case, have a look at this thread for some ideas about getting the current device's status bar height (if any): Height of status bar in Android
Related
I'm working with a class that extends Dialog. It should display a progressbar element. Sometimes there will be a message, sometimes there isn't.
The progressbar shows when there is no message but does not show when there is a message and I do not understand why.
Here is the layout code:
<TextView
android:id="#+id/dialog_message"
style="#style/arial"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="20dp"
android:layout_marginLeft="100dp"
android:layout_marginRight="100dp"
android:layout_marginBottom="20dp"
android:text=""
android:textAlignment="center"
android:textColor="#android:color/white"
android:textSize="18sp"
/>
<ProgressBar
android:id="#+id/progress"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginBottom="30dp"
android:layout_marginLeft="100dp"
android:layout_marginRight="100dp"
android:layout_marginTop="10dp"
android:visibility="gone" />
Here is the java:
public void progressDialog () {
if(this.message.getText().length() > 0){
message.setVisibility(View.VISIBLE);
}else{
message.setVisibility(View.GONE);
}
progress.setVisibility(View.VISIBLE);
leftButton.setVisibility(View.GONE);
rightButton.setVisibility(View.GONE);
}
When message is set GONE the progressbar shows, when message is set VISIBLE the progressbar does not show. I assume it is getting hidden by the message somehow.
I've tried moving it around in the layout as this question might suggest was needed ProgressBar not displaying, but to no avail.
How do I get the progressbar to always show when calling progressDialog()?
Edit***** Added full layout 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="wrap_content"
android:background="#drawable/dialog_background"
android:orientation="vertical">
<TextView
android:id="#+id/dialog_title"
style="#style/arialBold"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginBottom="5dp"
android:layout_marginTop="35dp"
android:ellipsize="end"
android:maxLines="1"
android:text="#string/waiting"
android:textColor="#android:color/white"
android:textSize="21sp" />
<TextView
android:id="#+id/dialog_message"
style="#style/arial"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_margin="30dp"
android:text=" "
android:textAlignment="center"
android:textColor="#android:color/white"
android:textSize="20sp" />
<ProgressBar
android:id="#+id/progress"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginBottom="30dp"
android:layout_marginLeft="100dp"
android:layout_marginRight="100dp"
android:layout_marginTop="30dp"
android:visibility="gone" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginBottom="30dp"
android:orientation="horizontal">
<LinearLayout
android:id="#+id/dialog_button_one"
style="#android:style/Widget.Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="#color/purple"
android:orientation="horizontal">
<TextView
android:id="#+id/dialog_button_one_text"
style="#style/arialBold"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:layout_marginLeft="#dimen/alert_dialog_button_margin_left_right"
android:layout_marginRight="#dimen/alert_dialog_button_margin_left_right"
android:layout_marginTop="10dp"
android:ellipsize="end"
android:maxLines="1"
android:textColor="#android:color/white"
android:textSize="20sp" />
</LinearLayout>
<LinearLayout
android:id="#+id/dialog_button_two"
style="#android:style/Widget.Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginStart="20dp"
android:background="#color/purple"
android:orientation="horizontal">
<TextView
android:id="#+id/dialog_button_two_text"
style="#style/arialBold"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:layout_marginLeft="#dimen/alert_dialog_button_margin_left_right"
android:layout_marginRight="#dimen/alert_dialog_button_margin_left_right"
android:layout_marginTop="10dp"
android:ellipsize="end"
android:maxLines="1"
android:textColor="#android:color/white"
android:textSize="20sp" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
I think you are using linear layout. So use Relative Layout instead of linear layout.
Add a parent constraint layout to your linear layout and move progress bar out of linear layout.
<constraint>
<linear/>
<progress/>
</constraint>
Some thing like this:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/dialog_background"
android:orientation="vertical"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
>
<!-- Your complete layout -->
</LinearLayout>
<ProgressBar
android:id="#+id/progress"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:visibility="gone" />
</android.support.constraint.ConstraintLayout>
Ok, it looks like you use some wrong property for what you want, look:
android:layout_gravity="center" will put your TextView in center of the layout, but you also set it in your ProgressBar this mean that only one of then will be shown, it is only useful when you want to show one view at time, if you want to show both, try to remove one of this property.
Another thing, you set android:layout_margin="30dp" on TextView, so your progressBar will be far removed from TextView, which may also cause the invisibility of the ProgressBar, try 16dp.
<TextView
android:id="#+id/dialog_message"
style="#style/arial"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center" // remove here or in ProgressBar
android:layout_margin="16dp" // I just replace 30dp to 16dp
android:text=" "
android:textAlignment="center"
android:textColor="#android:color/white"
android:textSize="20sp" />
EDIT - Another Answer
I edit your full XML code, replacing some margin with padding, and show the progressBar always. You can now hide/show the textView or progressbar, it should work.
I also replace some property, since I have not it here, make sure to add again. Hope it help you.
I recommend to use RelativeLayout to improve your UI. Below I show the current XML behavior.
When ProgressBar is showed
The full source code on link below, I am unable to paste the code here.
https://gist.github.com/pedromassango/a6dc213823b297931f1ef2e6b6954466
I have 7 image buttons I am displaying and while editing the xml the preview looks perfect, however when I launch the app in an emulator it doesn't seem to scale and is cutting off the images.
It should look like this:
-0-0-
0-0-0
-0-0-
Where the '0's are the buttons. I have it setup for one overall relative layout and three linear layouts. The middle places first then the top and bottom align off the middle.
Here is my XML file
<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"
android:orientation="horizontal"
android:id="#+id/activity_color_wheel">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:id="#+id/middle_left">
<ImageButton
android:id="#+id/dode1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/dodecagon1"
android:onClick="selected"
android:background="?android:attr/selectableItemBackground" />
<ImageButton
android:id="#+id/dode2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/dodecagon2"
android:onClick="selected"
android:background="?android:attr/selectableItemBackground"
/>
<ImageButton
android:id="#+id/dode3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/dodecagon3"
android:onClick="selected"
android:background="?android:attr/selectableItemBackground" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/middle_left"
android:layout_centerInParent="true"
android:id="#+id/bottom">
<ImageButton
android:id="#+id/dode4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/dodecagon4"
android:onClick="selected"
android:background="?android:attr/selectableItemBackground"/>
<ImageButton
android:id="#+id/dode5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/dodecagon5"
android:onClick="selected"
android:background="?android:attr/selectableItemBackground"/>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/middle_left"
android:layout_centerInParent="true"
android:id="#+id/top">
<ImageButton
android:id="#+id/dode6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/dodecagon6"
android:onClick="selected"
android:background="?android:attr/selectableItemBackground"/>
<ImageButton
android:id="#+id/dode7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/dodecagon7"
android:onClick="selected"
android:background="?android:attr/selectableItemBackground"/>
</LinearLayout>
<TextView
android:id="#+id/textView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:gravity="center_horizontal"
android:textSize="25dp" />
</RelativeLayout>
Basically the top and bottom layouts get cut off near the bottom. I figure i'm missing some kind of scaling property, but i'm not sure.
All of your views' width and height are "wrap content".
In that case if the total images width/height is greater then the screen's width/height it will just cut off.
what you should do is:
1) set the LinearLayouts width to "match parent".
2) set weight to the children views as you wish.
3) set children width to 0dp for better performance.
Example code snippet:
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_centerInParent="true"
android:id="#+id/middle_left">
<ImageButton
android:id="#+id/dode1"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:src="#drawable/testImage"
android:onClick="selected"
android:background="?android:attr/selectableItemBackground" />
<ImageButton
android:layout_weight="1"
android:id="#+id/dode2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:src="#drawable/testImage"
android:onClick="selected"
android:background="?android:attr/selectableItemBackground"
/>
<ImageButton
android:layout_weight="1"
android:id="#+id/dode3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:src="#drawable/testImage"
android:onClick="selected"
android:background="?android:attr/selectableItemBackground" />
</LinearLayout>
Good luck.
If your problem is only with the top and bottom images, then you only need to add a ScrollView as a parent to your RelativeLayout.
I want to add a red border 50px height at image's bottom.
For ex:
<ImageView android:id="#+id/meme_generated_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_margin="5dp"
android:scaleType="fitCenter" />
<LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content">
<EditText android:id="#+id/edt_meme_bottom_txt1" android:layout_width="match_parent"
android:layout_height="wrap_content" android:layout_margin="5dp"
android:background="#drawable/edt_text_bg" android:ems="10"
android:hint="Write Text" android:padding="10dp" android:singleLine="true" />
</LinearLayout>
my image loading from java file. can you please help me.
use the below code and add it below image
<View android:id="#+id/view"
android:layout_width="match_parent"
android:layout_height="20dp(as per your requirment)"
android:background="your background color or boarder" />
UPDATEReplace your xml by below ml as you posted the code.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation = "vertical">
<ImageView android:id="#+id/meme_generated_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_margin="5dp"
android:scaleType="fitCenter" />
<View android:id="#+id/view"
android:layout_width="match_parent"
android:layout_height="20dp(as per your requirment)"
android:background="your background color or boarder" />
</LinearLayout>
<LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content">
<EditText android:id="#+id/edt_meme_bottom_txt1" android:layout_width="match_parent"
android:layout_height="wrap_content" android:layout_margin="5dp"
android:background="#drawable/edt_text_bg" android:ems="10"
android:hint="Write Text" android:padding="10dp" android:singleLine="true" />
</LinearLayout>
If you want to show the boader below image after loading the image then make the view visibility gone firstly and after image load done in image view then make the view visible through java code.
Hope it would help you.
I need to layout 2 images (longImg and shortImg) horizontally.
The longImg is too long to fit on screen, so really wanting to display a window of it, linked to a SeekBar where the user can scroll the part of the longImg. The container around the longImg must be at a fixed size so the shortImg is not nudged off screen.
What is the best way to do this?
So far:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/container_images_layout"
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
>
<ImageView
android:id="#+id/short_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_weight="0.3"
android:scaleType="fitXY"
android:background="#drawable/bg_black"
android:src="#drawable/shortImg"
/>
<ImageView
android:id="#+id/long_image"
android:layout_width="3906dp"
android:layout_height="wrap_content"
android:layout_weight="0.7"
android:layout_toLeftOf="#id/short_image"
android:scaleType="fitXY"
android:src="#drawable/longImg"
/>
</RelativeLayout>
It seems OK in Eclipse graphical layout, but when testing on device, I only get the long image.
How do you force the smallImg to be always present?
Thanks
Actually you using 'RelativeLayout' in that android:layout_weight="0.7" won't work unless its parent is Linear Layout. I have changed your xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/container_images_layout"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<ImageView
android:id="#+id/short_image"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_weight="0.3"
android:scaleType="fitXY"
android:background="#drawable/bg_black"
android:src="#drawable/shortImg"
/>
<ImageView
android:id="#+id/long_image"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.7"
android:layout_toLeftOf="#id/short_image"
android:scaleType="fitXY"
android:src="#drawable/longImg"
/>
use This :
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/container_images_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<ImageView
android:id="#+id/short_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_weight="0.3"
android:background="#drawable/ic_launcher"
android:scaleType="fitXY"
android:src="#drawable/ic_launcher" />
<ImageView
android:id="#+id/long_image"
android:layout_width="3906dp"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_toLeftOf="#id/short_image"
android:layout_weight="0.7"
android:scaleType="fitXY"
android:src="#drawable/ic_launcher" />
</RelativeLayout>
<LinearLayout
android:id="#+id/layout_information"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="0.17"
android:gravity="center"
android:orientation="horizontal" >
<TextView
android:id="#+id/text_view_destination"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="\# Home in"
android:textColor="#color/solid_white"
android:textSize="19sp"
android:textStyle="bold"
android:layout_gravity="bottom"
/>
<TextView
android:id="#+id/text_view_time"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="30dp"
android:textColor="#color/solid_white"
android:textSize="25sp"
android:textStyle="normal"
android:layout_gravity="bottom"
/>
</LinearLayout>
I want to center the two textViews vertically,
but I want them to be aligned to one line at their bottom.
Now they are alined to the same bottom,
but they are at the bottom of their parent layout.
How can I do this?
I have thought to wrap their current layout parent ("parent1") with another layout
("parent2")
and make "parent1" be in the center of "parent2".
Is there another way without adding elements?
If your problem is that both views are aligned at the bottom of their parent you can use this.
Both views are still aligned to the same bottom and centered on the screen.
Your layout looks like a part of a bigger XML (weight=0.17), that is why I have used fill_parent on layout_width.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/layout_information"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="0.17"
android:gravity="center"
android:orientation="horizontal" >
<TextView
android:id="#+id/text_view_destination"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:text="\# Home in"
android:textColor="#color/solid_white"
android:textSize="19sp"
android:textStyle="bold" />
<TextView
android:id="#+id/text_view_time"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="30dp"
android:text="\# Home in"
android:textColor="#color/solid_white"
android:textSize="25sp"
android:textStyle="normal"
android:layout_alignParentBottom="true"
android:layout_toRightOf="#id/text_view_destination"
android:layout_alignBaseline="#id/text_view_destination" />
</RelativeLayout>
try this way
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/layout_information"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:gravity="center_vertical|bottom"
android:orientation="horizontal" >
<TextView
android:id="#+id/text_view_destination"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="HOme in"
android:textColor="#color/solid_white"
android:textSize="19sp"
android:textStyle="bold" />
<TextView
android:id="#+id/text_view_time"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:textColor="#color/solid_white"
android:textSize="25sp"
android:text="Home out"
android:textStyle="normal" />
</LinearLayout>