I am creating a vertical LinearLayout that will be displayed in a vertical ScrollView. I can't find a way in Android Studio to see the portion of the LinearLayout that is below the bottom of the ScrollView. Is there any way to see the full layout rather than constraining it to the viewport provided by the renderer?
Like Drew said, creating a user defined device definition has been the only solution which worked for me. Below i show you the steps to follow:
Step 1)
Within the preview-pane, open the Virtual Device Selection drop-down and select Add Device Definition..
Step 2)
Within the Your Virtual Devices dialog click the Create Virtual Device button.
Step 3)
Within the Select Hardware dialog click the New Hardware Profile button.
Step 4)
Within the Configure Hardware Profile dialog specify (f.e.) a Resolution of 720 x 4000 px and a Screensize of 12 inch. Also setting the Screensize results in a density of xhdpi (thanks to Mete).
Step 5) Close all dialogs and restart Android Studio.
Step 6) Open the Virtual Device Selection drop-down. The new user defined hardware profile can be found under Generic Phones and Tablets.
I've just discovered how. You need to create a user defined device definition in Android AVD - I created one that was 480 x 4000 pixels. Exit and restart Android Studio and then you can select this device in the preview renderer and can see 4000 pixels worth of LinearLayout.
Found a easier solution, in your layout add something like below and adjust as you need:
android:layout_marginTop="-1500dp"
in new version of android studio (i don't know from which version, but i'm using latest 2.3.3 now) you can resize your preview layout by drag it
Android Studio will offer a toggleable full view, if the ScrollView is the root of the layout. I had put mine on top of the default RelativeLayout and had to manually fix that in the XML before the GUI would give me the full view.
I hope the screenshot help you :
You can use scrollY attribute to scroll the ScrollView in the preview. Using scrollY attribute with tools namespace will only scroll the view in the display and not in the actual app. And make sure you use px as the unit with scrollY attribute.
tools:scrollY="150px"
Update: Now you can scroll a ScrollView directly inside preview panel
(I tested on Android studio version 2.3.2)
Short answer: Right click on your ScrollView and select Refactor > Extract > Layout.
Android-studio will extract your ScrollView into a new layout file and put tools:showIn="#layout/original_layout_file" attribute at root layout(your ScrollView).
Note: Android-studio will preview full layout if root layout is ScrollView.
In Android Studio version 3.2.1 you can select "Custom" device on preview panel and then resize preview to whatever height you need.
click on the scrollView in conponent tree (on the right)
click on the new button wich appears on the left (second row of toolbar)
Another quick alternative solution is to hide the layouts temporarily at the top so that the layouts at the bottom can appear in the visible window in Android Studio.
Put android:visibility="gone" on the layouts that you want to hide.
Example:
<HorizontalScrollView
android:visibility="gone"
android:id="#+id/hsv02"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignStart="#+id/ll24"
android:layout_below="#+id/ll199">
</HorizontalScrollView>
I might be late but it'll be a lot easier for you to just set the margins to negative to shift the scroll view to the left.
For example:
margin:
left: -100px
Now you can see and edit the scrollview however you like!
TABLE LAYOUT
<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:stretchColumns="1">
<TableRow android:padding="5dip">
<TextView
android:layout_height="wrap_content"
android:text="New Product Form"
android:typeface="serif"
android:layout_span="2"
android:gravity="center_horizontal"
android:textSize="20dip" />
</TableRow>
<TableRow>
<TextView
android:layout_height="wrap_content"
android:text="Product Code:"
android:layout_column="0"/>
<EditText
android:id="#+id/prod_code"
android:layout_height="wrap_content"
android:layout_column="1"/>
</TableRow>
<TableRow>
<TextView
android:layout_height="wrap_content"
android:text="Product Name:"
android:layout_column="0"/>
<EditText
android:id="#+id/prod_name"
android:layout_height="wrap_content"
android:scrollHorizontally="true" />
</TableRow>
<TableRow>
<TextView
android:layout_height="wrap_content"
android:text="Product Price:" />
<EditText
android:id="#+id/prod_price"
android:layout_height="wrap_content" />
</TableRow>
<TableRow>
<Button
android:id="#+id/add_button"
android:text="Add Product"
android:layout_height="wrap_content" />
<Button
android:id="#+id/cancel_button"
android:text="Cancel"
android:layout_height="wrap_content" />
</TableRow>
</TableLayout>
GridLAYOUT
<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/GridLayout1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:columnCount="3"
android:rowCount="2"
tools:context=".Main3Activity" >
<Button
android:id="#+id/button3"
android:layout_column="0"
android:layout_gravity="fill_horizontal"
android:layout_row="0"
android:text="Button"
/>
<Button
android:id="#+id/button1"
android:layout_column="1"
android:layout_gravity="fill_horizontal"
android:layout_row="0"
android:text="Button" />
<Button
android:id="#+id/button2"
android:layout_column="2"
android:layout_gravity="fill_vertical"
android:layout_row="0"
android:layout_rowSpan="2"
android:text="Button" />
<Button
android:id="#+id/button4"
android:layout_column="0"
android:layout_columnSpan="2"
android:layout_gravity="fill_horizontal"
android:layout_row="1"
android:text="Button" />
</GridLayout>
ANOTHER TABLE LAYOUT
<?xml version="1.0" encoding="utf-8"?>
<android.widget.TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:stretchColumns="1"
tools:context="com.example.dhanya.uitablelayout.MainActivity">
<TableRow
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TextView
android:text="Time"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="0" />
<TextClock
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/textClock"
android:layout_column="1" />
</TableRow>
<TableRow>
<TextView
android:text="First Name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="0" />
<EditText
android:width="200px"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</TableRow>
<TableRow>
<TextView
android:text="Last Name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="0" />
<EditText
android:width="100px"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</TableRow>
<TableRow
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<RatingBar
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_span="2"
android:id="#+id/ratingBar"
android:layout_column="0" />
</TableRow>
<TableRow
android:layout_width="fill_parent"
android:layout_height="fill_parent"/>
<TableRow
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Submit"
android:layout_span="2"
android:id="#+id/button"
android:layout_column="0" />
</TableRow>
</android.widget.TableLayout>
The best I found is to set the device to custom. Then we can change the layout simply by dragging.
My layout is long and need to scroll layout even using the vertical long resolution and when I set the layout editor to high resolutions, the screen does not scroll completely and smoothly
By setting the layout to
3.2_HVGA_slider_ADP1_API_27, the screen scrolled and my problem was solved
Related
I have 5 buttons. I would like to put it into a row or two rows. I would like them to be center_horizontal. I tried below code:
<LinearLayout
android:id="#+id/linear_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical|center_horizontal"
android:gravity="center_horizontal"
android:orientation="horizontal" >
<Button android:id="#+id/btn_abc"
android:text="Speak"
android:layout_gravity="center_horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
<Button android:id="#+id/btn_abc"
android:text="Speak"
android:layout_gravity="center_horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
<Button android:id="#+id/btn_abc2"
android:text="Speak"
android:layout_gravity="center_horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
.....x3
</LinearLayout>
I expect the above code can handle for different screen size. Use 1 row if enough space. Use 2 rows if not enough space.
However, in a real 4" phone device, when there is not sufficient width, it still use 1 row only, why? thanks
https://github.com/ApmeM/android-flowlayout
Download and import the 'android-flowlayout' project.
Right click the project 'android-flowlayout' and select "android" -> click 'Is library'
In your app, right click the project and select "android" -> import library, add 'android-flowlayout' project.
Then simply replace the xml linearlayour with:
<org.apmem.tools.layouts.FlowLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
>
P.S. but it seems it can not be center horizontal. But still, a nice solution!
Google now have provide Flex Layout https://github.com/google/flexbox-layout
1) add to your project
dependencies {
compile 'com.google.android:flexbox:0.2.3' }
2) Use in layout
<com.google.android.flexbox.FlexboxLayout
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"
app:flexWrap="wrap"
app:alignItems="stretch"
app:alignContent="stretch" >
<TextView
android:id="#+id/textview1"
android:layout_width="120dp"
android:layout_height="80dp"
app:layout_flexBasisPercent="50%"
/>
<TextView
android:id="#+id/textview2"
android:layout_width="80dp"
android:layout_height="80dp"
app:layout_alignSelf="center"
/>
<TextView
android:id="#+id/textview3"
android:layout_width="160dp"
android:layout_height="80dp"
app:layout_alignSelf="flex_end"
/>
</com.google.android.flexbox.FlexboxLayout>
3) Play around with this 2 parameters
flexDirection direction children items are placed inside
flexWrap wrap flex container in single-line or multi-line
I'm currently learning android development, and before I get too stuck in to a large project, I decided I would need to learn about making an application accessible from as many devices as possible.
So I have a test application using RelativeLayout. The top-level activity has 6 large menu buttons on it. These buttons are square graphical images (not 9-patch buttons as they are - to my knowledge - too graphically primitive). On the device I'm using for testing, these buttons appear in a perfect 2x3 arrangement like such:
However, when I try and run this application on a larger device, the buttons will appear like so:
Is there a way to scale non-9-patch buttons based on the size of the screen, so that they will always appear like the first image? Is this recommended? If not, is there an alternative way of doing such a layout for different screen sizes?
My ideal layout would be scalable across different devices, like so:
I am using similar menu. And here is first row of it. The buttons in this menu has labels too.
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="20dip"
android:layout_marginRight="20dip"
android:gravity="center" >
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5dip" >
<Button
android:id="#+id/screen_home_btn_profile"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/selector_ic_my_profile" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:paddingBottom="5dip" >
<TextView
style="#style/label_text_style_home_screen"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/screen_home_label_my" />
<TextView
style="#style/label_text_style_home_screen"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/screen_home_label_profile"
android:textStyle="bold" />
</LinearLayout>
</RelativeLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5dip" >
<Button
android:id="#+id/screen_home_btn_application"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/selector_ic_my_application" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:paddingBottom="5dip" >
<TextView
style="#style/label_text_style_home_screen"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/screen_home_label_my" />
<TextView
style="#style/label_text_style_home_screen"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/screen_home_label_application"
android:textStyle="bold" />
</LinearLayout>
</RelativeLayout>
</LinearLayout>
It seems you are giving outer margins to the buttons. Align them in center and give spaces between 2 buttons and not the screen border & buttons.
I have simple tableLayout which show the problem with independent unit dp.
I suppose that with dp unit in my layout_margin attribute - layout will be resized without problem on any device.
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_gravity="center"
android:gravity="center"
android:layout_margin="40dp"
>
<TableRow android:layout_width="fill_parent" android:layout_height="wrap_content">
<TextView
android:text="#string/start_login_username"
android:id="#+id/start_login_username"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
<EditText
android:id="#+id/start_login_EditTxt1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:inputType="textEmailAddress"
/>
</TableRow>
<TableRow android:layout_width="fill_parent" android:layout_height="wrap_content">
<TextView
android:text="#string/start_login_password"
android:id="#+id/start_login_password"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
</TextView>
<EditText
android:id="#+id/start_login_EditTxt2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:inputType="textPassword"
/>
</TableRow>
<TableRow android:layout_width="fill_parent" android:layout_height="wrap_content">
<Button android:text="#string/start_login_cancel"
android:id="#+id/start_login_cancel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
>
</Button>
<Button
android:text="#string/start_login_login"
android:id="#+id/start_login_ButtonLogin"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
>
</Button>
</TableRow>
</TableLayout>
But, testing this layout, we can see that dp is not so independent in layout margin .
Here the screenshot in Samsung Nexus(Good scale):
Here the screenshot in LG Optimus GT 540(Bad scale):
Im looking the similar threads in StackOverflow, and possible solution, to have correct scale on any screen is:
Not use margin and padding at all, but use always tableLayout and add
moc Views with some weight, to add space between Views(not good because of
pollution of xml layouts. Anyway, its looks promising ).
Make my own calculation of independent unit, and rescale all programmatically (not good for me because I have all in xml's)
Use different layouts for differents screens (not good because Im too lazy to recreate the layout for each my view and supporting them)
Questions:
How can I solve the problem with scaling of my layout for all screens using the same layout ?
How I can make margin works correct on my screens ?
What you think about my two solutions. This is good practice ? (specially first one) ?
Thanks
Simply use linearlayout with weight attributes, remember to set width="0dp" if it is the width you want to be automatically adjusted.
Your xml should be something like this:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:orientation="horizontal" >
<TextView
android:text="Your name"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content" />
<EditText
android:layout_weight="1"
android:layout_width="0dp"
android:minWidth="80dp"
android:layout_height="wrap_content" />
</LinearLayout>
I want to make a match game layout in android.
I'm having problem with making my layout compitable to all screen resolutions.
What I want, is an image icon of the home team on the left, a strechable home team image name, home team score text, seperator, away team score text, a strechable away team image name, an image icon of the away team on the right.
The score should be in the middle. I just can't get it right. before this try, I've tried to divide the main layout to 3 layouts: home team layout, score layout and away layout - with no success of getting the expected result.
Can someone please help ?
Here is my piece of code:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:background="#color/GamesBGColor" >
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_gravity="center"
android:orientation="horizontal" >
<ImageView
android:id="#+id/homeTeamIcon"
android:layout_width="50dip"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:src="#drawable/holonlogo" />
<ImageView
android:id="#+id/homeTeamText"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:src="#drawable/holontext"
android:layout_width="115dip"
android:layout_marginLeft="3dip" />
<TextView
android:id="#+id/homeTeamScore"
android:layout_width="25dip"
android:layout_height="wrap_content"
android:text="123"
android:textColor = "#color/purple"
android:layout_gravity="center"
android:textStyle="bold"
android:layout_marginLeft="5dip" />
<TextView
android:id="#+id/seperator"
android:layout_width="10dip"
android:layout_height="wrap_content"
android:text="-"
android:layout_gravity="center"
android:layout_marginLeft="7dip" />
<TextView
android:id="#+id/awayTeamScore"
android:layout_width="25dip"
android:layout_height="wrap_content"
android:text="122"
android:textColor = "#color/red"
android:layout_gravity="center"
android:textStyle="bold"
android:layout_marginLeft="7dip" />
<ImageView
android:id="#+id/awayTeamText"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:src="#drawable/jerusalemtext"
android:layout_width="115dip"
android:layout_marginLeft="3dip"/>
<ImageView
android:id="#+id/awayTeamIcon"
android:layout_width="50dip"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:src="#drawable/jerusalemlogo" />
</LinearLayout>
</LinearLayout>
If you want your layouts to work on different resolution screens your should be sizing them using dip as the unit. For example:
android:layout_marginRight="10dip"
dip stands for Device Independent Pixel and using these in your layout means that Android will automatically scale your layout depending on which display the device running your application has.
You can read about these in the Supporting Multiple Screens page in the Android Developer Documentation. This document also has some other options for handling different displays but I think using dip is probably the easiest.
Looks like there's a plenty of questions about centering, same size etc, but so far I didn't find the exactly my case so I dare to ask :)
What I need is a layout of three buttons like this:
[ previous ][*select*] [ next ]
where [previous] and [next] buttons are of the same size (i.e. in this case, size of the [previous] button as it is bigger), and the [*select*] button should stretch to occupy all of the available width.
Following the hints of making two buttons in LinearLayout same sized, i came up with the following xml file:
<LinearLayout
android:id="#+id/button_bar"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:orientation="horizontal" >
<Button
android:layout_width="0dip"
android:layout_height="fill_parent"
android:layout_weight="1"
android:text="Previous" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="2"
android:text="Select" />
<Button
android:layout_width="0dip"
android:layout_height="fill_parent"
android:layout_weight="1"
android:text="Next" />
</LinearLayout>
This almost works :)
Except one thing: instead of making Next button to match the size of Previous button, android makes Previous button to be the size of the Next :)
And because of this the text "Previous" gets wrapped in two lines, like
Previ
ous
Dunno if this is a bug or not, but can you advice me a workaround or some another way to achive the desired layout?
Thank you!
I'd suggest using a RelativeLayout
<RelativeLayout
android:id="#+id/buttons"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:clickable="false">
<Button
android:id="#+id/previous"
android:layout_width="30dp"
android:layout_height="wrap_content"
android:text="Previous"
android:layout_alignParentLeft="true"/>
<Button
android:id="#+id/next"
android:layout_width="30dp"
android:layout_height="wrap_content"
android:text="Next"
android:layout_alignParentRight="true"/>
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Select"
android:layout_toRightOf="#id/previous"
android:layout_toLeftOf="#id/next" />
</RelativeLayout>
This should work.
If you are including "android:layout_weight" you should give either "android:layout_width" or "android:layout_height" as "fill_parent"
modify your code like this
<LinearLayout
android:id="#+id/button_bar"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:orientation="horizontal" >
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="2"
android:text="Previous" />
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1.5"
android:text="Select" />
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="2"
android:text="Next" />
In that sort of case I would go for a TableLayout, in which you have one row, and a weight of 1 for EACH button. and the stretchColumn attribute put to column 1. Does this make any difference?
I'm not sure if you can match a size to some other besides by doing this in code. The easiest solution is probably adjusting the previous and next button widths in dp/sp units until they look good and have the select button be the only one with the layout_weight attribute.