Why is 3rd linear layout (containg two text views) being pushed out of screen in following xml file? Simultaneous design in Android Studio is showing expected behaviour but when testing in phone, 3rd linear layout is being partially visible.
What I am trying to achieve is dividing screen into 3 parts (10%, 80% and 10%).
<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"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal">
<TextView
android:id="#+id/messageTextView"
android:layout_height="match_parent"
android:layout_width="0dp"
android:layout_weight="3"
android:text="Place a stone" />
<Button
android:id="#+id/resetButton"
android:layout_height="match_parent"
android:layout_weight="1"
android:layout_width="0dp"
android:text="Reset" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="8">
<me.varunon9.fito.CanvasBoardView
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal">
<TextView
android:id="#+id/userInfoTextView"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="match_parent"
android:background="#drawable/focussed_background"
android:text="Your turn\nStones left: 9" />
<TextView
android:id="#+id/computerInfoTextView"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="match_parent"
android:text="Computer's turn\nStones left: 9" />
</LinearLayout>
Even this xml is also being pushed out of screen-
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/root"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="40dp"
android:id="#+id/topBar"
android:orientation="horizontal"
android:layout_alignParentTop="true">
<TextView
android:id="#+id/messageTextView"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:text="Place a stone" />
</LinearLayout>
<View
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="40dp"
android:layout_marginBottom="40dp"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="40dp"
android:id="#+id/bottomBar"
android:layout_marginBottom="0dp"
android:orientation="horizontal"
android:layout_alignParentBottom="true">
<TextView
android:id="#+id/userInfoTextView"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:text="User Info" />
</LinearLayout>
</RelativeLayout>
I am using Fragment (Tabbed Activity). When using same xml layout (above snippets) in activity, things are working fine. Problem seems with Fragment.
To avoid nested weights (bad for performance), you can use Relative layout.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/root"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="40dp"
android:id="#+id/topBar"
android:orientation="horizontal"
android:layout_alignParentTop="true"/>
<View
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="40dp"
android:layout_marginBottom="40dp"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="40dp"
android:id="#+id/bottomBar"
android:orientation="horizontal"
android:layout_alignParentBottom="true"/>
</RelativeLayout>
Instead of using nested weights, which happen to be terribly bad for performance, use ConstraintLayout which is very easy to implement in the layout editor.
If you have never used it before it can appear to be a bit complicated; but that is not the case. Refer to this link to get an idea on how to implement a ConstraintLayout.
Here is the code for what you want to achieve
<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:orientation="vertical">
<android.support.constraint.Guideline
android:id="#+id/guideline1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.1"
tools:layout_editor_absoluteY="51dp"
tools:layout_editor_absoluteX="0dp" />
<android.support.constraint.Guideline
android:id="#+id/guideline2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.9"
tools:layout_editor_absoluteY="460dp"
tools:layout_editor_absoluteX="0dp" />
<android.support.constraint.Guideline
android:id="#+id/guideline3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.5"
tools:layout_editor_absoluteY="0dp"
tools:layout_editor_absoluteX="192dp" />
<android.support.constraint.Guideline
android:id="#+id/guideline4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.75"
tools:layout_editor_absoluteY="0dp"
tools:layout_editor_absoluteX="288dp" />
<TextView
android:id="#+id/stoneTV"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:text="#string/stoneText"
app:layout_constraintBaseline_toBaselineOf="#+id/resetButton"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#+id/guideline4"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp" />
<Button
android:id="#+id/resetButton"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:text="#string/reset_text"
app:layout_constraintBottom_toTopOf="#+id/guideline1"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toLeftOf="#+id/guideline4"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.64"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:layout_marginTop="24dp" />
<TextView
android:id="#+id/playerTV"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="#string/player_text"
app:layout_constraintBottom_toBottomOf="parent"
android:layout_marginBottom="16dp"
app:layout_constraintTop_toTopOf="#+id/guideline2"
android:layout_marginTop="8dp"
app:layout_constraintRight_toLeftOf="#+id/guideline3"
android:layout_marginRight="8dp"
android:layout_marginLeft="8dp"
app:layout_constraintLeft_toLeftOf="parent"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
app:layout_constraintHorizontal_bias="0.0" />
<TextView
android:id="#+id/computerTV"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="#string/computer_text"
app:layout_constraintTop_toTopOf="#+id/guideline2"
android:layout_marginTop="8dp"
app:layout_constraintBottom_toBottomOf="parent"
android:layout_marginBottom="16dp"
android:layout_marginLeft="8dp"
app:layout_constraintLeft_toLeftOf="#+id/guideline3"
android:layout_marginRight="8dp"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintHorizontal_bias="0.0"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp" />
<FrameLayout
android:id="#+id/contentLayout"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginLeft="8dp"
app:layout_constraintLeft_toLeftOf="parent"
android:layout_marginRight="8dp"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginBottom="8dp"
app:layout_constraintBottom_toTopOf="#+id/guideline2"
app:layout_constraintTop_toTopOf="#+id/guideline1"
android:layout_marginTop="8dp">
<!--Add your other view(s) here-->
</FrameLayout>
</android.support.constraint.ConstraintLayout>
Found it! Problem was not with fragment layout but its container, i.e. ViewPager. I am using Tabbed Activity and by default View Pager was too long (going out of screen).
Here is the solution: Android Tabbed Activity Bottom off Screen
Thanks for effort guys.
Hiiii
I think you don't have proper info, how to use "Weightsum".
well no issue, i will explain you,
When you want to use "Weight" in linear layout you should use "Weightsum" in your main "LinearLayout" after that you can use sub layout or widgets in sum of weight like below code.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:weightSum="1"
android:orientation="horizontal">
<TextView
android:id="#+id/messageTextView"
android:layout_height="match_parent"
android:layout_width="0dp"
android:layout_weight="0.5"
android:text="Place a stone" />
<Button
android:id="#+id/resetButton"
android:layout_height="match_parent"
android:layout_weight="0.5"
android:layout_width="0dp"
android:text="Reset" />
</LinearLayout>
Related
I just started app development trying to make an e-commerce app since using fragments is a better way rather than activities I made a home page inside which I want to show first the action bar then top-selling (top-4 selling products) and after that all the products.
this is some i want to achieve
image
I am using guideline to constraint view pager to limited section but since its a fragment its not scrollable so i have to set it to scrollable but the second I set it to scroll view the size of screen increase and the view pager gets distorted.
code of my home fragment without scroll view
<?xml version="1.0" encoding="utf-8"?>
<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="match_parent"
android:layout_height="match_parent"
tools:context=".home.HomeFragment">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<include
android:id="#+id/home_actionbar"
layout="#layout/actionbar"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"/>
<com.google.android.material.textview.MaterialTextView
android:id="#+id/top_selling_heading"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="15sp"
android:layout_marginTop="15sp"
android:text="#string/top_selling_heading"
android:textSize="14sp"
app:fontFamily="#font/roboto_bold"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/home_actionbar" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.45"
app:layout_constraintTop_toBottomOf="#id/top_selling_heading" />
<androidx.viewpager.widget.ViewPager
android:id="#+id/top_seller_vp"
android:layout_width="0dp"
android:layout_height="0dp"
android:padding="5sp"
android:layout_margin="15sp"
android:clipToPadding="false"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#id/top_selling_heading"
app:layout_constraintBottom_toTopOf="#id/guideline2"
app:layout_constrainedHeight="true" />
<TextView
android:id="#+id/product_heading"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#id/guideline2"
app:layout_constraintStart_toStartOf="#id/top_selling_heading"
app:layout_constraintEnd_toEndOf="#id/top_selling_heading"
android:text="#string/all_products_heading"
android:textSize="20sp"
android:fontFamily="#font/roboto_bold"/>
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/productRV"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
android:scrollbars="vertical"
app:layout_constraintTop_toBottomOf="#id/product_heading"
android:layout_margin="10sp"
tools:listitem="#layout/product_item"/>
</androidx.constraintlayout.widget.ConstraintLayout>
</FrameLayout>
is there any other way to achieve this. please help fast..
try using LinearLayout inside scrollView(Copy and paste)
<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="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<include
android:id="#+id/home_actionbar"
layout="#layout/actionbar"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<com.google.android.material.textview.MaterialTextView
android:id="#+id/top_selling_heading"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="15sp"
android:layout_marginTop="15sp"
android:text="#string/top_selling_heading"
android:textSize="14sp"
app:fontFamily="#font/roboto_bold"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/home_actionbar" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.45"
app:layout_constraintTop_toBottomOf="#id/top_selling_heading" />
<androidx.viewpager.widget.ViewPager
android:id="#+id/top_seller_vp"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_margin="15sp"
android:clipToPadding="false"
android:padding="5sp"
app:layout_constrainedHeight="true"
app:layout_constraintBottom_toTopOf="#id/guideline2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/top_selling_heading" />
<TextView
android:id="#+id/product_heading"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="#font/roboto_bold"
android:text="#string/all_products_heading"
android:textSize="20sp"
app:layout_constraintEnd_toEndOf="#id/top_selling_heading"
app:layout_constraintStart_toStartOf="#id/top_selling_heading"
app:layout_constraintTop_toBottomOf="#id/guideline2" />
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/productRV"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="10sp"
android:scrollbars="vertical"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/product_heading"
tools:listitem="#layout/product_item" />
</LinearLayout>
</ScrollView>
</LinearLayout>
</FrameLayout>
I have a sample view, where on the top is logo + header divider + some description, and from the bottom starts: Button + some checkboxes, please see image below:
It looks good on current devices, but on old phones, when screen is small (5 inches for example) - elements overlap:
View looks like below:
<androidx.constraintlayout.widget.ConstraintLayout android:id="#+id/parent"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<!-- TOP -->
<ImageView
android:id="#+id/logo"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:scaleType="centerInside"
android:src="#drawable/loremipsum"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.12"
app:layout_constraintWidth_percent="0.50"
tools:ignore="ContentDescription" />
<ImageView
android:id="#+id/divider"
android:layout_width="match_parent"
android:layout_height="15dp"
android:scaleType="fitXY"
android:src="#drawable/header_divider"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/logo"
tools:ignore="ContentDescription" />
<TextView
android:id="#+id/header"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="text"
android:lines="2"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/divider"
android:textStyle="bold" />
<!-- BOTTOM -->
<LinearLayout
android:id="#+id/linearLayoutMobile"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="32dp"
app:layout_constraintBottom_toTopOf="#+id/validIDLinearLayout"
android:orientation="vertical"
android:gravity="bottom"
android:visibility="visible">
<LinearLayout
android:id="#+id/linearLayoutMobilePhonePicker"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="center"
android:visibility="visible">
<com.hbb20.CountryCodePicker
android:id="#+id/countryCodePickerId"
...
/>
<androidx.appcompat.widget.AppCompatEditText
android:id="#+id/mobileEditText"
android:layout_width="fill_parent"
android:hint="elo elo elo"
android:inputType="phone" />
</LinearLayout>
<TextView
android:id="#+id/mobileText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/fragment_terms_and_condition_send_sms" />
</LinearLayout>
<LinearLayout
android:id="#+id/validIDLinearLayout"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="32dp"
android:gravity="center_vertical"
app:layout_constraintBottom_toTopOf="#+id/consentLinearLayout"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:orientation="horizontal">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="#+id/textViewValidIdBottom"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#color/errorRed"
android:text="text" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:id="#+id/consentLinearLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintBottom_toTopOf="#id/privacyPolicyLinearLayout"
app:layout_constraintStart_toStartOf="parent"
android:layout_marginBottom="32dp"
android:gravity="center_vertical"
android:background="#color/errorRed"
app:layout_constraintEnd_toEndOf="parent" >
<TextView
android:id="#+id/textViewConsent"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="#string/fragment_terms_and_condition_consent_VI" />
</LinearLayout>
<LinearLayout
android:id="#+id/privacyPolicyLinearLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="32dp"
android:gravity="center_vertical"
app:layout_constraintBottom_toTopOf="#id/button_continue"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:background="#color/errorRed"
android:orientation="horizontal">
<TextView
android:id="#+id/textViewPrivacyPolicy"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:linksClickable="true"
android:textColor="text"
android:text="#string/fragment_terms_and_condition_privacy_policy" />
</LinearLayout>
<TextView
android:id="#+id/button_continue"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_alignParentBottom="true"
android:enabled="false"
android:background="#color/errorRed"
android:gravity="center"
android:text="ELO"
android:textSize="22sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:layout_marginRight="16dp"
android:layout_marginLeft="16dp"
android:layout_marginBottom="80dp"
android:layout_marginTop="25dp"
app:layout_constraintWidth_percent="0.7" />
</androidx.constraintlayout.widget.ConstraintLayout>
How should I set constraint between this two parts of the view, so they wont overlap on small screen? Add marginTop to the bottom section?
I found an answer, will post below, maybe it helps someone in the future:
I copied all elements from Bottom section inside ScrollView:
<ScrollView
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintTop_toBottomOf="#+id/header"
app:layout_constraintBottom_toBottomOf="parent"
android:fillViewport="true" >
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="0dp" >
<!-- all LinearLayout's from bottom section -->
</androidx.constraintlayout.widget.ConstraintLayout>
</ScrollView>
</androidx.constraintlayout.widget.ConstraintLayout>
i'm trying to make this design in xml but i'm not sure if it's possible what I want.
I want to have a box and three icons (generated for every cardview) on the right separated in two layouts but all in the same cardview.
Is it possible or do I have to use the cardview as the first box and put the buttons separately?
Hope the following code helps you ,
<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView 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">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline"
android:layout_width="1dp"
android:layout_height="match_parent"
android:orientation="vertical"
app:layout_constraintGuide_percent=".8"/>
<ImageView
android:id="#+id/image"
app:layout_constraintRight_toLeftOf="#+id/guideline"
app:layout_constraintLeft_toLeftOf="parent"
android:layout_width="0dp"
android:layout_height="match_parent"
android:scaleType="centerCrop"
app:layout_constraintTop_toTopOf="parent" />
<LinearLayout
android:id="#+id/actionLayout"
android:layout_width="0dp"
android:layout_height="match_parent"
android:orientation="vertical"
app:layout_constraintLeft_toRightOf="#+id/guideline"
app:layout_constraintRight_toRightOf="parent" >
<Button
android:id="#+id/likeButton"
style="?attr/borderlessButtonStyle"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:text="100" />
<Button
android:id="#+id/disLikeButton"
style="?attr/borderlessButtonStyle"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:text="100" />
<Button
android:id="#+id/optionButton"
style="?attr/borderlessButtonStyle"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
app:iconGravity="end" />
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>
I want to align some text next to an Imagebutton inside of a vertically oriented Scrollview, but I am out of ideas.
This is an App for my Grandma, to help her understand her phone and the Symbols better.
<ScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageButton
android:id="#+id/Button1"
android:layout_width="100dp"
android:layout_height="100dp"
android:src="#drawable/SrcBtn1"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:paddingTop="20dp"
android:text="Button 1"
android:textSize="40dp"/>
</LinearLayout>
</ScrollView>
I can't manage to get the Text next to the Imagebutton
<ScrollView android:layout_width="match_parent"
android:layout_height="wrap_content"
xmlns:android="http://schemas.android.com/apk/res/android">
<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="horizontal">
<ImageButton
android:id="#+id/Button1"
android:layout_width="100dp"
android:layout_height="100dp"
android:src="#drawable/ic_menu_gallery"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:paddingTop="20dp"
android:text="Button 1"
android:textSize="40dp"/>
</LinearLayout>
</LinearLayout>
I would suggest to replace LinearLayout with RelativeLayout which is made just for this!
here are all of its attributes:
link
look for the LEFT_OF and RIGHT_OF attributes.
You Can use ConstraintLayout to make this layout super fast.
Here us an example layout:
<?xml version="1.0" encoding="utf-8"?>
<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:id="#+id/scrollView2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layoutDirection="ltr"
android:orientation="vertical">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button
android:id="#+id/button6"
android:layout_width="0dp"
android:layout_height="200dp"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:text="some text"
app:layout_constraintBottom_toTopOf="#+id/button5"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="#+id/guideline"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/button5"
android:layout_width="0dp"
android:layout_height="200dp"
android:text="some text"
app:layout_constraintBottom_toTopOf="#+id/button7"
app:layout_constraintEnd_toEndOf="#+id/button6"
app:layout_constraintHeight_percent=".2"
app:layout_constraintStart_toStartOf="#+id/button6"
app:layout_constraintTop_toBottomOf="#+id/button6" />
<Button
android:id="#+id/button7"
android:layout_width="0dp"
android:layout_height="200dp"
android:text="some text"
app:layout_constraintBottom_toTopOf="#+id/button8"
app:layout_constraintEnd_toEndOf="#+id/button6"
app:layout_constraintHeight_percent=".2"
app:layout_constraintStart_toStartOf="#+id/button6"
app:layout_constraintTop_toBottomOf="#+id/button5" />
<Button
android:id="#+id/button8"
android:layout_width="0dp"
android:layout_height="200dp"
android:text="some text"
app:layout_constraintEnd_toEndOf="#+id/button6"
app:layout_constraintHeight_percent=".2"
app:layout_constraintStart_toStartOf="#+id/button6"
app:layout_constraintTop_toBottomOf="#+id/button7" />
<android.support.constraint.Guideline
android:id="#+id/guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_begin="20dp"
app:layout_constraintGuide_percent=".5" />
<ImageView
android:id="#+id/imageView"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:visibility="visible"
app:layout_constraintBottom_toTopOf="#+id/button5"
app:layout_constraintEnd_toStartOf="#+id/button6"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/button6"
android:src="#drawable/ic_launcher_background" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/guideline"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/button8"
android:src="#drawable/wolverine"/>
<ImageView
android:id="#+id/imageView3"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
app:layout_constraintBottom_toTopOf="#+id/button8"
app:layout_constraintEnd_toStartOf="#+id/button7"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/button7"
app:layout_constraintVertical_bias="1.0"
android:src="#drawable/shadow" />
<ImageView
android:id="#+id/imageView5"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
app:layout_constraintBottom_toTopOf="#+id/button7"
app:layout_constraintEnd_toStartOf="#+id/guideline"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/button5"
android:src="#drawable/rose" />
</android.support.constraint.ConstraintLayout>
</ScrollView>
It will look like this:
This will work for your Grandmas phone, but please notice that If you want to make a responsive layout using ConstraintLayout you will have to avoid using fixed sizes on your views and that's because different phones got different screen size so using fixed size value will not look the same on all devices.
You can use ConstraintLayout with guidelines and Chains to support different screen sizes.
To align some text next to an Imagebutton inside of a vertically oriented Scrollview. we can use linear layout with horizontal orientation
Like This
<ScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content">
<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="horizontal">
<ImageButton
android:id="#+id/Button1"
android:layout_width="100dp"
android:layout_height="100dp"
android:src="#drawable/srcbtn1" />
<TextView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:paddingTop="20dp"
android:text="Button 1"
android:textSize="40dp" />
</LinearLayout>
</LinearLayout>
</ScrollView>
I am creating a layout in android but the problem is layout is not created as same in design.
I want to create layout like below image i.e.
but the problem is my design distort in some devices like
enter image description here
<RelativeLayout android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/lay1"
android:layout_margin="#dimen/dp20"
>
<ImageView android:id="#+id/kk"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/move_stock_bar"
android:background="#android:color/transparent"
android:scaleType="centerCrop"
/>
<ImageButton android:id="#+id/ibPlus"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_alignParentRight="true"
android:background="#android:color/transparent"
android:src="#drawable/btn_edit"
android:layout_toRightOf="#id/kk"
android:layout_marginLeft="-100dp"
android:layout_marginTop="#dimen/dp10"
/>
<ImageButton android:id="#+id/ibMinus"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_alignParentRight="true"
android:background="#android:color/transparent"
android:src="#drawable/btn_edit"
android:layout_toRightOf="#id/kk"
android:layout_below="#id/ibPlus"
android:layout_marginLeft="-100dp"
android:layout_marginTop="-40dp"
/>
</RelativeLayout>
#mishti I have just used this concept to make the design appear to like what you gave. Try this with ImageView using the weight. It displays the same to all screens if we use weight.
<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">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:weightSum="10">
<Button
android:layout_width="0dp"
android:layout_height="120dp"
android:layout_weight="6"
android:text="Image View"/>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_weight="4"
android:layout_gravity="start"
android:gravity="start">
<ImageView
android:layout_marginTop="20dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/edit_icon"
android:background="#FF0"
android:layout_gravity="start"
/>
<ImageView
android:layout_marginTop="10dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/edit_icon"
android:background="#FF0"
android:layout_gravity="start"
/>
</LinearLayout>
</LinearLayout>
Use ConstraintLayout for complex layout, it provides you more flexiblity. I did the same layout as in the image attached with question. I am using Guidelines, so i can use this same layout on different screen size and it will work fine.
I am using "app:srcCompat" attribute for setting the image because i am using Vector image here.
<?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"
android:layout_width="match_parent"
android:layout_height="140dp"
android:background="#color/color_black">
<android.support.constraint.Guideline
android:id="#+id/guideline_horizontal_top"
android:layout_width="match_parent"
android:layout_height="1dp"
android:orientation="horizontal"
app:layout_constraintGuide_percent=".01" />
<android.support.constraint.Guideline
android:id="#+id/guideline_horizontal_bottom"
android:layout_width="match_parent"
android:layout_height="1dp"
android:orientation="horizontal"
app:layout_constraintGuide_percent=".99" />
<android.support.constraint.Guideline
android:id="#+id/guideline_vertical_start"
android:layout_width="1dp"
android:layout_height="match_parent"
android:orientation="vertical"
app:layout_constraintGuide_percent=".2" />
<android.support.constraint.Guideline
android:id="#+id/guideline_vertical_mid"
android:layout_width="1dp"
android:layout_height="match_parent"
android:orientation="vertical"
app:layout_constraintGuide_percent=".8" />
<android.support.constraint.ConstraintLayout
android:id="#+id/main_text_container"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#color/color_red"
app:layout_constraintBottom_toTopOf="#+id/guideline_horizontal_bottom"
app:layout_constraintEnd_toStartOf="#+id/guideline_vertical_mid"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/guideline_horizontal_top">
<android.support.constraint.Guideline
android:id="#+id/guideline_vertical"
android:layout_width="1dp"
android:layout_height="match_parent"
android:orientation="vertical"
app:layout_constraintGuide_percent=".2" />
<ImageView
android:id="#+id/logo_iv"
android:layout_width="56dp"
android:layout_height="56dp"
android:layout_marginStart="10dp"
android:layout_marginEnd="10dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/guideline_vertical"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/ic_image_placeholder" />
<TextView
android:id="#+id/title_tv"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="10dp"
android:layout_marginEnd="10dp"
android:gravity="center"
android:text="MOVE STOCK"
android:textColor="#color/color_white"
android:textSize="18sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="#+id/guideline_vertical"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
<android.support.constraint.ConstraintLayout
android:id="#+id/button_container"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="#+id/guideline_horizontal_bottom"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/guideline_vertical_mid"
app:layout_constraintTop_toBottomOf="#+id/guideline_horizontal_top">
<ImageButton
android:id="#+id/button1"
android:layout_width="54dp"
android:layout_height="54dp"
android:background="#color/color_white"
app:layout_constraintBottom_toTopOf="#+id/button2"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/ic_image_placeholder" />
<ImageButton
android:id="#+id/button2"
android:layout_width="54dp"
android:layout_height="54dp"
android:background="#color/color_white"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/button1"
app:srcCompat="#drawable/ic_image_placeholder" />
</android.support.constraint.ConstraintLayout>
</android.support.constraint.ConstraintLayout>