I want to create a vertical dynamic timeline that has the time it happened on the left, what happened on the right, a line in between, with a bubble in the line at each event. Times, events, and number of events will be dynamic.
What I was thinking here was possibly a RecyclerView over a static image of a vertical line. The list item would contain the time, a bubble image, and then the event view. Before writing this out I'm thinking I'm gonna have issues with lining up the bubble with the vertical line. Is there a better way to approach this or maybe someone can point out a way to guarantee the bubble will be over the center of my line on different screen densities and sizes?
I have been looking to implement a similar view in my app.
Personally, I'm not a fan of a static line. My thinking was along the lines of having a layout with 3 columns - for your example; one with the time, one with an image of the dot and vertical lines (or just the top line on the last item) and the third column with a cardview.
The layout I've posted is pretty rough but I just knocked it together in a few minutes and you should get the idea. It would need tweaking to make sure the vertical line on the icon goes to the edge of the layout (there would be a gap between them in my example)
<?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"
android:weightSum="1">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:padding="10dp"
android:layout_weight="0.06">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="10dp"
android:layout_gravity="center">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="1:45 PM" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="10dp"
android:layout_gravity="center">
<ImageView
android:layout_width="30dp"
android:layout_height="30dp"
android:src="#drawable/ic_test" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="10dp">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Hello there"
android:padding="10dp"/>
</android.support.v7.widget.CardView>
</LinearLayout>
</LinearLayout>
</LinearLayout>
With the result looking like so;
I did also find a library which looks okay - the icons could do with some work but I guess a lot of the legwork is already done.
I have also since just found out this layout type is officially (according to Matrial Design Guidelines) a stepper. Although I can't actually find any reference to them in the 'Develop' documentation it may assist you when searching for an appropriate library.
after editing Jonny Wright answer.I first created a card_item as this;
<?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="wrap_content"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="horizontal"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
>
<LinearLayout
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="match_parent"
android:orientation="horizontal"
>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="10dp"
android:layout_gravity="top">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="1:45 PM" />
</LinearLayout>
<android.support.design.widget.CoordinatorLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="center">
<View
android:id="#+id/first"
android:layout_gravity="center"
android:background="#color/material_green_500"
android:layout_width="2dp"
android:layout_height="wrap_content"/>
<ImageView
app:layout_anchor="#id/first"
app:layout_anchorGravity="top"
android:layout_gravity="top"
android:layout_width="40dp"
android:layout_height="40dp"
android:src="#drawable/ic_test" />
</android.support.design.widget.CoordinatorLayout>
</LinearLayout>
<LinearLayout
android:layout_weight="1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<LinearLayout
android:background="#drawable/chat_bubble"
android:layout_marginRight="114dp"
android:layout_marginEnd="114dp"
android:layout_gravity="center"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Hello there, how are you doing. Hello there, how are you doing. Hello there, how are you doing. Hello there, how are you doingHello there, how are you doing"
android:padding="12dp"/>
</LinearLayout>
</LinearLayout>
</LinearLayout>
Then add two additional files in the drawable folder. a 9 patch image for the chat bubble background and a circle.xml:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="ring"
android:useLevel="false"
android:innerRadius="0dp"
>
<size android:width="100dp"
android:height="100dp"/>
<solid android:color="#color/material_green_500"/>
</shape>
This is the results.
Example usage
Dont forget to add the bubble.png
Related
I have small database which populates data into a listview which uses other layout as provided below to show the data.
What happens is if the 1st field's text is more than two lines, the text starts hiding. So I thought i would make that listview's each row scrollable. Though it shows a scroll bar but nothing happens.
This is the layout which is used by listview
<?xml version="1.0" encoding="utf-8"?>
<ScrollView
android:layout_height="75dp"
android:layout_width="match_parent"
xmlns:android="http://schemas.android.com/apk/res/android">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="75dp"
xmlns:android="http://schemas.android.com/apk/res/android">
<TextView
android:id="#+id/desc_d"
android:layout_width="165dp"
android:layout_height="match_parent"
android:layout_alignParentStart="true"
android:text="Description"
android:gravity="center"
android:textAppearance="#android:style/TextAppearance.Large"/>
<TextView
android:id="#+id/cate_d"
android:layout_width="70dp"
android:layout_height="match_parent"
android:gravity="center"
android:layout_toEndOf="#id/desc_d"
android:text="others"
android:textAppearance="#android:style/TextAppearance.Large" />
<TextView
android:id="#+id/date_d"
android:layout_width="70dp"
android:layout_height="match_parent"
android:gravity="center"
android:layout_toEndOf="#id/cate_d"
android:text="16/11/2017"
android:textAppearance="#android:style/TextAppearance.Large" />
<TextView
android:id="#+id/amt_d"
android:layout_width="80dp"
android:layout_height="match_parent"
android:gravity="center"
android:layout_toEndOf="#id/date_d"
android:text="100000"
android:textAppearance="#android:style/TextAppearance.Large" />
</RelativeLayout>
</ScrollView>
My MainActivity layout has a listview which is also scrollable and uses above layout.
<?xml version="1.0" encoding="utf-8"?>
<ScrollView 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.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:descendantFocusability="beforeDescendants"
android:focusableInTouchMode="true"
android:keepScreenOn="false"
android:scrollbarAlwaysDrawHorizontalTrack="false"
android:scrollbarAlwaysDrawVerticalTrack="false"
tools:context="apps.harry.expensedata.MainActivity">
<Button
android:id="#+id/add_expense_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="24dp"
android:layout_marginTop="24dp"
android:onClick="addExpenseClick"
android:text="#string/button_1"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/view_expense_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="24dp"
android:onClick="viewClick"
android:text="#string/button_2"
app:layout_constraintStart_toEndOf="#+id/add_expense_btn"
app:layout_constraintTop_toTopOf="parent" />
<RelativeLayout
android:id="#+id/relativeLayout"
android:layout_width="match_parent"
android:layout_height="406dp"
android:layout_marginTop="84dp"
app:layout_constraintTop_toTopOf="parent"
tools:layout_editor_absoluteX="0dp">
<ListView
android:id="#+id/list_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
tools:layout_editor_absoluteX="8dp"
tools:layout_editor_absoluteY="248dp" />
</RelativeLayout>
</android.support.constraint.ConstraintLayout>
</ScrollView>
Here's the screen shot of the APP
As you can see there's a scroll bar available for each row in that layout, but nothing happens when I scroll.Please suggest me how this could be achieved.
This is not a solution suggestion for your scrolling problem, but due to user experience you should consider to not habe scrollable list items inside a scrollable list.
See Material Guidelines for this. Here is a little excerpt.
List tiles may contain up to three lines of text, and text length may vary between tiles in the same list. To display more than three lines of text, use a card.
Place the most distinguishing content on the left of the tile and the least distinguishing content on the right.
Specifications:
The majority of space on a list tile should be dedicated to the primary action
Place the most distinguishing content towards the left of the tile
In tiles with multi-line content, place the most distinguishing content in the first line
Place supplemental actions on the right side
Try using maxLines and minLines as attributes for the TextView to accommodate all the data.
Make scrollView Height="wrap_content" instead of fixed size. maybe useful
Google defined in their guidelines do not use scrollview inside of scrollview and it is more then simply guidelines it doesnt work properly. and you see that case. Tbe solution is set to your listitem height as wrap_content and the best practices is as was mentioned above do not use listitems with more than 2-3 lines of text. take a look into materisl design guide to see the dimensions of list items
I would suggest you to can change your custom list item height to wrap_content and then you don't need scrolling.
<?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:gravity="center"
android:orientation="horizontal"
android:padding="10dp">
<TextView
android:id="#+id/decription"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:hint="decription" />
<TextView
android:id="#+id/whatFor"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:hint="whatFor" />
<TextView
android:id="#+id/date"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:hint="date" />
<TextView
android:id="#+id/amount"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:hint="amount" />
</LinearLayout>
Your output will be like below image.
I hope your issue will be resolved and if you still have any query then please ask.
enter image description hereIn linear layout I'm using image view, text view and also the edit text irrespective of the linear layout I'm thinking to add an image in the background which should be transparent when ever I try to use transparency then the whole activity is changing.However, need only the background image is transparent not the whole page.
According to what, I understood........
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:background="#drawable/download"
android:weightSum="2"
android:layout_height="match_parent">
<ImageView
android:layout_gravity="center"
android:src="#drawable/download"
android:layout_weight="1"
android:layout_width="wrap_content"
android:layout_height="0dp" />
<LinearLayout
android:layout_weight="1"
android:layout_width="match_parent"
android:layout_height="0dp">
<TextView
android:text="#string/dummy_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
</LinearLayout>
In my opinion, your design is not really appealing.
In your example, the text is not readable, it makes no sense to have an image twice in the same screen, the background picture is stretched and the front image is so small.
I would suggest you use something like this:
If you like it this way, here yo have the XML definition:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="10dp">
<TextView
android:id="#+id/textView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Taj Mahal"
android:layout_marginBottom="5dp"
android:textSize="24sp"/>
<View
android:layout_height="2dp"
android:layout_width="match_parent"
android:background="#aaaaaa"/>
<ImageView
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:padding="10dp"
android:scaleType="fitXY"
app:srcCompat="#drawable/taj_mahal"/>
<View
android:layout_height="2dp"
android:layout_width="match_parent"
android:background="#aaaaaa"/>
<TextView
android:id="#+id/textView2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:text="The Taj Mahal is an ivory-white marble mausoleum on the south bank of the Yamuna river in the Indian city of Agra. It was commissioned in 1632 by the Mughal emperor, Shah Jahan (reigned 1628–1658), to house the tomb of his favourite wife."
android:textSize="18sp"/>
</LinearLayout>
I'm currently trying to build a simple Contacs Card myself. I just want a Profile picture on the top left, about a quarter to a third of the width, and the Name + description on the right side.
No matter what i try, it always looks very similar to the screenshot below.
this is my Layout:
<?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"
android:padding="#dimen/activity_standard_padding"
android:clipToPadding="false"
android:scrollbarStyle="outsideOverlay"
style="#style/AppBaseThemeCardBG">
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="#style/nowCardStyle">
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical"
android:gravity="top"
android:paddingRight="#dimen/activity_horizontal_margin">
<ImageView
android:id="#+id/schuckCard"
android:scaleType="fitCenter"
android:layout_gravity="top"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="3"
android:orientation="vertical">
<com.mikebdev.douala.widget.RobotoTextView
android:id="#+id/schuckHeader"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:typeface="roboto_condensed_light"
android:text="JESCO SCHUCK"
android:textSize="#dimen/textSizeVeryLarge" />
<com.mikebdev.douala.widget.RobotoTextView
android:id="#+id/body1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:typeface="roboto_condensed_light"
android:text="Description" />
</LinearLayout>
</LinearLayout>
</ScrollView>
This is how it looks like:
I'd like the image to be approximately as wide as the description in the action bar. Obviously i brutally failed here
Use different values for the layout weights. Like 4 for the image and 6 for the content to give it 40‰ of the cards width
Consider using cardslib ( https://github.com/gabrielemariotti/cardslib) to do your card layout. It is very well put together.
Got my stupid Problem fixed:
In the ImageView I have declared android:scaleType="fitCenter" which apparently also centers the ImageView in my Layout.
When changing the scaleType to fitStart I get the result I wanted.
I am in the process of designing my first Android application and I am trying to get the hang of creating an XML layout. (I have a great deal of experience with Java)
Essentially what I wanna do:
Where the outlines describes:
Blue: A basic View (where i can set a text)
Red: A ButtonView (Used so the user can synchronize data)
Green: A nested RelativeLayout (Where i am going to add a lot of other stuff)
More specifically what i wanna do:
So my question is this: How can i set up the different layouts? I am having the must trouble with setting up the blue and red views because i want the red view to fill up around 25% of the screen width(and the blue to fill up the last 75%).
Thank you in advance.
Use layout_weight property to specify the percentage of screen space a view takes.
Like here, for e.g:
<LinearLayout android:layout_height="match_parent" android:layout_width="match_parent"
android:orientation="vertical" .........>
<LinearLayout android:layout_height="wrap_content" android:layout_width="match_parent"
android:orientation="horizontal">
<EditText android:layout_height="wrap_content" android:layout_width="0dip"
android:layout_weight="3"/>
<Button android:layout_height="wrap_content" android:layout_width="0dip"
android:layout_weight="1"/>
</LinearLayout>
//Other view
</LinearLayout>
Use following xml, this is specially designed for you.
<?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" >
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_weight="0.75">
<TextView
android:id="#+id/headingTextView"
style="#android:style/TextAppearance.WindowTitle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Cafe Vigeos"
android:textColor="#android:color/white"
android:textSize="30sp" />
</RelativeLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_weight="0.25">
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
/>
</RelativeLayout>
<RelativeLayout
android:id="#+id/nested_relative_layout"
android:layout_width="match_parent"
android:layout_height="fill_parent" >
</RelativeLayout>
</LinearLayout>
I may be being an idiot, but it seems like adding a Button to a horizontal LinearLayout breaks layout_gravity="top"
<?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="horizontal">
<TextView
android:id="#+id/text"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_gravity="top"
android:text="TextView"
android:background="#f00" />
<ProgressBar
android:id="#+id/progressBar1"
style="?android:attr/progressBarStyleLarge"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="200dp"
android:layout_weight="0"
android:text="Button" />
</LinearLayout>
This looks like this (in the layout editor):
Note that the text view is in the centre, not the top! If *all I do is remove the <button>, then it looks like this:
See, now it is at the top like it should be. A workaround I will use is to have layout_gravity="start" which does result in the correct behaviour:
But anyway, what's going on? Also see this related question. That might actually be the same problem; I'm not sure. No real answers there anyway.
Aha, I found the answer! You have to set android:baselineAligned="false". Never heard of that before, and kind of annoying that it is on by default!
<?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:baselineAligned="false"
android:orientation="horizontal">
...