How to create a chat screen similar to whatsapp in material design? - android

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"
>

Related

How do I right justify a TextView in a Linear Layout?

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.

How to make the ellipsize textview and imageview show correct

I'm working on a layout file. This layout requires that the icons should always after the single line TextView. If the TextView is too long,then the TextView is ellipsize and the icons should be shown.Such as:
situation1: [[textview][icon1][icon2] ]
situation2: [[textview......][icon1][icon2]].
I have found the similar case in here, but it doesn't work for me.
My current code is something like this:
<RelativeLayout
android:id="#+id/parent"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:gravity="left">
<!-- icon show here -->
<LinearLayout
android:id="#+id/icons"
android:paddingLeft="5dp"
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:gravity="center_vertical|left">
</LinearLayout>
<!--text show here-->
<TextView
android:id="#+id/text"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_toLeftOf="#id/icons"
android:singleLine="true"
android:ellipsize="end"
android:gravity="left"/>
</RelativeLayout>
The LinearLayout is used to add icons when fetch data from server. Android's layout preview is like above situation,but the apk runs on device like this this:
situation1: [ [textview][icon1][icon2]]
situation2: [[textview......][icon1][icon2]].
I'm really confused. Anybody has some ideas about this situation? Thanks in advance.
I found the code works fine after Android 4.3(include 4.3,I haven't test 4.2),it doesn't work below Android 4.3.The reason I think is that different Android systems parse these layout params in different ways.Such as some version think the parent container layout's params is more important than the child view.
Finally, I got my stupid situation.But it works.I will give you code:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<!--text show here-->
<TextView
android:id="#+id/text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ellipsize="end"
android:singleLine="true"
android:layout_weight="1" />
<!-- icons show here -->
<LinearLayout
android:id="#+id/icons"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_gravity="center_vertical"
android:orientation="horizontal">
</LinearLayout>
</LinearLayout>
<TextView
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:layout_gravity="right"/>
</LinearLayout>

Android textview rotate with background

I need to create a layout something similar to below picture. My problem is how can I rotate text view and add a background to it. Tried custom textview with draw rotated. But cant position correctly with that method
<Button
android:id="#+id/dealItemPerc"
android:layout_width="150dp"
android:layout_height="20dp"
android:layout_alignParentLeft="true"
android:fontFamily="sans-serif-light"
android:background="#drawable/deal_percentage_back"
android:rotation="-45"
android:text="TextView"
android:textColor="#color/app_black"
android:textSize="14sp" />
Tried with a button but that also not worked because cant position correctly.
Created like this. rotated frame layout with text view inside of it. Don't know why the heck someone gave minus rate.
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<me.dushyantha.mywebserviceapp.SquareImageView
android:id="#+id/dealItemImage"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:padding="5dp"
android:scaleType="fitXY"
android:src="#drawable/detail_rounded_block" >
</me.dushyantha.mywebserviceapp.SquareImageView>
<FrameLayout
android:layout_width="60dp"
android:layout_height="60dp"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:rotation="-45"
>
<TextView
android:id="#+id/dealItemPerc"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="TextView"
android:textSize="14sp"
android:textColor="#color/white"
android:background="#drawable/deal_percentage_back"
/>
</FrameLayout>
</RelativeLayout>
activity_main.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"
tools:context="com.example.test1.MainActivity" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_marginTop="25dip"
android:background="#android:color/black"
android:padding="5dip"
android:rotation="-45"
android:text="Hello World"
android:textColor="#android:color/white" />
</RelativeLayout>
Nothing to do with java code
Build and run the project.
Done

android circle layout

I am trying to use the circle layout located at https://github.com/dmitry-zaitsev/CircleLayout
Document says, layout file should look like,
<ru.biovamp.widget.CircleLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/white"
app:angleOffset="90.0">
<!-- Add here any views you want -->
</ru.biovamp.widget.CircleLayout>
Can someone please post demo code or layout sample file by adding few images?
Following code worked and the issue is solved. Thanks for the help.
<ru.biovamp.widget.CircleLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#android:color/white"
app:angleOffset="90.0"
app:layoutMode="pie"
app:divider="#112233"
app:innerRadius="40dp"
app:innerCircle="#119922"
app:dividerWidth="10dp"
>
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="one"
android:id="#+id/w"
/>
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="two"
android:id="#+id/w1"
/>
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="three"
android:id="#+id/w2"
/>
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="four"
android:id="#+id/w3"
/>
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="five"
android:id="#+id/w4"
/>
</ru.biovamp.widget.CircleLayout>

android layout issue for button and textview

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.

Categories

Resources