When the phone is in portrait mode, it shows the title and image at the top and below that there's the button and ListView with comments. However when I turn the phone to be in landscape mode, the button and ListView dissapear and only the title and image are shown. I basically can't scroll below the image anymore.
There is a third element -- a TextView for the body -- that is also inside that ScrollView: each layout will either have that TextView with content or an image. The same thing happens when it's the TextView that has content and no image. This does not occur when the image or text don't take up the entire screen though.
Portrait mode:
Landscape mode:
Accompanying code:
<LinearLayout 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="vertical"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context="net.vannevel.redditapp.activities.PostActivity">
<TextView
android:id="#+id/postDetailTitle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:textColor="#000" />
<ScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageView
android:id="#+id/postDetailImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:id="#+id/postDetailBody"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
</ScrollView>
<Button
android:id="#+id/postDetailViewOnlineButton"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:onClick="onViewOnlineButtonClicked"
android:text="View original source" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="COMMENTS" />
<ListView
android:id="#+id/postDetailCommentList"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
So your problem is that the items you have inside the scroll view are taller than the screen height in landscape. Even if you scroll inside the ScrollView, there's nothing you can do once you get to the end of it. All the elements placed outside the ScrollView are going to be off screen and placed outside any scrollable container.
I can see 3 possible solutions:
1 - set fixed size to the scroll view so that it doesn't occupy the whole screen, so that you let the other views in. Not practical, however: phone in landscape means short height and you have to fit a picture and list with comments...
2 - have a different layout for landscape - picture on left, list with comments on right
3 - get rid of the ScrollView and set everything above the ListView as a ListView header (addHeaderView)
For example:
Step 1 - extract everything you have on top of the ListView and put it into a different layout file - let's call it header.xml
Step 2 - inflate the layout:
View headerView = inflater.inflate(R.layout.header, listView, false);
Step 3 - initialize the items on the header just like you do it now
Step 4 - set the view as the header of the list ListView:
listView.addHeaderView(headerView, null, false);
The side effect of this approach is that the header, being part of the ListView now, it will scroll as you scroll the list. Also, it will offset your position in the adapter by 1.
Change:
<ScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="300dp"
android:orientation="vertical">
Or implemet two layouts portland and landscape orientation.
Related
How to scroll an EditText with listview to the very top of the layout when keyborad is up on focus EditText in fragment?
i desgin a custom spinner with edit text and listview and have almost five spinner in the Scrollview i want when i click on edittext then edit text and its list scroll up and full visible in the screen
what happen with me you can see on screen shot the list is not fully visible and it has fixed height.
it's so simple
you just have to place your recyclerview/listview and editTex field inside ScrollView add add android:nestedScrollingEnabled="false" in your recylcer view and you are good to go!
Sample Code:
<ScrollView
android:layout_width="match_parent"
android:layout_height="0dp"
android:fillViewport="true"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toBottomOf="#id/top_toolbar">
<EditText
android:id="+#id/editText"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/rView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:nestedScrollingEnabled="false"
android:overScrollMode="never"
app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
tools:itemCount="5" />
</ScrollView>
I have a PlayerView that takes up the top half of the Activity in portrait orientation with the bottom half of the screen showing some text.
I need to have the controller under the video without overlapping the video content (it will always be shown). By default when a user touches the video the controller appears at the bottom of the video covering the bottom part of the video. I my case I need the controller to stick under the video with no intersections with the video content.
I went through SimpleExoPlayer and PlayerView APIs but I haven't found any way to do so.
Question: How can I place the controller under the video with ExoPlayer?
Here is how the layout looks like:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.google.android.exoplayer2.ui.PlayerView
android:id="#+id/video_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<TextView
android:id="#+id/text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_below="#id/video_view"
android:scrollbars="vertical" />
</RelativeLayout>
This will push the controls down to the bottom of the screen:
<RelativeLayout 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">
<com.google.android.exoplayer2.ui.PlayerView
android:id="#+id/video_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:use_controller="false" />
<com.google.android.exoplayer2.ui.PlayerControlView
android:id="#+id/controls"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/video_view"
app:show_timeout="0" />
</RelativeLayout>
Then in Java:
PlayerView videoView = findViewById(R.id.video_view);
PlayerControlView controls = findViewById(R.id.controls);
controls.setPlayer(videoView.getPlayer());
Edit: Modified my answer to suggestion from #RashimiGautam
Refer to the answer by #Pierre.
Also to remove controller from above PlayerView, in that case, #id/video_view by writing player.showController(false) in java file.
You can also use app:use_controller:false in the xml.
So you will the only the video without controller on top. And link it to a new controller, in that case, #id/controls at the bottom of the video.
This might give you an idea, also have you tried to override the controls?
As an example, suppose we want our playback controls to consist of only a play/pause button positioned in the center of the view. We can achieve this by creating exo_playback_control_view.xml file in the application’s res/layout directory, containing:
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageButton android:id="#id/exo_play"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_gravity="center"
android:background="#CC000000"
style="#style/ExoMediaButton.Play"/>
<ImageButton android:id="#id/exo_pause"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_gravity="center"
android:background="#CC000000"
style="#style/ExoMediaButton.Pause"/>
</FrameLayout>
Note that in the layout #id/exo_play and #id/exo_pause are standard ids defined by the ExoPlayer library. Use of standard ids is required so that child views can be identified, bound to the player and updated in an appropriate way. A full list of the standard ids for each view can be found in the Javadoc for PlaybackControlView and SimpleExoPlayerView. Use of each standard id is optional.
https://medium.com/google-exoplayer/customizing-exoplayers-ui-components-728cf55ee07a
I have two Buttons nested in a LinearLayout. Between these Buttons are two TextViews. In the Xml, I have set the foreground to an image for each of these Buttons.
It runs fine on my device for Api 23. But on other devices below Api 23, the foreground image does not display and instead results in a default white solid color. Is there any way to make these images show using foreground below Api 23?
We have tried FrameLayout but it does not do what we want it to do. Would ImageButtons be a better way to solve this issue?
One of the core functions of our app is that every time a user taps a Button, the size increases and the image stretches accordingly. This is done dynamically in code. If I were to use ImageButtons, I would need to set the layout parameters every time for height and width, rather than one line of code that sets the height.
Any tips would be appreciated!
EDIT: Code I am working with -
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:weightSum="11"
android:background="#android:color/black">
<Button
android:layout_weight="5"
android:id="#+id/firstP"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:foreground="#drawable/icebutton"
android:scaleX="1"
android:scaleY="1"/>
<TextView
android:layout_weight="0.5"
android:id="#+id/firstPlayer"
android:gravity="center"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:rotation="180"
android:textColor="#android:color/white"
android:background="#android:color/transparent"/>
<TextView
android:layout_weight="0.5"
android:id="#+id/secondPlayer"
android:gravity="center"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColor="#android:color/white"
android:background="#android:color/transparent"/>
<Button
android:layout_weight="5"
android:id="#+id/secondP"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:foreground="#drawable/firebutton"
android:scaleX="1"
android:scaleY="1"/>
</LinearLayout>
We found out that there were two issues causing the images to not be shown.
1. The size of the image file was too big, creating an outOfMemory error which in turn resulted in the buttons not displaying the images.
2. The foreground attribute does not work for API 22 and below.
Steps to solving these issues:
1. We reduced the size of the image files.
2. We replaced Button with ImageButton
3. In the XML file we removed the foreground attribute, added a black background, and added the image via the src attribute. The following is a snippet.
<ImageButton
android:layout_weight="5"
android:id="#+id/firstP"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:src="#drawable/icebutton"
android:scaleType="fitXY"
android:background="#android:color/black"/>
We then had to change our code to dynamically adjust the height of the buttons to match the new image buttons with the help of this link by setting the LayoutParams:
how to change size of button dynamic in android
Now everything works perfectly!
According to the following picture:
I want something like this
the ListView is not a NavigationDrawer, it's a part of the Activity.
Items the ListView are columns of a database and when user selected Each of them, on the left side(Activity), other fields of that column should be displayed.
How can I do this?
Try it like this
<LinearLayout 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">
<LinearLayout
android:layout_width="0"
android:layout_height="match_parent"
android:layout_weight="1">
//Your UI
</LinearLayout>
<LinearLayout
android:layout_width="0"
android:layout_height="match_parent"
android:layout_weight="1">
//Your ListView
</LinearLayout>
</LinearLayout>
So your layout will have fragments one a left fragment and one a right one
XML
<LinearLayout
orientation:horizontal>
<FrameLayout
id=leftFragment
weight=1/>
<FrameLayout
id=rightFragment
weight=1/>
</LinearLayout>
Java Code
FragmentManager fm=getFragmentManager();
fm.replace(R.id.leftFragment,new LeftFragment());
fm.commit();
Similarly for Right Fragment
You should use a LinearLayout with Horizontal orientation, then have two layout, one for the left side of the screen and one for the right side of the screen (with your ListView). Then you should use the layout_weight attribute for each layout by declaring like 0.7 for the right one (ListView) and 0.3 for the left one, it should looks like your picture
I'm trying to place an image view at the top of the screen, but it has some type of margin above and below it. So I tried adjustViewBounds = true, and it worked but then it wouldn't reach the sides of the screen. I just want it to be flush with the top of the screen, and reach the sides. Any suggestions?
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="match_parent"
tools:context="${packageName}.${activityClass}"
android:orientation="vertical" >
<ImageView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:src="#drawable/title_bar"/>
<ScrollView
android:id="#+id/scrollView1"
android:layout_width="fill_parent"
android:layout_height="200dp" >
<LinearLayout
android:id="#+id/goals"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:orientation="vertical" >
</LinearLayout>
</ScrollView>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:background="#android:color/black" >
</RelativeLayout>
If it is just colored title bar - then it is make sense to use just View for example and set background property to needed color. If You have custom image for that and can not adjust it with default ImageView properties - then You can make 9Patch from your image and use it as a background also (in 9patch you decide by yourself how to scratch image and where to place content). You can find 9patch tool in android SDK. More info about 9patch:
http://developer.android.com/reference/android/graphics/NinePatch.html
I had this same problem. What I ended up doing was using a negative margin on the top of the ImageView like so:
android:layout_marginTop="-4dp"
You may have to play around to find the optimal number of dp for you. Hope this helps.