Creating an application in portrait mode where I have to align Button on image based on top margin. I'm using dimens file in values-sw360dp which is looking proper in nexus 5 but the same values is not aligning the Buttons in nexus 4 as both of the devices using values-sw360dp folder for dimens file.
Can you please suggest the solution for this. Also can any one provide list of all possible values folder that should be integrated to support multiple screens
Following is the code:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/windowBackground">
<ImageView
android:id="#+id/bc_logo"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitStart"
android:src="#drawable/bc_imgbc_logo" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/bc_logo"
android:orientation="horizontal"
android:weightSum="1"
android:layout_alignParentTop="true"
android:layout_marginTop="#dimen/bc_img_margin_top">
<Button
android:id="#+id/login_btn"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.5"
android:background="#drawable/signing_tab_btn"
android:text="SIGN IN"
android:textColor="#color/colorAccent" />
<Button
android:id="#+id/registration_btn"
style="?android:attr/buttonBarButtonStyle"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.5"
android:text="REGISTER"
android:textColor="#FFFFFF" />
</LinearLayout>
</RelativeLayout
In above code I need to align the LinearLayout on the ImageView so using android:layout_marginTop="#dimen/bc_img_margin_top"for setting margin.
I have the Image in <ImageView/> which i have to give height and width as match parent in order to maintain aspect ratio and occupy width of screen so this results in the image showing in the area i wanted top of screen but the <ImageView/> is occupying area of whole screen and I want to align the <LinearLayout/> having buttons on the bottom part of Image.
Following is the image in which the sign in button with yellow underline and register button in white text needs to be aligned on bottom most part of the image where image ends. and the blue area depicts the area occupied by which covers the whole device height.
you need to add some values by yourself like backgrounds and dimensions...
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#00FF00">
<ImageView
android:id="#+id/bc_logo"
android:layout_width="match_parent"
android:layout_height="250dp"
android:scaleType="fitXY"
android:src="#drawable/background" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="200dp"
android:orientation="horizontal"
android:layout_gravity="top"
android:weightSum="1"
>
<Button
android:id="#+id/login_btn"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.5"
android:text="SIGN IN"
android:textColor="#00FFFF" />
<Button
android:id="#+id/registration_btn"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.5"
android:text="REGISTER"
android:textColor="#00FFFF" />
</LinearLayout>
</FrameLayout>
Create this kind of value structre for different sizes
Related
Consider the following diagram:
The blue buttons are buttons and the red is a textview. I am trying to place them side by side as shown in the diagram but am having confusion because the app should be compatible with different screen sizes and densities.
Basically I want all the buttons to be of the same sizes(square typically) and TextView larger and say when the screen gets bigger(e.g. rotating) only the middle(red) textView should expand and the button size should be the same while they stay in their positions.
what I have tried
I tried using LinearLayout with layout_weight set accordingly but
for bigger screensizes the buttons(blue) would also scale in
proportion of their layout weight, and they'd not look square.
It'd be easy doing this using constraint layout but, it requires
hardcoding the button size(sizing the button in the design editor
does this), which I don't think is a good idea because if screen get bigger button would be smaller.
I could also take a certain percentage of the screen width and apply it to the button size, but how do I make sure that icon for the button renders okay with the scaled buttons and the buttons are aligned as so:
i.e. their centers are aligned but different in height, equidistant from each other.
also I'd have to do that programmatically instead of using the design editor or the xml.
So for this type of purposes what layout should I use and how should I set up my views?
If you want this design in xml, then try this
Note : Use the dimensions from dimens folder for different screen size. Here for LinearLayout of TextView Height use from dimens folder
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:orientation="horizontal"
android:gravity="center"
android:background="#color/colorPrimary"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:weightSum="0.9">
<Button
android:layout_width="0dp"
android:background="#color/colorAccent"
android:layout_weight="0.1"
android:layout_height="wrap_content"
android:layout_margin="2dp"/>
<LinearLayout
android:layout_width="0dp"
android:layout_weight="0.5"
android:layout_height="100dp"
android:layout_margin="2dp">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ff00ff" />
</LinearLayout>
<Button
android:layout_width="0dp"
android:background="#color/colorAccent"
android:layout_weight="0.1"
android:layout_height="wrap_content"
android:layout_margin="2dp"/>
<Button
android:layout_width="0dp"
android:background="#color/colorAccent"
android:layout_weight="0.1"
android:layout_height="wrap_content"
android:layout_margin="2dp"/>
<Button
android:layout_width="0dp"
android:background="#color/colorAccent"
android:layout_weight="0.1"
android:layout_height="wrap_content"
android:layout_margin="2dp"/>
</LinearLayout>
</LinearLayout>
Use linear layout and use layout_weight only to TextView and for Buttons give fix width
e.g.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:orientation="horizontal"
android:layout_height="match_parent">
<Button
android:layout_width="#dimen/length_50"
android:background="#color/colorPrimary"
android:layout_height="#dimen/length_50"/>
<TextView
android:layout_width="0dp"
android:layout_weight="1"
android:background="#color/colorAccent"
android:layout_height="#dimen/length_50"/>
<Button
android:layout_width="#dimen/length_50"
android:layout_marginEnd="#dimen/_10dp"
android:background="#color/colorPrimary"
android:layout_height="#dimen/length_50"/>
<Button
android:layout_width="#dimen/length_50"
android:layout_marginEnd="#dimen/_10dp"
android:background="#color/colorPrimary"
android:layout_height="#dimen/length_50"/>
<Button
android:layout_width="#dimen/length_50"
android:background="#color/colorPrimary"
android:layout_height="#dimen/length_50"/>
</LinearLayout>
and result
I've got a very simple app widget layout: a line of text above an image.
The image should scale to fit the widget's bounding box (maintaining aspect ratio) and the text should be left-aligned with the image below it. Together they should appear in the middle of the widget's bounding box.
I can't get that to work. The best I managed was aligning to top-left of the bounding box, as follows:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:id="#+id/text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
/>
<ImageView
android:id="#+id/image"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:layout_gravity="top"
android:scaleType="fitStart"
/>
</LinearLayout>
I can't specify a scaleType which would align top-center and I also can't make the image view take just as much space as it needs for the image.
Try this, Here is an image, If you want your layout should visible as you want in landscape mode, you have to make another layout for the landscape mode or keep your view in portrait mode.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:id="#+id/txt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/img"
android:text="Text Line"
android:textColor="#color/black" />
<ImageView
android:id="#+id/img"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:adjustViewBounds="true"
android:src="#drawable/signuptop" />
</RelativeLayout>
I am trying to make a very simple Layout like this:
An image occupying the width of the screen, and a button occupying the width of the screen coming right next to it without any space.
Here is the code I have, it is next to trivial
<?xml version="1.0" encoding="utf-8"?>
<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="wrap_content"
android:orientation="vertical"
tools:context="com.andrew.question.InitialActivity">
<ImageView
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="0dp"
android:padding="0dp"
android:src="#drawable/bg" />
<Button
android:id="#+id/button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="0dp"
android:padding="0dp"
android:text="Hello, I am a Button" />
</LinearLayout>
The problem is, the button does not show up, it shows the image with some space
The emulator is running with screen size 1080 x 1920, and the image has size 720 x 990, if we scale that up, it should be 1080 x 1485, leaving a lot of space for the button, but the image occupied in the middle of the screen somehow that I do not understand.
This is how a screen capture on the emulator look like:
Next, I tried to swap the order of the button and the image (just for the sake of experimenting), I see something like this:
I get this:
<?xml version="1.0" encoding="utf-8"?>
<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="wrap_content"
android:orientation="vertical"
tools:context="com.andrew.question.InitialActivity">
<Button
android:id="#+id/button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="0dp"
android:padding="0dp"
android:text="Hello, I am a Button" />
<ImageView
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="0dp"
android:padding="0dp"
android:src="#drawable/bg" />
</LinearLayout>
Now I figured what happened, it appears that we have lot of spaces between the button and the image and therefore the button have no space. But where does those spaces come from? I wanted them to stick together.
The full source code of this experiment can be found in
https://github.com/cshung/MiscLab/tree/master/Question
The problem occurs here because the LinearLayout container has a height with wrap_content and the system extends the ImageView at its max and then display the TextView below it (thus below the screen height).
To get the right layout, you have to use layout_weight in the child views as follows:
<!-- fill the entire height -->
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
...>
<!-- take 90% of container -->
<ImageView
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.9"
... />
<!-- take 10% of container -->
<Button
android:id="#+id/button"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.1"
... />
</LinearLayout>
Then, in order to have "no space" for the image, you have to play with the attribute scaleType (see this example) as the following:
Either force the image to fit the widht/height:
<ImageView
...
android:scaleType="fitXY"/>
Or show the center and fill the w/h:
<ImageView
...
android:scaleType="centerCrop"/>
Your drawable/bg is being scaled to fit in id/imageView. The space you're getting is just the window's background not being covered by the image. Change ScaleType of your ImageView to FIT_XY, CENTER_CROP or other and watch a result. See: http://developer.android.com/reference/android/widget/ImageView.ScaleType.html
Your easiest option will probably be to use a RelativeLayout instead of a LinearLayout. I think this is the direction Android has been going lately. Everything seems to be RelativeLayout based. For instance, when you make a new layout in Android Studio, I believe it defaults to RelativeLayout. It used to be LinearLayout in the eclipse extension a while back.
Relative Layout
Using a relative layout instead you should have the following:
<?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:layout_width="match_parent"
android:layout_height="wrap_content"
tools:context="com.andrew.question.InitialActivity">
<ImageView
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="0dp"
android:padding="0dp"
android:src="#drawable/bg" />
<Button
android:id="#+id/button"
android:layout_below="#id/imageView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="0dp"
android:padding="0dp"
android:text="Hello, I am a Button" />
</RelativeLayout >
Note that I simply changed LinearLayout to RelativeLayout, removed the setOrientation and then added the following line to your button.
android:layout_below="#id/imageView"
First of all your image is too big so it basically takes up all of the screen space in the first place and pushes the button down the viewable region.There is no need to modify the padding or margin as it is in the LinearLayout and it places all child views one after the other.
Set a desired height to the image view and also a scale type to get what you are expecting.
<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="wrap_content"
android:orientation="vertical"
tools:context="com.andrew.question.InitialActivity">
<ImageView
android:id="#+id/imageView"
android:layout_width="match_parent"
android:scaleType="centerCrop"
android:layout_height="300dp"
android:src="#drawable/bg" />
<Button
android:id="#+id/button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Hello, I am a Button" />
</LinearLayout>
Screen shot
I need to create a screen for application where main part of the screen is 4x4 image buttons.
I want that 4 buttons will fill 90% width of the screen and each button will be a square.
I use table layout for the table of buttons and layout_weight to make it proper width. How can I make width and high of the buttons the same?
<TableLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center_horizontal"
android:gravity="center_horizontal">
<TableRow
android:id="#+id/tableRow1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center_horizontal"
android:gravity="center_horizontal">
<ImageButton
android:id="#+id/imageButton_1_1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="0.25"
android:src="#android:drawable/btn_star" />
<ImageButton
android:id="#+id/imageButton_1_2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="0.25"
android:src="#android:drawable/btn_star" />
<ImageButton
android:id="#+id/imageButton_1_3"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="0.25"
android:src="#android:drawable/btn_star" />
<ImageButton
android:id="#+id/imageButton_1_4"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="0.25"
android:src="#android:drawable/btn_star" />
</TableRow>
...
I guess you know how to put buttons that fill 90% width of the screen but you don't know how to set the height so that the button will be a square, right? If so, I think you have to set the height via coding. The first step is to get the width of the buttons, then set their height.
I have an issue with my app where the button layout is not evenly spaced when used on different devices.
As shown, the first screenshot shows the layout evenally spaced out on an older, smaller screened android smartphone.
The second screenshot from a Nexus 4, shows the large white space under the bottom button that is uneven.
I thought I had set my layout to be even but it seems it isnt.
UPDATE:
How to set a scroll view with the two linear layouts in it.
<?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="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="84dp"
android:orientation="horizontal" >
<ImageView
android:id="#+id/imgLink"
android:layout_width="78dp"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:src="#drawable/appointmentmanimenuicon" />
<TextView
android:id="#+id/textView1"
android:layout_width="match_parent"
android:layout_height="75dp"
android:gravity="center"
android:text="Appointments"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textSize="30sp" />
</LinearLayout>
<ScrollView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:fillViewport="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="200dp"
android:orientation="vertical" >
<Button
android:id="#+id/btnaddAppoint"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_margin="50dp"
android:drawableLeft="#drawable/appointmentmenu"
android:src="#drawable/appointmentmenu"
android:text="Add Appointment"
android:layout_weight="1" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="200dp"
android:orientation="vertical" >
<Button
android:id="#+id/btnviewAppoint"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_margin="50dp"
android:drawableLeft="#drawable/appointviewicon"
android:src="#drawable/appointviewicon"
android:text="View Appointments"
android:layout_weight="1" />
</LinearLayout>
</ScrollView>
</LinearLayout>
Your nested linear layout with the buttons has a fixed height of 400dp. On the small device this leaves a smaller amount of space at the bottom then it does on the larger nexus4.
If you change your linear layout with the buttons to use a height value of fill_parent it should place the buttons evenly in the space remaining in the parent layout underneath the header ( contacts).
Your second LinearLayout has a fixed height of 400dp. The bottom edge of that layout will always be at 484dp (taking into account the first LinearLayout), and will leave extra space after it on any screen larger than 484dp tall.
I'm not entirely clear on what your desired layout is, but believe what you want is to center the second LinearLayout within the parent LinearLayout.
To do so, add android:layout_gravity="center_vertical" like so:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="400dp"
android:orientation="vertical"
android:layout_gravity="center_vertical" >
You should also consider removing the ScrollView, as that content should never need to scroll.