I have created the Android layout as shown below. It displays a small toolbar with 2 buttons. The toolbar is located at the bottom. The problem is that on smaller screens the height of the toolbar and the buttons is much bigger than on bigger screen which makes sense because I'm using dp values. How do I have to change it so that the toolbar has visually always the same size on screens with bigger and smaller height? That means if the height is 1cm on big screens it should also be 1cm on small screens.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/keyboard_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:orientation="horizontal">
<View
android:id="#+id/keyboard_toolbar_line"
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_below="#id/buttonsLayout"
android:layout_marginBottom="5dp"
android:background="#c0c0c0"/>
<RelativeLayout
android:id="#+id/buttonsLayout"
android:orientation="horizontal"
android:alpha="0.5"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:id="#+id/privacyButton"
android:layout_width="100dp"
android:layout_height="35dp"
android:gravity="center"
android:clickable="true"
android:focusable="true"
android:layout_marginStart="30dp"
android:layout_alignParentStart="true">
<ImageView
android:id="#+id/privacyButtonImage"
android:layout_width="25dp"
android:layout_height="25dp"
android:scaleType="fitXY"
android:clickable="false"
android:focusable="false"
android:src="#drawable/ic_lock_open_light_24dp" />
</LinearLayout>
<LinearLayout
android:id="#+id/ratingButton"
android:layout_width="100dp"
android:layout_height="35dp"
android:gravity="center"
android:clickable="true"
android:focusable="true"
android:layout_marginEnd="30dp"
android:layout_alignParentEnd="true">
<ImageView
android:id="#+id/ratingButtonImage"
android:layout_width="25dp"
android:layout_height="25dp"
android:scaleType="fitXY"
android:clickable="false"
android:focusable="false"
android:src="#drawable/ic_star_gray_24" />
</LinearLayout>
</RelativeLayout >
</RelativeLayout >
For that, you need to set your view height based on dimen in the values folder.
Using that dimen value you can archive this thig.
Otherwise, you can use this lib that will provide dp value based on device screen size and resolution
Link: https://github.com/intuit/sdp
Related
I have a little problem with ImageView on differents screens with different dpi like this:
On second screen there are original dimensions of imageviews. But on first screen images are bigger and moved out. How i can set proportional dimensions and margins to ImageView.
Here is my code:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/textLayoutIntro">
<ImageView
android:id="#+id/first_slide_second_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:scaleType="fitCenter"
android:src="#mipmap/first_slide_second_image"
android:layout_alignParentStart="true"
android:layout_alignStart="#+id/firstSlideTelephone"
android:layout_marginTop="100dp"
android:layout_marginStart="20dp"/>
<ImageView
android:id="#+id/first_slide_third_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#mipmap/first_slide_third_image"
android:scaleType="fitCenter"
android:adjustViewBounds="true"
android:layout_alignParentEnd="true"
android:layout_alignEnd="#+id/firstSlideTelephone"
android:layout_marginEnd="30dp"
android:layout_marginTop="100dp"/>
<ImageView
android:id="#+id/firstSlideTelephone"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#mipmap/first_slide_telephone"
android:layout_centerInParent="true"
android:adjustViewBounds="true"
android:scaleType="centerInside"/>
<ImageView
android:id="#+id/first_slide_first_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:scaleType="fitCenter"
android:src="#mipmap/first_slide_first_image"
android:layout_marginStart="-30dp"
android:layout_alignParentStart="true"
android:layout_alignParentBottom="true"
android:maxWidth="138dp"
android:maxHeight="138dp"/>
<ImageView
android:id="#+id/first_slide_fourth_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:adjustViewBounds="true"
android:scaleType="fitCenter"
android:src="#mipmap/first_slide_fourth_image"
android:layout_alignParentBottom="true"
android:layout_marginBottom="100dp"/>
</RelativeLayout>
Thanks in advance)
Instead of RelativeLayout, use constraintlayout with vertical and horizontal guidelines. That way, the content sizes up or down to whatever device screen size. Like the sample below.
<android.support.constraint.ConstraintLayout
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:id="#+id/parent"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/colorAccent"
android:clickable="true"
tools:context="com.example.example.Fragments.ExampleFragment">
<android.support.constraint.Guideline
android:id="#+id/fragment_guideline_v_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.1" />
<android.support.constraint.Guideline
android:id="#+id/fragment_guideline_v_2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.9" />
<android.support.constraint.Guideline
android:id="#+id/fragment_guideline_h_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.1" />
<android.support.constraint.Guideline
android:id="#+id/fragment_guideline_h_2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.9" />
<ImageView
android:id="#+id/imageview"
android:layout_width="0dp"
android:layout_height="0dp"
android:contentDescription="#string/none"
app:layout_constraintStart_toEndOf="#+id/fragment_guideline_h_1"
app:layout_constraintEnd_toStartOf="#+id/fragment_guideline_h_2"
app:layout_constraintTop_toBottomOf="#+id/fragment_guideline_v_1"
app:layout_constraintBottom_toTopOf="#+id/fragment_guideline_v_2"
app:srcCompat="#drawable/forgot_password_arrow_back" />
</android.support.constraint.ConstraintLayout>
I've had same problem but I've found this: https://github.com/intuit/sdp
It's a library with dimensions represented by sdp. It just library with dp but scaled for different screen sizes.
You can use percentage for ImageView width and height. For example, use ConstraintLayout and for ImageView:
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_constraintWidth_percent="0.7" />
It's possible to solve many ways. The above bros already said possible to solve by Constraint layout.
It's also possible to solve by Linear layout. Just use weight_sum. Add 2 View add the top and bottom and at the middle add your image. Weight perfectly work dynamically (may you know).
But if I was in this situation, I would be solved it using sdp & ssp library. The library most of the time works perfectly.
only for font/text size: ssp. &
For any others except font: sdp
I am trying to create a layout as per this picture (paint'ed).
Layout Design
Target level is API 17. This has to be created programmatically, not using XML. This has to be a responsive design.
I extensively researched and attempted other partially similar situations on stackoverflow, using GridLayout, TableLayout, GridView, various layout parameters, gravity, weight, view nesting and so on. However,
(a) I can't get the text buttons width to fill the available width real estate as per device screen size and orientation. Buttons with shorter texts are coming with shorter width.
(b) The plus, minus and number buttons are of fixed height and width irrespective of screen sizes and orientation. But they are not aligning with the text button in the left on the same row. only the bottom few pixels are visible.
I would appreciate any code snippet that can achieve the above layout. Thanks a million.
UPDATE:
Following inputs from #tiny-sunlight, I did this. Next I will recreate this programmatically.
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/layoutTable"
android:padding="5dp"
android:orientation="vertical"
android:gravity="center"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:id="#+id/layoutRow"
android:padding="5dp"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button
android:layout_marginEnd="10dp"
android:layout_weight="17"
android:text="This is my button"
android:textSize="15sp"
android:textAllCaps="false"
android:gravity="start"
android:layout_width="0dp"
android:layout_height="40dp" />
<Button
android:layout_marginEnd="5dp"
android:layout_weight="1"
android:text="-"
android:textSize="15sp"
android:textStyle="bold"
android:layout_width="40dp"
android:layout_height="40dp" />
<TextView
android:layout_marginEnd="5dp"
android:layout_weight="1"
android:layout_marginTop="0dp"
android:paddingTop="10dp"
android:text="0"
android:textSize="15sp"
android:gravity="center"
android:layout_width="40dp"
android:layout_height="40dp" />
<Button
android:layout_weight="1"
android:text="+"
android:textSize="15sp"
android:textStyle="bold"
android:layout_width="40dp"
android:layout_height="40dp" />
</LinearLayout>
</LinearLayout>
</ScrollView>
Try to build layout below programmatically.
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:padding="5dp"
android:orientation="vertical"
android:gravity="center"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:padding="5dp"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button
android:layout_marginRight="10dp"
android:layout_weight="1"
android:text="1111"
android:layout_width="0dp"
android:layout_height="40dp" />
<ImageView
android:layout_marginRight="5dp"
android:src="#mipmap/ic_launcher"
android:layout_width="40dp"
android:layout_height="40dp" />
<TextView
android:layout_marginRight="5dp"
android:background="#44bb11"
android:layout_marginTop="0dp"
android:paddingTop="10dp"
android:text="11"
android:layout_width="40dp"
android:layout_height="40dp" />
<ImageView
android:src="#mipmap/ic_launcher"
android:layout_width="40dp"
android:layout_height="40dp" />
</LinearLayout>
</LinearLayout>
</ScrollView>
You can use a recycler view, which will provide you scrolling option plus bind views on the fly for you.
So load a linear layout (orientation horizonal) into the recycler view. now for the layout, it then becomes easier. You need a textview, button,textview,button.
For each of these textview and buttons, set widht = 0dp and weight as 7,1,1,1 respectively i.e. your leftmost textview occupy 70% of width whereas all other occupy 10%. Obviously you can change these weights as per your requirements. Thats it for the layout.
Now just fill your data using the adapter.
I have an layout with a background that already made for host my app's image buttons. my image buttons are in a row of middle in this layout. my emulator is 480*800 px hdpi that dp is:320*533.
when i adjust buttons from xml, everything is OK. but when run, my buttons change smaller than from size of in xml and layout is not ordered. please help me. what can i do?
myt xml code for this layout is:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/main">
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/bottom_panel"
>
</ScrollView>
<LinearLayout
android:id="#+id/bottom_panel"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_alignParentBottom="true"
android:paddingBottom="75dp">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/help_ic"
android:src="#drawable/help_main_hdpi"
android:layout_marginTop="0dp"
android:layout_gravity="right"
android:layout_weight="1"
/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/feed_ic"
android:src="#drawable/feed_main_hdpi"
android:layout_marginTop="0dp"
android:layout_gravity="right"
android:layout_weight="1"
/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/search_ic"
android:src="#drawable/search_main_hdpi"
android:layout_marginTop="0dp"
android:layout_gravity="right"
android:layout_weight="1"
/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/read_ic"
android:src="#drawable/read_main_hdpi"
android:layout_marginTop="0dp"
android:layout_gravity="right"
android:layout_weight="1"
android:paddingBottom="0dp" />
</LinearLayout>
As you have given weight to your ImageView,set
android:layout_width="0dp"
instead of "wrap_content" for the ImageView and give the total weightsum to the parent LinearLayout i.e 4 in your case.
Try this, I hope It will help you.
I still dont really get it how many space layouts take.
I have the following xml.
The inner LinearLayout's for the bottom space height is set to wrap_content, so it should take the height of the maximum height in there. Which is 52dp. And there is the ImageButton which is set to wrap_content, so the button should be centered vertically on the right side, since its an 24dp image (in xhdpi it has 32x32 pixels). So why is it stretched over the full height like displayed here?:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="2dp">
<de.ph1b.audiobook.utils.SquareImageView
android:id="#+id/cover"
android:scaleType="fitXY"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/white"
android:layout_gravity="bottom">
<TextView
android:id="#+id/title"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="52dp"
android:paddingLeft="16dp"
android:maxLines="2"
android:ellipsize="end"
android:paddingRight="16dp"
android:gravity="center_vertical"
android:textSize="16sp" />
<ImageButton
android:id="#+id/editBook"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="?android:attr/borderlessButtonStyle"
android:layout_gravity="center_vertical"
android:src="#drawable/ic_more_vert_grey600_24dp" />
</LinearLayout>
</LinearLayout>
either #drawable/ic_more_vert_grey600_24dp is larger than you think or borderlessButtonStyle has a larger background.
Please check the size. I have replicated the behavior and the ImageButton is set to wrap_content and is centered.
change your image button code
<ImageButton
android:id="#+id/editBook"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="?android:attr/borderlessButtonStyle"
android:scaleType="fitXY"
android:gravity="center_vertical"
android:src="#drawable/ic_more_vert_grey600_24dp" />
I have done a lot of reading on SO and googling all over the place but still cannot get my answer...I have this code:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/welcomeRelativeLayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/graph_paper" >
<LinearLayout
android:id="#+id/linearLayout2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:orientation="vertical" >
<TextView
android:id="#+id/first"
android:layout_width="40dp"
android:layout_height="90dp"
android:layout_marginTop="70dp"
android:background="#color/Blue" />
<TextView
android:id="#+id/second"
android:layout_width="40dp"
android:layout_height="90dp"
android:layout_marginTop="70dp"
android:background="#color/Cyan" />
<TextView
android:id="#+id/third"
android:layout_width="40dp"
android:layout_height="90dp"
android:layout_marginTop="70dp"
android:background="#color/Brown" />
</LinearLayout>
<LinearLayout
android:layout_width="100dp"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="203dp"
android:background="#color/Black"
android:orientation="vertical" >
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/Yellow" >
<ImageView
android:id="#+id/welcomeWImageView"
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_marginBottom="16dp"
android:src="#drawable/w" />
<ImageView
android:id="#+id/WelcomeOImageView"
android:layout_width="20dp"
android:layout_height="20dp"
android:src="#drawable/o" />
<ImageView
android:id="#+id/welcomeRImageView"
android:layout_width="20dp"
android:layout_height="20dp"
android:src="#drawable/r" />
<ImageView
android:id="#+id/welcomeDImageView"
android:layout_width="20dp"
android:layout_height="20dp"
android:src="#drawable/d" />
</LinearLayout>
<TextView
android:id="#+id/welcomeTextView"
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#color/lime" />
<LinearLayout
android:id="#+id/LinearLayout01"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/Pink" >
<ImageView
android:id="#+id/ImageView03"
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_marginBottom="16dp"
android:src="#drawable/w" />
<ImageView
android:id="#+id/ImageView04"
android:layout_width="20dp"
android:layout_height="20dp"
android:src="#drawable/o" />
<ImageView
android:id="#+id/ImageView01"
android:layout_width="20dp"
android:layout_height="20dp"
android:src="#drawable/r" />
<ImageView
android:id="#+id/ImageView02"
android:layout_width="20dp"
android:layout_height="20dp"
android:src="#drawable/d" />
</LinearLayout>
</LinearLayout>
</RelativeLayout>
As stated in the answers from different threads I have used dp as a scaling unit but I still get these images as a result when moving from different screen size and resolution.
here are the different images I get on different screen sizes and resolutions:
why arent the textboxes growing proportionally to the screen size and resolution? As they are textviews without graphics and dp is used for the unit.
Thank you guys ahead of time.
I cant really tell you the exact xml code to fix this, but as an idea, you need to make use of following properties to equally distribute the screen area among your views:
android:weightSum //for your LinearLayout
android:layout_weight //for your child views
and depending on the orientation of your LinearLayout, you need to set either of the following to your child views.
android:layout_height="0dp"
android:layout_width="0dp"
For examples, read this and this.
you have to create three different layouts for your application .
1- layout folder ( basically its for small screens)
2- layout-large ( basically its for large screens such as 5.0)
3- layout-xlarge ( its used for Large screens "Tablets" )
in order for your application to fit in every screen perfectly you have to create these folders. below steps shows how to work with it
1- create new two foldesr in res folder layout-large and layout-xlarge.
2- copy your layout.xml from the layout folder and paste it on each folders u created now.
3- open them and you'll see how they look on bigger screens , then simply you'll have to change a bit on your layout.xml on each folder.
hope that what you seek for. its that simple . two extra folders