how to make app a percent of the screen size - android

I am trying to make my app look like the image below, but by setting my app as a percent of my whole screen (not setting the dp), so that no matter what type of phone I am using, the app will take up the same screen percentage. This is my main activity which just consists of two fragments in one LinearLayout. 
android:layout_width="300dp"
android:layout_height="300dp"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_gravity="center"
android:background="#drawable/rounded_edges"
android:theme="#style/Theme.AppCompat.Light.Dialog.Alert">
<!-- Create a container (FrameLayout) for Body Fragment to switch with other Fragments on button clicks-->
<fragment
android:id="#+id/menuFragment"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_margin="5dp"
class="it.anddev.bradipao.janus.MenuFragment"
tools:layout="#layout/fr_menu">
</fragment>
<FrameLayout
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="end" />
enter image description here
I want my height and width to be a percent of the phone height and width like shown here.

You should use LinearLayout as a container, and use these properties:
weightSum in LinearLayout, set it to 1.
layout_weight in every child of the LinearLayout. For example:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:weightSum="1">
<LinearLayout
android:orientation="vertical"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.75">
....
</LinearLayout>
<LinearLayout
android:orientation="vertical"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.25">
....
</LinearLayout>
</LinearLayout>
First layout will take 75% of the screen and the second 25%.
Note that when using weights, height and/or width has to be 0dp. You can now make it as complex as you need.

Related

Unable to add TextView into main xml Layout

I've been working on an app and am looking to adding a text view below the Camera view so that I could display some text there.
But, for some reason when trying to drag a text view into the layout it doesn't show up on the final screen.
This is my code:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/topLayout"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:keepScreenOn="true">
<com.google.android.CameraSourcePreview
android:id="#+id/preview"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.google.android.GraphicOverlay
android:id="#+id/faceOverlay"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</com.google.android.CameraSourcePreview>
</LinearLayout>
Layout view com.google.android.CameraSourcePreview height is set as 'match_parent' , so its eating up all the space on the view-port.
Try giving particular height and you should be able to see textview added below CameraSourcePreview.
Hope it helps.
Most likely, you're not able to add the TextView due to there not being enough space on the screen.
You're using a LinearLayout which displays all of it's views one after the other in either a vertical or horizontal manner.
Your CameraSourcePreview has it's height and width set to match_parent, which means it'll stretch completely on the screen. However, in a LinearLayout, this also means that there's no space to place the next View because it'll be placed off the screen.
You can add android:layout_weight="1" to your CameraSourcePreview. This will allow your TextView to fit into the LinearLayout because it's basically your CameraSourcePreview telling others it'll resize itself to allow for other components to fit on the screen.
But if you don't want your CameraSourcePreview to resize itself based on other Views, then you should look into using some other Layouts instead of LinearLayout. Perhaps one such as ConstraintLayout or RelativeLayout will work better, since they allow overlapping Views on top of each other.
This is happening because the height of the camera view is taking the whole space on the display you can use layout_weight for LinearLayout to make some necessary space for your TextView.
Just make height of CameraSourcePreview equals to 0dp and add a property
android:layout_weight="1"
So this it would look like this:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/topLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:keepScreenOn="true"
android:orientation="vertical">
<com.google.android.CameraSourcePreview
android:id="#+id/preview"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
<com.google.android.GraphicOverlay
android:id="#+id/faceOverlay"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</com.google.android.CameraSourcePreview>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="some text here" />
</LinearLayout>
Instead of using LinearLayout I suggest to use FrameLayout which is easy to control for your case. It is also possible to display textView on CameraSourcePreview by using following code
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/topLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:keepScreenOn="true">
<com.google.android.CameraSourcePreview
android:id="#+id/preview"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:layout_gravity ="center">
<com.google.android.GraphicOverlay
android:id="#+id/faceOverlay"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</com.google.android.CameraSourcePreview>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="some text here"
android:layout_gravity ="center|bottom" />
</FrameLayout>

How to set layout height to one screen height except actionbar and status bar, in scrollview

I have a layout in a scrollview and I add another layout to the end of the first one. Actually I am trying to make a one page design and the rest of the other views will appear after scrolling. I tried to put linearlayout1 and linearlayout2 to another view but it didn't work. Also I set scrollview android:fillViewport="true" but it made the scrollview in screen size.
I've added an image of what I want, but it could also be one view, I mean lin1 and lin2 together.
I can set width and height for one phone but I want to do this for each screen. For example like yahoo weather app. They have done one layout for first view and start another view from the end of screen. I tried so many things but I couldn't imagine how to put layouts. Could you help me?
Thanks for your help
Here is what I want
Here is I tried:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/scroller"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:id="#+id/linearlayout1"
android:background="#android:color/holo_purple"
android:layout_width="match_parent"
android:layout_height="350dp" >
<TextView
android:text="LinearLayout1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
<LinearLayout
android:id="#+id/linearlayout2"
android:background="#android:color/holo_blue_bright"
android:layout_width="match_parent"
android:layout_height="250dp"
android:orientation="vertical">
<TextView
android:text="LinearLayout2"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
<LinearLayout
android:background="#android:color/holo_green_light"
android:layout_width="match_parent"
android:layout_height="350dp">
<TextView
android:text="LnearLayout3"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
</LinearLayout>
</ScrollView>
But unfortunately I couldn't configure this for each screen size.
enter image description here
Just try this.
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_below="#+id/action_bar"
Instead of hardcoding the height as in:
android:layout_height="250dp"
Set android:layout_height="0dp" and use
android:layout_weight="25"
And also in the other layout use weight. Weight works like this, if you have 3 components in your container, set the weights to let's say 1, 2 and 3 => they will take in that order 1/6, 2/6 and 3/6 of the container. 6 being the sum of 1,2,3. So here instead of using heights as 350 and 250, you can set them to 0 and use weights 2.5 and 3.5 or 25 and 35.

two views with match_parent in linear_layout in scrollview

Is it possible to have two views that are the same height of the activity screen inside of a linear_layout inside of a scrollview? I tried achieving this like so:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true">
<LinearLayout android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<Button android:layout_width="match_parent"
android:layout_height="match_parent"/>
<Button android:layout_width="match_parent"
android:layout_height="match_parent"/>
</LinearLayout>
</ScrollView>
The only thing that appears one button with the height of the screen. The other button seems to have disappeared.
I suppose it is paradoxical to have two views to with the attribute match_parent.
However, I was hoping to get two views the same size of the available screen using xml, and having the scrollview make both views accessible. I am aware that it can be done via java, but I want an answer for xml.
In Linear Layout you have to define two things...
1 .android:orientation="vertical"
2 .android:weightSum="2"
weightSum is sum of all element in it's parent layout.It Enable you to define the proportion of width/height a element should take in a layout..
For further details go to weightSum
<ScrollView 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:layout_below="#+id/textView1"
android:fillViewport="true" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:weightSum="2" >
<Button
android:id="#+id/but1"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:text="but 1" />
<Button
android:id="#+id/but2"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:text="but 1" />
</LinearLayout>
</ScrollView>
output
You cannot achieve this in XML only.
As android support multiple screen sizes, At runtime you need to check for each device , the height for each device can be calculated like this
Display display = getWindowManager().getDefaultDisplay();
Point size = new Point();
display.getSize(size);
int height = size.y;
With above code you will get the height of screen and you need to set this height in dp to your view at runtime.
Do this in your activity for both the buttons:
// get view you want to resize
Button but1= (Button) findViewById(R.id.but1);
LinearLayout.LayoutParams listLayoutParams = new LinearLayout.LayoutParams(
height , LinearLayout.LayoutParams.MATCH_PARENT);
but1.setLayoutParams(listLayoutParams);

Fill vertical space between two views (+scroll)

I have 3 views.
1. View A has a fixed height and aligned to the top of the screen.
2. View B has a fixed height and aligned to the bottom of the screen.
3. View C has to fill a vertical space between views A and B but has to be minimum X height. If the vertical space between A and B is less than Xdp, the vertical scroll bar has to appear (and view B has to scroll, not to be sticked to bottom).
What I have so far (a bit simplified), it may be completely wrong:
<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:fillViewport="true">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:id="#+id/layout_banner_top"
android:layout_width="match_parent"
android:layout_alignParentTop="true"
android:layout_height="#dimen/statistics_probanner_height">
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" <!-- UPD here as McAdam331 suggested -->
android:minHeight="#dimen/statistics_circular_progress_container_height"
android:layout_below="#+id/layout_banner_top"
android:layout_above="#+id/layout_banner_bottom">
<!-- here is some content -->
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="#dimen/statistics_bottom_bar_height"
android:id="#+id/layout_banner_bottom"
android:layout_alignParentBottom="true">
</RelativeLayout>
</RelativeLayout>
</ScrollView>
How it looks:
Picture 1
Picture 2
Currently minHeight of the view in between (view C) is set to 600dp, but as you see on Picture 2 view C is filling an available space between top and bottom views, height is too small and scroll not appearing.
Is it possible to implement? How can I achieve that behaviour?
The issue is that you've set both height and minheight to the same value:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="#dimen/statistics_circular_progress_container_height"
android:minHeight="#dimen/statistics_circular_progress_container_height"
android:layout_below="#+id/layout_banner_top"
android:layout_above="#+id/layout_banner_bottom">
In other words, the view won't exceed the hight you've given it already. What I would do is set the layout_height to wrap_content, and keep the min_height attribute as it is.
this way, if the space is larger than the dimension given, it wil just bind above and below the banners. Otherwise, it will hold that minimum value.
Resolved.
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:fillViewport="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="#dimen/statistics_probanner_height"
android:gravity="top">
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:minHeight="#dimen/statistics_circular_progress_container_height">
</RelativeLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="#dimen/statistics_bottom_bar_height"
android:layout_gravity="bottom">
</LinearLayout>
</LinearLayout>
</ScrollView>

How to divide a screen equally between a graph and a listview

I'd like the top half of my screen to be a graph, and the bottom part to be a listview. Both parts should occupy half of the screen.
With the setup I have now it only works if there are like 10 or more items in the listview. If there are less, the listview will take up less than half the screen. If there's one item in the list, it takes up even less the the height of one list item.
Based on the solution of ANDROID : split the screen in 2 equals parts with 2 listviews this is what I've got now:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dip"
android:layout_weight="0.5"
android:id="#+id/graph_container"
android:orientation="vertical">
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dip"
android:layout_weight="0.5"
android:orientation="vertical">
<ListView
android:id="#android:id/list"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:drawSelectorOnTop="false"/>
</LinearLayout>
</LinearLayout>
I add the graph dynamically:
((LinearLayout) findViewById(R.id.graph_container))
.addView(chart, 0,
new LinearLayout.LayoutParams(
ViewGroup.LayoutParams.MATCH_PARENT,
ViewGroup.LayoutParams.MATCH_PARENT));
Does anyone know how I should do this?
UPDATE
So, the essential part was changing the layout_height to math_parent. Removing the parent linear layout of the listview was optional, but definitely cleaner.
Remove container that listView stays in, change the weight to 1 and set height of the main container to match_parent. Here is an example:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:id="#+id/graph_container"
android:orientation="vertical">
</LinearLayout>
<ListView
android:id="#android:id/list"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:fillViewport="true"
android:drawSelectorOnTop="false" >
</ListView>
You just have to change your first LinearLayout height to match_parent
Try to use weight values as digits 1:1 fox example.
Setting the android:weightSum="1" and android:layout_height="match_parent" for the parent LinearLayout should work.

Categories

Resources