Currently I'm trying to insert a drop-down kind of sliding menu (not sure how it's called). The idea is that user touches the arrow or any area of the menu and drag upwards in order to open the menu. But I have no idea how or where can I find tutorial for this.
Check this code posted in github: https://github.com/umano/AndroidSlidingUpPanel.
You can design your own view in sliding menu.
<com.sothree.slidinguppaneldemo.SlidingUpPanelLayout
android:id="#+id/sliding_layout"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:text="My Content"
android:textSize="16sp" />
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center|top"
android:text="Another Content"
android:textSize="16sp" />
</com.sothree.slidinguppaneldemo.SlidingUpPanelLayout>
The easiest way would be using a library like https://github.com/umano/AndroidSlidingUpPanel
But since google released CoordinatorLayout and Behavior I would recommend you to take a look at that, although it's kinda new and much harder to do.
Related
I have designed a UI in FIGMA that looks like the below image
And when I am trying the same in android studio, it doesn't look good.
Below is the code I am using
<LinearLayout
android:id="#+id/dark"
android:layout_width="364dp"
android:layout_height="46dp"
android:layout_marginTop="36dp"
android:background="#drawable/bg_layout"
android:elevation="8dp"
android:orientation="horizontal"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/toolbar">
<ImageView
android:layout_width="32dp"
android:layout_height="32dp"
android:src="#drawable/night"
android:layout_gravity="center_vertical"/>
</LinearLayout>
The UI looks like this
How can I achieve the design which I created using Figma?
Thank you in advance.
To implement the design, material card view provides you with most of the features.
The Elevation: app:cardElevation="dp"
The Outline : app:strokeWidth="dp" specifying the width
The Outline Color: app:strokeColor="#color/" specifying the color
The Corner Radius: app:cardCornerRadius="dp" specifying the
radius.
Like:
<com.google.android.material.card.MaterialCardView
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"
app:cardCornerRadius="#dimen/corner_radius_8dp"
app:cardElevation="#dimen/elevation_4dp"
app:cardUseCompatPadding="true"
app:strokeColor="?attr/colorPrimary"
app:strokeWidth="#dimen/stroke_width">
<!--Content goes here-->
</com.google.android.material.card.MaterialCardView>
There are multiple ways to create such type of UI in Android.
You can create rounded drawable and place that drawable in background of image.
You can group the box with text in Figma and then export the same UI and use it in android. (You need to create two UI (enable/disable).
I hope you understand what I want to say.
Thank you.
I'm relativly new to android. While designing my layout I stumbled over an problem I can't solve and which doesn't seem to be answered anywhere. Or maybe I don't really know what I have to search for. Anyways the problem lies in the way the layout is previewed and shown in the emulator in contrast to the actual device. As seen in the pictures below the layout elements and the spacing are off. Everything is much bigger, closer together and further down aw I would expect. For the preview and the emulator im using the specs that are suitable for the pyhsical test device (One Plus 8 Pro).
In other questions I've seen answers say, that it might be a problem that I hardcode some dimensions using dp since the display has a high dpi (xhdpi to be exact) but even using only constraints or using the px the preview and emulator always differ from the app on the actual device.
Following are the pictures and the 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"
tools:context=".EntryActivity">
<TextView
android:id="#+id/textView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity=""
android:layout_marginTop="416px"
android:gravity="center_horizontal"
android:orientation="vertical"
android:text="#string/header_text"
android:textAlignment="center"
android:textSize="24sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageButton
android:id="#+id/buttonPlay"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="20dp"
android:layout_marginTop="336dp"
android:adjustViewBounds="true"
android:backgroundTint="#00FFFFFF"
android:onClick="changeActivity"
android:scaleType="fitCenter"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView"
app:srcCompat="#drawable/button_play_02" />
<ImageButton
android:id="#+id/buttonCreate"
android:layout_width="156dp"
android:layout_height="wrap_content"
android:layout_marginTop="340dp"
android:layout_marginEnd="20dp"
android:adjustViewBounds="true"
android:backgroundTint="#00FFFFFF"
android:onClick="changeActivity"
android:scaleType="fitCenter"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.993"
app:layout_constraintStart_toEndOf="#+id/buttonPlay"
app:layout_constraintTop_toBottomOf="#+id/textView"
app:srcCompat="#drawable/button_create" />
</androidx.constraintlayout.widget.ConstraintLayout>
Preview in Android Studio
Emulator
Physical Device
I think you are doing a lot of rookie mistakes regarding Constraint layout.
As you said you are a beginner, I'd suggest you try to use relative layout.
If you want to stick to constraint layout, here's a quick tutorial which would make your basics strong for constraint layout:
Youtube:Code in Flow playlist for Constraint Layout
Quick tip:
If you are focusing on getting constraints right, try to keep the
layout(height and width) of buttons identical.
for one of the buttons, you've used the code chunk:
android:layout_width="0dp" android:layout_height="wrap_content"
and for other button you've used:
android:layout_width="156dp" android:layout_height="wrap_content"
very important;
consider chaining the items hard. Don't worry! it's very minor thing. you'll get things alright once you go through the link.
OK, Im starting to get the hang of how XML operates with the Android interface, but I've ran into a problem...
I just have a HorizontalScrollView with a RelativeLayout inside to which I will place other views later. The HorizontalScrollView as you can see is sitting above a button, and below another button. I like where its placed, but I dont want it exactly right above and below the buttons. I would like some spacing (padding). Ive tried adding padding but it seems to have no effect...
Heres my attempted XML:
<HorizontalScrollView
android:id="#+id/scrollview_xyzInfo"
android:layout_width="match_parent"
android:layout_height="130dp"
android:layout_above="#+id/button_refresh"
android:layout_alignParentRight="true"
android:layout_below="#+id/button_mySettings"
android:paddingTop="20dp"
android:paddingBottom="20dp"
android:background="#drawable/refresh_selector" >
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="match_parent" >
</RelativeLayout>
</HorizontalScrollView>
Any help would be much appreciated :-)
Nevermind! Use margins when seperating two views like so:
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginTop="10dp"
android:layout_marginBottom="10dp"
Answer Found at:
Padding not working Android
Padding and margin works only with LinearLayout. Which layout are you using?
I'm stuck figuring how to do the following requirement.
I need to make a simple screen with two buttons, like this:
That part of the screen is already done.
The hardest thing for me is to make the behavior of the two buttons
when they are pressed. In that case, they must show an option menu
below like this:
Button 1 Pressed:
Button 2 Pressed:
I didn't start to program the menu yet,but in case it helps, this is
the layout for the screen (without the buttons).
<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"
android:background="#color/grayBackgound"
tools:context=".MenuActivity" >
<include android:layout_width="match_parent" layout="#layout/header" />
<include android:layout_width="match_parent" layout="#layout/loggedin_subheader"/>
</LinearLayout>
The layout for the header:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/header"
android:contentDescription="#string/header"
/>
<ImageButton
android:id="#+id/btnClose"
android:src="#drawable/btn_close"
android:contentDescription="#+string/salir"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_marginLeft="260dp"
/>
</FrameLayout>
The layout for the sub-header is almost the same.
I just need help to make the options menu for every button.
Thanks in advance!
The menu that you want to implement is what is commonly called a QuickAction Dialog. There are several tutorials available for that.
To get you started, here is a few links:
http://www.londatiga.net/it/how-to-create-quickaction-dialog-in-android/
https://github.com/ruqqq/WorldHeritageSite (This is not a tutorial per se, but has the complete implementation for the QuickAction Dialog)
https://code.google.com/p/simple-quickactions/ (You will need to make a few modifications in this)
The first link is the most promising in your case. If you scroll down that page to the Gallery3D-like QuickActions section, you will see it kind of resembles what you want the end result in your app to be. Naturally, goes without saying, you will still need to make modifications to the source available on the site.
Hope this helps. ;-)
I've been searching for this for quite a while but can't seem to find it.
Is there any predefined widget in Android to implement a basic clickable item (with one of two lines of text) whose background turns to the theme's color when clicked, like the ones seen here, for example:
And I mean, without using the PreferenceActivity class, which implements this automatically. Does this exist or do I have to implement my own customized view?
Thanks!
Edit:
I've added a TwoLineListItem like this and it doesn't react to clicks (background doesn't change)
<TwoLineListItem
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:clickable="true"
>
<TextView android:id="#android:id/text1"
android:layout_marginTop="1dip"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="15sp"
android:textStyle="bold"
android:text="Meh" />
<TextView android:id="#android:id/text2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#android:id/text1"
android:layout_alignLeft="#android:id/text1"
android:paddingBottom="4dip"
android:includeFontPadding="false"
android:textSize="15sp"
android:textStyle="normal"
android:text="Moo" />
</TwoLineListItem>
Does it only work inside ListViews? Because that way I'll have to define my buttons in code and not in the XML, right?
Thanks!
The default layout for that is called android.R.two_line_list_item given by android.
All the items in a ListView support this transition.
Best wishes,
Tim