I just started android app programming, so this might be a very dumb question, but I can't find the answer anywhere.
I want to have two textviews next to each other, where one shows three lines in a small font and the other contains a number in a very big font (which is as big as the three lines of the other textview). What now happens is that the first line of the textview with the smaller font sizes is aligned to the line of the other textview on the base line. So, I get some whitespace above the first line, because the font size is much smaller, and the three lines don't fit because so much space is wasted.
My code looks like this:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<TextView
android:id="#+id/historytextviewId"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1" />
<TextView
android:id="#+id/countertextViewId"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="60sp" />
</LinearLayout>
What I want is that the left textview just acts as if the other textview had the same font size.
EDIT: For some reason, replacing android:layout_height="wrap_content" by android:layout_height="fill_parent" in the first TextView worked for me (which I tried because I found some almost completely unrelated question where that was the answer), but I still don't get why that works.
Related
I am trying to keep all my views constraint to guidelines so that it'll always be relative and not mess up on different screens.
I ran into a problem where I have a button(using a background of an image with no text to control button size). That I'd like to keep square WHILE ALSO keep within guidelines... but of course, it cannot be that way since unless the resolution is square(which it never is) you cannot always have it square within guidelines.
Is there a way to enforce its size to be square while also keeping it somewhat relative and resizing based on screen size?
After experimenting, I think I got it. The key is the layout_constraintDimensionRatio command.
In this layout, I have a button (using the pause icon as the background--it's easy to see if it's square or not) without text. It is constrained to two gridlines that are 30% away from the top left corner. You can of course modify as needed.
The width of the button is set to wrap_content, while the height is set to 0dp, which denotes use the constraints.
But the big key is setting the layout_constraintDimensionRatio="H,1:1". This forces the ratio to always be square.
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="0dp"
app:layout_constraintDimensionRatio="H,1:1"
android:background="#android:drawable/ic_media_pause"
app:layout_constraintStart_toStartOf="#+id/vert_guide"
app:layout_constraintTop_toTopOf="#+id/horiz_guide"
/>
<androidx.constraintlayout.widget.Guideline
android:id="#+id/vert_guide"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_begin="30pt" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/horiz_guide"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_begin="30pt" />
</androidx.constraintlayout.widget.ConstraintLayout>
Let me know how this works. I haven't thoroughly tested this, so it may not work in every situation.
As it's shown in the android studio it looks perfectly fine but whenever i run the app on my cell phone it looks like this any idea ,please ?? the app on the phone and the android studio
You are using Relative Layout.
First thing I noticed in your code is that you used margin buttom in Image view which is top of the screen already.So I suggest to not use Margin Buttom in that because relative layout bydefault keep that image on top .So i give you some idea to fix it.
1.)Image is on top so and its Relative layout.
<ImageView
android:id="#id/image" (give any id here)
android:src=""
android:marginleft="" ("Add ur dimensions")
android:marginright=""
android:adjustviewbound="True"/>
2.)Next is Textview.
<TextView
android:id="#id/text"
android:text="Name:Lovely Hamester"
android:layout_below="#+id/image"
android:margintop=""/>
So the main thing i wanna point of is this "Id".Relative Layout directly cant put views line by line like Linear Layout,We need to give command to the view to where it need to place.So thats why we use "layout_below" which instruct Text view to stay after imageview.There are different commands also.Please check that,like "layout_rightof","layout_leftof".
Just give id to every view and command them in Relative layout.Your other code is perfect.Dont use Margin Bottom , because it kept space from bottom which looks perfect in the preview but every Mobile have different size so thats why its not shows perfect in your screen.
just move code imageview to the top
example
<RelativeLayout
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:fitsSystemWindows="true"
tools:context=".MainActivity">
<ImageView
android:layout_width="200dp"
android:layout_height="600dp"
android:src="#drawable/test"/>
<ProgressBar
android:layout_width="48dp"
android:layout_height="48dp"
android:id="#+id/progressbar"
android:layout_centerInParent="true"/>
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/rv_notes"
android:layout_width="250dp"
android:layout_height="match_parent"
tools:listitem="#layout/item_note"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/fab_add"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:layout_alignParentBottom="true"
android:layout_margin="16dp"
android:src="#drawable/button"
app:borderWidth="1dp"
app:elevation="9dp"
android:backgroundTint="#FFFFFF"/>
</RelativeLayout>
The problem as i see it that you have a margin bottom override the layout align Parent Top so if you delete that and leave only :
android:layout_alignParentTop="true"
also it is redundant to call align right and left and bottom , align top will be enough.
i'm sure it will work.
New Layout editor in Android Studio 2.2 keeps showing this error on views like EditText and Buttons. kindly help.Also, any links that help in onboarding with the new constraint layout would be appreciated.
code:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
android:id="#+id/activity_main"
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"
tools:context="com.set.email.MainActivity"
tools:layout_editor_absoluteX="0dp"
tools:layout_editor_absoluteY="81dp">
<TextView
android:text="To:"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
tools:layout_editor_absoluteX="7dp"
tools:layout_editor_absoluteY="4dp"
android:id="#+id/textTo"/>
<EditText
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:inputType="textEmailAddress"
android:ems="10"
tools:layout_editor_absoluteX="0dp"
tools:layout_editor_absoluteY="24dp"
android:id="#+id/editTo"
android:textAppearance="#android:style/TextAppearance.DeviceDefault.Medium"/>
<EditText
android:layout_width="384dp"
android:layout_height="42dp"
android:inputType="textPersonName"
android:ems="10"
tools:layout_editor_absoluteX="0dp"
tools:layout_editor_absoluteY="94dp"
android:id="#+id/editSubject"
android:textAppearance="#android:style/TextAppearance.DeviceDefault.Medium"/>
<EditText
android:layout_width="384dp"
android:layout_height="273dp"
android:inputType="textPersonName"
android:ems="10"
tools:layout_editor_absoluteX="0dp"
tools:layout_editor_absoluteY="179dp"
android:id="#+id/editMessage"
app:layout_constraintLeft_toLeftOf="#+id/activity_main"
tools:layout_constraintLeft_creator="50"
android:textAppearance="#android:style/TextAppearance.DeviceDefault.Medium"/>
<Button
android:text="Send"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
tools:layout_editor_absoluteX="140dp"
tools:layout_editor_absoluteY="454dp"
android:id="#+id/btnSend"
app:layout_constraintLeft_toLeftOf="#+id/editMessage"
tools:layout_constraintLeft_creator="0"
app:layout_constraintRight_toRightOf="#+id/activity_main"
android:layout_marginEnd="16dp"
tools:layout_constraintRight_creator="0"
android:textAppearance="#android:style/TextAppearance.DeviceDefault.Medium"/>
</android.support.constraint.ConstraintLayout>
From Android Studio v3 and up, Infer Constraint was removed from the dropdown.
Use the magic wand icon in the toolbar menu above the design preview; there is the "Infer Constraints" button. Click on this button, this will automatically add some lines in the text field and the red line will be removed.
Constraint layout aims at reducing layout hierarchies and improves performance of layouts(technically, you don't have to make changes for different screen sizes,No overlapping, works like charm on a mobile as well as a tab with the same constraints).Here's how you get rid of the above error when you're using the new layout editor.
Click on the small circle and drag it to the left until the circle turns green,to add a left constraint(give a number, say x dp. Repeat it with the other sides and leave the bottom constraint blank if you have another view below it.
Edit: According to the developers site, Instead of adding constraints to every view as you place them in the layout, you can move each view into the positions you desire, and then click Infer Constraints to automatically create constraints. more here
Just copy this code to all components that you will drag.
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
example:
<TextView
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
android:text="To:"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
tools:layout_editor_absoluteX="7dp"
tools:layout_editor_absoluteY="4dp"
android:id="#+id/textTo"/>
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
This help me a lot
Go to the Design, right click on your Widget,
Constraint Layout >> Infer Constraints. You can observe that some code has been automatically added to your Text.
Follow these steps:
Right click on designing part > Constraint Layout > Infer Constraints
If Inferring the Constraints still gives you the error, just use this code:
app:layout_constraintBottom_toBottomOf="parent"
You need to drag the EditText from the edge of the layout and not just the other widget. You can also add constraints by just dragging the constraint point that surrounds the widget to the edge of the screen to add constraints as specified.
The modified code will look something similar to this:
app:layout_constraintLeft_toLeftOf="#+id/router_text"
app:layout_constraintTop_toTopOf="#+id/activity_main"
android:layout_marginTop="320dp"
app:layout_constraintBottom_toBottomOf="#+id/activity_main"
android:layout_marginBottom="16dp"
app:layout_constraintVertical_bias="0.29"
Go to the XML layout Text where the widget (button or other View) indicates error, focus the cursor there and press alt+enter and select missing constraints attributes.
for example I have this
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
use RelativeLayout layout like this
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
Simply switch to the Design View, and locate the concerned widget. Grab the one of the dots on the boundary of the widget and join it to an appropriate edge of the screen (or to a dot on some other widget).
For instance, if the widget is a toolbar, just grab the top-most dot and join it to the top-most edge of the phone screen as shown in the image.
You have to change androidx.constraintlayout.widget.ConstraintLayout to RelativeLayout.
I am struggling with a specific layout requirement.
I want a TextView that it centred. It is single-line and uses ellipsis if the text is too long. On the same line, to the right of it, I want a small ImageView. The presence of the ImageView must not affect what the TextView thinks is the horizontal centre of the layout. So, although the text might be centred, there is actually less space available to the right of the centre line than to its left.
Within a RelativeLayout, the sort-of intuitive thing to use is:
<ImageView
android:id="#+id/image_view_id"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true" />
<TextView
android:id="#+id/text_view_id"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toLeftOf="#id/image_view_id"
android:layout_centerHorizontal="true"
android:singleLine="true"
android:ellipsize="middle" />
but this does not work because you cannot have both android:layout_toLeftOf and android:layout_centerHorizontal. It behaves as if the android:layout_centerHorizontal was not there.
I have also tried using a LinearLayout with android:layout_gravity without success. Is it possible?
It turns out that something close to what I want to achieve is very simple:
<ImageView
android:id="#+id/image_view_id"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true" />
<TextView
android:id="#+id/text_view_id"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_toLeftOf="#id/image_view_id"
android:layout_marginLeft="#dimen/size_of_image_view"
android:singleLine="true"
android:gravity="center"
android:ellipsize="middle" />
Using android:gravity="center" with android:layout_width="match_parent" centres the text in the available space. It is not perfect as the marginLeft is there to keep the text centred within the full layout, thus robbing a little space from its left end but it is good enough for my purposes.
I'm not a designer but recently, I have been asked to change Login Screen UI for the app of my company.
I have got a background image from a designer. This image is a complete login screen. That means it is a single PNG file with the Input Box (User Name and Password Box) DRAWN on it.
Of course even it looks like a complete Login screen, just put it there won't work since the input boxes are fake.
I tried to put the EditText widgets on it, tried to let it just on the position on the background image and set these two widgets background to none so the user won't see it. However, on difference devices it just displays incorrectly. Sometimes above the "background input box", sometimes below it. Anyway, it just won't fit there.
I wonder if there is a way that could let me solve this problem. Let the widgets will be on that exactly position of the background, no matter how the devices changes.
Here is my layout now, and hope it will help:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/mainTableLayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/pbackground"
android:stretchColumns="1" >
<RelativeLayout
android:id="#+id/relativeLayout1"
android:layout_width="match_parent"
android:layout_height="160dp" >
<EditText
android:id="#+id/txtBxPassword"
android:layout_width="wrap_content"
android:layout_height="30dp"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="10dp"
android:ems="10"
android:gravity="center_vertical|center_horizontal|center"
android:height="33dp"
android:password="true"
android:singleLine="true"
android:width="160dp" >
<requestFocus />
</EditText>
<EditText
android:id="#+id/txtBxUserID"
android:layout_width="wrap_content"
android:layout_height="30dp"
android:layout_above="#+id/txtBxPassword"
android:layout_alignLeft="#+id/txtBxPassword"
android:layout_marginBottom="10dp"
android:ems="10"
android:gravity="center_vertical|center_horizontal|center"
android:height="33dp"
android:singleLine="true"
android:width="160dp" />
</RelativeLayout>
</RelativeLayout>
And here are the images I captured from Eclipse, as you can see I put two EditText boxes just at the position of the input boxes on background. But on the real devices, they will be misplaced.
Thank you!
put the linearlayout as base layout instead of relative layout...
and use tablerow layout and place the widgets in it
wisely use android:layout_margin and android:layout_width and android:layout_height
properly...
hope it would help
You should ask your designer to give you files for the individual elements -- e.g. the padlock & head icons on their own, and the shaded box on its own. Convert the box to a Nine-patch and set it as the background drawable of a suitable layout element (i.e. the container layout of each row).
You will also want to have multiple sizes of each image to support different pixel densities.
If you don't do this, you will always have some devices where the screen looks terrible.