I want to create application UI as per image available below. Can anyone here please guide me how can I achieve this?
Image Source
Here data like 123 MB, 456MB are dynamic and will keep changing from application itself. So Ideally there should be 2 buttons and inside particular button we will need 2 images to show upload/download and 2 textview required to display bandwidth count.
But I could not figure that how this could be arrange together?
Regards,
Rajesh
You can use multiple nested LinearLayouts. Something like this:
<LinearLayout android:orientation="horizontal"
android:layout_height="wrap_content"
android:layout_width="fill_parent">
<TextView android:text="MOBILE"
android:layout_height="wrap_content"
android:layout_width="0"
android:layout_weight="0.25" />
<LinearLayout android:orientation="vertical"
android:layout_height="wrap_content"
android:layout_width="0"
android:layout_weight="0.25">
<TextView android:text="123 MB"
android:drawableLeft="#drawable/arrow_down"
android:layout_height="wrap_content"
android:layout_width="fill_parent" />
<TextView android:text="456 MB"
android:drawableLeft="#drawable/arrow_up"
android:layout_height="wrap_content"
android:layout_width="fill_parent" />
</LinearLayout>
<TextView android:text="WIFI"
android:layout_height="wrap_content"
android:layout_width="0"
android:layout_weight="0.25" />
<LinearLayout android:orientation="vertical"
android:layout_height="wrap_content"
android:layout_width="0"
android:layout_weight="0.25">
<TextView android:text="123 MB"
android:drawableLeft="#drawable/arrow_down"
android:layout_height="wrap_content"
android:layout_width="fill_parent" />
<TextView android:text="456 MB"
android:drawableLeft="#drawable/arrow_up"
android:layout_height="wrap_content"
android:layout_width="fill_parent" />
</LinearLayout>
</LinearLayout>
EDIT: Any of the LinearLayout can be set to clickable and with onClickListener you can register any action to it.
Related
I am trying to get the TextView, "tv_amount" to stay on the right side of the screen. I have tried using android:gravity="right" but that hasn't been working for me. Anyone have any suggestions?
Image of emulator running this code:
<?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="45dp"
android:gravity="center_vertical"
android:orientation="horizontal">
<ImageView
android:id="#+id/iv_icon"
android:layout_width="40sp"
android:layout_height="40sp"
android:background="#drawable/circle_border"
android:padding="6sp"
android:layout_marginLeft="6dp"
android:src="#drawable/food"/>
<TextView
android:id="#+id/tv_label"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_marginStart="12dp"
android:text="Yummy Pizza"
android:textSize="20sp" />
<TextView
android:id="#+id/tv_amount"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="12dp"
android:gravity="end"
android:text="$25"
android:textSize="25sp" />
</LinearLayout>
I am expecting the transaction or "tv_amount" to stay be right justified so that end of the number is staying towards the right side of the screen.
I tried using :
android:layout_weight="0"
android:layout_gravity="end"
android:gravity="right"
but these don't seem to work obviously. I am a beginner when it comes to android development and can't seem to find any answers that have helped anywhere else. They all say to use android:gravity or some other alternative. Maybe there is something in my code that doesn't allow that.
Try it like this:
Splitting the content into left and right will result in the weight and gravity properties working. Check out this layout below.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:id="#+id/tv_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="Title"
android:textSize="20sp" />
<!--Separate layout aligned to the left, containing an image and a yummy pizza label. -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="horizontal">
<ImageView
android:id="#+id/iv_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
<TextView
android:id="#+id/tv_text_left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Text Left"
android:textSize="16sp" />
</LinearLayout>
<!--Display the pizza price on a separate label aligned to the right -->
<TextView
android:id="#+id/tv_text_right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="right"
android:text="Text Right"
android:layout_weight="1"
android:textSize="16sp" />
</LinearLayout>
</LinearLayout>
I am dumb. The issue wasn't with the code in my individual recycler view layout code. It was with my activity_main.xml. I set the recycler_view width to "wrap_content" when it should have been "match_parent." Rookie mistake.
I am attempting to create this layout in AXML:
However I am unsure of the easiest way to create this and avoid many nested Layout's. I am thinking to have an outer LinearLayout (horiz) with 2 RelativeLayouts for each column (then add the widgets in there).
So like this:
But with this current layout its not positioning correctly:
Can you suggest the easiest way to achieve this layout (ie, not involving many nested layouts) and why my code below isn't displaying correctly?
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:local="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:minWidth="25px"
android:minHeight="25px"
android:background="#161615">
<!-- Listing Details Section -->
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<RelativeLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="0.5">
<Mvx.MvxImageView
android:id="#+id/listingIcon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
local:MvxBind="ImageUrl LlistingIcon"
android:layout_alignParentLeft="true" />
<TextView
android:id="#+id/name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dp"
android:textSize="15dp"
android:text="First name Last name"
android:layout_toRightOf="#+id/listingIcon" />
<TextView
android:id="#+id/datePosted"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dp"
android:textSize="15dp"
android:text="2 days ago"
android:layout_toRightOf="#+id/listingIcon" />
</RelativeLayout>
<RelativeLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="0.5">
<TextView
android:id="#+id/likes"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dp"
android:textSize="15dp"
android:text="13 likes"
android:layout_alignParentLeft="true" />
<TextView
android:id="#+id/comments"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dp"
android:textSize="15dp"
android:text="4 comments"
android:layout_alignParentLeft="true" />
<Mvx.MvxImageView
android:id="#+id/moreInfo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
local:MvxBind="ImageUrl MoreInfoIcon"
android:layout_alignParentRight="true" />
</RelativeLayout>
</LinearLayout>
</RelativeLayout>
You should be able to accomplish this with the below layout (using a single RelativeLayout). You may need to adjust padding/margin to your needs to get exactly what you want. I haven't tested it but this should get you close.
<RelativeLayout
...>
<Mvx.MvxImageView
android:id="#+id/listingIcon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="use appropriate margin for your needs/>
<TextView
android:id="#+id/name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dp"
android:textSize="15dp"
android:text="First name Last name"
android:layout_toRightOf="#+id/listingIcon" />
<TextView
android:id="#+id/datePosted"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dp"
android:textSize="15dp"
android:text="2 days ago"
android:layout_below="#+id/name" /> <!-- see this change -->
<Mvx.MvxImageView
android:id="#+id/moreInfo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
local:MvxBind="ImageUrl MoreInfoIcon"
android:layout_alignParentRight="true" />
<TextView
android:id="#+id/likes"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="5dp"
android:textSize="15dp"
android:text="13 likes"
android:layout_alignPToLeftOf="#id/moreInfo" /> <!-- changed -->
<TextView
android:id="#+id/comments"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dp"
android:textSize="15dp"
android:text="4 comments"
android:layout_toLeftOf="#id/moreInfo"
android:layout_below="#id/likes" />
</RelativeLayout>
You can actually achieve this with a single horizontal LinearLayout and three children.
Your first child would be a TextView with a compound drawable.
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:drawableLeft="#drawable/some_icon"
/>
The text can be either hardcoded or something you set dynamically, but you can use the power of Android's spans if you need different sections of the text to be styled differently. This way you avoid creating unnecessary TextViews.
Your second child would be another TextView, again with spans if you need to style content differently, and your third child an ImageButton.
This approach will require at most two layout passes to succeed. (One if you don't use weights. It may even still be one pass if you specify weight for only one child and give it a width of 0dp, but I can't quite remember).
A single relative layout could also give you what you want, but requires the definition of confusing constraints and requires two measure/layout passes.
In my layout I need to have a textview with two buttons next to that and one cancel button at right side (refer below image)
But when the text view is too long then the buttons near to the textview goes behind the cancel button(refer the below image)
Attached xml file for your reference,
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content" android:layout_weight="1">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World, MActivity"
android:singleLine="true"
android:paddingTop="10dp"
android:textAppearance="#android:style/TextAppearance.DeviceDefault.Large"
android:ellipsize="end"/>
<Button android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:text="yes" />
<Button android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:text="no" />
</LinearLayout>
<Button android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:text="cancel" />
</LinearLayout>
This question has been asked multiple times, but there should have no basic layout solution to handle this. You have to write custom code to completely solve this problem.
You can use a workaround, set android:maxWidth for TextView
e.g.
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:maxWidth="150dp"/>
Basically I am confused with the xml file for each chat entry with content wrapped like whatsapp. I have tried doing it using framelayout and Relativelayout but it didn't work. Message is not wrapped around the time.
<FrameLayout
android:id="#+id/chat_mine"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:background="#drawable/chat_bg_white"
>
<TextView
android:id="#+id/chat_text_mine"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="65dp"
android:gravity="center|left"
android:text="h"
android:textSize="#dimen/font_size3" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|right"
>
<TextView
android:id="#+id/chat_time_mine"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right|bottom"
android:gravity="right|bottom"
android:singleLine="true"
android:text=" 2:00 am"
android:textSize="#dimen/font_size4" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_delivered" />
</LinearLayout>
</FrameLayout>
Not sure what you are trying to ask here ? If I understand it correct, edit you frame layout to show something first. This will help you see contents in ur preview.
<FrameLayout
android:id="#+id/chat_mine"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:background="#drawable/chat_bg_white"
>
I am currently working on my first android app. In a listview, I need to have the following organisation in each row:
On the left: one main icon on which takes the whole height of the row
On the middle: 2 texts, one below the other
On the right: 2 icons, one below the other
I end up with a row.xml file like this, but that does not work as I expect.
Do you know if something obvious is missing in this file ?
Thanks a lot,
Luc
<?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="?android:attr/listPreferredItemHeight"
android:padding="6dip">
<ImageView
android:id="#+id/icon"
android:layout_width="48px"
android:layout_height="48px"
android:layout_marginRight="0dip"
android:src="#drawable/icon" />
<LinearLayout
android:orientation="vertical"
android:layout_width="0dip"
android:layout_weight="1"
android:layout_height="wrap_content">
<TextView
android:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="1"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textSize="16dp"
android:textStyle="bold"
android:text="TITLE"
android:paddingLeft="5dp"
/>
<TextView
android:id="#+id/description"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="1"
android:textAppearance="?android:attr/textAppearanceSmall"
android:textSize="14dp"
android:text="DESCRIPTION"
android:paddingLeft="5dp"
/>
</LinearLayout>
<LinearLayout
android:orientation="vertical"
android:layout_weight="1"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_gravity="right">
<ImageButton
android:id="#+id/button_modify"
android:layout_width="16px"
android:layout_height="16px"
android:src="#drawable/deleteicon"
/>
<ImageButton
android:id="#+id/button_delete"
android:layout_width="16px"
android:layout_height="16px"
android:src="#drawable/modifyicon"
/>
</LinearLayout>
In the right-hand-column LinearLayout, add
android:layout_width="wrap_content"
android:gravity="right"
That should make the icons should fall to the right (because of the gravity setting.)
Consider switching to RelativeLayout for a rule set like you describe. Using LinearLayouts may not work in all cases and will be less efficient than the RelativeLayout in terms of stack consumption.