Translate LinearLayout into ConstraintLayout - android

I'm learning using ConstraintLayout but I still cannot get used to it. Could you please help me with "translating" this layout made using LinearLayout into ConstraintLayout to help me to understand how a "bit" more complex layouts could be built using that? With LinearLayout it is simple but building this kind of layout using Constraints seems problematic.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="com.xxx.MainActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_marginTop="8dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:orientation="vertical">
<EditText
android:id="#+id/editText_main_overallTime"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:inputType="time" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:orientation="vertical">
<TextView
android:id="#+id/tv1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="Exercised done"
android:textSize="18sp" />
<TextView
android:id="#+id/textView_main_exercisesDone"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:textSize="18sp"
tools:text="3/15" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:orientation="vertical">
<TextView
android:id="#+id/tv2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:gravity="center"
android:text="Next exercise"
android:textSize="18sp" />
<TextView
android:id="#+id/textView_main_nextExerciseName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:gravity="center"
android:textSize="18sp"
tools:text="Paradiddle" />
</LinearLayout>
</LinearLayout>
<View
android:id="#+id/view"
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#color/colorPrimaryDark"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"/>
<TextView
android:id="#+id/textView_main_currentExerciseName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:textSize="24sp"
tools:text="Name of the excercise" />
<EditText
android:id="#+id/editText_main_timeLeft"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="time" />
<ImageView
android:id="#+id/imageView_main_exercise"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_weight="1"
app:srcCompat="#mipmap/ic_launcher" />
<ImageButton
android:id="#+id/imageButton_main_power"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
app:srcCompat="#android:drawable/ic_media_play" />
</LinearLayout>

You can achieve the desired result by using Android Studio by using following steps:
Open design tab -> Component Tree -> Right click -> Convert Linear Layout to Constraint layout
Choose the appropriate option and click on OK
Check the Text tab, you Layout will now be translate to ConstraintLayout.

Related

Adding movie overview TextView in xml inside a Scrollbar

I have the following xml. Basically I want to display the movie overview below the Layout whose id is equals to layoutOne.
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbarStyle="outsideOverlay">
<LinearLayout
android:id="#+id/layoutOne"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="center_horizontal"
android:padding="16dp"
android:background="#color/primary"
>
<ImageView
android:id="#+id/movie_image"
android:layout_width="160dp"
android:layout_height="240dp"
android:scaleType="fitXY"
android:layout_gravity="center_vertical"
/>
<RelativeLayout
android:layout_width="wrap_content"
android:padding="16dp"
android:layout_gravity="center_vertical"
android:layout_height="wrap_content">
<TextView
android:id="#+id/movie_title"
android:layout_centerHorizontal="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="16sp"
/>
<TextView
android:layout_below="#+id/movie_title"
android:layout_centerHorizontal="true"
android:id="#+id/movie_rating"
android:text="9/10"
android:textSize="24sp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingTop="20dp"
/>
<LinearLayout
android:layout_width="wrap_content"
android:layout_below="#+id/movie_rating"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView
android:layout_marginTop="13dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#android:drawable/ic_menu_my_calendar"/>
<TextView
android:layout_below="#+id/movie_rating"
android:layout_centerHorizontal="true"
android:id="#+id/movie_date"
android:text="2017-10-9"
android:textSize="16sp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingTop="20dp"
/>
</LinearLayout>
</RelativeLayout>
<TextView
android:id="#+id/title_overview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Great movie" />
</LinearLayout>
</ScrollView>
Here is what I get.
I want the sample text Great movie to be below that light pink layout. The tricky part here is that Scrollbar view allow only one child view. Any ideas?
Thanks,
Theo.
The Constraint of the RelativeLayout should fit the whole page. If you want to use ScrollView you should add the RelativeLayout to the ScrollView too.
Hence it would be like this :
<LinearLayout
android:id="#+id/layoutOne"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:gravity="center_horizontal"
android:padding="16dp"
android:background="#color/primary"
>
Later you can use the following to adjust the image:
<LinearLayout
android:layout_marginBottom="439dp"
android:layout_marginEnd="156dp"
android:layout_marginStart="156dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
>

Text does not fit the screen in LinearLayout

The TextViews used in the following layout do not get wrapped in the screen and go out on the left (or start) edge of the screen.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent" android:layout_height="match_parent"
>
<LinearLayout
android:id="#+id/text_pane"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toLeftOf="#+id/iv_video_thumbnail"
android:layout_toStartOf="#+id/iv_video_thumbnail"
android:orientation="vertical">
<TextView
android:id="#+id/tv_video_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=""
android:layout_gravity="end"
android:padding="#dimen/text_padding"/>
<TextView
android:padding="#dimen/text_padding"
android:layout_gravity="end"
android:id="#+id/tv_video_descr"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="" />
</LinearLayout>
<ImageView
android:id="#+id/iv_video_thumbnail"
android:layout_width="#dimen/thumbnail_width"
android:layout_height="#dimen/thumbnail_height"
android:layout_alignBottom="#+id/text_pane"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:contentDescription="#string/video_thumbnail_image"
app:srcCompat="#drawable/video" />
</RelativeLayout>
I do not know why the text goes out of screen on the left side. I have tried using margin and padding for the RelativeLayout and LinearLayout and the two TextViews, but none of them solved the problem.
Currently, the app displays content as follows:
As you see in the code, I have also applied the gravity attribute to the TextViews, but no success yet. Does anyone know how to solve this?
Try this!!
<?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:id="#+id/relativeLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/tv_video_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:padding="10dp"
android:text="#android:string/dialog_alert_title"
app:layout_constraintEnd_toStartOf="#+id/iv_video_thumbnail"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/tv_video_descr"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:padding="10dp"
android:text="#android:string/fingerprint_icon_content_description"
app:layout_constraintEnd_toStartOf="#+id/iv_video_thumbnail"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tv_video_title" />
<ImageView
android:id="#+id/iv_video_thumbnail"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginBottom="1dp"
android:layout_marginTop="8dp"
app:layout_constraintBottom_toBottomOf="#+id/tv_video_descr"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/your_img" />
</android.support.constraint.ConstraintLayout>
Try this...
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent" android:layout_height="wrap_content"
android:orientation="horizontal">
<LinearLayout
android:id="#+id/text_pane"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_toLeftOf="#+id/iv_video_thumbnail"
android:layout_toStartOf="#+id/iv_video_thumbnail"
android:layout_weight=".2"
android:orientation="vertical">
<TextView
android:id="#+id/tv_video_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text=""
android:gravity="right"
android:layout_margin="3dp"
android:layout_weight=".1"
android:padding="10dp"/>
<TextView
android:padding="10dp"
android:id="#+id/tv_video_descr"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="3dp"
android:layout_weight=".3"
android:text="" />
</LinearLayout>
<ImageView
android:id="#+id/iv_video_thumbnail"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_alignBottom="#+id/text_pane"
android:layout_alignParentEnd="true"
android:layout_weight=".1"
android:scaleType="fitXY"
android:layout_alignParentRight="true"/>
</LinearLayout>
Output:
Use this layout instead.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<LinearLayout
android:id="#+id/text_pane"
android:layout_width="0dp"
android:padding="#dimen/text_padding"
android:layout_height="wrap_content"
android:layout_weight="0.7"
android:orientation="vertical">
<TextView
android:id="#+id/tv_video_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end"
android:text="Hi" />
<TextView
android:id="#+id/tv_video_descr"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end"
android:text="Hi" />
</LinearLayout>
<ImageView
android:id="#+id/iv_video_thumbnail"
android:layout_width="0dp"
android:layout_height="#dimen/thumbnail_height"
android:layout_alignBottom="#+id/text_pane"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_weight="0.3"
app:srcCompat="#drawable/video" />
</LinearLayout>

How to give particular amount of space to the views in Android?

How is the best way to set gravity for TextView and ImageButton? I would like have these in horizontal position and TextView should take 90% of the space and ImageButton 10%.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView" />
<ImageButton
android:id="#+id/imageButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/info"/>
</LinearLayout>
You can use layout properties as wieghtSum and layout weight. You can use below code
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_wightSum="1" >
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView"
android:layout_weight=".9" />
<ImageButton
android:id="#+id/imageButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/info"
android:layout_weight=".1"
/>
I hope that solves your problem..
Try this..Use android:layout_weight=".3" make you textview width is 0dp like this android:layout_width="0dp"
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:id="#+id/textView"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight=".3"
android:text="TextView" />
<ImageButton
android:id="#+id/imageButton"
android:layout_width="0dp"
android:layout_weight=".1"
android:layout_height="match_parent"
android:src="#android:drawable/btn_dropdown"/>
</LinearLayout>
Look at another option which can be possible now with a constraint layout.
<?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:padding="16dp">
<Button
android:id="#+id/btnThird"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginLeft="8dp"
android:layout_marginStart="8dp"
android:text="Hello"
app:layout_constraintHorizontal_weight=".8"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#+id/btnTwoThirds" />
<Button
android:id="#+id/btnTwoThirds"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Wordl"
app:layout_constraintBottom_toBottomOf="#+id/btnThird"
app:layout_constraintHorizontal_weight="2"
app:layout_constraintLeft_toRightOf="#+id/btnThird"
app:layout_constraintRight_toRightOf="parent" />
</android.support.constraint.ConstraintLayout>

Bug layout does not show some part

I have designed in a linear layout with a listview it is supposed to have everything shown with the whole photo and it leaves the part of likey comment but only the photo comes out and in small photos if the part comes out but in other big photos it does not
It would be nice to implement picasso but I do not know how to do it or if it can
I attach the layouts:
this is the layout_post part of a recycler view
<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:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:orientation="horizontal">
<TextView
android:layout_marginBottom="5dp"
android:id="#+id/tv_post_username"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="16dp"
android:layout_marginRight="8dp"
android:layout_marginTop="16dp"
android:layout_weight="1"
android:singleLine="true"
android:text="Username"
android:textColor="#android:color/black"
android:textSize="16sp"
android:textStyle="bold" />
<TextView
android:id="#+id/tv_time"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="16dp"
android:layout_marginTop="16dp"
android:text="10h30" />
</LinearLayout>
<TextView
android:id="#+id/tv_post_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:text="Post text has some words that I could use for a placeholder like this" />
<ImageView
android:id="#+id/iv_post_display"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:src="#drawable/imageholder" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="right"
android:orientation="horizontal">
<LinearLayout
android:id="#+id/like_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:orientation="horizontal"
android:padding="16dp">
<ImageView
android:id="#+id/iv_like"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/chill"
android:layout_marginBottom="1dp"/>
<TextView
android:id="#+id/tv_likes"
android:layout_marginTop="2dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:text="0"
android:textSize="16sp" />
</LinearLayout>
<LinearLayout
android:id="#+id/comment_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="16dp"
android:gravity="center_vertical"
android:orientation="horizontal"
android:padding="16dp">
<ImageView
android:layout_width="wrap_content"
android:layout_marginTop="5dp"
android:layout_height="wrap_content"
android:src="#drawable/ic_mode_comment_black_24dp" />
<TextView
android:layout_marginTop="5dp"
android:id="#+id/tv_comments"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:text="0"
android:textSize="16sp" />
</LinearLayout>
</LinearLayout>
this is the rowpost
is a cardview that include the layoutpost
<RelativeLayout android:layout_height="match_parent"
android:layout_width="match_parent"
xmlns:android="http://schemas.android.com/apk/res/android"
android:background="#212121">
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="12dp"
android:layout_marginRight="12dp"
android:layout_marginTop="20dp"
android:layout_marginBottom="60dp"
android:elevation="10dp">
<include layout="#layout/layout_post" />
</android.support.v7.widget.CardView>
the content view:
<FrameLayout 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="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="95dp"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context="com.android.octa.memetixs.Activities.main.PostActivity"
tools:showIn="#layout/app_bar_post">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="471dp">
<android.support.v4.view.ViewPager
android:id="#+id/myViewPager"
android:layout_width="match_parent"
android:layout_height="match_parent">
</android.support.v4.view.ViewPager>
</RelativeLayout>
This is a small, low resolution photo here if it shows:
And here if everything is shown as it should be
If you use a LinearLayout without weightSum attribute then it simple stacks the child views one over the other Without adjusting its dimension to fit.
Use android:weightSum attribute in the LinearLayout and android:layout_weight + android:layout_height="0dp" for the child views, then if for example weightSum == 6 and a child has layout_weight == 1 then it will get 1/6 of space.

layout_weight: Text is not displayed

I was trying to make an interface that allows horizontal texts to be equally space, using layout_weight for responsiveness
So, I tried the code below
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_vertical"
android:background="#android:color/darker_gray">
<TextView
android:gravity="center"
android:text="Guest List"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="24sp"
android:background="#android:color/holo_blue_bright"/>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/white">
<TextView
android:text="Kunal"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:textSize="24sp"/>
<TextView
android:text="Darling"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:textSize="24sp"/>
<TextView
android:text="Shocker"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:textSize="24sp"/>
</LinearLayout>
However, all the texts disappear.
So, could anyone please kindly explain to me what happened and how to fix this problem?
Try this,
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/darker_gray"
android:gravity="center_vertical"
android:orientation="vertical" >
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/holo_blue_bright"
android:gravity="center"
android:text="Guest List"
android:textSize="24sp" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/white"
android:orientation="horizontal" >
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Kunal"
android:textSize="24sp" />
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Darling"
android:textSize="24sp" />
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Shocker"
android:textSize="24sp" />
</LinearLayout>
</LinearLayout>
Using a white background color in the second LinearLayout, you may be trying to see white on white text.
I'd try to add to the TextViews something along:
android:textColor="#android:color/black"

Categories

Resources