WebView in RelativeLayout doesn't center - android

I have a layout:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<WebView
android:layout_width="400dp"
android:layout_height="match_parent"
android:layout_centerHorizontal="true" />
</RelativeLayout>
When looking the the Android Studio layout designer, the WebView is centred as expected. When pushed onto a device or run in the emulator, the WebView is left justified, ignoring the centerHorizontal tag. Below is a screenshot with show view bounds enabled.
How can I get the WebView to centre?

Make sure the parent was set as match_parent like this .
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<WebView
android:layout_width="400dp"
android:layout_height="match_parent"
android:layout_centerHorizontal="true" />
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >

Try this
<WebView
android:layout_width="400dp"
android:layout_height="match_parent"
android:layout_centerInParent="true" />

if you want to make a view centre aligned, You can use android:centre on the parent view.It will work.
So,the code will change as
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="centre">
<WebView
android:layout_width="400dp"
android:layout_height="match_parent"
android:layout_centerHorizontal="true" />
</RelativeLayout>
i hope this will help you :)

Related

How can I add a footer-sized image to the bottom of any mobile application?

Is there a way to add a footer-sized image to the bottom of any mobile application?
The best way to do this is by adding a layout set to the bottom of you activity while letting the rest of the screen scrollable. You can achive this by doing the following:
<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"
tools:context=".MainActivity" >
<ScrollView
android:id="#+id/scrollablContent"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/footerView"
android:layout_below="#+id/headerView" >
<LinearLayout
android:id="#+id/content"
android:layout_width="match_parent"
android:layout_height="match_parent" >
</LinearLayout>
</ScrollView>
<LinearLayout
android:id="#+id/footerView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true" >
<ImageView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:src="#drawable/image_name" />
</LinearLayout>
</RelativeLayout>
You can also remove the bottom LinearLayout if you just wish to add an Image and nothing in addition to it. Also similarly a header can be added.

Android Scrollview content size smaller when should be

I want to have a "fixed_space" at the top of screen and a "scrollview" at the bottom of the screen which should be below fixed_space. The rest of the screen is a container "rest_space".
Unfortunately my scrollview has a shorter height(by 100dp which fixed_space has) ,if content is too big/scrollable.
I tried to achieve same with ConstraintLayout and RelativeLayout, but I have got same result.
Any ideas why scrollview has 100dp shorter height, as it should be?
EDIT: Scrollview should take as much space as she needs.
<?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">
<View
android:id="#+id/fixed_space"
android:layout_width="match_parent"
android:layout_height="100dp"
android:background="#android:color/holo_red_dark" />
<View
android:id="#+id/rest_space"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#android:color/black" />
<ScrollView
android:id="#+id/scrollview"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/holo_green_dark"
android:fillViewport="true">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="START OF SCROLLVIEW \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nMIDDLE OF SCROLLVIEW \n\n\n\n\n\n\n\n\n\n\n\nEND OF SCROLLVIEW" />
</ScrollView>
</LinearLayout>
Try this:
<?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">
<View
android:id="#+id/fixed_space"
android:layout_width="match_parent"
android:layout_height="100dp"
android:background="#android:color/holo_red_dark" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<View
android:id="#+id/rest_space"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/scrollview"
android:background="#android:color/black" />
<ScrollView
android:id="#+id/scrollview"
android:layout_alignParentBottom="true"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/holo_green_dark"
android:fillViewport="true">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="START OF SCROLLVIEW \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nMIDDLE OF SCROLLVIEW \n\n\n\n\n\n\n\n\n\n\n\nEND OF SCROLLVIEW" />
</ScrollView>
</RelativeLayout>
</LinearLayout>
Ok, I think this should solve your probem:
First, I started by using RelativeLayout. I did it in order to get the fixed_space aligned to the top and the scrollview aligned to the bottom.
Then I changed the View for a LinearLayout and put a TextView within it so I could use wrap_content and this is the tricky part:
When you use ScrollView with wrap_content and a View with the weight stuff, Android can't make the calculations it needs to get the screen drawed because there is no reference. When I put the TextView with wrap_content itself that gives the reference because Android know the size of the text.
You don't have to use the TextView but you will need anything that gives Android that reference.
In this case, the scrollview is going to be stretched, not the LinearLayout. If you want the second to get strached, then I'm afraid you are going to need to set a fixed height to your scrollview.
<?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"
android:orientation="vertical">
<View
android:id="#+id/fixed_space"
android:layout_width="match_parent"
android:layout_height="100dp"
android:layout_alignParentTop="true"
android:background="#android:color/holo_red_dark" />
<LinearLayout
android:id="#+id/rest_space"
android:layout_below="#+id/fixed_space"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/black">
<TextView
android:text="Test"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
<ScrollView
android:id="#+id/scrollview"
android:layout_below="#id/rest_space"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/holo_green_dark"
android:layout_alignParentBottom="true">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="START OF SCROLLVIEW \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nMIDDLE OF SCROLLVIEW \n\n\n\n\n\n\n\n\n\n\n\nEND OF SCROLLVIEW" />
</ScrollView>
</RelativeLayout>

Android ListView inside ScrollView not proper

I am sorry, I am new to android xml part. I am setting my listview which is inside scroll view to full screen but its frame is still small. How to resolve it? I have already set both width and height to "match_parent". Can someone help?
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.stacktips.speechtotext.MainActivity">
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">
<ListView
android:id="#+id/list"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:listitem="#layout/row" >
</ListView>
</ScrollView>
<LinearLayout
android:id="#+id/btnSpeakContainer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="#f5f5f5"
android:gravity="center_horizontal"
android:orientation="vertical"
android:padding="20dp">
<ImageButton
android:id="#+id/btnSpeak"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#null"
android:padding="16dp"
android:scaleType="fitCenter"
android:src="#mipmap/ic_microphone_2" />
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/btnSpeak"
android:layout_margin="10dp"
android:text="#string/hint" />
</LinearLayout>
</RelativeLayout>
Putting the ListView inside a ScrollView means the ListView will not go to its full height. Take out the ScrollView surrounding the ListView and this should work for you :) ListView itself is scrollable.

How to not overlapping with RelativeLayout

I'm trying to get a layout like this:
OK, I want the scroll to begin at the end of the first imageview and I want the scroll to finish at he start of the second imageview. I mean, I don't want imageviews to overlap the scroll. I don't know if I've explained well.
First I tried with LinearLayout but I can't align at the bottom the second ImageView. With RelativeLayout, ImageViews overlap the scroll, I can set margin-top to the scroll to solve the problem with the first ImageView, but I don't know how to solve the problem wit the second ImageView.
I also tried to use a RelativeLayout inside the LinearLayout like this:
<LinearLayout ....>
<ImageView ...></ImageView>
<ScrollView...></ScrollView>
<RelativeLayout...>
<ImageView....></ImageView>
</RelativeLayout>
</LinearLayout>
The second ImageView doesn't appear. I guess scroll is overlapping it.
I Would appreciate any help. Thanx you.
Use
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<ImageView
android:id="#+id/imageViewTop"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:src="#drawable/ic_launcher" />
<ImageView
android:id="#+id/imageViewBottom"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:src="#drawable/ic_launcher" />
<ScrollView
android:id="#+id/scrollView1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/imageViewBottom"
android:layout_below="#+id/imageViewTop"
android:background="#006600" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
</LinearLayout>
</ScrollView>
</RelativeLayout>
In your xml, put your ListView below imageview1 and above imageView2.
Make sure to use a relativelayout as a parent.
you can do like this
<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:background="#android:color/black"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context=".MainActivity" >
<TextView
android:id="#+id/topView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/white"
android:text="top view" />
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/bottomView"
android:layout_below="#+id/topView"
android:background="#android:color/holo_red_dark" />
<TextView
android:id="#+id/bottomView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="#android:color/white"
android:text="bottom view" />
</RelativeLayout>

Android: top menu bar + scrollview?

I'm new with Android (used to develop with Visual Studio...) and so far I have a doubt with the layouts:
What I want to do is a layout with a bar at the top (just to put some button or extra information) and a scroll view that fills the rest of the screen.
This is the way I am doing it so far:
<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"
tools:context=".Home" >
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:background="#android:color/white" >
<!-- I can put any button or text I want in here -->
</LinearLayout>
<ScrollView
android:id="#+id/scrollView1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="50dp"
android:background="#drawable/wallpaper" >
</ScrollView>
This is working as I expected, but my question is if I'm doing it the correct way or should I do it in a better way (most efficient).
Thanks in advance
Absolute positioning isn't recommended. For example, if you need to increase the height from 50dp to 100dp, you will have to change this value in several different places.
I know at least 2 ways to improve your layout.
1) Use features of RelativeLayout (android:layout_below="#id/linearLayout1" or its counterpart layout_above)
<RelativeLayout ...>
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:background="#android:color/white">
</LinearLayout>
<ScrollView
android:id="#+id/scrollView1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/linearLayout1"
android:fillViewport="true"
android:background="#drawable/wallpaper" >
</ScrollView>
</RelativeLayout>
2) Replace by LinearLayout (and use android:layout_weight="1.0")
<LinearLayout ...>
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:background="#android:color/white">
</LinearLayout>
<ScrollView
android:id="#+id/scrollView1"
android:layout_width="match_parent"
android:layout_height="0dip"
android:layout_weight="1.0"
android:fillViewport="true"
android:background="#drawable/wallpaper" >
</ScrollView>
</LinearLayout>
The line android:layout_height="0dip" may look strange. Actually you can use match_parent, but Eclipse IDE highlights such line and recommends to use 0dip if you have specified android:layout_weight.
Also I added android:fillViewport="true" to your scrollview. It indicates that the content inside the scrollview will expand to the full height if it is necessary, you can read about this property here

Categories

Resources