I'm new to Android.
I'm creating a speedometer application and in that I want to attach specific image of meter as a background of digital text. I've attached the code which I wrote for preview.
I've attached image of desired Interface and image of my xml preview with it's code.
How to make layout more responsive?
<?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"
android:gravity="center"
android:padding="10dp"
android:background="#color/background"
tools:context=".fragment.Tab2">
<!-- TODO: Update blank fragment layout -->
<ScrollView
android:id="#+id/digitalView"
android:layout_width="wrap_content"
android:layout_centerInParent="true"
android:scrollbars="none"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:orientation="vertical"
android:layout_height="wrap_content"
android:background="#drawable/bg_text"
android:gravity="center"
>
<TextView
android:layout_width="wrap_content"
android:id="#+id/speedTextDigital"
android:textColor="#android:color/white"
android:text="00"
android:maxLength="3"
android:textSize="90sp"
android:gravity="center"
android:layout_height="wrap_content"
/>
<TextView
android:id="#+id/unit"
android:layout_marginTop="0dp"
android:layout_gravity="center"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="KM/H"
android:textSize="30sp"
android:textColor="#android:color/white"/>
</LinearLayout>
</ScrollView>
</RelativeLayout>
UI which I want to make :
UI which I am getting now :
Related
In my app I currently have two text views in an alert dialog to display the temperature and the weather description. The problem with this is that whenever the description changes, the alignment changes.
I tried having my layout as a relative layout and move around both of them with one depending on the other but this does not help me out. Any suggestions?
This is my current code:
<?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="match_parent"
android:orientation="vertical">
<TextView
android:id="#+id/climaText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_alignStart="#+id/desc"
android:layout_marginTop="18dp"
android:layout_marginStart="120dp"
android:textColor="#android:color/white" />
<TextView
android:id="#+id/desc"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/climaText"
android:layout_centerHorizontal="true"
android:layout_marginTop="13dp"
android:textColor="#android:color/white" />
</RelativeLayout>
It is happening due to change in data size , when the data is increased it will wrap the data when you will use wrap_content . I suggest you can use a parent view and fix the height.here is the code, let me know if its working. thanks
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="250px">
<TextView
android:id="#+id/climaText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_alignStart="#+id/desc"
android:layout_marginStart="120dp"
android:layout_marginTop="18dp"
android:textColor="#android:color/white" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="250px">
<TextView
android:id="#+id/desc"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/climaText"
android:layout_centerHorizontal="true"
android:layout_marginTop="13dp"
android:textColor="#android:color/white" />
</LinearLayout>
</LinearLayout>
I'm working on an Android application and I have an issue with how to display an image in a view. My issue is that I want to display an image and two textViews just below my imageView without aligning their bottom to the parent's. See the wireframe below.
My problem is that when the imageView is taking all the height of the relativeLayout, my textViews are hidden below the parents view.
I have tried a lot of things but nothing is satisfaying...
I have tried to put my imageview in a linearLayout and put a weight on it but if my imageView is smaller I have a blank between the imageView and the textView.
It's complicated because each image I load can have a different size and thus I can't fix a default size to it.
Also, my layout is in a viewPager and when I want to have the Height of the view when I instantiate it on my adapter it returns 0. So I can't compute the size of the elements in the view.
Have you any idea how can I make my layout ?
Maybe in a coordinatorLayout to have circular dependencies (but I don't know how to make it) ?
Here a wireframe of what I want to do with my view: image
And here the code of my layout :
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/layout_photo_detail"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<RelativeLayout
android:id="#+id/relative_photo_detail_image"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#+id/relative_photo_detail_bottom_infos">
<ImageView
android:id="#+id/photo_detail_full_size"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:scaleType="fitCenter"
android:src="#drawable/placeholder"
android:layout_alignParentTop="true"
android:layout_alignParentStart="true"/>
<TextView
android:id="#+id/photo_detail_owner"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/photo_detail_full_size"
android:layout_centerHorizontal="true"
android:layout_marginTop="5dp"
android:textColor="#color/grey"/>
</RelativeLayout>
<RelativeLayout
android:id="#+id/relative_photo_detail_bottom_infos"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/relative_photo_detail_image"
android:padding="10dp">
<ImageView
android:id="#+id/photo_detail_delete"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:src="#drawable/delete"/>
</RelativeLayout>
</RelativeLayout>
Try putting your code inside Scroll view
Update your layout structure as below:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/layout_photo_detail"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- TextView 2 -->
<TextView
android:id="#+id/photo_detail_owner_description"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_marginTop="8dp"
android:padding="8dp"
android:gravity="center"
android:textSize="16sp"
android:textColor="#android:color/holo_red_dark"
android:text="This is TextView Two"/>
<!-- TextView 1 -->
<TextView
android:id="#+id/photo_detail_owner"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#id/photo_detail_owner_description"
android:layout_marginTop="8dp"
android:padding="8dp"
android:gravity="center"
android:textSize="18sp"
android:textColor="#android:color/black"
android:text="This is TextView One"/>
<RelativeLayout
android:id="#+id/relative_photo_detail_image"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#id/photo_detail_owner"
android:background="#android:color/black">
<!-- Image -->
<ImageView
android:id="#+id/photo_detail_full_size"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:adjustViewBounds="true"
android:scaleType="fitCenter"
android:src="#drawable/dummy"
android:layout_alignParentTop="true"
android:layout_alignParentStart="true"/>
<!-- Delete Icon -->
<ImageView
android:id="#+id/photo_detail_delete"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_margin="16dp"
android:src="#drawable/delete"/>
</RelativeLayout>
</RelativeLayout>
OUTPUT:
Hope this will help~
Something like this
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:orientation="vertical"
android:layout_height="match_parent">
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/imageView"
android:layout_gravity="center_horizontal" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Large Text"
android:id="#+id/textView2"
android:textAlignment="center" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Large Text"
android:id="#+id/textView3"
android:textAlignment="center" />
</LinearLayout>
I set the response after I request an API. I want to display my error screen on the screen according to the status of the response. For example, I want to show this screen when there is a problem with internet connection.
layout_connection_error.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/yemek_hata"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:gravity="center"
android:layout_below="#+id/weekCalendar">
<ImageView
android:layout_width="200dp"
android:layout_height="200dp"
android:scaleType="fitXY"
android:src="#drawable/ic_signal_wifi_off"
android:tint="#color/colorGreyLight"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true" />
<TextView
android:text="#string/baglanti_hata"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:id="#+id/textView8"
android:textAppearance="#android:style/TextAppearance.Material.Caption"
android:textSize="20sp"
android:textAlignment="center" />
</LinearLayout>
Or I want to show this screen when an unidentified error is encountered.
layout_unidentified_error.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/yemek_hata"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:gravity="center"
android:layout_below="#+id/weekCalendar">
<ImageView
android:layout_width="200dp"
android:layout_height="200dp"
android:scaleType="fitXY"
android:src="#drawable/ic_bug_report"
android:tint="#color/colorGreyLight"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true" />
<TextView
android:text="#string/bilinmeyen_hata"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:id="#+id/textView8"
android:textAppearance="#android:style/TextAppearance.Material.Caption"
android:textSize="20sp"
android:textAlignment="center" />
</LinearLayout>
how can I do that? Thank you very much for anyone who replies
Since they look the same you can just change TextView's text and ImageView's image in code.
textView.setText(R.string.bilinmeyen_hata);
imageView.setImageResource(R.drawable.ic_bug_report);
I'm trying to get an ImageView to overlap it's parent and create a speech balloon like, compound view. E.g:
I am not able to have the triangle at the bottom be part of the blue block and overlap any other views/controls that are placed below it.
Does anyone have a way of doing this?
<?xml version="1.0" encoding="utf-8"?>
<merge xmlns:android="http://schemas.android.com/apk/res/android" >
<LinearLayout
android:id="#+id/appointment_ticket_signed_in_content_wrapper"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:background="#color/background_green" >
<ImageView
android:id="#+id/appointment_ticket_signed_in_icon"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:src="#drawable/ic_action_accept"
android:contentDescription="#string/hello_world"
android:layout_marginLeft="#dimen/activity_horizontal_margin"
android:layout_marginTop="#dimen/activity_vertical_margin"
android:layout_marginRight="#dimen/activity_horizontal_margin"
android:layout_marginBottom="#dimen/activity_vertical_margin" />
<TextView
android:id="#+id/appointment_ticket_signed_in_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/padding_large"
android:layout_marginRight="#dimen/padding_large"
android:layout_marginBottom="#dimen/padding_large"
android:textColor="#android:color/white"
android:textSize="18sp" />
</LinearLayout>
<ImageView
android:id="#+id/appointment_ticket_signed_in_down_arrow"
android:layout_width="25dp"
android:layout_height="25dp"
android:scaleType="centerInside"
android:src="#drawable/triangle"
android:contentDescription="#string/hello_world"
android:layout_alignParentBottom="true"
android:layout_gravity="bottom"
android:paddingBottom="-25dp"
android:background="#color/important_text_orange" />
</merge>
I thought the above XML was the way to go but it seems a negative margin or padding bottom is unable to push the view outside its parent.
This XML is placed inside a relativelayout.
Does anyone know the answer to this?
EDIT
My situation:
Is there any way to overlap the next elements padding without having
direct access to it?
here is an xml file that creates something that could work. Try it out and let me know:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="10sp" >
<ImageView
android:layout_width="match_parent"
android:layout_height="200sp"
android:layout_below="#+id/complete_bubble"
android:background="#123456" />
<RelativeLayout
android:id="#+id/complete_bubble"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="-15sp" >
<RelativeLayout
android:id="#+id/main_block"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#000000"
android:padding="10sp" >
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Some text"
android:textColor="#FFFFFF" />
</RelativeLayout>
<ImageView
android:layout_width="20sp"
android:layout_height="20sp"
android:layout_below="#+id/main_block"
android:layout_marginLeft="20sp"
android:background="#000000" />
</RelativeLayout>
</RelativeLayout>
This negative margin works.
Method 1: Using the image of the balloon as the background image of a RelativeLayout and then add a TextView to that layout.
Method 2 (Also the more awesome method): Creating a custom view that will not only draw the speech balloon but also have a setText(String) method that will adjust the text that is drawn in the bubble and resize it to fit the text always. Then you open source that and share with the world.
If you want to create a custom view...
public class AwesomeTextBalloon extends View {
// constructors here
#Override
protected void onDraw(Canvas canvas) {
// first draw the balloon
// then draw the text
}
public void setText(String newText) {
// set text variable here
}
}
Then add the View programmatically or in the xml and call setText() to change the value of the balloon text.
Try Using this
<?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" >
<FrameLayout
android:id="#+id/header2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dip"
android:background="#android:color/transparent" />
<ImageView
android:id="#+id/arrow_up"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/pop_up" />
<HorizontalScrollView
android:id="#+id/scroll"
android:layout_width="320dip"
android:layout_height="80dip"
android:layout_below="#id/header2"
android:background="#android:color/darker_gray"
android:fadingEdgeLength="0dip"
android:paddingLeft="1dip"
android:scrollbars="none" >
<LinearLayout
android:id="#+id/appointment_ticket_signed_in_content_wrapper"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/background_green"
android:orientation="horizontal" >
<ImageView
android:id="#+id/appointment_ticket_signed_in_icon"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_marginBottom="#dimen/activity_vertical_margin"
android:layout_marginLeft="#dimen/activity_horizontal_margin"
android:layout_marginRight="#dimen/activity_horizontal_margin"
android:layout_marginTop="#dimen/activity_vertical_margin"
android:contentDescription="#string/hello_world"
android:src="#drawable/ic_action_accept" />
<TextView
android:id="#+id/appointment_ticket_signed_in_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="#dimen/padding_large"
android:layout_marginRight="#dimen/padding_large"
android:layout_marginTop="#dimen/padding_large"
android:textColor="#android:color/white"
android:textSize="18sp" />
</LinearLayout>
</HorizontalScrollView>
<FrameLayout
android:id="#+id/footer"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#id/scroll"
android:background="#android:color/transparent" />
<ImageView
android:id="#+id/arrow_down"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/footer"
android:layout_marginTop="-1dip"
android:src="#drawable/pop_dwn" />
</RelativeLayout>
I have a TextView and 3 Buttons centered in a RelativeLayout, and the text in all three of them is left-justified with the parent center as the leftmost line.
I've tried changing the gravity of the TextView, Buttons, and layout but nothing is working and I'm baffled because I've never seen Android align text like this before.
I want the Button text to be centered within each Button and the top text to be center-justified.
An image of what it looks like is here: http://i.stack.imgur.com/9lHEd.png
Here's my xml:
<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="match_parent" >
<TextView
android:id="#+id/textView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_margin="20dp"
android:gravity="center_horizontal"
android:text="#string/greeting"
android:textAppearance="?android:attr/textAppearanceLarge" />
<Button
android:id="#+id/startQuizButton"
android:layout_width="280dp"
android:layout_height="wrap_content"
android:layout_below="#+id/textView1"
android:layout_centerHorizontal="true"
android:onClick="#string/startQuiz"
android:text="#string/start_quiz" />
<Button
android:id="#+id/lessonsButton"
android:layout_width="280dp"
android:layout_height="wrap_content"
android:layout_below="#+id/startQuizButton"
android:layout_centerHorizontal="true"
android:onClick="#string/startLesson"
android:text="#string/lessonsString" />
<Button
android:id="#+id/viewAllButton"
android:layout_width="280dp"
android:layout_height="wrap_content"
android:layout_below="#+id/lessonsButton"
android:layout_centerHorizontal="true"
android:onClick="#string/showAll"
android:text="#string/view_all" />
I included a RelativeLayout because you have it as your parent layout. However, i am not sure that it is needed. See if the following code is what you are looking for.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:text="Greetings" />
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Start Quiz" />
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Lessons" />
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="View all questions" />
</LinearLayout>
</RelativeLayout>
add in button tab android:gravity="center"...see if it works..
u need to set layout width and height to fill_parent and everything will work fine
<TextView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center"
android:text="your text" />
if you want to centre some text, then you could also do it this way:
<TextView
android:text="Quantity"
android:textSize="34sp"
android:textColor="#ffffff"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="sans-serif-light"
android:layout_centerHorizontal="true"
android:paddingTop="10dp"/>
here i have changed made it horozontal by using android:layout_centerHorizontal="true"which takes a boolean value of true or false, by making it true, it will automatically be centred on all devices
hope that helps