I am learning android programming and setting myself a task to get to grips with layouts. I am trying to create a virtual "Magic 8 Ball".
My aim is to have some random text appear in the white circle where the 8 would normally appear.
How do go about aligning the text so that on different devices the text always appears in the same relative position to the black ball, so is always within the white circle?
Here is an example of what I am trying to do
Here is my code so far
<?xml version="1.0" encoding="utf-8"?>
<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:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center_vertical|center_horizontal"
tools:context="uk.co.simoncarr.magic8ball.MainActivity">
<TextView
android:id="#+id/txtTitle"
android:layout_width="wrap_content"
android:layout_height="49dp"
android:layout_centerHorizontal="true"
android:text="#string/title"
android:textSize="36sp"
tools:layout_editor_absoluteX="107dp"
tools:layout_editor_absoluteY="10dp" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/img8Ball"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:foregroundGravity="center_vertical|center_horizontal"
app:srcCompat="#drawable/magic8ball"
tools:layout_editor_absoluteX="0dp"
tools:layout_editor_absoluteY="0dp" />
<TextView
android:id="#+id/txtMessage"
android:layout_width="130dp"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_marginEnd="111dp"
android:layout_marginRight="111dp"
android:layout_marginTop="296dp"
android:text="The Anser is Yes"
android:textAlignment="center"
android:textSize="18sp"
tools:layout_editor_absoluteX="0dp"
tools:layout_editor_absoluteY="447dp" />
</RelativeLayout>
</android.support.constraint.ConstraintLayout>
Before answering the question I should comment on the fact that the elements inside you ConstraintLayout are not constrained in any way so when you run the app they will not keep the positions you have given them in the layout editor. You should fix this before doing anything else.
One approach you could look at could be to have 2 circle drawables, one with a black background and one with a white one and place one on top of the other. This way you could use the relatively new "Circular Positioning" feature in ConstraintLayout as outlined in this post. This will give you a lot of flexibility and power over choosing the positioning of the white circle in relation to the black.
Related
It is my firs time that I try to design a good UI instead of debugging apps, so I am new to this type of stuff.
I have three buttons under each other and the text should be aligned correctly. So that the "F" of Favorites starts at the same horizontal point as the "E" of Equalizer.
The way I did it, is not satisfying. I worked with paddingEnd and just tried out until it looked almost equal on the horizontal axis.
One other idea was to make the gravity center_vertical|left and instead use drawablePadding. This did not work because the width of the buttons is defined as match_parent. But also when I change the buttons to android:layout_width="wrap_content" and remove android:paddingStart and android:paddingEnd for testing, it does not work.
I got these info out of android:drawableLeft margin and/or padding
There should be a way to make it "easy" to fulfill the design I require. Has someone an idea what I am making wrong and has a solution for me?
The code of the xml layout file and a screenshot of the result are attached.
If something else is required to solve this question, then just ask me straight away.
Screenshot of the buttons
<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">
<LinearLayout
android:id="#+id/menu"
android:layout_width="300dp"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#drawable/border"
android:paddingEnd="0.3dip"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<Button
android:id="#+id/favButton"
android:layout_width="match_parent"
android:layout_height="80dp"
android:insetTop="1dp"
android:insetBottom="1dp"
android:paddingStart="50dp"
android:paddingEnd="15dp"
android:background="#drawable/rectangle"
android:drawableLeft="#drawable/ic_bxs_heart"
android:text="#string/favorites"
android:textColor="#000000"
android:textSize="16sp"/>
<Button
android:id="#+id/eqzButton"
android:layout_width="match_parent"
android:layout_height="80dp"
android:insetTop="1dp"
android:insetBottom="1dp"
android:paddingStart="50dp"
android:background="#drawable/rectangle"
android:drawableLeft="#drawable/ic_equalizer"
android:text="#string/equalizer"
android:textColor="#000000"
android:textSize="16sp"/>
<Button
android:id="#+id/settingsButton"
android:layout_width="match_parent"
android:layout_height="80dp"
android:insetTop="1dp"
android:insetBottom="1dp"
android:paddingStart="50dp"
android:paddingEnd="27dp"
android:background="#drawable/rectangle"
android:drawableLeft="#drawable/ic_settings"
android:text="#string/settings"
android:textColor="#000000"
android:textSize="16sp"/>
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
First the title may look senseless but I don't know how I describe my problem well in the title.
I have a Relative layout which has 2 buttons (Past games and Upcoming Games) and 2 listviews. Whenever a button is pressed the associated listview is collapsed (height will be zero) if it is already expanded or the reverse will happen. ( i used this solution)
Problem:
Everything is fine when I run it on a 5-inch screen phone. Please see the following picture:
[![][2]][2]
But if I run it on a 10-inch tablet it looks like this:
[![][3]][3]
The same will happen when it will run on less than 5-inch phone.
My questions
Do I need to make another layout for the tablet? like in the layout-large folder?
or I can use some event(s) in Jave file that dynamically set the buttons align parent bottom property when the listview is not collapsed.
or it can be fixed in my current XML
Below is the code for that part I am asking for help
<LinearLayout
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:layout_marginTop="10dp"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:id="#+id/btnPastGames"
android:layout_width="match_parent"
android:layout_height="30dp"
android:layout_centerHorizontal="true"
android:layout_marginLeft="15dp"
android:layout_marginStart="15dp"
android:background="#color/YellowColor"
android:text="Past Games"
android:textAllCaps="false"
android:textSize="15sp" />
<ListView
android:id="#+id/lvPastGames"
android:layout_width="match_parent"
android:layout_height="255dp"
android:layout_below="#+id/btnPastGames"
android:layout_centerHorizontal="true"
android:layout_marginLeft="17dp"
android:layout_marginStart="17dp"
android:layout_marginTop="5dp"
android:divider="#null" />
<Button
android:id="#+id/btnUpcommigGames"
android:layout_width="match_parent"
android:layout_height="30dp"
android:layout_below="#+id/lvPastGames"
android:layout_centerHorizontal="true"
android:layout_marginLeft="15dp"
android:layout_marginStart="15dp"
android:background="#color/YellowColor"
android:text="Up Coming Games"
android:textAllCaps="false"
android:textSize="15sp" />
<ListView
android:id="#+id/lvUpcomingGames"
android:layout_width="match_parent"
android:layout_height="255dp"
android:layout_below="#+id/btnUpcommigGames"
android:layout_centerHorizontal="true"
android:layout_marginLeft="17dp"
android:layout_marginStart="17dp"
android:divider="#null" />
</RelativeLayout>
</LinearLayout>
If you guys can give me some advice on making the user interface that will run on all screen sizes and densities I will be very thankful
Thanks to anyone who will help me
You are trying to workaround functionality of ExpandableListView. Look at the following page:
http://www.androidhive.info/2013/07/android-expandable-list-view-tutorial/
I'm using the CardFrame exactly like in the official tutorial.
However the card frame is getting displayed on my moto360 (round shaped display) with borders at the side. It is also displayed wrong in android studio.
The Card is used in the first column of a GridViewPager and the CardScrollView should detect the shape automatically and display the cards depending on it.
So, what am i missing?
Furthermore, i noticed that if i swipe to the right (to dismiss the view), don't release the screen and swipe back to the left... the card is displayed correct (without borders at the side). But if i scroll in the GridView it will be displayed wrong again.
<android.support.wearable.view.BoxInsetLayout
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:background="#android:color/transparent">
<android.support.wearable.view.CardScrollView
android:id="#+id/card_scroll_view"
android:layout_height="match_parent"
android:layout_width="match_parent"
app:layout_box="bottom">
<android.support.wearable.view.CardFrame
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:id="#+id/card"
android:layout_gravity="bottom">
<LinearLayout
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:orientation="vertical">
<TextView
android:id="#+id/title"
android:fontFamily="sans-serif-light"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:textColor="#color/grey"
android:textSize="18sp"
android:singleLine="true"
android:ellipsize="end"/>
<TextView
android:id="#+id/fecha"
android:fontFamily="sans-serif-light"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:textColor="#color/black"
android:textSize="16sp"
android:maxLines="2"
android:ellipsize="end"/>
<TextView
android:id="#+id/distancia"
android:fontFamily="sans-serif-light"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:textColor="#color/grey"
android:textSize="14sp"/>
</LinearLayout>
</android.support.wearable.view.CardFrame>
</android.support.wearable.view.CardScrollView>
EDIT1:
I created a repository with a small example: https://github.com/MeinLieberScholli/cardframebug
and here a screenshot: http://i.stack.imgur.com/UDpxJ.png
I just tried this: created a simple GridViewPager with two columns and put a CardFrame in each column, using your exact layout and it worked just fine on both square and round watches, with and without chin (and inside the emulator as well), there is no "border" and it looks as expected, regardless of swiping or not. You may need to look into your view pager setup or something like that. Here is a screenshot from an emulator:
I'm working on a ListView where each item has an image and some text. On my older phone, HTC Evo 4G, things came up exactly as expected. Image is nicely sized and text looks fine. Then I loaded the same app on my new phone, HTC One, and the images are so tiny they are useless. I know the HTC One has a significantly higher resolution, but I cannot figure out how to make each item in the ListView larger.
I'm not sure what to post, but I think the layout xml files are the issue.
Here's activity_main.xml:
<?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="fill_parent"
android:orientation="vertical">
<LinearLayout android:id="#+id/LinearLayout01"
android:layout_height="wrap_content" android:orientation="horizontal"
android:layout_width="fill_parent" android:gravity="center_horizontal"
android:layout_marginTop="2dip" android:background="#669900">
<!--
Use layout_weight to stretch the EditText and compress the button.
To avoid text wrap, the editable text is forced to occupy only one
line
-->
<EditText android:layout_width="wrap_content"
android:typeface="normal"
android:layout_weight="1" android:lines="1" android:ellipsize="middle"
android:hint="#string/hint" android:id="#+id/search_key" android:layout_height="fill_parent" android:maxLines="1"></EditText>
<ImageButton android:layout_width="wrap_content" android:src="#drawable/ic_menu_search" android:adjustViewBounds="true"
android:layout_weight="0" android:id="#+id/btn_ok" android:layout_height="wrap_content"></ImageButton>
</LinearLayout>
<TextView android:layout_height="wrap_content" android:id="#+id/tweet_header"
android:gravity="right" android:layout_width="fill_parent" android:paddingRight="4dp"
android:background="#99cc33" android:textColor="#000000" android:textSize="21dp"></TextView>
<ListView android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="#+id/tweet_list"></ListView>
</LinearLayout>
And the ListView is made up of this item.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/itemImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="15dp"
android:scaleType="fitCenter"
android:src="#drawable/ic_launcher" />
<TextView
android:layout_height="wrap_content"
android:id="#+id/created_at"
android:text="now"
android:textSize="10sp"
android:layout_below="#id/itemImage"
android:layout_alignParentRight="true"
android:textStyle="italic"
android:layout_width="wrap_content"></TextView>
<TextView
android:id="#+id/itemURL"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:text="itemURL"
android:visibility="invisible" />
</RelativeLayout>
So the app does this: It taps ebay for car data and presents the search results as line 1 with a picture, line 2 with the ebay item title. A hidden value is the URL so users can tap the ListView line and launch a web browser.
Looks like the wrap_content setting for the ImageView's layout_width and layout_height are the issue. When I switched that to numerical values, suddenly I saw it change size. Finally setting it to 100dp made the images viewable.
As an aside, I had a terrible time with ADS and the emulator. It consistently failed to re-load my updated app. Often complaining about the Package Manager and suggesting the some process was running. I little idea what was running and how to fix it. When I switched to loading the app straight to the phone, then it worked fine.
So, I think now I need to create a system that is proportional, and takes in to consideration the displaying devices resolution.
Problem is the Relative Layout width being wrap_content. Try changing that to match parent. then you would not have to go thru this ordeal
I'm having issues with TextViews and centering the text within the text region. Specifically, I have a TextView, but when I have text inside that contains letters that straddle down the bottom margin (i.e. p, g, q, y, etc), those letters are getting cut off. I'm trying to center the text within the region but haven't had much luck.
[Updated] I now resolved the letters getting cut-off at the bottom using wrap_content as my height, but found another problem. It now appears that the text is positioned low in the region, leaving this gap at the top. I modified my layout to reflect the latest (see below). Basically, those characters that were getting cut off before (g, y, j, etc) are touching the region right below which is fine, but it appears to leave padding at the top. I tried to change the gravity to center_vertical or center, but don't have much luck:
Note, I have to work with the specs given the textSizes (i.e. I can't change the values for these)
<?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="fill_parent"
android:orientation="vertical">
<LinearLayout
android:id="#+id/header"
android:layout_width="fill_parent"
android:layout_height="43.3dip"
android:background="#drawable/custom_bg"
android:orientation="horizontal">
<ImageButton
android:id="#+id/headshot"
android:layout_width="43.3dip"
android:layout_height="43.3dip"
android:src="#drawable/sample"
android:background="#drawable/head_btn"
android:layout_gravity="center" />
<RelativeLayout
android:id="#+id/name_and_email"
android:layout_width="230.7dip"
android:layout_height="43.3dip"
android:orientation="vertical">
<TextView
android:id="#+id/name"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textColor="#color/custom_color"
android:textSize="18.6sp"
android:singleLine="true"
android:ellipsize="end"
android:layout_alignParentTop="true"
android:gravity="center_vertical"
android:background="#c5ff15"
android:lineSpacingExtra="0sp"
android:text="AaBbCcDdGgJjTtYy" />
<TextView
android:id="#+id/email"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textColor="#color/custom_color"
android:textSize="13.3sp"
android:singleLine="true"
android:ellipsize="end"
android:layout_centerInParent="true"
android:layout_below="#id/name"
android:gravity="center_vertical"
android:visibility="gone"
android:text="qypgj#gmail.com" />
</RelativeLayout>
<ImageButton
android:id="#+id/headshot2"
android:layout_width="43.3dip"
android:layout_height="43.3dip"
android:src="#drawable/sample"
android:background="#drawable/head_btn2"
android:layout_gravity="center" />
</LinearLayout>
</LinearLayout>
Can anyone help?
MB
Why are you trying to set the heights manually? You will have much better luck using layout_height="wrap_content". I'd imagine that the problem is that your text size of 14.3sp is too big for the area you are allowing it.
Also, a good resource for debugging complex layouts is the HeirarchyViewer, found under the tools folder.