I am working in a drawing app and I want to put a feature that will let a user choose between using a pen or using an eraser. I intend to put 2 buttons at the same position to achieve it but when I used frame layout as suggested by my research, neither of my buttons are showing.
Here's my xml file:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="4dp"
android:layout_weight="1"
android:background="#color/white"
android:gravity="end">
<FrameLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:visibility="visible">
<ImageButton
android:id="#+id/btnEraser"
android:layout_width="0dp"
android:layout_height="70dp"
android:layout_weight="1"
android:background="#color/white"
android:scaleType="center"
android:src="#drawable/ic_eraser"
tools:visibility="visible">
</ImageButton>
<ImageButton
android:id="#+id/btnPen"
android:layout_width="0dp"
android:layout_height="70dp"
android:layout_weight="1"
android:background="#color/white"
android:scaleType="center"
android:src="#drawable/ic_eraser"
tools:visibility="visible">
</ImageButton>
</FrameLayout>
<ImageButton
android:id="#+id/btnColor"
android:layout_width="0dp"
android:layout_height="70dp"
android:layout_weight="1"
android:background="#color/white"
android:scaleType="center"
android:src="#drawable/ic_color">
</ImageButton>
<ImageButton
android:id="#+id/btnSave"
android:layout_width="0dp"
android:layout_height="70dp"
android:layout_weight="1"
android:background="#color/white"
android:scaleType="center"
android:src="#drawable/ic_save">
</ImageButton>
</LinearLayout>
Picture:
enter image description here
Can anyone help me and explain to me why does it work like that? Any answer or criticisms is accepted is appreciated, Thank you!
Try this
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="4dp"
android:weightSum="3"
android:orientation="horizontal"
android:background="#color/white"
android:gravity="end">
<FrameLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:visibility="visible">
<ImageButton
android:id="#+id/btnEraser"
android:layout_gravity="center"
android:layout_width="wrap_content"
android:layout_height="70dp"
android:background="#color/white"
android:scaleType="fitCenter"
android:src="#mipmap/ic_launcher"
tools:visibility="visible">
</ImageButton>
<ImageButton
android:id="#+id/btnPen"
android:layout_gravity="center"
android:layout_width="wrap_content"
android:layout_height="70dp"
android:background="#color/white"
android:scaleType="fitCenter"
android:src="#mipmap/ic_launcher"
tools:visibility="visible">
</ImageButton>
</FrameLayout>
<ImageButton
android:id="#+id/btnColor"
android:layout_width="0dp"
android:layout_height="70dp"
android:layout_weight="1"
android:background="#color/white"
android:scaleType="center"
android:src="#mipmap/ic_launcher">
</ImageButton>
<ImageButton
android:id="#+id/btnSave"
android:layout_width="0dp"
android:layout_height="70dp"
android:layout_weight="1"
android:background="#color/white"
android:scaleType="center"
android:src="#mipmap/ic_launcher">
</ImageButton>
</LinearLayout>
Related
I have an ImaveView images and corresponding to each image there is TextView img_name and img_source, I want to align them like 1st image should be placed and at right of image image_name should be displayed and below img_name, img_source should be display.
I have tried with below layout code but couldn't work as expected
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:orientation="horizontal" android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="start"
>
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/imageview_cover_art"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="centerCrop"
android:gravity="center_horizontal"/>
<ImageView
android:id="#+id/imageview_favorite"
android:layout_width="24dp"
android:layout_height="24dp"
android:src="#drawable/star_disabled"
android:layout_gravity="bottom|right"/>
</FrameLayout>
<TextView
android:id="#+id/textview_book_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="12sp"
tools:text="Are You My Mother"
android:textStyle="bold"
android:paddingTop="4dp"
android:paddingLeft="8dp"
android:paddingRight="8dp"
android:gravity="center_horizontal"/>
<TextView
android:id="#+id/textview_book_author"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="12sp"
tools:text="Dr. Seuss"
android:gravity="center_horizontal"
android:orientation="vertical"/>
</LinearLayout>
It is displaying like
Image > TextView > TextView
but i require like:
Image > TextView
TextView
Also if first TetView is bigger then need to break in another line
Please help.
Just add the two textview into another linearview with vertical orientation :-
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:orientation="horizontal" android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="start"
>
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/imageview_cover_art"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="centerCrop"
android:gravity="center_horizontal"/>
<ImageView
android:id="#+id/imageview_favorite"
android:layout_width="24dp"
android:layout_height="24dp"
android:src="#drawable/star_disabled"
android:layout_gravity="bottom|right"/>
</FrameLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="#+id/textview_book_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="12sp"
tools:text="Are You My Mother"
android:textStyle="bold"
android:paddingTop="4dp"
android:paddingLeft="8dp"
android:paddingRight="8dp"
android:gravity="center_horizontal"/>
<TextView
android:id="#+id/textview_book_author"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="12sp"
tools:text="Dr. Seuss"
android:gravity="center_horizontal"
android:orientation="vertical"/>
</LinearLayout>
</LinearLayout>
Simply place views in Linear Layout after that add android:orientation="vertical"
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="#+id/textview_book_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="12sp"
tools:text="Are You My Mother"
android:textStyle="bold"
android:paddingTop="4dp"
android:paddingLeft="8dp"
android:paddingRight="8dp"
/>
<TextView
android:id="#+id/textview_book_author"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="12sp"
tools:text="Dr. Seuss" />
</LinearLayout>
I have this xml. The problem is the things are side by side and I'd like they this way:
CircleImageView - shareName // line break
shareTextViewPublisher // line break
shareimageViewHero // line break
but they are all in the same line. how to do this?
<LinearLayout
android:id="#+id/shareTable"
android:layout_width="match_parent"
android:layout_margin="50dp"
android:padding="10dp"
android:visibility="gone"
android:background="#drawable/border"
android:layout_height="wrap_content">
<de.hdodenhof.circleimageview.CircleImageView
android:layout_width="35dp"
android:layout_height="35dp"
android:id="#+id/sharePic"
android:paddingBottom="10dp"
android:paddingLeft="1dp" />
<TextView
android:id="#+id/shareName"
android:textStyle="bold"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:paddingBottom="20dp"
android:paddingLeft="1dp"
android:layout_weight="1"
/>
<TextView
android:id="#+id/shareTextViewPublisher"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="10dp"
android:paddingTop="10dp"
/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="centerCrop"
android:padding="0dp"
android:id="#+id/shareimageViewHero"
android:adjustViewBounds="true"/>
</LinearLayout>
If you want to do this using LinearLayout you should put your CircleImageView and shareName in additional horizontal LinearLayout. The structure of the XML should like this:
<LinearLayout
android:id="#+id/shareTable"
android:layout_width="match_parent"
android:layout_margin="50dp"
android:padding="10dp"
android:background="#drawable/border"
android:layout_height="wrap_content"
android:orientation="vertical">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<de.hdodenhof.circleimageview.CircleImageView
android:layout_width="35dp"
android:layout_height="35dp"
android:id="#+id/sharePic"
android:paddingBottom="10dp"
android:paddingLeft="1dp" />
<TextView
android:id="#+id/shareName"
android:textStyle="bold"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:paddingBottom="20dp"
android:paddingLeft="1dp"
android:layout_weight="1"
/>
</LinearLayout>
<TextView
android:id="#+id/shareTextViewPublisher"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="10dp"
android:paddingTop="10dp"
/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="centerCrop"
android:padding="0dp"
android:id="#+id/shareimageViewHero"
android:adjustViewBounds="true"/>
</LinearLayout>
I have multiple RelativeLayout inside LinearLayout. Inside my RelativeLayout it has 2 TextView. The value inside the TextView changes for example the date today.
What I'm aiming to do is that regardless of how long the value of my TextView is, whoever has the higher height the rest of the RelativeLayout's size will be the same as the higher height.
Here's my xml
<LinearLayout
android:id="#+id/llbox"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:layout_weight="1">
<RelativeLayout
android:id="#+id/today"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:layout_weight="1"
android:background="#color/lightblue">
<TextView
android:id="#+id/day"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:drawablePadding="5dp"
android:drawableStart="#drawable/calendar"
android:padding="5dp"
android:textColor="#color/white"
android:textSize="16dp"
android:textStyle="bold" />
<TextView
android:id="#+id/monthyear"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/day"
android:gravity="center"
android:padding="5dp"
android:textAllCaps="true"
android:textColor="#color/white"
android:textSize="12dp"
android:textStyle="bold" />
</RelativeLayout>
<RelativeLayout
android:id="#+id/outbox_rl"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:layout_weight="1"
android:background="#color/lightblue">
<TextView
android:id="#+id/no_of_outbox"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:drawablePadding="5dp"
android:drawableStart="#drawable/outbox"
android:padding="5dp"
android:textColor="#color/white"
android:textSize="16dp"
android:textStyle="bold" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/no_of_outbox"
android:gravity="center"
android:padding="5dp"
android:text="#string/outbox"
android:textAllCaps="true"
android:textColor="#color/white"
android:textSize="12dp"
android:textStyle="bold" />
</RelativeLayout>
</LinearLayout>
Currently it looks like this
but I want Outbox box to be the same height as the Today box.
Thank you in advance.
You have to assign the height of both the Today and Outbox RelativeLayout to match_parent instead of wrap_content.
<RelativeLayout
android:id="#+id/today"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_margin="5dp"
android:layout_weight="1"
android:background="#color/lightblue">
<TextView
android:id="#+id/day"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:drawablePadding="5dp"
android:drawableStart="#drawable/calendar"
android:padding="5dp"
android:textColor="#color/white"
android:textSize="16dp"
android:textStyle="bold" />
<TextView
android:id="#+id/monthyear"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/day"
android:gravity="center"
android:padding="5dp"
android:textAllCaps="true"
android:textColor="#color/white"
android:textSize="12dp"
android:textStyle="bold" />
</RelativeLayout>
<RelativeLayout
android:id="#+id/outbox_rl"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_margin="5dp"
android:layout_weight="1"
android:background="#color/lightblue">
<TextView
android:id="#+id/no_of_outbox"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:drawablePadding="5dp"
android:drawableStart="#drawable/outbox"
android:padding="5dp"
android:textColor="#color/white"
android:textSize="16dp"
android:textStyle="bold" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/no_of_outbox"
android:gravity="center"
android:padding="5dp"
android:text="#string/outbox"
android:textAllCaps="true"
android:textColor="#color/white"
android:textSize="12dp"
android:textStyle="bold" />
</RelativeLayout>
Just make sure that the height of the parent layout is set to wrap_content which you already have done in your code. :)
OUTPUT
With longer today text
With longer outbox text
With both with same text length
Try to replace android:layout_weight="1" to android:weightSum="3" and add android:orientation="horizontal" in LinearLayout and fix the height of RelativeLayout
I'm implementing a Recycler View in Android to create a list, but for some reason I see a space in between two elements, and I'm not able to pinpoint the error location. As to why is this happening, my guess is on the row element XML.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:cardview1="http://schemas.android.com/apk/res-auto"
android:id="#+id/row_top_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.v7.widget.CardView
android:id="#+id/pos_cv"
android:layout_width="match_parent"
android:layout_height="72dp"
android:clickable="true"
cardview1:cardCornerRadius="6dp"
cardview1:cardElevation="4dp"
cardview1:cardMaxElevation="6dp">
<TextView
android:id="#+id/manager1"
android:layout_width="220dp"
android:layout_height="wrap_content"
android:layout_marginLeft="30dp"
android:layout_marginTop="15dp"
android:text="Store Manager/Branch"
android:textSize="14sp"
android:textStyle="bold" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="70dp"
android:orientation="horizontal">
<TextView
android:id="#+id/retail"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:layout_marginLeft="30dp"
android:layout_marginTop="30dp"
android:text="Abc Retail"
android:textSize="10sp" />
<View
android:layout_width="170dp"
android:layout_height="match_parent" />
<TextView
android:id="#+id/amount"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="30dp"
android:text="25,000"
android:textColor="#color/colorDarkPink"
android:textSize="14sp"
android:textStyle="bold" />
</LinearLayout>
<TextView
android:id="#+id/address"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:layout_marginLeft="30dp"
android:layout_marginTop="50dp"
android:text="Abc Retail"
android:textSize="10sp" />
</android.support.v7.widget.CardView>
RecyclerView
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:id="#+id/list_view_header_ll"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:paddingTop="8dp"
android:paddingBottom="8dp"
android:weightSum="5"
android:background="#color/colorDarkPink"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Top 3 Performers"
android:textStyle="bold"
android:textColor="#color/colorPrimaryLight"
android:layout_weight="3"
android:textSize="16sp"
android:lines="1"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Sales"
android:textStyle="bold"
android:textColor="#color/colorPrimaryLight"
android:layout_weight="2"
android:textSize="16sp"
android:lines="1"
/>
</LinearLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/performer_lv"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:divider="#color/colorTransparent"
android:layout_marginTop="16dp"
android:dividerHeight="4dp"
/>
It is because of recycler view height. Try to change recyclerview height to wrap_content.And in cardview layout in linear-layout use height wrap_content.
try this code for your cardview:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:cardview1="http://schemas.android.com/apk/res-auto"
android:id="#+id/row_top_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<android.support.v7.widget.CardView
android:id="#+id/pos_cv"
android:layout_width="match_parent"
android:layout_height="72dp"
android:clickable="true"
android:layout_marginBottom="10dp"
cardview1:cardCornerRadius="6dp"
cardview1:cardElevation="4dp"
cardview1:cardMaxElevation="6dp">
<TextView
android:id="#+id/manager1"
android:layout_width="220dp"
android:layout_height="wrap_content"
android:layout_marginLeft="30dp"
android:layout_marginTop="15dp"
android:text="Store Manager/Branch"
android:textSize="14sp"
android:textStyle="bold" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="70dp"
android:orientation="horizontal">
<TextView
android:id="#+id/retail"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:layout_marginLeft="30dp"
android:layout_marginTop="30dp"
android:text="Abc Retail"
android:textSize="10sp" />
<View
android:layout_width="170dp"
android:layout_height="match_parent" />
<TextView
android:id="#+id/amount"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="30dp"
android:text="25,000"
android:textColor="#color/colorDarkPink"
android:textSize="14sp"
android:textStyle="bold" />
</LinearLayout>
<TextView
android:id="#+id/address"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:layout_marginLeft="30dp"
android:layout_marginTop="50dp"
android:text="Abc Retail"
android:textSize="10sp" />
</android.support.v7.widget.CardView>
</LinearLayout>
Try to decrease your values
android:layout_height="50dp"
if it will not work try to decrease values in other views
I am trying to mimic this sort of design on android using GridLayout:
I think I have most of it done using the below code:
<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:columnCount="8"
android:rowCount="4"
android:layout_gravity="center_horizontal"
android:layout_marginTop="10dp"
android:orientation="horizontal"
android:background="#drawable/rounded">
<TextView
android:layout_gravity="center_horizontal"
android:text="Some Text Here"
android:textStyle="bold"
android:textColor="#000000"
android:textSize="30dp"
android:textAlignment="center"
android:layout_columnSpan="8"
android:paddingBottom="10dp"
/>
<TextView
android:text="16"
android:textStyle="bold"
android:paddingRight="70dp"
android:textColor="#000000"
android:textSize="18dp"
android:paddingLeft="10dp"
android:paddingBottom="5dp"/>
<TextView
android:text="27"
android:textStyle="bold"
android:paddingRight="70dp"
android:textSize="18dp"
android:textColor="#000000"/>
<TextView
android:text="52"
android:textStyle="bold"
android:layout_columnSpan="6"
android:textSize="18dp"
android:paddingRight="10dp"
android:textColor="#000000"/>
<TextView
android:text="Text 1"
android:paddingRight="20dp"
android:paddingLeft="10dp"
android:textSize="18dp"
android:textColor="#ff565656"
android:paddingBottom="10dp"/>
<TextView
android:text="Text 2"
android:paddingRight="20dp"
android:textSize="18dp"
android:textColor="#ff565656"/>
<TextView
android:text="Text 3"
android:textColor="#ff565656"
android:textSize="18dp"
android:paddingRight="10dp"/>
</GridLayout>
However, when I run it in my emulator it looks like this:
Notice that it is leaving too much space on the right and the left.
Question
How can I configure the grid layout so it takes up most of the screen on right and left of it (just like in the sample above).
How can I change the screen background color - Right now it is black, I'd like to change it to another color.
For GridLayout, replace this...
android:layout_width="wrap_content"
with...
android:layout_width="fill_parent"
as follows...
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:columnCount="8"
android:rowCount="4"
android:layout_gravity="center_horizontal"
android:layout_marginTop="10dp"
android:orientation="horizontal"
android:background="#drawable/rounded">
#Anthony - You are not using the power and the essence of GridLayout in the code written. As you have manually allotted paddings to the views in order to make them appear in the first screen, which is very much possible with any other layout as well. Like below.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:gravity="center" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="2"
android:text="Some Text Here"
android:textAppearance="?android:attr/textAppearanceLarge" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" >
<TextView
android:id="#+id/textView1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="2"
android:text="16"
android:textAppearance="?android:attr/textAppearanceLarge" />
<TextView
android:id="#+id/textView1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="2"
android:text="17"
android:textAppearance="?android:attr/textAppearanceLarge" />
<TextView
android:id="#+id/textView1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="2"
android:text="18"
android:textAppearance="?android:attr/textAppearanceLarge" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" >
<TextView
android:id="#+id/textView1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="2"
android:text="Text1"
android:textAppearance="?android:attr/textAppearanceLarge" />
<TextView
android:id="#+id/textView1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="2"
android:text="Text2"
android:textAppearance="?android:attr/textAppearanceLarge" />
<TextView
android:id="#+id/textView1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="2"
android:text="Text3"
android:textAppearance="?android:attr/textAppearanceLarge" />
</LinearLayout>
And, GridLayout is about rows and columns. So if you want your Views to be placed such that and to use it to fuller, you can supply the row as well as column position where you view should be placed in which order and its other properties will add up to it. Here is a link.
Try this out and I am sure you will understand it much better. Happy coding. :)