I am new in Android and somewhere didnt understand how it works. I has this XML code
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/mainWindow"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TableLayout
android:id="#+id/katalog"
android:layout_width="388dp"
android:layout_height="179dp"
app:layout_constraintBottom_toTopOf="#+id/button5"
app:layout_constraintStart_toStartOf="parent">
<TableRow
android:id="#+id/row"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView // problem is here
android:id="#+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
tools:srcCompat="#tools:sample/avatars" />
<LinearLayout
android:id="#+id/linear"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:id="#+id/textView11"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Name"
android:textSize="18sp" />
<TextView
android:id="#+id/textView12"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Description"
android:textSize="18sp" />
<TextView
android:id="#+id/textView13"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Stock"
android:textSize="18sp" />
<Button
android:id="#+id/button9"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Button" />
</LinearLayout>
</TableRow>
</TableLayout>
<Button
android:id="#+id/button3"
android:layout_width="135dp"
android:layout_height="51dp"
android:text="Stuff"
app:backgroundTint="#8BC34A"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<Button
android:id="#+id/button5"
android:layout_width="135dp"
android:layout_height="51dp"
android:layout_marginEnd="1dp"
android:layout_marginRight="1dp"
android:text="Person"
app:backgroundTint="#8BC34A"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/button6"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toEndOf="#+id/button3" />
<Button
android:id="#+id/button6"
android:layout_width="135dp"
android:layout_height="51dp"
android:layout_marginStart="1dp"
android:layout_marginLeft="1dp"
android:text="card"
app:backgroundTint="#07464E"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toEndOf="#+id/button5" />
</androidx.constraintlayout.widget.ConstraintLayout>
And i have another one with almost same options. But this one doesn't displayed. Also java class has few action listeners for buttons, and nothing for TableLayuout. But another java class with table layout doesnt have anything with code, like that
public class admpanel extends lk{
private TableLayout table;
#SuppressLint("SetTextI18n")
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.admpanel);
}
}
And thats works.
P.S. another one TableLayout doesnt displayed because im forgot to use "id" for pieces, then i fixed it. But now im idk
EDIT: That code start work if i am delete ImageView. How to use Image View? Pointed problem
The issue with your code is that the code has not specified a proper android:src or app:srcCompat for the imageView which is necessary to inflate the UmageView to some height or it considers the height as 0dp resulting in the ImageView not show up. tools:src is used just to show the image in the XML design tab to have an idea of how much space or how the view will look. The image specified can not be used for showing it in the application. I have updated your code for a better design and also added a proper image for your ImageView(Resource here). Save the image in your drawable folder as a12_logo. Check this code and comment if you have any issues ahead.
Also, if the purpose of this TableLayout is to use it for showing a list of items, switch to RecyclerView for better performance and easy data handling.
Also, your Buttons have fixed height and width which is not ideal as the buttons might get out of the screen for some devices so I have added better code for the buttons.
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/main"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TableLayout
android:id="#+id/katalog"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:stretchColumns="1"
app:layout_constraintBottom_toTopOf="#id/button3">
<TableRow
android:id="#+id/row"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/imageView"
android:layout_width="120dp"
android:layout_height="match_parent"
android:layout_column="0"
android:src="#drawable/a12_logo" />
<LinearLayout
android:id="#+id/linear"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_column="1"
android:orientation="vertical">
<TextView
android:id="#+id/textView11"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Name"
android:textSize="18sp" />
<TextView
android:id="#+id/textView12"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Description"
android:textSize="18sp" />
<TextView
android:id="#+id/textView13"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Stock"
android:textSize="18sp" />
<Button
android:id="#+id/button9"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Button" />
</LinearLayout>
</TableRow>
</TableLayout>
<Button
android:id="#+id/button3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Stuff"
app:backgroundTint="#8BC34A"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/button5"
app:layout_constraintHorizontal_chainStyle="spread"
app:layout_constraintStart_toStartOf="parent" />
<Button
android:id="#+id/button5"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="1dp"
android:text="Person"
app:backgroundTint="#8BC34A"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/button6"
app:layout_constraintStart_toEndOf="#+id/button3" />
<Button
android:id="#+id/button6"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="1dp"
android:text="card"
app:backgroundTint="#07464E"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/button5" />
</androidx.constraintlayout.widget.ConstraintLayout>
Related
Solved
I have a scroll view that has a Constraint Layout layout inside of it. I Have a button that is constraint to the bottom of the table but it seems to change the background below the table to gray. all other widgets that I have added do not have the same problem.
Screenshot of problem
I removed the inner code of the table as its not need
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/imageView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="centerCrop"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/gaapic" />
<androidx.cardview.widget.CardView
android:id="#+id/homecard"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:elevation="5dp"
app:cardBackgroundColor="#color/white"
app:cardCornerRadius="15dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.8"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/imageView3">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="12dp"
android:padding="12dp"
android:text="#string/recent_news"
android:textColor="#color/black"
android:textSize="20sp"
android:textStyle="bold" />
<TextView
android:id="#+id/tvhomePageDate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="9"
android:gravity="center"
android:text="#string/publish_date"
android:textColor="#color/black"
android:textSize="14sp"
android:textStyle="bold" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="12dp"
android:lineSpacingMultiplier="1.5"
android:padding="12dp"
android:text="#string/in_news"
android:textSize="13sp" />
</LinearLayout>
</androidx.cardview.widget.CardView>
<TableLayout
android:id="#+id/tableLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:background="#android:color/white"
android:elevation="90dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/homecard">
<!-- Table Heading -->
<TableRow android:background="#color/teal_200">
</TableLayout>
<TextView
android:id="#+id/tvTimeCheck"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=""
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.092"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tableLayout"
app:layout_constraintVertical_bias="0.589" />
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:text="Live"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tableLayout"/>
</androidx.constraintlayout.widget.ConstraintLayout>
</ScrollView>
Try adding the following to either your ScrollView or ConstraintLayout:
android:background="#android:color/white"
Solved:
I solved my problem by putting the table inside of another Constraint Layout. I don't know if that is best practice but it works for now. Thank you #Shn_Android_Dev
Have you tryed to add .setBackgroundDrawable(null) to you button inside your class?
Example:
yourButton.setBackgroundDrawable(null);
How can I replicate this behaviour in an Android app, is only for learning purposes. I do know that in the bottom half they are using a recyclerview, but in the upper part where they are displaying the "You have 4.983 to spend" part I dont know how to add it, how do they split the screen to have them both? This is what I want to replicate
Please post the code or implementation which you have tried before asking the question, which will be helpful for others to answer your question.
This can be implemented easily within the same xml layout file.
Or
Can also be done with multiple fragments split in one activity or fragment.
Think each TextView ImageView or any Widget as to be placed properly into one layout. Just for an example for you to set i have created this which took me 5 mins to build similar layout design like one you have posted, the final result is not same, because details are to be customized.
So import this xml into your file and see how it looks. Also learn using ConstraintLayout.
activity_main.xml:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:id="#+id/you_have_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="24dp"
android:text="You have"
android:textSize="24sp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/amount_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="$ 4,983"
android:textSize="36sp"
android:textStyle="bold"
app:layout_constraintStart_toStartOf="#id/you_have_text"
app:layout_constraintTop_toBottomOf="#id/you_have_text" />
<androidx.cardview.widget.CardView
android:id="#+id/first_card"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_marginTop="20dp"
app:cardCornerRadius="8dp"
app:cardElevation="16dp"
app:layout_constraintEnd_toStartOf="#id/second_card"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/amount_text">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Funds"
android:textSize="20sp"
android:textColor="#000000" />
</androidx.cardview.widget.CardView>
<androidx.cardview.widget.CardView
android:id="#+id/second_card"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_marginTop="20dp"
app:cardCornerRadius="8dp"
app:cardElevation="16dp"
app:layout_constraintEnd_toStartOf="#id/third_card"
app:layout_constraintStart_toEndOf="#id/first_card"
app:layout_constraintTop_toBottomOf="#id/amount_text">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Transfer"
android:textSize="20sp"
android:textColor="#000000" />
</androidx.cardview.widget.CardView>
<androidx.cardview.widget.CardView
android:id="#+id/third_card"
android:layout_width="100dp"
android:layout_height="100dp"
app:cardCornerRadius="8dp"
app:cardElevation="16dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/second_card"
app:layout_constraintTop_toTopOf="#id/first_card">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Pay Bill"
android:textSize="20sp"
android:textColor="#000000" />
</androidx.cardview.widget.CardView>
<androidx.cardview.widget.CardView
android:id="#+id/list_card"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="28dp"
app:cardCornerRadius="24dp"
app:cardElevation="16dp"
app:layout_constraintTop_toBottomOf="#id/first_card">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="28dp"
app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
app:layout_constraintTop_toBottomOf="#id/first_card"
tools:listitem="#layout/item_list" />
</androidx.cardview.widget.CardView>
</androidx.constraintlayout.widget.ConstraintLayout>
item_list.xml :
<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/item_text_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:fontFamily="serif-monospace"
android:padding="8dp"
android:textSize="32dp"
android:textColor="#000000"
tools:text="McDonalds" />
I have a recyclerview that takes a Arraylist as paramter. And when i am adding an image uri to one the objects variables of the list and then refreshing the recylerview
using
rv.notifydatasetchanged
then my code properly adds image to the imageview of the object whose uri variable i set but all the rows gets shrinked
and when i am doing
rv.notifyItemChanged(position)
then that row gets shrinked. And other remains same. I am not modifying width or height after refresh or notifydatasetchanged, thats why i am confused why its happening.
Here is my recylverview row:
<?xml version="1.0" encoding="utf-8"?>
<layout 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">
<data>
<variable
name="feedbackData"
type="in.myapp.event_subscriber.models.MyData" />
</data>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/white"
android:orientation="vertical">
<LinearLayout
android:id="#+id/ll_question"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:orientation="horizontal">
<TextView
android:id="#+id/tv_question_number"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="10dp"
android:text="#{Integer.toString(feedbackData.questionNumber)}"
android:textColor="#color/black"
android:textSize="16sp"
android:textStyle="bold"
app:layout_constraintEnd_toStartOf="#id/tv_question" />
<TextView
android:id="#+id/tv_question"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="10dp"
android:layout_marginEnd="40dp"
android:text="#{feedbackData.question}"
android:textSize="16sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/tv_question_number"
app:layout_constraintTop_toTopOf="parent" />
</LinearLayout>
<EditText
android:id="#+id/et_answer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="20dp"
android:layout_marginTop="20dp"
android:layout_marginEnd="20dp"
android:background="#drawable/stroke_rectangle_grey"
android:gravity="start"
android:hint="Write you answer here..."
android:lines="4"
android:paddingStart="10dp"
android:paddingTop="15dp"
android:text="#{feedbackData.answer.description}"
app:layout_constraintTop_toBottomOf="#id/ll_question" />
<LinearLayout
android:id="#+id/ll_action_attachment"
goneUnless="#{feedbackData.imageUri==null}"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="20dp"
android:layout_marginTop="20dp"
android:layout_marginEnd="20dp"
android:orientation="horizontal"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/et_answer">
<ImageView
android:layout_width="20dp"
android:layout_height="20dp"
android:src="#drawable/ic_attachment" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="10dp"
android:text="Add attachment"
android:textSize="16sp" />
</LinearLayout>
<ImageView
android:id="#+id/iv_attached_image"
attachImage="#{feedbackData.imageUri}"
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_marginStart="20dp"
android:layout_marginTop="10dp"
android:elevation="10dp"
android:scaleType="fitXY"
android:visibility="gone" />
<TextView
android:id="#+id/tv_image_attached_text"
goneUnless="#{feedbackData.imageUri!=null}"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="20dp"
android:layout_marginTop="5dp"
android:text="Image Attached Successfully"
android:textColor="#color/medium_aqua_marine"
android:visibility="gone" />
<View
android:layout_width="match_parent"
android:layout_height="40dp" />
<View
android:layout_width="match_parent"
android:layout_height="0.5dp"
android:layout_marginStart="20dp"
android:layout_marginEnd="20dp"
android:background="#color/grey" />
</LinearLayout>
</layout>
The first image shows my defualt recyclerview, but as soon as i add an image uri from my local storage to the list variable and then call notifydatasetchanged or notifyItemChanged(position), the thing in second image happens. Everything shrinks, even the textviews and divider and everything shrinks.
Code for my recylerview:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/white">
<TextView
android:id="#+id/tv_event_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="20dp"
android:layout_marginTop="10dp"
android:layout_marginEnd="20dp"
android:background="#color/white"
android:text="Technical corridor"
android:textSize="18sp"
android:textStyle="bold"
app:layout_constraintTop_toTopOf="parent" />
<View
android:id="#+id/divider"
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_marginStart="20dp"
android:layout_marginTop="10dp"
android:layout_marginEnd="20dp"
android:background="#color/grey"
app:layout_constraintTop_toBottomOf="#id/tv_event_name" />
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/rv_subscriber_feedback"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_marginTop="20dp"
android:layout_marginBottom="20dp"
app:layout_constraintBottom_toTopOf="#id/btn_submit"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/divider"
tools:listitem="#layout/row_feedback" />
<Button
android:id="#+id/btn_submit"
android:layout_width="100dp"
android:layout_height="30dp"
android:layout_marginBottom="40dp"
android:background="#color/colorPrimary"
android:text="Submit"
android:textColor="#color/white"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
I will try to give some hints, might be because recyclerView recalculates views:
1) for your recycler view setHasFixedSize(true)
2) set a LinearLayoutManager to your recyclerView
3) keep using notifyDataSetChanged()
4) let your recyclerview be match_parent both width and height
See what happens.
Adding the imageview on which i was setting image and the textview which was only visible after image is set inside one more linearlayout worked. Now its not shrinking. Maybe now only that linearlayout is shrinking upto the width of imageview. I Dont know why this is happening. But atleast this worked and can be used for now.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
goneUnless="#{feedbackData.imageUri!=null}"
android:orientation="vertical">
<ImageView
android:id="#+id/iv_attached_image"
attachImage="#{feedbackData.imageUri}"
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_marginStart="20dp"
android:layout_marginTop="10dp"
android:elevation="10dp"
android:scaleType="fitXY"
android:visibility="gone" />
<TextView
android:id="#+id/tv_image_attached_text"
goneUnless="#{feedbackData.imageUri!=null}"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="20dp"
android:layout_marginTop="5dp"
android:text="Image Attached Successfully"
android:textColor="#color/medium_aqua_marine"
android:visibility="gone" />
</LinearLayout>
I am trying to build the following layout on Android:
As indicated by the dotted lines:
- The two TextViews should be left aligned.
- The ImageView should be center aligned with the title TextView
The labels should be anchored relative to the parent and each other as indicated in the sketch.
I have tried to implement this using ConstrainedLayout which gets me pretty far. But the tricky part is the alignment of image and title.
I would need an attribute like layout_constraintCenter_toCenterOf which unfortunately does not exist.
EDIT: ### removed hard-coded height ###
There was an unwanted hardcoded height in my code (marked in example below). After removing that it works fine for me.
But the question stands: What is the 'right' way to center-align views?
My solution feels like a hack.
#######################################
This is what I got so far:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
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"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:padding="5dp">
<ImageView
android:id="#+id/image1"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_marginTop="10dp"
android:layout_marginEnd="8dp"
android:layout_weight="0"
android:adjustViewBounds="true"
android:contentDescription="#null"
app:layout_constraintEnd_toStartOf="#+id/titleText"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/titleText"
android:layout_width="0dp"
### edit: this line must go:
### android:layout_height="19dp"
android:layout_marginStart="158dp"
android:layout_marginEnd="8dp"
android:layout_weight="1"
android:ellipsize="end"
android:gravity="center_vertical"
android:maxLines="1"
app:layout_constraintBottom_toBottomOf="#+id/image1"
app:layout_constraintTop_toTopOf="#+id/image1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/image1"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="parent"
tools:text="title" />
<TextView
android:id="#+id/detailText"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:layout_marginEnd="8dp"
android:layout_weight="0"
android:gravity="center_vertical"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="#+id/titleText"
app:layout_constraintTop_toBottomOf="#+id/titleText"
app:layout_constraintBottom_toBottomOf="parent"
tools:text="subtitle" />
</android.support.constraint.ConstraintLayout>
I have tried to work around by aligning top and bottom which looks right in the preview but causes glitches in the real app:
app:layout_constraintBottom_toBottomOf="#+id/image1"
app:layout_constraintTop_toTopOf="#+id/image1"
Maybe ConstrainedLayout is the wrong tool for the job altogether.
What is the 'right way' to implement this layout in Android?
You may try this:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
android:orientation="horizontal"
xmlns:android="http://schemas.android.com/apk/res/android">
<ImageView
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginLeft="15dp"
android:layout_marginRight="15dp"
android:layout_marginTop="10dp"
android:src="#drawable/connected_icon_png" />
<View
android:layout_width="10dp"
android:layout_height="0dp" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:paddingBottom="10dp"
android:paddingTop="10dp">
<TextView
android:id="#+id/name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="10dp"
android:layout_marginRight="10dp"
android:text="Title Label"/>
<TextView
android:id="#+id/description"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="10dp"
android:layout_marginRight="10dp"
android:layout_marginTop="10dp"
android:maxLines="2"
android:text="Content that you want" />
</LinearLayout>
<View
android:layout_width="match_parent"
android:layout_height="1dp"/>
</LinearLayout>
</LinearLayout>
You may able to do further edit if you need.
Happy Coading
Snapshot:
use your widgets inside relative 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:layout_width="match_parent"
android:layout_height="wrap_content"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_centerInParent="true"
android:padding="5dp">
<ImageView
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:id="#+id/image1"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_marginTop="10dp"
android:layout_marginEnd="8dp"
android:src="#color/colorAccent"
android:adjustViewBounds="true"
android:contentDescription="#null"
app:layout_constraintEnd_toStartOf="#+id/titleText"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/titleText"
android:layout_width="match_parent"
android:layout_height="19dp"
android:layout_marginEnd="8dp"
android:textAlignment="center"
android:ellipsize="end"
android:text="abcjdnadnaadjdndd"
android:layout_toRightOf="#id/image1"
android:gravity="center_vertical"
android:maxLines="1"
app:layout_constraintBottom_toBottomOf="#+id/image1"
app:layout_constraintTop_toTopOf="#+id/image1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/image1"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="parent"
tools:text="title" />
<TextView
android:layout_toRightOf="#id/image1"
android:textAlignment="center"
android:layout_below="#id/titleText"
android:id="#+id/detailText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:layout_marginEnd="8dp"
android:text="sadhbhaeadhbaedn"
android:gravity="center_vertical"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="#+id/titleText"
app:layout_constraintTop_toBottomOf="#+id/titleText"
tools:text="subtitle" />
</RelativeLayout>
When I am trying to make a border (frame) around my ImageView by using padding or margin in FrameLayout (in code it has id: main_frame), it's only shown on left and right sides but not on top and bottom.
But as I wrote I need it around because it should look like frame.
There is a code:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/colorPrimaryDark"
tools:context=".WallActivity">
<RelativeLayout
android:id="#+id/wall_frame"
android:layout_width="592dp"
android:layout_height="315dp"
android:background="#android:color/transparent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/linearLayout"
app:layout_constraintVertical_bias="1.0">
<ImageView
android:id="#+id/wall"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:adjustViewBounds="true"
android:scaleType="fitCenter"
android:src="#drawable/room"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<FrameLayout
android:id="#+id/main_frame"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:background="#android:color/transparent"
android:visibility="visible"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintVertical_bias="0.621"
android:layout_margin="40dp">
<FrameLayout
android:id="#+id/frame"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="#android:color/black"
android:visibility="visible"
android:padding="20dp">
<FrameLayout
android:id="#+id/mat"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="#android:color/white"
android:visibility="visible"
android:padding="10dp">
<RelativeLayout
android:id="#+id/imageholder"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="#android:color/transparent">
<ImageView
android:id="#+id/picture"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:scaleType="fitCenter"
android:src="#drawable/nature"
android:visibility="visible"
android:layout_centerInParent="true"/>
</RelativeLayout>
</FrameLayout>
</FrameLayout>
</FrameLayout>
</RelativeLayout>
<LinearLayout
android:id="#+id/linearLayout"
android:layout_width="586dp"
android:layout_height="36dp"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="4dp"
android:orientation="horizontal"
android:weightSum="35.5"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<Button
android:id="#+id/hideBtn"
android:layout_width="0dp"
android:layout_height="30dp"
android:layout_weight="4"
android:background="#drawable/menubutton"
android:text="Hide"
android:textAppearance="#style/TextAppearance.AppCompat.Body1"
android:textColor="#color/colorGrey"
android:textSize="16sp" />
<Space
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0.5" />
<Button
android:id="#+id/clearBtn"
android:layout_width="0dp"
android:layout_height="30dp"
android:layout_weight="4"
android:background="#drawable/menubutton"
android:text="Clear"
android:textAppearance="#style/TextAppearance.AppCompat.Body1"
android:textColor="#color/colorGrey"
android:textSize="16sp" />
<Space
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0.5" />
<Button
android:id="#+id/lockBtn"
android:layout_width="0dp"
android:layout_height="30dp"
android:layout_weight="4"
android:background="#drawable/menubutton"
android:text="Lock"
android:textAppearance="#style/TextAppearance.AppCompat.Body1"
android:textColor="#color/colorGrey"
android:textSize="16sp" />
<Space
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="5" />
<Button
android:id="#+id/exportBTN"
android:layout_width="0dp"
android:layout_height="30dp"
android:layout_weight="4"
android:background="#drawable/menubutton"
android:text="Export"
android:textAppearance="#style/TextAppearance.AppCompat.Body1"
android:textColor="#color/colorGrey"
android:textSize="16sp" />
<Space
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="5" />
<Button
android:id="#+id/wallBtn"
android:layout_width="0dp"
android:layout_height="30dp"
android:layout_weight="4"
android:background="#drawable/menubutton"
android:text="Wall"
android:textAppearance="#style/TextAppearance.AppCompat.Body1"
android:textColor="#color/colorGrey"
android:textSize="16sp" />
<Space
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0.5" />
<Button
android:id="#+id/pictureBtn"
android:layout_width="0dp"
android:layout_height="30dp"
android:layout_weight="4"
android:background="#drawable/menubutton"
android:text="Picture"
android:textAppearance="#style/TextAppearance.AppCompat.Body1"
android:textColor="#color/colorGrey"
android:textSize="16sp" />
</LinearLayout>
</android.support.constraint.ConstraintLayout>
And here is the screenshot.
Do you have any idea how to solve it? I tried searching but couldn't find anything similar. Or is there a better way to make frames?
Thank you!
//Edited:
I added full xml code, added some padding to FrameLayouts with id: mat, frame. It looks perfect but main_frame is still broken. main_frame should be invisible (with transparent color) so you may think it's not necessarily to solve it, but I find out when I let it be like that it brokes image when I change it. It adds some white borders (only just on left and right side) to the image...
There is another picture to show you that frames look good but as I said main_frame is broken...
Add this: android:padding="2dp" to the FrameLayout with id frame. You can change 2dp to what you like.
You might consider having a simple layout using one RelativeLayout and an ImageView. The RelativeLayout might have a background whereas the ImageView will have some padding along with a background as well. So the layout will be something like this.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/main_frame"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/room">
<ImageView
android:id="#+id/picture"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:background="#android:color/black"
android:padding="16dp"
android:scaleType="fitCenter"
android:src="#drawable/nature" />
</RelativeLayout>
Hope that helps!