I was wondering how WhatsApp handles the time shown in every message.
For those who don't know:
If the message is very short, the text and time are in the same row.
If the message is long, the time is in the bottom right corner - the text wrapped around it.
With a RelativeLayout and toLeftOf I would get 1) but not 2) as previous lines would be "cut off" at the position of the time view. Same behaviour If i use a LinearLayout.
So I tried to use a FrameLayout or a RelativeLayout without any connection between text and time.
However, if the text is as long as the message-view is big, both views would overlap.
If I put blank characters to my message I wouldn't have the time on the right.
Do they really have some kind of text-wrapping-lib for this or is it possible to do only with layouts?
Here is the requested screenshot:
#Hisham Muneer 's answer very good.
But there are some problems. For example:
If the TextView has 2 full lines (end to end), the text will
intersect with datetime text layout. Finally, the views will
look like onion effect.
The text line wraps can't works efficiently. You must control this
lines and relocate the datetime view.
I'm going to share my solution, if you will need like this problem.
This is example screenshot
ImFlexboxLayout.java
public class ImFlexboxLayout extends RelativeLayout {
private TextView viewPartMain;
private View viewPartSlave;
private TypedArray a;
private RelativeLayout.LayoutParams viewPartMainLayoutParams;
private int viewPartMainWidth;
private int viewPartMainHeight;
private RelativeLayout.LayoutParams viewPartSlaveLayoutParams;
private int viewPartSlaveWidth;
private int viewPartSlaveHeight;
public ImFlexboxLayout(Context context) {
super(context);
}
public ImFlexboxLayout(Context context, AttributeSet attrs) {
super(context, attrs);
a = context.obtainStyledAttributes(attrs, R.styleable.ImFlexboxLayout, 0, 0);
}
#Override
protected void onAttachedToWindow() {
super.onAttachedToWindow();
try {
viewPartMain = (TextView) this.findViewById(a.getResourceId(R.styleable.ImFlexboxLayout_viewPartMain, -1));
viewPartSlave = this.findViewById(a.getResourceId(R.styleable.ImFlexboxLayout_viewPartSlave, -1));
} catch (Exception e) {
e.printStackTrace();
}
}
#Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
int widthSize = MeasureSpec.getSize(widthMeasureSpec);
int heightSize = MeasureSpec.getSize(heightMeasureSpec);
if (viewPartMain == null || viewPartSlave == null || widthSize <= 0) {
return;
}
int availableWidth = widthSize - getPaddingLeft() - getPaddingRight();
int availableHeight = heightSize - getPaddingTop() - getPaddingBottom();
viewPartMainLayoutParams = (LayoutParams) viewPartMain.getLayoutParams();
viewPartMainWidth = viewPartMain.getMeasuredWidth() + viewPartMainLayoutParams.leftMargin + viewPartMainLayoutParams.rightMargin;
viewPartMainHeight = viewPartMain.getMeasuredHeight() + viewPartMainLayoutParams.topMargin + viewPartMainLayoutParams.bottomMargin;
viewPartSlaveLayoutParams = (LayoutParams) viewPartSlave.getLayoutParams();
viewPartSlaveWidth = viewPartSlave.getMeasuredWidth() + viewPartSlaveLayoutParams.leftMargin + viewPartSlaveLayoutParams.rightMargin;
viewPartSlaveHeight = viewPartSlave.getMeasuredHeight() + viewPartSlaveLayoutParams.topMargin + viewPartSlaveLayoutParams.bottomMargin;
int viewPartMainLineCount = viewPartMain.getLineCount();
float viewPartMainLastLineWitdh = viewPartMainLineCount > 0 ? viewPartMain.getLayout().getLineWidth(viewPartMainLineCount - 1) : 0;
widthSize = getPaddingLeft() + getPaddingRight();
heightSize = getPaddingTop() + getPaddingBottom();
if (viewPartMainLineCount > 1 && !(viewPartMainLastLineWitdh + viewPartSlaveWidth >= viewPartMain.getMeasuredWidth())) {
widthSize += viewPartMainWidth;
heightSize += viewPartMainHeight;
} else if (viewPartMainLineCount > 1 && (viewPartMainLastLineWitdh + viewPartSlaveWidth >= availableWidth)) {
widthSize += viewPartMainWidth;
heightSize += viewPartMainHeight + viewPartSlaveHeight;
} else if (viewPartMainLineCount == 1 && (viewPartMainWidth + viewPartSlaveWidth >= availableWidth)) {
widthSize += viewPartMain.getMeasuredWidth();
heightSize += viewPartMainHeight + viewPartSlaveHeight;
} else {
widthSize += viewPartMainWidth + viewPartSlaveWidth;
heightSize += viewPartMainHeight;
}
this.setMeasuredDimension(widthSize, heightSize);
super.onMeasure(MeasureSpec.makeMeasureSpec(widthSize, MeasureSpec.EXACTLY), MeasureSpec.makeMeasureSpec(heightSize, MeasureSpec.EXACTLY));
}
#Override
protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
super.onLayout(changed, left, top, right, bottom);
if (viewPartMain == null || viewPartSlave == null) {
return;
}
viewPartMain.layout(
getPaddingLeft(),
getPaddingTop(),
viewPartMain.getWidth() + getPaddingLeft(),
viewPartMain.getHeight() + getPaddingTop());
viewPartSlave.layout(
right - left - viewPartSlaveWidth - getPaddingRight(),
bottom - top - getPaddingBottom() - viewPartSlaveHeight,
right - left - getPaddingRight(),
bottom - top - getPaddingBottom());
}
}
attrs.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<declare-styleable name="ImFlexboxLayout">
<attr name="viewPartMain" format="reference"></attr>
<attr name="viewPartSlave" format="reference"></attr>
</declare-styleable>
</resources>
Example right ballon layout (balloon.xml)
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:baselineAligned="false"
android:gravity="center_vertical"
android:orientation="horizontal">
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="right|center_vertical"
android:layout_weight="1"
android:gravity="right">
<tr.com.client.ImFlexboxLayout
android:id="#+id/msg_layout"
style="#style/BalloonMessageLayoutRight"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right|bottom"
android:gravity="left|center_vertical"
app:viewPartMain="#+id/chat_msg"
app:viewPartSlave="#+id/lytStatusContainer">
<TextView
android:id="#+id/chat_msg"
style="#style/BalloonMessageRightTextItem"
android:layout_width="wrap_content"
android:layout_gravity="right|bottom"
android:focusableInTouchMode="false"
android:gravity="left|top"
android:text="hjjfg" />
<LinearLayout
android:id="#+id/lytStatusContainer"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:gravity="right"
android:minWidth="60dp">
<TextView
android:id="#+id/date_view"
style="#style/BallonMessageTimeText"
android:layout_alignParentRight="true"
android:layout_gravity="right|bottom"
android:layout_marginRight="5dp"
android:gravity="right"
android:maxLines="1" />
<include
android:id="#+id/lytStatus"
layout="#layout/layout_im_message_status"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:layout_marginRight="5dp"
android:minWidth="40dp" />
</LinearLayout>
</tr.com.client.ImFlexboxLayout>
</LinearLayout>
</LinearLayout>
You can modify layout xml and some sections related your scenario.
There are 2 important point: you must define in layout xml "viewPartMain", "viewPartSlave" attributes. Because the code will decide measure via your main(chat textview) and slave(datetime text view) elements.
I wish have good days. Greets.
Adding HTML non-breaking spaces did the trick. Tested the code on most devices and working absolutely fine. Maybe whatsapp is also doing the same thing. Below is the chat code:
See images below to see it working.
XML Design:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/rel_layout_left"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/txtDate"
android:visibility="visible"
android:orientation="vertical"
>
<TextView
android:id="#+id/lblMsgFrom"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dp"
android:text="kfhdjbh"
android:textColor="#color/lblFromName"
android:textSize="12dp"
android:textStyle="italic"
android:visibility="gone" />
<ImageView
android:id="#+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_below="#+id/lblMsgFrom"
android:layout_marginRight="-5dp"
android:src="#drawable/bubble_corner" />
<FrameLayout
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:background="#drawable/bg_msg_from"
android:layout_toRightOf="#+id/imageView">
<TextView
android:id="#+id/txtTimeFrom"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingRight="#dimen/d5"
android:text="Time"
android:textColor="#android:color/darker_gray"
android:layout_gravity="bottom|right"
android:padding="4dp"
android:textSize="10dp"
android:textStyle="italic"
android:layout_below="#+id/txtMsgFrom"
android:layout_alignRight="#+id/txtMsgFrom"
android:layout_alignEnd="#+id/txtMsgFrom" />
<TextView
android:id="#+id/txtMsgFrom"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/imageView"
android:layout_toEndOf="#+id/lblMsgFrom"
android:layout_toRightOf="#+id/imageView"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:paddingTop="5dp"
android:paddingBottom="5dp"
android:text="kdfjhgjfhf"
android:textColor="#color/black"
android:textSize="16dp"
android:layout_alignParentLeft="true"
android:layout_marginLeft="0dp"
android:layout_alignParentTop="true"
android:layout_marginTop="0dp"
android:layout_gravity="left|center_vertical" />
</FrameLayout>
</RelativeLayout>
Code: bg_msg_from.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<!-- view background color -->
<!--<solid android:color="#color/bg_msg_from" >-->
<solid android:color="#android:color/white" >
</solid>
<corners android:radius="#dimen/d5" >
</corners>
</shape>
** File: bubble_corner.png**
txtMsgFrom.setText(Html.fromHtml(convertToHtml(txtMsgFrom.getText().toString()) + " ")); // 10 spaces
Its easier with Unicode from here.
So with this you can archive the Unicode format
new TextView("Hello\u00A0world");
better than HTML string.
source: https://stackoverflow.com/a/6565049
Based on #Sinan Ergin answer but slightly improved:
less layouts
simplified gravity + layout_gravity usage
left + right layout files
FrameLayout instead of RelativeLayout
converted to Kotlin
no attrs.xml & style references
/**
* Layout that allows a [TextView] to flow around a [View].
*
* First child must be of type [TextView].
* Second child must be of type [View].
*/
class TextViewContainerFlowLayout #JvmOverloads constructor(
context: Context,
attrs: AttributeSet? = null
) : FrameLayout(context, attrs) {
private val textView by lazy(NONE) { getChildAt(0) as TextView }
private val containerView by lazy(NONE) { getChildAt(1) }
private val viewPartMainLayoutParams by lazy(NONE) { textView.layoutParams as LayoutParams }
private val viewPartSlaveLayoutParams by lazy(NONE) { containerView.layoutParams as LayoutParams }
private var containerWidth = 0
private var containerHeight = 0
override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec)
var widthSize = MeasureSpec.getSize(widthMeasureSpec)
if (widthSize <= 0) {
return
}
val availableWidth = widthSize - paddingLeft - paddingRight
val textViewWidth = textView.measuredWidth + viewPartMainLayoutParams.leftMargin + viewPartMainLayoutParams.rightMargin
val textViewHeight = textView.measuredHeight + viewPartMainLayoutParams.topMargin + viewPartMainLayoutParams.bottomMargin
containerWidth = containerView.measuredWidth + viewPartSlaveLayoutParams.leftMargin + viewPartSlaveLayoutParams.rightMargin
containerHeight = containerView.measuredHeight + viewPartSlaveLayoutParams.topMargin + viewPartSlaveLayoutParams.bottomMargin
val viewPartMainLineCount = textView.lineCount
val viewPartMainLastLineWidth = if (viewPartMainLineCount > 0) textView.layout.getLineWidth(viewPartMainLineCount - 1) else 0.0f
widthSize = paddingLeft + paddingRight
var heightSize = paddingTop + paddingBottom
if (viewPartMainLineCount > 1 && viewPartMainLastLineWidth + containerWidth < textView.measuredWidth) {
widthSize += textViewWidth
heightSize += textViewHeight
} else if (viewPartMainLineCount > 1 && viewPartMainLastLineWidth + containerWidth >= availableWidth) {
widthSize += textViewWidth
heightSize += textViewHeight + containerHeight
} else if (viewPartMainLineCount == 1 && textViewWidth + containerWidth >= availableWidth) {
widthSize += textView.measuredWidth
heightSize += textViewHeight + containerHeight
} else {
widthSize += textViewWidth + containerWidth
heightSize += textViewHeight
}
setMeasuredDimension(widthSize, heightSize)
super.onMeasure(
MeasureSpec.makeMeasureSpec(widthSize, MeasureSpec.EXACTLY),
MeasureSpec.makeMeasureSpec(heightSize, MeasureSpec.EXACTLY)
)
}
override fun onLayout(changed: Boolean, left: Int, top: Int, right: Int, bottom: Int) {
super.onLayout(changed, left, top, right, bottom)
textView.layout(
paddingLeft,
paddingTop,
textView.width + paddingLeft,
textView.height + paddingTop
)
containerView.layout(
right - left - containerWidth - paddingRight,
bottom - top - paddingBottom - containerHeight,
right - left - paddingRight,
bottom - top - paddingBottom
)
}
}
view_chat_entry.xml
<my.ui.view.TextViewContainerFlowLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/container"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right|bottom"
android:gravity="left|center_vertical"
android:padding="12dp"
>
<my.ui.android.TextView
android:id="#+id/message"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right|bottom"
android:gravity="left|top"
android:textIsSelectable="true"
tools:text="hjjfg"
/>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="bottom"
>
<TextView
android:id="#+id/date"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="4dp"
android:maxLines="1"
/>
<my.ui.view.ChatEntryStatusView
android:id="#+id/status"
android:layout_width="wrap_content"
android:layout_marginStart="4dp"
android:layout_height="wrap_content"
/>
</LinearLayout>
</my.ui.view.TextViewContainerFlowLayout>
view_chat_entry_status.xml
<?xml version="1.0" encoding="utf-8"?>
<merge 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"
tools:layout_width="wrap_content"
tools:layout_height="wrap_content"
tools:parentTag="android.widget.FrameLayout"
>
<ImageView
android:contentDescription="#null"
android:id="#+id/statusImageView"
android:layout_width="15dp"
android:layout_height="15dp"
app:srcCompat="#drawable/ic_check_one"/>
</merge>
adapter_item_chat_left.xml:
<?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"
android:layout_marginBottom="4dp"
android:layout_marginEnd="64dp"
android:layout_marginTop="4dp"
android:gravity="left"
>
<include
layout="#layout/view_chat_entry"
android:id="#+id/chatEntry"
android:layout_width="match_parent"
android:layout_height="wrap_content"
/>
</LinearLayout>
adapter_item_chat_right.xml:
<?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"
android:layout_marginBottom="4dp"
android:layout_marginStart="64dp"
android:layout_marginTop="4dp"
android:gravity="right"
>
<include
layout="#layout/view_chat_entry"
android:id="#+id/chatEntry"
android:layout_width="match_parent"
android:layout_height="wrap_content"
/>
</LinearLayout>
End result (styling is done on the container with a drawable):
I propose another solution
public static final String TAG = "MainActivity";
private TextView mText;
private RelativeLayout relativeLayout;
private Boolean mFirstTime = true;
private static final int WIDH_HOUR = 382;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
final int width = getScreensWidh();
mText = (TextView) findViewById(R.id.activity_main_text);
relativeLayout = (RelativeLayout) findViewById(R.id.activity_main_relative);
mText.setText("aaaaa dfsafsa afdsfa fdsafas adfas fdasf adfsa dsa aaaa dfsafsa afdsfa fdsafas adfas fdasf adfsa");
ViewTreeObserver vto = mText.getViewTreeObserver();
vto.addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
#Override
public void onGlobalLayout() {
if (mFirstTime) {
Layout layout = mText.getLayout();
int lines = layout.getLineCount();
int offset = layout.layout.getLineWidth(lines - 1);
int freeSpace = width - offset;
TextView hour = new TextView(MainActivity.this);
hour.setText("12:20");
RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WRAP_CONTENT, RelativeLayout.LayoutParams.WRAP_CONTENT);
params.addRule(RelativeLayout.ALIGN_PARENT_RIGHT);
if (freeSpace > WIDH_HOUR) {
params.addRule(RelativeLayout.ALIGN_BOTTOM, R.id.activity_main_text);
} else {
params.addRule(RelativeLayout.BELOW, R.id.activity_main_text);
}
hour.setLayoutParams(params);
relativeLayout.addView(hour);
Log.d(TAG, String.valueOf(freeSpace));
mFirstTime = false;
}
}
});
}
public int getScreensWidh() {
Display display = getWindowManager().getDefaultDisplay();
Point size = new Point();
display.getSize(size);
return size.x;
}
Two Public Methods
public abstract int getLineCount ()
Return the number of lines of text in this layout.
public int getLineWidth(int line)
Gets the unsigned horizontal extent of the specified line, including leading margin indent and trailing whitespace.
You can use the layout and code below to achieve the desired effect.
Source code gist
What I have used is get the width of the text + the time layout and check if this exceeds the container layout width, and adjust the height of the container accordingly. We have to extend from FrameLayout since this is the one which allows overlapping of two child views.
This is tested to be working on English locale. Suggestions and improvements are always welcome :)
Hope I've helped someone looking for the same solution.
I guess the easiest way to achieve this kind oflayout would be to add enough blank space in your message to be sure there is enough space on the right to not cover the time (I don't see any other easy way to have a margin/padding/positioning for the last line of your text only)
Then you just place the time in the relative as an align bottom right
layout_chat_left.xml
<?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:id="#+id/layoutChat"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp">
<RelativeLayout
android:id="#+id/message_send"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:layout_toRightOf="#id/test_arrow"
android:background="#drawable/bg_msg_left"
android:paddingLeft="15dp"
android:paddingTop="5dp"
android:paddingRight="15dp"
android:paddingBottom="7dp"
tools:ignore="UselessParent">
<TextView
android:id="#+id/text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="10dp"
android:maxWidth="200dp"
android:text="demo Text"
android:textColor="#222"
android:textSize="17sp" />
<TextClock
android:id="#+id/msg_time"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/text"
android:layout_toEndOf="#+id/text"
android:text="1:30 P.M."
android:textColor="#888" />
<ImageView
android:id="#+id/is_Read_iv"
android:layout_width="10dp"
android:layout_height="10dp"
android:layout_marginBottom="2dp"
android:layout_marginLeft="2dp"
android:layout_alignBottom="#+id/text"
android:layout_toEndOf="#+id/msg_time"
android:src="#drawable/icon_tick"
android:tint="#color/BlueTint"/>
</RelativeLayout>
<ImageView
android:id="#+id/test_arrow"
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_alignParentLeft="true"
android:layout_marginTop="1dp"
android:layout_marginRight="-6dp"
android:background="#null"
android:scaleX="-1.5"
android:src="#drawable/v_bubble_corner_left" />
</RelativeLayout>
layout_chat_right.xml
<?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:id="#+id/layoutChat"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp">
<RelativeLayout
android:id="#+id/message_send"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:layout_toLeftOf="#id/test_arrow"
android:background="#drawable/bg_msg_right"
android:paddingLeft="15dp"
android:paddingTop="5dp"
android:paddingRight="15dp"
android:paddingBottom="7dp"
tools:ignore="UselessParent">
<TextView
android:id="#+id/text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="10dp"
android:maxWidth="200dp"
android:text="demo Text"
android:textColor="#222"
android:textSize="17sp" />
<TextClock
android:id="#+id/msg_time"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/text"
android:layout_toEndOf="#+id/text"
android:text="1:30 P.M."
android:textColor="#888" />
<ImageView
android:id="#+id/is_Read_iv"
android:layout_width="10dp"
android:layout_height="10dp"
android:layout_marginBottom="2dp"
android:layout_marginLeft="2dp"
android:layout_alignBottom="#+id/text"
android:layout_toEndOf="#+id/msg_time"
android:src="#drawable/icon_tick"
android:tint="#color/BlueTint" />
</RelativeLayout>
<ImageView
android:id="#+id/test_arrow"
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_alignParentRight="true"
android:layout_marginLeft="-6dp"
android:layout_marginTop="1dp"
android:background="#null"
android:scaleX="1.5"
android:src="#drawable/v_bubble_corner_right" />
</RelativeLayout>
bg_msg_left.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<!-- view background color -->
<!--<solid android:color="#color/bg_msg_right" >-->
<solid android:color="#color/white" >
</solid>
<corners
android:topLeftRadius="0dp"
android:topRightRadius="5dp"
android:bottomLeftRadius="5dp"
android:bottomRightRadius="5dp">
</corners>
</shape>
bg_msg_right.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<!-- view background color -->
<!--<solid android:color="#color/bg_msg_right" >-->
<solid android:color="#color/whatsapp_green" >
</solid>
<corners
android:topLeftRadius="5dp"
android:topRightRadius="0dp"
android:bottomLeftRadius="5dp"
android:bottomRightRadius="5dp">
</corners>
</shape>
v_bubble_corner_left.xml
<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="24.0"
android:viewportHeight="24.0">
<path
android:fillColor="#color/white"
android:pathData="M8,5v14l11,-14z" />
</vector>
v_bubble_corner_right.xml
<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="24.0"
android:viewportHeight="24.0">
<path
android:fillColor="#color/whatsapp_green"
android:pathData="M8,5v14l11,-14z"/>
</vector>
And the CommentAdapter.java is
import android.content.Context;
import android.graphics.Color;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.RelativeLayout;
import android.widget.TextView;
import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;
import com.daimajia.androidanimations.library.Techniques;
import com.daimajia.androidanimations.library.YoYo;
import com.google.android.material.card.MaterialCardView;
import java.util.ArrayList;
import java.util.List;
public class CommentAdapter extends RecyclerView.Adapter<CommentAdapter.ViewHolder> {
private List<String> mComment;
private List<String> mTimeData;
private List<Integer> mIcon;
private List<Integer> mDirection;
private List<Integer> mRecordID;
private Context mContext;
private LayoutInflater mInflater;
private static final String TAG = "CommentAdapter";
private ItemLongClickListener mLongClickListener;
// data is passed into the constructor
CommentAdapter(Context context, List<String> dataComment, List<String> dataTimeData, List<Integer> dataDirection, List<Integer> dataRecordID) {
mContext = context;
this.mInflater = LayoutInflater.from( context );
this.mComment = dataComment;
this.mTimeData = dataTimeData;
this.mDirection = dataDirection;
this.mRecordID = dataRecordID;
}
// inflates the row layout from xml when needed
#NonNull
#Override
public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
View view;
if (viewType == 1) {
view = mInflater.inflate( R.layout.layout_chat_left, parent, false );
} else {
view = mInflater.inflate( R.layout.layout_chat_right, parent, false );
}
return new ViewHolder( view );
}
// binds the data to the TextView in each row
#Override
public void onBindViewHolder(ViewHolder holder, int position) {
String mTitle = mComment.get( position );
holder.tvComment.setText( mTitle );
String mSubTitle = mTimeData.get( position );
holder.tvTime.setText( mSubTitle );
int maxWidth = mContext.getResources().getDisplayMetrics().widthPixels;
holder.layoutChat.getLayoutParams().width = maxWidth;
}
// total number of rows
#Override
public int getItemCount() {
return mComment.size();
}
// stores and recycles views as they are scrolled off screen
public class ViewHolder extends RecyclerView.ViewHolder implements View.OnLongClickListener {
TextView tvComment;
TextView tvTime;
TextView tvSerial;
RelativeLayout layoutChat;
MaterialCardView cardView;
ViewHolder(View itemView) {
super( itemView );
tvComment = itemView.findViewById( R.id.text );
tvTime = itemView.findViewById( R.id.msg_time );
layoutChat = itemView.findViewById( R.id.layoutChat );
itemView.setOnLongClickListener( this );
}
#Override
public boolean onLongClick(View v) {
Log.d( TAG, "onLongClick: " + getAdapterPosition() );
if (mLongClickListener!=null)
mLongClickListener.onItemLongClick( v, mRecordID.get( getAdapterPosition() ) );
return true;
}
}
void setOnLongClickListener(ItemLongClickListener itemLongClickListener) {
this.mLongClickListener = itemLongClickListener;
}
// parent activity will implement this method to respond to click events
public interface ItemLongClickListener {
void onItemLongClick(View view, int position);
}
#Override
public int getItemViewType(int position) {
if (mDirection.get( position ) == 1)
return 1;
return 2;
}
}
Here are the screenshots, one from a live demo
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/rel_layout_left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/bubble1"
android:orientation="vertical">
<TextView
android:id="#+id/lblMsgFrom"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Person Name or Id"
android:visibility="gone" />
<TextView
android:id="#+id/lblMessage_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingBottom="5dp"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:paddingTop="5dp"
android:text="Sample \n Sample2 Sample2 Sample2 Sample2 Sample2 Sample2 Sample2 Sample2 Sample2 \n Sample2"
android:textSize="16dp" />
<TextView
android:id="#+id/lblMessage_Time"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignEnd="#+id/lblMessage_text"
android:layout_alignRight="#+id/lblMessage_text"
android:layout_below="#+id/lblMessage_text"
android:text="04:50 Am"
android:textColor="#android:color/darker_gray"
android:textSize="10dp"
android:textStyle="italic" />
</RelativeLayout>
I suggest other solution. If you know max bubble width and time width, then you can precalculate how to place your views.
Layout:
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:id="#+id/text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="12sp"
tools:text="This is text"/>
<TextView
android:id="#+id/time"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="10sp"
tools:text="10:10"/>
</RelativeLayout>
Code:
fun setTextAndTime(textView: TextView, timeView: TextView, text: String, time: String) {
// screen width - offset from bubble
val maxWidth: Int = Resources.getSystem().displayMetrics.widthPixels - context.resources.getDimensionPixelSize(R.dimen.bubble_offset)
val timeWidth: Int = getTextWidth(time, 10f)
textView.text = text
timeView.text = time
textView.measure(makeMeasureSpec(maxWidth, EXACTLY), makeMeasureSpec(0, UNSPECIFIED))
val offset = textView.layout.getLineWidth(textView.layout.lineCount - 1)
val freeSpace = maxWidth - offset
val moveTimestampBelow = freeSpace < timeWidth
val multilineContent = textView.layout.lineCount > 1
val params = RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WRAP_CONTENT, RelativeLayout.LayoutParams.WRAP_CONTENT)
when {
moveTimestampBelow -> params.apply {
addRule(RelativeLayout.BELOW, textView.id)
addRule(RelativeLayout.ALIGN_PARENT_RIGHT)
}
multilineContent -> params.apply {
params.addRule(RelativeLayout.ALIGN_BOTTOM, textView.id)
addRule(RelativeLayout.ALIGN_PARENT_RIGHT)
}
else -> params.apply {
params.addRule(RelativeLayout.ALIGN_BOTTOM, textView.id)
addRule(RelativeLayout.END_OF, textView.id)
}
}
timeView.layoutParams = params
}
private fun getTextWidth(text: String, textSizeSp: Float): Int {
val textPaint = Paint()
val pxSize = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, textSizeSp, context.resources.displayMetrics)
textPaint.textSize = pxSize
textPaint.style = Paint.Style.FILL
val result = Rect()
textPaint.getTextBounds(text, 0, text.length, result)
return result.width()
}
The previous answers didn't satisfy my needs as they were too complex and the scrolling on RecyclerView was way too slow! I could feel the stutter while scrolling. So, I modified #Rahul Shuklas answer to make it more efficient. I am sharing my result below. The code is self explanatory, I have added comments for more understandability.
class ChatBubbleLayout : FrameLayout {
constructor(context: Context) : super(context) {}
constructor(context: Context, attrs: AttributeSet) : super(context, attrs) {}
constructor(context: Context, attrs: AttributeSet, defStyleAttr: Int) : super(context, attrs, defStyleAttr) {}
#TargetApi(21)
constructor(context: Context, attrs: AttributeSet, defStyleAttr: Int, defStyleRes: Int) : super(context, attrs, defStyleAttr, defStyleRes) {
}
override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec)
doMeasure()
}
private fun doMeasure() {
val messageTextView = findViewById<TextView>(R.id.tv_message)
val dateTextView = findViewById<TextView>(R.id.tv_message_time)
// Message line count
val lineCount = messageTextView.lineCount
// Message padding
val messageTextViewPadding = messageTextView.paddingLeft + messageTextView.paddingRight
// First / Second last line of message
val lastLineStart = messageTextView.layout.getLineStart(lineCount - 1)
val lastLineEnd = messageTextView.layout.getLineEnd(lineCount - 1)
// Width of First / Second last line of message
var desiredWidth = Layout.getDesiredWidth(messageTextView.text.subSequence(lastLineStart,
lastLineEnd), messageTextView.paint).toInt()
var desiredHeight = measuredHeight
if (desiredWidth < minimumWidth && messageTextView.measuredWidth < minimumWidth) {
// Probably a small or single line message
desiredWidth = minimumWidth + messageTextViewPadding
} else {
// Probably a bit long or multiple line message
desiredWidth = messageTextView.measuredWidth + messageTextViewPadding
}
if(desiredHeight < minimumHeight) {
desiredHeight = minimumHeight
}
setMeasuredDimension(desiredWidth, desiredHeight)
}
}
My Layout XML file
<LinearLayout 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="right">
<com.app.chat.ui.ChatBubbleLayout
android:id="#+id/chat_bubble_item_container"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="#dimen/height_16dp"
android:background="#drawable/medium_green_rounded_corner"
android:minWidth="96dp"
android:minHeight="44dp">
<TextView
android:id="#+id/tv_message"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="start|left"
android:autoLink="all"
android:linksClickable="true"
android:maxWidth="280dp"
android:paddingLeft="#dimen/margin_8dp"
android:paddingTop="#dimen/margin_8dp"
android:paddingRight="#dimen/margin_8dp"
android:paddingBottom="#dimen/margin_8dp"
android:text="#{chatMessageVM.iMessage.message}"
android:textColor="#color/white"
android:textColorLink="#color/white"
android:textIsSelectable="true"
android:textSize="#dimen/text_14sp"
tools:text="Nope" />
<TextView
android:id="#+id/tv_message_time"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end|right|bottom"
android:layout_marginRight="#dimen/margin_4dp"
android:layout_marginBottom="#dimen/margin_2dp"
android:gravity="center_vertical"
android:text="#{chatMessageVM.iMessage.readableTimestamp}"
android:textColor="#color/gray_5"
android:textSize="#dimen/text_12sp"
tools:text="11:21 AM" />
</com.app.chat.ui.ChatBubbleLayout>
</LinearLayout>
I hope it helps future readers.
Here is my Layout file chat_row_right_1.xml
<?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">
<RelativeLayout
android:layout_toLeftOf="#+id/test_arrow"
android:id="#+id/message_send"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="15dp"
android:paddingBottom="7dp"
android:paddingTop="5dp"
android:paddingRight="15dp"
android:layout_marginTop="5dp"
android:maxWidth="200dp"
android:background="#drawable/layout_bg2_1"
tools:ignore="UselessParent">
<TextView
android:layout_marginEnd="10dp"
android:id="#+id/text"
android:text="demo Text"
android:textColor="#222"
android:textSize="17sp"
android:layout_width="wrap_content"
android:maxWidth="200dp"
android:layout_height="wrap_content" />
<TextClock
android:id="#+id/msg_time"
android:layout_toEndOf="#+id/text"
android:layout_alignBottom="#+id/text"
android:text="1:30 P.M."
android:textColor="#888"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<ImageView
android:id="#+id/is_Read_iv"
android:layout_toEndOf="#+id/msg_time"
android:layout_alignBottom="#+id/text"
android:layout_width="wrap_content"
android:src="#drawable/ic_done_black_24dp"
android:layout_height="wrap_content" />
</RelativeLayout>
<ImageView
android:id="#+id/test_arrow"
android:layout_alignParentRight="true"
android:layout_width="20dp"
android:background="#null"
android:layout_marginTop="-2dp"
android:layout_marginLeft="-8dp"
android:layout_height="wrap_content"
android:src="#drawable/ic_play_arrow_black_24dp"/>
</RelativeLayout>
And here is ic_right_bubble.xml file in drawable folder
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="24.0"
android:viewportHeight="24.0">
<path
android:fillColor="#cfc"
android:pathData="M8,5v14l11,-14z"/>
</vector>
You will get exact same as WhatsApp See screenshot
Related
I have a horizontal recycleview which can scroll & snap center. Then I want a bottom line indicator to indicate selected item when click on it. It looks like this:
I had a look at this library but it doesn't fit my requirements.
Is there idea to implement this one?
Update: I need to keep the indicator is always visible and has a smooth scroll when moving to another position like above gift
You can try the following code:
DateTabIndicator.java
public class DateTabIndicator extends FrameLayout implements View.OnClickListener {
private List<Integer> days = new ArrayList<>();
private int selectedPageIndex = 0;
private int selectedDayIndex = 0;
private static final int[] DAY_TV_RES_ID = {R.id.day_mon, R.id.day_tue, R.id.day_wed, R.id.day_thu, R.id.day_fri, R.id.day_sat,
R.id.day_sun};
public DateTabIndicator(#NonNull Context context) {
super(context);
init();
}
public DateTabIndicator(#NonNull Context context, #Nullable AttributeSet attrs) {
super(context, attrs);
init();
}
public DateTabIndicator(#NonNull Context context, #Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init();
}
private TextView monFixedIndicator;
private TextView tueFixedIndicator;
private TextView wedFixedIndicator;
private TextView thuFixedIndicator;
private TextView friFixedIndicator;
private TextView satFixedIndicator;
private TextView sunFixedIndicator;
private View lineIndicator;
private ViewPager daysPager;
private DaysPagerAdapter daysPagerAdapter;
private Handler mHandler = new Handler();
private void init() {
addView(LayoutInflater.from(getContext()).inflate(R.layout.date_tab_indicator, this, false));
monFixedIndicator = findViewById(R.id.mon_fixed_indicator);
tueFixedIndicator = findViewById(R.id.tue_fixed_indicator);
wedFixedIndicator = findViewById(R.id.wed_fixed_indicator);
thuFixedIndicator = findViewById(R.id.thu_fixed_indicator);
friFixedIndicator = findViewById(R.id.fri_fixed_indicator);
satFixedIndicator = findViewById(R.id.sat_fixed_indicator);
sunFixedIndicator = findViewById(R.id.sun_fixed_indicator);
lineIndicator = findViewById(R.id.line_indicator);
daysPager = findViewById(R.id.days_pager);
daysPagerAdapter = new DaysPagerAdapter();
daysPager.setAdapter(daysPagerAdapter);
daysPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
#Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
#Override
public void onPageSelected(int position) {
selectedPageIndex = position;
mHandler.removeCallbacks(selectDayRunnable);
mHandler.postDelayed(selectDayRunnable,500);
}
#Override
public void onPageScrollStateChanged(int state) {
}
});
mHandler.postDelayed(selectDayRunnable,500);
}
class DaysPagerAdapter extends PagerAdapter {
#Override
public int getCount() {
return (int) Math.ceil(days.size() / 7f);
}
#NonNull
#Override
public Object instantiateItem(#NonNull ViewGroup container, final int position) {
final View view = LayoutInflater.from(getContext()).inflate(R.layout.days_pager_item, container, false);
TextView dayMonTv = view.findViewById(R.id.day_mon);
TextView dayTueTv = view.findViewById(R.id.day_tue);
TextView dayWedTv = view.findViewById(R.id.day_wed);
TextView dayThuTv = view.findViewById(R.id.day_thu);
TextView dayFriTv = view.findViewById(R.id.day_fri);
TextView daySatTv = view.findViewById(R.id.day_sat);
TextView daySunTv = view.findViewById(R.id.day_sun);
//Setting Day Text
int index = position * 7;
dayMonTv.setText(days.size() > index ? String.valueOf(days.get(index)) : "");
dayTueTv.setText(days.size() > (++index) ? String.valueOf(days.get(index)) : "");
dayWedTv.setText(days.size() > (++index) ? String.valueOf(days.get(index)) : "");
dayThuTv.setText(days.size() > (++index) ? String.valueOf(days.get(index)) : "");
dayFriTv.setText(days.size() > (++index) ? String.valueOf(days.get(index)) : "");
daySatTv.setText(days.size() > (++index) ? String.valueOf(days.get(index)) : "");
daySunTv.setText(days.size() > (++index) ? String.valueOf(days.get(index)) : "");
//Setting Day VISIBILITY
index = position * 7;
dayMonTv.setVisibility(days.size() > index && days.get(index) != 0 ? VISIBLE : INVISIBLE);
dayTueTv.setVisibility(days.size() > ++index && days.get(index) != 0 ? VISIBLE : INVISIBLE);
dayWedTv.setVisibility(days.size() > ++index && days.get(index) != 0 ? VISIBLE : INVISIBLE);
dayThuTv.setVisibility(days.size() > ++index && days.get(index) != 0 ? VISIBLE : INVISIBLE);
dayFriTv.setVisibility(days.size() > ++index && days.get(index) != 0 ? VISIBLE : INVISIBLE);
daySatTv.setVisibility(days.size() > ++index && days.get(index) != 0 ? VISIBLE : INVISIBLE);
daySunTv.setVisibility(days.size() > ++index && days.get(index) != 0 ? VISIBLE : INVISIBLE);
//Setting Selection
dayMonTv.setSelected(false);
dayTueTv.setSelected(false);
dayWedTv.setSelected(false);
dayThuTv.setSelected(false);
dayFriTv.setSelected(false);
daySatTv.setSelected(false);
daySunTv.setSelected(false);
//Setting Click Listener
dayMonTv.setOnClickListener(DateTabIndicator.this);
dayTueTv.setOnClickListener(DateTabIndicator.this);
dayWedTv.setOnClickListener(DateTabIndicator.this);
dayThuTv.setOnClickListener(DateTabIndicator.this);
dayFriTv.setOnClickListener(DateTabIndicator.this);
daySatTv.setOnClickListener(DateTabIndicator.this);
daySunTv.setOnClickListener(DateTabIndicator.this);
view.setTag(position);
container.addView(view);
return view;
}
#Override
public void destroyItem(#NonNull ViewGroup container, int position, #NonNull Object object) {
container.removeView((View) object);
}
#Override
public boolean isViewFromObject(#NonNull View view, #NonNull Object object) {
return view == object;
}
}
public List<Integer> getDays() {
return days;
}
public void setDays(List<Integer> days) {
this.days = days;
daysPagerAdapter.notifyDataSetChanged();
}
private View prevDayTv = null;
#Override
public void onClick(View v) {
switch (v.getId()) {
case R.id.day_mon:
selectDay(v, 0);
break;
case R.id.day_tue:
selectDay(v, 1);
break;
case R.id.day_wed:
selectDay(v, 2);
break;
case R.id.day_thu:
selectDay(v, 3);
break;
case R.id.day_fri:
selectDay(v, 4);
break;
case R.id.day_sat:
selectDay(v, 5);
break;
case R.id.day_sun:
selectDay(v, 6);
break;
}
}
/**
* #param dayIndex 0-6
*/
private void selectDay(View v, int dayIndex) {
selectedDayIndex = dayIndex;
int dayListIndex = selectedPageIndex * 7 + dayIndex;
if (prevDayTv != null) prevDayTv.setSelected(false);
v.setSelected(true);
prevDayTv = v;
int[] location = new int[2];
v.getLocationOnScreen(location);
int center_point = location[0]%getWidth() + v.getWidth() / 2;
lineIndicator.animate().x(center_point - lineIndicator.getWidth() / 2);
if (days.size() > dayListIndex && days.get(dayListIndex)!=0) {
//listener
} else {
for (int i = 0; i < 7; i++) {
dayListIndex = selectedPageIndex * 7 + i;
if (days.get(dayListIndex)==1 || days.size()-1 == dayListIndex) {
setSelectedDay(i);
break;
}
}
}
}
/**
* #param dayIndex 0-6
*/
public void setSelectedDay(int dayIndex) {
if (dayIndex >= 0 && dayIndex < 7) {
selectedDayIndex = dayIndex;
View view = daysPager.findViewWithTag(selectedPageIndex);
selectDay(view.findViewById(DAY_TV_RES_ID[dayIndex]),dayIndex);
}
}
private Runnable selectDayRunnable = new Runnable() {
#Override
public void run() {
setSelectedDay(selectedDayIndex);
}
};
}
date_tab_indicator.xml
<?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"
android:orientation="vertical">
<LinearLayout
android:id="#+id/mon_to_sun_lay"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:id="#+id/mon_fixed_indicator"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:textSize="10sp"
android:layout_weight="1"
android:gravity="center"
android:text="M" />
<TextView
android:id="#+id/tue_fixed_indicator"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:textSize="10sp"
android:layout_weight="1"
android:gravity="center"
android:text="T" />
<TextView
android:id="#+id/wed_fixed_indicator"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:textSize="10sp"
android:layout_weight="1"
android:gravity="center"
android:text="W" />
<TextView
android:id="#+id/thu_fixed_indicator"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="10sp"
android:layout_weight="1"
android:gravity="center"
android:text="T" />
<TextView
android:id="#+id/fri_fixed_indicator"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:textSize="10sp"
android:layout_weight="1"
android:gravity="center"
android:text="F" />
<TextView
android:id="#+id/sat_fixed_indicator"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:textSize="10sp"
android:layout_weight="1"
android:gravity="center"
android:text="S" />
<TextView
android:id="#+id/sun_fixed_indicator"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:textSize="10sp"
android:layout_weight="1"
android:gravity="center"
android:text="S" />
</LinearLayout>
<android.support.v4.view.ViewPager
android:id="#+id/days_pager"
android:layout_width="match_parent"
android:layout_height="50dp" />
<View
android:id="#+id/line_indicator"
android:layout_width="15dp"
android:layout_height="3dp"
android:padding="5dp"
android:background="#000000"
/>
</LinearLayout>
days_pager_item.xml
<?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">
<FrameLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1">
<TextView
android:id="#+id/day_mon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/day_circle_bg"
android:gravity="center"
android:layout_gravity="center"
android:textColor="#color/day_color_selector" />
</FrameLayout>
<FrameLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1">
<TextView
android:id="#+id/day_tue"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/day_circle_bg"
android:gravity="center"
android:layout_gravity="center"
android:textColor="#color/day_color_selector" />
</FrameLayout>
<FrameLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1">
<TextView
android:id="#+id/day_wed"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/day_circle_bg"
android:gravity="center"
android:layout_gravity="center"
android:textColor="#color/day_color_selector" />
</FrameLayout>
<FrameLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1">
<TextView
android:id="#+id/day_thu"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/day_circle_bg"
android:gravity="center"
android:layout_gravity="center"
android:textColor="#color/day_color_selector" />
</FrameLayout>
<FrameLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1">
<TextView
android:id="#+id/day_fri"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/day_circle_bg"
android:gravity="center"
android:layout_gravity="center"
android:textColor="#color/day_color_selector" />
</FrameLayout>
<FrameLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1">
<TextView
android:id="#+id/day_sat"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/day_circle_bg"
android:gravity="center"
android:layout_gravity="center"
android:textColor="#color/day_color_selector" />
</FrameLayout>
<FrameLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1">
<TextView
android:id="#+id/day_sun"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/day_circle_bg"
android:gravity="center"
android:layout_gravity="center"
android:textColor="#color/day_color_selector" />
</FrameLayout>
</LinearLayout>
days_color_selector.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_selected="true" android:color="#000000"></item>
<item android:state_selected="false" android:color="#bdbebd"></item>
</selector>
days_circle_bg.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<size
android:width="40dp"
android:height="40dp" />
<stroke android:width="1dp"
android:color="#bdbebd"
/>
</shape>
MainActivity.java
public class MainActivity extends AppCompatActivity {
private DateTabIndicator dateTabIndicator;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
dateTabIndicator = findViewById(R.id.date_tab_indicator);
dateTabIndicator.setDays(Arrays.asList(new Integer[]{0,0,0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31}));
}
}
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:android="http://schemas.android.com/apk/res/android">
<com.karacken.datetabindicator.DateTabIndicator
android:id="#+id/date_tab_indicator"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
/>
</RelativeLayout>
Output:
How to build a Horizontal ListView with RecyclerView?
check the answer of "Suragch" and plus addition to that answer
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="10dp">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="match_parent">
//use your entire xml code here plus place a image view as
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below = "id of the date circle"
android:background = "add a line of length according to your requirement in drawables and assign here"
android:visibility="set to invisible"/>
/RelativeLayout>
then inside of onClick() method inside ViewHolder class set the visibilty of the ImageView to visible by Calling imageView.setVisibility(View.VISIBLE) and callnotifyDataSetChanged()
Hope it is helping...
You can change indicator position by trigger the RecycleView item selected change. For item selected change, you can use a variable to keep the selected position in adapter. When user fling the RecycleView, use have calculate selected position based on position of indicator.
How to create ListView like this,
google has documentation about this,
https://material.io/guidelines/layout/metrics-keylines.html#metrics-keylines-keylines-spacing
But there is no explaination how to make this,
Here is my attempt so far, I'm not sure about the margin/padding and the separator, is there any tutorial how to make this layout
This is the RecyclerView item layout:
<?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:id="#+id/parent_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:clickable="true"
android:focusable="true"
android:foreground="?attr/selectableItemBackground"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:transitionName="parent_view"
tools:ignore="UnusedAttribute">
<ImageView
android:id="#+id/image_layanan"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_marginTop="16dp"
android:transitionName="image_layanan"/>
<TextView
android:id="#+id/text_layanan"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="16dp"
android:layout_marginStart="16dp"
android:layout_marginTop="10dp"
android:layout_toEndOf="#id/image_layanan"
android:layout_toRightOf="#+id/image_layanan"
android:textAppearance="?attr/textAppearanceListItem"
android:textSize="16sp"
android:transitionName="text_layanan"
tools:text="string/item_title"/>
<TextView
android:id="#+id/text_dokter"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/text_layanan"
android:layout_marginLeft="16dp"
android:layout_marginStart="16dp"
android:layout_toEndOf="#+id/image_layanan"
android:layout_toRightOf="#+id/image_layanan"
android:ellipsize="end"
android:maxLines="1"
android:textAppearance="?attr/textAppearanceListItem"
android:textColor="#212121"
android:textSize="14sp"
android:transitionName="text_dokter"
tools:text="string/item_desc"/>
<TextView
android:id="#+id/text_jam"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/text_dokter"
android:layout_marginLeft="16dp"
android:layout_marginStart="16dp"
android:layout_toEndOf="#id/image_layanan"
android:layout_toRightOf="#id/image_layanan"
android:textSize="13sp"
android:transitionName="text_jam"/>
<TextView
android:id="#+id/text_pasien"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/text_jam"
android:layout_marginBottom="14dp"
android:layout_marginLeft="16dp"
android:layout_marginStart="16dp"
android:layout_toEndOf="#id/image_layanan"
android:layout_toRightOf="#id/image_layanan"
android:textSize="13sp"
android:transitionName="text_pasien"/>
<View
android:layout_width="match_parent"
android:layout_height="1px"
android:layout_alignLeft="#+id/text_pasien"
android:layout_alignStart="#+id/text_pasien"
android:layout_below="#+id/text_pasien"
android:background="#212121"/>
</RelativeLayout>
To get partial divider (or whatever the name) I use this:
create a class extend RecyclerView.ItemDecoration
public class RecyclerViewItemDivider extends RecyclerView.ItemDecoration {
private static final int[] ATTRS = new int[]{android.R.attr.listDivider};
private Drawable mDivider;
public RecyclerViewItemDivider(Context context) {
final TypedArray a = context.obtainStyledAttributes(ATTRS);
mDivider = a.getDrawable(0);
a.recycle();
}
#Override
public void onDrawOver(Canvas c, RecyclerView parent, RecyclerView.State state) {
// this is the left start point for divider,
// I think there is better method without hardcoded the view
// main_content is my RectclerView item main content
// R.dimen.activity_horizontal_margin should be 16dp if use google guidelines
int left = (int)parent.findViewById(R.id.main_content).getX() +
(int)parent.getContext().getResources().getDimension(R.dimen.activity_horizontal_margin);
int right = parent.getWidth() - parent.getPaddingRight();
int childCount = parent.getChildCount();
for (int i = 0; i < childCount; i++) {
View child = parent.getChildAt(i);
RecyclerView.LayoutParams params = (RecyclerView.LayoutParams) child.getLayoutParams();
int top = child.getBottom() + params.bottomMargin;
int bottom = top + mDivider.getIntrinsicHeight();
mDivider.setBounds(left, top, right, bottom);
mDivider.draw(c);
}
}
}
Then you just need to use it like this:
RecyclerViewItemDivider divider = new RecyclerViewItemDivider(recyclerView.getContext());
recyclerView.addItemDecoration(divider);
I want to display the video thumbnails in listview, I use images instead of thumbnails and add ImageView (image play button) on the front but failed my xml code like this
<?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="wrap_content"
android:orientation="vertical" >
<TextView
android:id="#+id/txttgl"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_margin="5dip"
android:paddingLeft="10dip"
android:gravity="center_horizontal"/>
<TextView
android:id="#+id/tv_batas_unread"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_margin="5dip"
android:paddingLeft="12dip"
android:background="#drawable/counter_shape_birudonker"
android:visibility="gone"
android:gravity="center_horizontal"/>
<LinearLayout android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#+id/ll_chat_item"
android:orientation="horizontal" >
<com.ltvie.chatkrawala.ImageViewRounded
android:id="#+id/img_photo_pp_chatbox"
android:layout_width="50dp"
android:layout_height="50dp"
android:paddingBottom="0dp"
android:paddingLeft="2dp"
android:paddingRight="2dp"
android:adjustViewBounds="true"
android:paddingTop="0dp"
android:layout_marginTop="5dp"
android:layout_marginLeft="3dp"
android:src="#drawable/gada_photo"
android:scaleType="fitXY" />
<LinearLayout
android:id="#+id/wrapper"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="left"
android:orientation="vertical"
android:layout_marginBottom="12dp"
android:layout_weight="1"
android:cacheColorHint="#android:color/transparent"
>
<TextView
android:id="#+id/txtKodeGbr"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="gone"/>
<TextView
android:id="#+id/txtPesan"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="gone"/>
<TextView
android:id="#+id/comment"
android:layout_marginTop="9dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/buble_kiri"
android:text="Bismillahirohmanirrohim"
android:textColor="#000"
android:textSize="15sp" />
<LinearLayout
android:id="#+id/rowFile"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<RelativeLayout
android:layout_height="match_parent"
android:layout_width="wrap_content"
>
<ImageView
android:id="#+id/img_dilvChat"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="3dp"
android:contentDescription="#string/descGambar"
android:background="#drawable/buble_kanan"
android:src="#drawable/gada_photo"
/>
<ImageView
android:id="#+id/img_btn_play"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/descGambar"
android:layout_centerInParent="true"
android:src="#drawable/play_icon"
/>
<ProgressBar
android:id="#+id/chatBox_progress_img"
style="?android:attr/progressBarStyleSmallInverse"
android:visibility="gone"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true" />
</RelativeLayout>
<LinearLayout
android:id="#+id/rowFileDesc"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="gone"
android:layout_gravity="bottom"
android:orientation="vertical">
<TextView
android:id="#+id/txtFileName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="10dip"
android:gravity="left"
android:text="Nama File : test.zip"
android:textSize="12sp" />
<TextView
android:id="#+id/txtFileSize"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="10dip"
android:gravity="left"
android:text="Ukuran : 2324342 bytes"
android:textSize="12sp" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<ImageView
android:id="#+id/img_statusBaca"
android:layout_marginTop="2dip"
android:layout_width="15dip"
android:layout_height="15dip"
android:layout_marginRight="1dip"
android:background="#drawable/indicator_sending"
android:contentDescription="#string/descGambar"
/>
<TextView
android:id="#+id/txtjamchatMasuk"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="10dip"
android:gravity="left"
android:text="setatus baca"
android:textSize="12sp" />
<TextView
android:id="#+id/txtKiriKanan"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="5dip"
android:paddingRight="5dip"
android:text="right"
android:visibility="gone"
/>
</LinearLayout>
</LinearLayout>
<ImageView
android:id="#+id/imgselected"
android:layout_width="20dp"
android:layout_height="20dp"
android:contentDescription="#string/kosongan"
android:src="#drawable/ico_member" />
</LinearLayout>
</LinearLayout>
my java code
public class ChatboxArrayAdapter extends ArrayAdapter<OneComment> implements SectionIndexer{
private TextView countryName;
private LinearLayout wrapper,rowFileDesc,ll_chat_item;
private TextView TanggalMasuk,txtKodeGbr,txtPesan,txtJam,txtKiriKanan,txtUkuranFile;
private ImageView img_upload,img_statusbaca,imgPp_round;
ImageView imgPhoto,imgCheck,imgBtnPlay;
String namafileGambar,strPath,varStsBaca,tampilTgl;
public CacheImageLoader imageLoader;
Context ctx;
Options opts = new BitmapFactory.Options();
String TAG="chatboxArrayAdapter";
File dir = new File(Environment.getExternalStorageDirectory()+"");
File dirImage=new File(dir+"/a");
File dirVideo=new File(dir+"/a");
List<OneComment> countries;
#Override
public void add(OneComment object) {
countries.add(object);
super.add(object);
}
public void hapus_semua(){
countries.clear();
}
public void hapus_item(int nomerx){
countries.remove(nomerx);
notifyDataSetChanged();
}
public void refresh_lv(){
notifyDataSetChanged();
Log.d("notify", "datachange");
}
public ChatboxArrayAdapter(Context context, int textViewResourceId, List<OneComment> datanya) {
super(context, textViewResourceId);
this.countries=datanya;
this.ctx=context;
imageLoader=new CacheImageLoader(context.getApplicationContext());
}
public int getCount() {
return this.countries.size();
}
#Override
public OneComment getItem(int index) {
return this.countries.get(index);
}
public View getView(final int position, View convertView, ViewGroup parent) {
View row = convertView;
try{
if (row == null) {
LayoutInflater inflater = (LayoutInflater) this.getContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE);
row = inflater.inflate(R.layout.chatbox_detail, parent, false);
}
OneComment isiOneComen = getItem(position);
wrapper = (LinearLayout) row.findViewById(R.id.wrapper);
rowFileDesc=(LinearLayout) row.findViewById(R.id.rowFileDesc);
ll_chat_item=(LinearLayout) row.findViewById(R.id.ll_chat_item);
imgPhoto = (ImageView) row.findViewById(R.id.img_dilvChat);
countryName = (TextView) row.findViewById(R.id.comment);
txtKiriKanan = (TextView) row.findViewById(R.id.txtKiriKanan); //isi dari coment untuk menentukan letak buble di kiri ato dikanan,hanya untuk buble file untuk menentukan filenya masih di server apa sudah di downloa
TanggalMasuk= (TextView) row.findViewById(R.id.txttgl);
img_upload=(ImageView) row.findViewById(R.id.img_dilvChat);
txtKodeGbr = (TextView) row.findViewById(R.id.txtKodeGbr);
txtPesan=(TextView) row.findViewById(R.id.txtPesan);
txtJam=(TextView) row.findViewById(R.id.txtjamchatMasuk);
txtUkuranFile=(TextView) row.findViewById(R.id.txtFileSize);
imgCheck=(ImageView) row.findViewById(R.id.imgselected);
img_statusbaca=(ImageView) row.findViewById(R.id.img_statusBaca);
imgPp_round=(ImageView) row.findViewById(R.id.img_photo_pp_chatbox);
imgBtnPlay=(ImageView) row.findViewById(R.id.img_btn_play);
txtPesan.setVisibility(View.GONE);
txtKodeGbr.setVisibility(View.GONE);
img_upload.setVisibility(View.GONE);
rowFileDesc.setVisibility(View.GONE);
if(isiOneComen.comment.trim().equalsIgnoreCase("video")){
//error goes here
countryName.setVisibility(View.GONE);
Log.d("fileDesc", isiOneComen.Filedesc);
//strPath = namafileGambar;
strPath = moduleGlobal.dirImageSent+"/"+isiOneComen.Filedesc;
imgPhoto.setImageBitmap(changeSize(strPath));
scaleImage(imgPhoto, ((int) isiOneComen.lebarScreen)-((int) isiOneComen.lebarScreen/4));
imgBtnPlay.setVisibility(View.VISIBLE);
}else{ //run work well
countryName.setVisibility(View.VISIBLE);
try{
countryName.setText(getSmiledText(getContext(),isiOneComen.comment.toString()));
}catch (Exception e) {
// TODO: handle exception
Log.e("addsmiley", e.toString());
}
countryName.setBackgroundResource(isiOneComen.left ? R.drawable.buble_kiri : R.drawable.buble_kanan);
}
}catch (Exception ez) {
ll_chat_item.setVisibility(View.GONE);
Log.e(TAG, ez.toString());
}
return row;
}
private Bitmap changeSize(String path){
opts.inSampleSize = 1;
Bitmap bm = BitmapFactory.decodeFile(path);
if (bm.getHeight() > 150 || bm.getWidth() > 150) {
final int halfHeight = bm.getHeight() / 2;
final int halfWidth = bm.getWidth() / 2;
// Calculate the largest inSampleSize value that is a power of 2 and keeps both
// height and width larger than the requested height and width.
while ((halfHeight / opts.inSampleSize) > 150
&& (halfWidth / opts.inSampleSize) > 150) {
opts.inSampleSize *= 2;
}
}
bm = BitmapFactory.decodeFile(path,opts); // this bitmap will be 1/8 the size of the original
return bm;
}
private void scaleImage(ImageView view, int boundBoxInDp)
{
// Get the ImageView and its bitmap
Drawable drawing = view.getDrawable();
Bitmap bitmap = ((BitmapDrawable)drawing).getBitmap();
// Get current dimensions
int width = bitmap.getWidth();
int height = bitmap.getHeight();
// Determine how much to scale: the dimension requiring less scaling is
// closer to the its side. This way the image always stays inside your
// bounding box AND either x/y axis touches it.
float xScale = ((float) boundBoxInDp) / width;
float yScale = ((float) boundBoxInDp) / height;
float scale = (xScale <= yScale) ? xScale : yScale;
// Create a matrix for the scaling and add the scaling data
Matrix matrix = new Matrix();
matrix.postScale(scale, scale);
// Create a new bitmap and convert it to a format understood by the ImageView
Bitmap scaledBitmap = Bitmap.createBitmap(bitmap, 0, 0, width, height, matrix, true);
#SuppressWarnings("deprecation")
BitmapDrawable result = new BitmapDrawable(scaledBitmap);
width = scaledBitmap.getWidth();
height = scaledBitmap.getHeight();
// Apply the scaled bitmap
view.setImageDrawable(result);
// Now change ImageView's dimensions to match the scaled image
LinearLayout.LayoutParams params = (LinearLayout.LayoutParams) view.getLayoutParams();
params.width = width;
params.height = height;
view.setLayoutParams(params);
}
public Bitmap decodeToBitmap(byte[] decodedByte) {
return BitmapFactory.decodeByteArray(decodedByte, 0, decodedByte.length);
}
/**tambah smiley
*
*/
private static final HashMap<String, Integer> emoticons = new HashMap<String, Integer>();
static {
emoticons.put(":)", R.drawable.s1);
emoticons.put(":D", R.drawable.s2);
emoticons.put(":(", R.drawable.s3);
emoticons.put("8o|", R.drawable.s16);
emoticons.put(":/", R.drawable.s17);
}
// Get image for each text smiles
public static Spannable getSmiledText(Context context, String text) {
SpannableStringBuilder builder = new SpannableStringBuilder(text);
int index;
for (index = 0; index < builder.length(); index++) {
for (Entry<String, Integer> entry : emoticons.entrySet()) {
int length = entry.getKey().length();
if (index + length > builder.length())
continue;
if (builder.subSequence(index, index + length).toString().equals(entry.getKey())) {
builder.setSpan(new ImageSpan(context, entry.getValue()), index, index + length,
Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
index += length - 1;
break;
}
}
}
return builder;
}
#Override
public int getPositionForSection(int arg0) {
// TODO Auto-generated method stub
return 0;
}
#Override
public int getSectionForPosition(int arg0) {
// TODO Auto-generated method stub
return 0;
}
#Override
public Object[] getSections() {
// TODO Auto-generated method stub
return null;
}
}
everything work well before i add relative layout,I want to add image view center with other imageview but I get error log
java.lang.ClassCastException: android.widget.RelativeLayout$LayoutParams
Problem with
LinearLayout.LayoutParams params = (LinearLayout.LayoutParams) view.getLayoutParams();
This line Change this line to
RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams) view.getLayoutParams();
Because you forgot to Add
</LinearLayout>
</LinearLayout>
at the end of your xml.
Use this
<?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="wrap_content"
android:orientation="vertical" >
<TextView
android:id="#+id/tv1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_margin="5dip"
android:gravity="center_horizontal"
android:paddingLeft="10dip" />
<LinearLayout
android:id="#+id/ll_chat_item"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<TextView
android:id="#+id/tv2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="gone" />
<LinearLayout
android:id="#+id/wrapper"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginBottom="12dp"
android:layout_weight="1"
android:cacheColorHint="#android:color/transparent"
android:gravity="left"
android:orientation="vertical" >
<TextView
android:id="#+id/tv3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="gone" />
<LinearLayout
android:id="#+id/rowFile"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<ImageView
android:id="#+id/img_dilvChat"
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_margin="3dp"
android:background="#drawable/buble_kanan"
android:contentDescription="#string/descGambar" />
<ImageView
android:id="#+id/img_btn_play"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:contentDescription="#string/descGambar"
android:src="#drawable/play_icon" />
</RelativeLayout>
<TextView
android:id="#+id/tv4"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_margin="5dip"
android:gravity="center_horizontal"
android:paddingLeft="10dip" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
</LinearLayout>
I need to implement a view that looks like this
The hard part is that the sizes and the font sizes of the textviews need to be adaptable to the width and height of the parent view. Here is what I have tried and the result is
The xml file:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:layout_width="200dp"
tools:layout_height="100dp"
android:orientation="vertical">
<BuySellView
android:id="#+id/tradeNow_layoutSell"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:background="#color/gray_light_light">
<LinearLayout
android:id="#+id/smallPart1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="top|right"
android:orientation="horizontal">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="center_vertical">
<ImageView
android:id="#+id/greenArrowSellImg"
android:layout_width="10dp"
android:layout_height="10dp"
android:src="#drawable/green_arrow"
android:visibility="invisible"
tools:visibility="visible" />
<ImageView
android:id="#+id/redArrowSellImg"
android:layout_width="10dp"
android:layout_height="10dp"
android:src="#drawable/red_arrow"
android:visibility="invisible"
tools:visibility="visible" />
</RelativeLayout>
<TextView
android:id="#+id/smallPart1Txt"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="top|right"
android:layout_gravity="center_vertical"
android:maxLines="1"
android:text="#string/misc_blank"
android:textColor="#android:color/black"
tools:text="10,015." />
</LinearLayout>
<TextView
android:id="#+id/largePart"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:maxLines="1"
android:text="#string/misc_blank"
android:textColor="#android:color/black"
tools:text="46"
android:gravity="center"
tools:textColor="#color/red_sell" />
<TextView
android:id="#+id/smallPart2"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:maxLines="1"
android:text="#string/misc_blank"
android:textColor="#android:color/black"
android:gravity="left|center_vertical"
tools:text="8"
tools:textColor="#color/red_sell" />
<TextView
android:id="#+id/trdLbl"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:background="#drawable/rounded_corner_sell"
android:text="#string/CommonCapitalSell"
android:textColor="#color/white" />
</BuySellView>
</LinearLayout>
The custom view:
public class BuySellView extends ViewGroup {
private final Rect mTmpChildRect = new Rect();
public BuySellView(Context context) {
super(context);
}
public BuySellView(Context context, AttributeSet attrs) {
super(context, attrs);
}
public BuySellView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
}
#Override
protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
int width = getMeasuredWidth();
int height = getMeasuredHeight();
int t = 10;
int b = 10 + height / 3 * 2;
LinearLayout smallPart1 = (LinearLayout) findViewById(R.id.smallPart1);
smallPart1.layout(0, height / 3, width / 2, b);
smallPart1.setGravity(Gravity.RIGHT);
TextView smallPart1Txt = (TextView) smallPart1.findViewById(R.id.smallPart1Txt);
smallPart1Txt.setTextSize(height / 4 / 2);
TextView largePart = (TextView) findViewById(R.id.largePart);
largePart.setTextSize(height / 3);
largePart.layout(width / 2, 10, b - t + width / 2, b);
TextView smallPart2 = (TextView) findViewById(R.id.smallPart2);
smallPart2.layout(b - t + width / 2, t, width, height / 2);
smallPart2.setTextSize(height / 4 / 2);
TextView tradeLbl = (TextView) findViewById(R.id.trdLbl);
tradeLbl.layout(width / 2 - width / 3 / 2, height / 4 * 3 + 10, width / 2 + width / 3 / 2, height / 4 * 4 + 10);
tradeLbl.setGravity(Gravity.CENTER);
}
#Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
LinearLayout smallPart1 = (LinearLayout) findViewById(R.id.smallPart1);
TextView largePart = (TextView) findViewById(R.id.largePart);
TextView smallPart2 = (TextView) findViewById(R.id.smallPart2);
TextView tradeLbl = (TextView) findViewById(R.id.trdLbl);
smallPart1.measure(Math.max(smallPart1.getMeasuredWidth(), widthMeasureSpec / 8 * 3), heightMeasureSpec / 4);
largePart.measure(heightMeasureSpec / 4 * 2, heightMeasureSpec / 4 * 2);
smallPart2.measure(Math.max(smallPart2.getMeasuredWidth(), widthMeasureSpec / 8), smallPart2.getMeasuredHeight());
tradeLbl.measure(widthMeasureSpec / 3, heightMeasureSpec / 4);
setMeasuredDimension(widthMeasureSpec, heightMeasureSpec);
}
#Override
public boolean shouldDelayChildPressedState() {
return false;
}
}
try this XML:
<RelativeLayout
android:layout_gravity="center"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:id="#+id/small"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="0.87"
android:textSize="25sp"
android:layout_alignBottom="#+id/large"
android:paddingBottom="8dp"
android:fontFamily="sans-serif-light"
/>
<TextView
android:id="#+id/large"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/small"
android:text="46"
android:textSize="58sp"
android:textColor="#00DC00"
android:fontFamily="sans-serif-light"
/>
<TextView
android:id="#+id/up"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="9"
android:textSize="24sp"
android:layout_alignTop="#+id/large"
android:layout_toRightOf="#+id/large"
android:textColor="#00DC00"
android:fontFamily="sans-serif-light"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="30dp"
android:background="#FF4848"
android:layout_below="#+id/large"
android:layout_alignRight="#+id/large"
android:text="Sell USD"
android:padding="5dp"
android:textColor="#fff"
android:textSize="12sp"
/>
</RelativeLayout>
You can change the textSize based on number of character or width of text via java code.
I'm trying to implement a SlidingDrawer that will occupy the full screen width, but whose height is determined dynamically by its contents: in other words, standard fill_parent layout behaviour for the width and wrap_content for the height. That's exactly how I've specified it in the layout XML (see below) but the sliding drawer always opens to the full screen height. The height of my content varies, but typically it's only about half the screen height, so I end up with a big gap underneath it. What I'd like is for the content to sit neatly on the bottom of the screen.
I've tried everything I can think of to fix it but nothing's worked so far. If I set the SlidingDrawer's layout_height to a specific value (e.g. 160dip) it works, but that's not what I need: it has to be dynamic. Of course I've made sure all the child elements have their height set to wrap_content too.
The documentation on SlidingDrawer is a bit vague on this and I haven't been able to find any examples that do what I'm after either. If anyone can see where I'm going wrong I'd really appreciate your help!
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<ViewFlipper
android:id="#+id/ImageFlipper"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<ImageView
android:id="#+id/imageView0"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:scaleType="centerCrop" />
<ImageView
android:id="#+id/imageView1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:scaleType="centerCrop" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:scaleType="centerCrop" />
</ViewFlipper>
<SlidingDrawer
android:id="#+id/infoDrawer"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:handle="#+id/infoDrawerHandle"
android:content="#+id/infoDrawerContent"
android:allowSingleTap="false"
android:layout_alignParentBottom="true"
android:orientation="vertical" >
<!-- Sliding drawer handle -->
<ImageView
android:id="#id/infoDrawerHandle"
android:src="#drawable/info_handle_closed"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<!-- Sliding drawer content: a scroller containing a group of text views
laid out in a LinearLayout -->
<ScrollView
android:id="#id/infoDrawerContent"
android:background="#drawable/info_background"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fillViewport="false" >
<LinearLayout
android:id="#id/infoDrawerContent"
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingRight="5dip" >
<TextView
android:id="#+id/infoTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#ffffff"
android:textSize="16dip"
android:textStyle="bold" />
<TextView
android:id="#+id/infoCreator"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#ffffff"
android:textSize="14dip"
android:textStyle="italic"
android:paddingBottom="10dip" />
<TextView
android:id="#+id/infoDescription"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#ffffff"
android:textSize="14dip"
android:paddingBottom="10dip" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#ffcc00"
android:textSize="14dip"
android:textStyle="bold"
android:text="#string/heading_pro_tip" />
<TextView
android:id="#+id/infoProTip"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#ffcc00"
android:textSize="14dip" />
</LinearLayout>
</ScrollView>
</SlidingDrawer>
</RelativeLayout>
The onMeasure() method of the SlidingDrawer class basically overrides the layout modes to fill_parent, this is why layout_height="wrap_content" is not working.
To get around this, you can extend SlidingDrawer with a re-implemented onMeasure() method that honors the layout_width and layout_height attributes. You can then use this custom class in your XML layout by replacing <SlidingDrawer ...> with <fully.qualified.package.ClassName ...>.
Note that since the drawer will no longer be filling the parent layout, you will have to enclose it in a LinearLayout with the gravity attribute set to the edge where the drawer should be.
Below are a class I have created for this purpose and an example layout.
WrappingSlidingDrawer class :
import android.content.Context;
import android.util.AttributeSet;
import android.view.View;
import android.widget.SlidingDrawer;
public class WrappingSlidingDrawer extends SlidingDrawer {
public WrappingSlidingDrawer(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
int orientation = attrs.getAttributeIntValue("android", "orientation", ORIENTATION_VERTICAL);
mTopOffset = attrs.getAttributeIntValue("android", "topOffset", 0);
mVertical = (orientation == SlidingDrawer.ORIENTATION_VERTICAL);
}
public WrappingSlidingDrawer(Context context, AttributeSet attrs) {
super(context, attrs);
int orientation = attrs.getAttributeIntValue("android", "orientation", ORIENTATION_VERTICAL);
mTopOffset = attrs.getAttributeIntValue("android", "topOffset", 0);
mVertical = (orientation == SlidingDrawer.ORIENTATION_VERTICAL);
}
#Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
int widthSpecMode = MeasureSpec.getMode(widthMeasureSpec);
int widthSpecSize = MeasureSpec.getSize(widthMeasureSpec);
int heightSpecMode = MeasureSpec.getMode(heightMeasureSpec);
int heightSpecSize = MeasureSpec.getSize(heightMeasureSpec);
if (widthSpecMode == MeasureSpec.UNSPECIFIED || heightSpecMode == MeasureSpec.UNSPECIFIED) {
throw new RuntimeException("SlidingDrawer cannot have UNSPECIFIED dimensions");
}
final View handle = getHandle();
final View content = getContent();
measureChild(handle, widthMeasureSpec, heightMeasureSpec);
if (mVertical) {
int height = heightSpecSize - handle.getMeasuredHeight() - mTopOffset;
content.measure(widthMeasureSpec, MeasureSpec.makeMeasureSpec(height, heightSpecMode));
heightSpecSize = handle.getMeasuredHeight() + mTopOffset + content.getMeasuredHeight();
widthSpecSize = content.getMeasuredWidth();
if (handle.getMeasuredWidth() > widthSpecSize) widthSpecSize = handle.getMeasuredWidth();
}
else {
int width = widthSpecSize - handle.getMeasuredWidth() - mTopOffset;
getContent().measure(MeasureSpec.makeMeasureSpec(width, widthSpecMode), heightMeasureSpec);
widthSpecSize = handle.getMeasuredWidth() + mTopOffset + content.getMeasuredWidth();
heightSpecSize = content.getMeasuredHeight();
if (handle.getMeasuredHeight() > heightSpecSize) heightSpecSize = handle.getMeasuredHeight();
}
setMeasuredDimension(widthSpecSize, heightSpecSize);
}
private boolean mVertical;
private int mTopOffset;
}
Example layout (assuming WrappingSlidingDrawer is in package com.package) :
<FrameLayout android:layout_width="fill_parent"
android:layout_height="fill_parent">
... stuff you want to cover at full-size ...
<LinearLayout android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="bottom"
android:orientation="vertical">
<com.package.WrappingSlidingDrawer android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:content="#+id/content"
android:handle="#+id/handle">
... handle and content views ...
</com.package.WrappingSlidingDrawer>
</LinearLayout>
</FrameLayout>
just set to pmargin in sliding drawer in your xml
android:layout_marginTop="50dip"
seydhe's answer has a small issue.
The first argument to the getAttributeIntValue needs to be the full namespace, not just "android". So the code snippet should be:
final String xmlns="http://schemas.android.com/apk/res/android";
int orientation = attrs.getAttributeIntValue(xmlns, "orientation", SlidingDrawer.ORIENTATION_VERTICAL);
mTopOffset = attrs.getAttributeIntValue(xmlns, "topOffset", 0);
I was having trouble getting this to work with a horizontal sliding drawer until I realized that it was not finding the orientation attribute and was therefore treating it as vertical.
it is better to read the parameter without hardcoding the string:
int attrOrientation = android.R.attr.orientation;
int attrTopOffset = android.R.attr.topOffset;
int[] attrIds = new int [] {attrOrientation, attrTopOffset};
TypedArray a = context.obtainStyledAttributes(attrs, attrIds);
int orientation = a.getInt(0, SlidingDrawer.ORIENTATION_VERTICAL);
topOffset = a.getDimension(1, 0);
a.recycle();
isVertical = (orientation == SlidingDrawer.ORIENTATION_VERTICAL);
Another issus is in the onMeasure.
I used the following code:
if (isVertical) {
int height = heightSpecSize - handle.getMeasuredHeight() - topOffset;
getContent().measure(MeasureSpec.makeMeasureSpec(widthSpecSize, MeasureSpec.UNSPECIFIED), MeasureSpec.makeMeasureSpec(height, MeasureSpec.EXACTLY));
heightSpecSize = handle.getMeasuredHeight() + topOffset + content.getMeasuredHeight();
widthSpecSize = content.getMeasuredWidth();
if (handle.getMeasuredWidth() > widthSpecSize) widthSpecSize = handle.getMeasuredWidth();
} else {
int width = widthSpecSize - handle.getMeasuredWidth() - topOffset;
getContent().measure(MeasureSpec.makeMeasureSpec(width, MeasureSpec.EXACTLY), MeasureSpec.makeMeasureSpec(heightSpecSize, MeasureSpec.UNSPECIFIED));
widthSpecSize = handle.getMeasuredWidth() + topOffset + content.getMeasuredWidth();
heightSpecSize = content.getMeasuredHeight();
if (handle.getMeasuredHeight() > heightSpecSize) heightSpecSize = handle.getMeasuredHeight();
}
unfortunately you can't set the height, but rather the opposite of that. the topOffset attribute will determine how tall to make the sliding drawer, but its what to shave off rather than how tall it will be.
It works for me:
private SlidingDrawer rightSlidingPanel = null;
#Override
public void onCreate( Bundle savedInstanceState )
{
...
rightSlidingPanel = (SlidingDrawer) findViewById( R.id.rightSlidingPanel );
rightSlidingPanel.post( new Runnable()
{
#Override
public void run()
{
rightSlidingPanel.getLayoutParams().width = findViewById( R.id.sliding_content2 ).getMeasuredWidth() + findViewById( R.id.sliding_handle ).getMeasuredWidth();
}
});
}
XML Layout:
...
<SlidingDrawer
android:id="#+id/rightSlidingPanel"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:allowSingleTap="true"
android:animateOnClick="true"
android:content="#+id/sliding_content"
android:handle="#+id/sliding_handle"
android:orientation="horizontal" >
<Button
android:id="#+id/sliding_handle"
style="#style/toolbar_button"
android:layout_width="30dp"
android:layout_height="wrap_content"
android:height="40dp"
android:text="<"
android:width="25dp" />
<LinearLayout
android:id="#+id/sliding_content"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="top"
android:orientation="vertical" >
<LinearLayout
android:id="#+id/sliding_content2"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="center_vertical"
android:layout_weight="1"
android:gravity="center_horizontal" >
...
</LinearLayout>
</LinearLayout>
</SlidingDrawer>
...